jquery学习笔记

简介

官网下载：www.jquery.com

版本：1.x.x （兼容ie678，常用版）, 2.x.x （不兼容ie678） , 3.x.x（只支持最新浏览器）

文件：jquery-1.x.x.js （可查看源码），jquery-1.x.x.min.js（压缩版）

引入：<script src="./jquery-1.12.4.js"></script>

对象：js对象与jquery对象不能通用

获取js对象：var do = document.getElementById("id");

获取jquery对象：var jo = $("#id")

js对象转jquery对象：var jo = $(do);

jquery对象转js对象：var do = jo[0];

1 选择器

1.1 基础选择器

(1) id选择器：$("#id")

(2) 样式选择器：$(".class")

(3) 标签选择器：$("div") // 指定标签名

1.2 层级选择器

(1) 后代选择器：$("基础 基础") // $("#id, .class")逗号分割可以多选

(2) 子选择器：$("基础 > 基础") 

(3) 相邻兄弟选择器（下一个）：$("基础 + 基础")

(4) 兄弟选择器（自己之后所有）：$("基础 ~ 基础")

(5) 同级兄弟选择器：$("基础选择器1").siblings("基础选择器2") // 获取与选择器1同级的选择器2

注释：符号两侧空格可有可无

1.3 属性选择器

(1) 属性名：$("基础[属性名]")

(2) 属性值（等）：$("基础[属性名=值]")

(3) 属性值（不等）：$("基础[属性名!=值]")

(4) 属性值（开头）：$("基础[属性名^=值]")

(5) 属性值（结尾）：$("基础[属性名$=值]")

(6) 属性值（包含）：$("基础[属性名*=值]")

(7) 属性值（复合）：$("基础[属性名][属性名2=值]") // $("a[target][href*=local]")

注释：属性的值可用单引号包裹也可直接写

1.4 过滤选择器

(1) 获取集合第一个元素：$("div:first") // 获取第一个div

(2) 获取集合最后元素：$(".class:last") // 获取最后一个该样式的元素

(3) 获取不含样式的元素：$("div:not(.class)") // 获取指定样式以外的div元素

(4) 获取集合下标为偶数的元素：$(".class:even")

(5) 获取集合下标为奇数的元素：$(".class:odd")

(6) 获取集合索引大于值的元素：$(".class:gt(3)")

(7) 获取集合索引等于值的元素：$(".class:eq(3)")

(8) 获取集合索引小于值的元素：$(".class:lt(3)")

(9) 获取标题h1~h6的元素：$(":header")

1.5 表单选择器

(1) 获取可用元素：$("input:readonly")

(2) 获取不可用元素：$("input:disabled")

(3) 获取选中元素：$("input:checked")

(4) 获取选择元素：$("option:selected")

2 标签内容

2.1 文本内容

(1) 获取文本信息：$("选择器").text()  // 获取所有对象内容

(2) 设置文本信息：$("选择器").text("文本内容") // 设置所有对象内容, 替换所有文本及标签

2.2 标签内容

(1) 获取标签信息：$("选择器").html() // 获取第一个元素的html

(2) 设置标签信息：$("选择器").html("<标签>标签内容</标签>") // 设置所有元素的html

2.3 表单内容

(1) 获取表单信息：$("选择器").val() // 获取首个对象的表单元素值

(2) 设置表单信息：$("选择器").val("表单值") // 设置所有对象的表单元素值

(3) 获取属性值：$("选择器").attr("属性名")

(4) 设置属性值：$("选择器").attr("属性名", "属性值")

(3) 获取属性状态：$("选择器").prop("checked | selected | disabled") // 返回true, false

(6) 删除属性：$("选择器").removeAttr("属性名") // 或取消checked selected disabled状态

3 样式

(1) 获取设置固定样式：$("选择器").css("样式属性" [, "样式值"]) // css("width","200px")

(2) 设置多个固定样式：$("选择器").css({"样式属性":"值", ...}) // css({"width":"200px",...})

(3) 添加样式（样式名）：$("选择器").addClass("自定义样式名") 

(4) 删除样式（样式名）：$("选择器").removeClass("自定义样式名") 

(5) 切换样式（样式名）：$("选择器").toggleClass("自定义样式名") 

4 元素

(1) 创建元素对象：var jo = $("<div id=...>内容</div>");

(2) 添加到父元素内开头：父元素.prepend(jo);

(3) 添加到父元素内末尾：父元素.append(jo);

(4) 添加到元素之前：元素.before(jo);   jo.insertBefore(元素)

(5) 添加到元素之后：元素.after(jo);      jo.insertAfter(元素)

(6) 删除元素（自身）：元素.remove();

(7) 清空元素内容：元素.empty(); // 清空内容及子元素，等同于.text("");

5 显示隐藏

5.1 缩小放大

(1) 放大显示：元素.show([s, [e], [fn] ]) // 向右下放大，透明色渐深

(2) 缩小隐藏：元素.hide([s, [e], [fn] ]) // 向左上缩小，透明色渐浅 

(3) 切换：元素.toggle([s, [e], [fn] ])

5.2 上下滑动 

(1) 下滑显示：元素.slideDown([s, [e], [fn] ]) // 向下显示

(2) 上滑隐藏：元素.slideUp([s, [e], [fn] ]) // 向上隐藏 

(3) 切换：元素.slideToggle([s, [e], [fn] ])

5.3 淡入淡出

(1) 淡入显示：元素.fadeIn([s, [e], [fn] ]) // 透明色渐深

(2) 淡出隐藏：元素.fadeOut([s, [e], [fn] ]) // 透明色渐浅 

(3) 切换：元素.fadeToggle([s, [e], [fn] ])

(4) 渐变：元素.fadeTo(s, o, [e], [fn] ) // 渐变为透明度的值

注释：s(默认瞬间完成肉眼可见，slow慢， normal正常， fast快， 1000单位毫秒) e(切换效果 swing默认动画播放开头结尾慢中间快, linear匀速播放) fn(动画效果完成后执行函数,每个元素执行一次) o(0-1之间透明度)

6 遍历

6.1 常规循环

var jos = $("li");

for (var i=0; i<jos.length; i++) { ... jos[i].innerText }

6.2 jquery对象函数

var jos = $("li");

jos.each( function(index, element) { jos[index].innerText; element.innerText } ) 

6.3 jquery全局函数

var jos = $("li");

$.each( jos, function(index, element) { jos[index].innerText; element.innerText } ) 

6.4 遍历对象数组

var jos = $("li");

for( var e of jos ) { e.innerText }

7 事件

7.1 常用事件

(1) 失去光标：blur

(2) 获取光标：focus

(3) 表单值变更：change

(4) 单击：click

(5) 键压下：keydown

(6) 键放开：keyup

(7) 鼠标移入：mouseover

(8) 鼠标移出：mouseout

7.2 事件绑定

(1) 事件绑定：元素.on("click", function(){...})

(2) 事件函数绑定：元素.click(function(){...})

(3) 事件链式绑定：元素.click(function(){...}).change(function(){...})

(4) 鼠标移入移出同时绑定：元素.hover(function(){...}, function(){...})

(5) 事件解绑：元素.off("click")

(6) 页面加载事件：jquery(funciont(){...}) | $(function(){...}) | $("body").ready(function(){...}) // window.onload只能执行一次，jquery加载写多个都可以执行。这两个加载事件可写在body之前

注释：绑定的function内this代表触发事件的元素

8 ajax

8.1 GET请求

$.get(url, 数据, 回调函数, 返回值类型)

注释：请求数据格式 1字符串("name=xx&age=12") 2对象 {"name":"xx","age":18}

$.get(
 "/servlet/xxx",
 "name=xx&age=18", //{"name":"xx", "age":18}
 function(res | data) {//形参名任意
    $("#resid").html(data.name);//json返回值
    $("#resid").text(data);//text返回值
 },
 "text | json"
)

 8.2 POST请求

$.post(url, 数据, 回调函数, 返回值类型)

注释：请求数据格式 1字符串("name=xx&age=12") 2对象 {"name":"xx","age":18}

$.post(
 "/servlet/xxx",
 "name=xx&age=18", //{"name":"xx", "age":18}
 function(res | data) {//形参名任意
    $("#resid").html(data.name);//json返回值
    $("#resid").text(data);//text返回值
 },
 "text | json"
)

8.3 ajax请求

get与post无法处理异常

$.ajax({
 url:"/servlet/xx",
 async:true | false, //是否异步
 type: "get | post",
 dataType:"text | json", //返回值类型
 data: "name=xx&age=18", //请求数据
 success: function(data) {...}, //形参名任意，处理成功回调函数
 error: function(data) {...} //形参名任意，处理失败回调函数
})

9 跨域

跨域问题只针对ajax请求，是浏览器做的同源限制

9.1 代理

解决跨域问题方案1：ajax提交到自己的后端服务器，后端服务器之间通信

9.2 cors

解决跨域问题方案2：需要浏览器与服务器通知支持

(1) 服务器端：

res.setHeader("Access-Control-Allow-Origin", "http://....8080") //设置允许资源共享的url

res.setHeader("Access-Control-Allow-Credentials", "true") // 客户端可携带cookie信息

(2) 浏览器端：

在ajax中添加：xhrFields: {withCredentials:true}, // 用来允许发送cookie 

9.3 jsonp

解决跨域问题方案3：用jsonp包裹json数据

(1) 服务器端：

String callback = req.getParameter("callback"); // 获取callback字符串

out.print(callback+"(" + json数据 + ")"); // 返回callback包裹的json

(2) 浏览器端：

ajax中添加：dataType:"jsonp",