目录
一、JQuery介绍
- jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
- jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“
二、JQuery的优势
- 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
- 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
- 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
- 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
- Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
- 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
- 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。
三、JQuery 内容
- 选择器
- 筛选器
- 样式操作
- 文本操作
- 属性操作
- 文档操作
- 事件
- 动画效果
- 插件
- each、data、Ajax
下载连接：jQuery官网
中文文档：jQuery AP中文文档
四、JQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象
jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。
$("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。 相当于： document.getElementById("i1").innerHTML;虽然
jQuery对象是包装DOM对象后产生的，但是jQuery对象无法使用DOM对象的任何方法，同理DOM对象也没不能使用jQuery里的方法。
五、JQuery创建对象
一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：
var $variable = jQuery对像 var variable = DOM对象
jq对象和DOM对象之间的相互转换：
$variable[0] //jQuery对象转成DOM对象 $(dom) //DOM转成JQ对象
jQuery对象和DOM对象的使用：
$("#i1").html(); //jQuery对象使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法
六、JQuery的基础语法
6.1 基本元素选择器
1.id选择器
$("#a"); //选择id属性值为a的jq对象(一个列表$("#a")[0]是一个DOM对象)
2.标签选择器
$("div"); //选择div标签
3.class选择器
$(".a"); //选择class类为a的标签
4.配合使用
$("div.c1"); //选择div标签中，类属性值为c1的div标签
5.所有元素选择器
$("*"); //选择所有标签元素(列表形式返回)
6.组合选择器
$("#a, .b, div"); //找到id属性值为a、类为b、标签div的这些标签
7.层级选择器
$("x y"); // x的所有后代y（子子孙孙）
$("x > y"); // x的所有儿子y（儿子）
$("x + y"); // 找到所有紧挨在x后面的y
$("x ~ y"); // x之后所有的兄弟y
6.2 基本元素筛选器
:first // 第一个 :last // 最后一个 :eq(index)// 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素，从 0 开始计数 :odd // 匹配所有索引值为奇数的元素，从 0 开始计数 :gt(index)// 匹配所有大于给定索引值的元素 :lt(index)// 匹配所有小于给定索引值的元素 :not(元素选择器)// 移除所有满足not条件的标签 :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
实例1：
$("div:first") // 选择html中第一个div元素
$("div:last")// 选择html中最后一个div元素
$("div:eq(5)")// 找到html中的第5个div元素
$("div:even")// 匹配所有索引值为偶数的div元素，从0开始计数
$("div:odd")// 匹配所有索引值为奇数的div元素，从 0 开始计数
$("div:gt(2)")// 匹配所有大于给定索引值的元素
$("div:lt(2)")// 匹配所有索引小于2的div标签元素
$("div:not(.c1)")// 找到所有不包含c1样式类的div标签
$("div:not(:has(a))")// 找到所有后代中不含a标签的div标签
七、属性选择器
属性选择器语法：
[attribute] //需要选择的属性 [attribute=value]// 属性等于 [attribute!=value]// 属性不等于
实例：
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签
八、筛选器方法
下一个元素：
$("div").next() //div标签的下一个并集元素
$("div").nextAll() // div标签的所有的并集元素
$("div").nextUntil("a") //选择div下面的的并集元素，一直到与它并集的a标签元素结束，不包括a元素
上一个元素：
$("div").prev() //div标签并集的上一个元素
$("div").prevAll() //div标签并集的上层所有元素
$("div").prevUntil("a") // div并集的上面的元素，一直到a元素，不包括a元素
父亲元素：
$("#id").parent()//查找当前元素的父级元素，
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil("匹配的元素") // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
儿子和兄弟元素：
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们
8.1 查找(find)
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
$("div").find("p") //等价于 $("div p")
8.2 筛选(filter)
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
$("div").filter(".c1") // 从结果集中过滤出有c1样式类的div元素
// 等价于 $("div.c1")
补充：
.first() // 获取匹配的第一个元素 .last() // 获取匹配的最后一个元素 .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。 .eq() // 索引值等于指定值的元素
九、表单元素选择器
:text //找到所有的text的input元素 :password //找到所有的password的input元素 :file //找到所有的file的input元素 :radio //找到所有的radio的input元素 :checkbox //找到所有的checkbox的input元素 :submit //找到所有的submit的input元素 :reset //找到所有的reset的input元素 :button //找到所有的button的input元素
实例1：
$(":text") //找到所有的text的input元素
$(":password") //找到所有的password的input元素
$(":file") //找到所有的file的input元素
$(":radio") //找到所有的radio的input元素
$(":checkbox") //找到所有的checkbox的input元素
$(":submit") //找到所有的submit的input元素
$(":reset") //找到所有的reset的input元素
$(":button") //找到所有的button的input元素
十、表单对象属性
:enabled //表单对象是可用，默认可用 :disabled //表单对象不可用，设置了表示这个对象不可用 :checked //对象默认被选中的元素，不需要人为的去选择（checkbox和radio用） :selected // 找到对象已经被选中的元素
实例1：找到可用的input标签
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
$("input:enabled") // 找到可用的input标签，找到的是name=“id”的input元素
实例2：找到被选中的option
<select id="s1">
<option value="beijing">北京市</option>
<option value="shanghai">上海市</option>
<option selected value="guangzhou">广州市</option>
<option value="shenzhen">深圳市</option>
</select>
$(":selected") // 找到被选中的option
十一、操作标签
11.1 样式操作(CSS)
addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
####实例：
$("#a").addClass("d");//为a类的标签元素添加d类
$("#a").removeClass("d") //a类的标签元素移除d类
$("#a").hasClass("d");//a类的标签元素判断d类存不存在
$("#a").toggleClass("d") //a类元素是否有b类，有删除，没有添加
实例：
DOM对象：
css("color","red")//DOM操作：tag.style.color="red"
JQ对象：
$("p").css("color", "red"); //将所有p标签的字体设置为红色
11.2 位置操作
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
######实例：
$("#a").offset()
$("#a").position()
$("#a").scrollTop()
$("#a").scrollLeft()
.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。
和 .position()的差别在于： .position()是相对于相对于父级元素的位移。
11.3 尺寸操作
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
####实例：
$("#a").height() //当前元素的高度
$("#a").width() //当前元素的宽度
$("#a").innerWidth() //当前元素内部内容占的宽度
$("#a").innerHeight()//当前元素内部内容占的高度
$("#a").outerHeight()//
$("#a").outerWidth()
11.4 文本操作
HTML代码：
html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容
####实例：
$("#a").html()//取得id为a的元素的hrml的所有内容
$("#a").html("hello") //将id为a的元素的html内容改为hello
$("#a").html("<p>hello</p>")//可以直接上标签对象
文本值：
text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容
####实例：
$("#a").text()//取得id为a的元素的文本内容
$("#a").text("hello") //将id为a的元素的文本内容改为hello
#####报错
$("#a").text("<p>hello</p>")//报错
值:
val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值
###实例：
$("#a").val()//获取id为a的元素的第一个文本内容
$("#a").val("beijing")//设置匹配的值
$("[name='hobby']").val(['basketball', 'football']);
$("#s1").val(["1", "2"])
//设置name属性为hobby的元素，value为basketball或者football的元素的value为1和2
实例：获取被选中的checkbox或radio的值
<label for="c1">女</label>
<input name="gender" id="c1" type="radio" value="0">
<label for="c2">男</label>
<input name="gender" id="c2" type="radio" value="1">
###实例
$("innput[name="gender"]:checked").val()
11.5 属性操作
用ID等或自定义属性
attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性
####实例：
$("div").attr("name") //获取div元素的name属性的值
$("div").attr("age","18")//设置div元素的age属性值
$("a").attr({"name":"cecilia","age":"18"}) //对a元素进行一次性赋值，用字典的形式
$("a").removeattr("name") //移除a元素的name属性
用于checkbox和radio
prop() // 获取属性
removeProp() // 移除属性
####实例：
$("input").prop("checked") // 返回的十布尔值
$("input").prop("checked",false) //将input元素的checked属性设为false
$("input").attr("checked") //查看inoput元素的checked的属性值
注意：
在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")。
<input type="checkbox" value="1">
<input type="radio" value="2">
<script>
$(":checkbox[value='1']").prop("checked", true);
$(":radio[value='2']").prop("checked", true);
</script>
11.6 porp和attr的区别
attr全称attribute(属性)
prop全称property(属性)
虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。
举例1：
<input type="checkbox" id="i1" value="1">
### 测试1
$("#i1").attr("checked") // undefined
$("#i1").prop("checked") // false
可以看到attr获取一个标签内没有的东西会得到undefined，而prop获取的是这个DOM对象的属性，因此checked为false。
### 测试2
<input type="checkbox" checked id="i1" value="1">
$("#i1").attr("checked") // checked
$("#i1").prop("checked") // true
这已经可以证明attr的局限性，它的作用范围只限于HTML标签内的属性，而prop获取的是这个DOM对象的属性，选中返回true，没选中返回false。
测试2：针对自定义属性，attr和prop的区别：
<input type="checkbox" checked id="i1" value="1" me="自定义属性">
### 测试：
$("#i1").attr("me") // "自定义属性"
$("#i1").prop("me") // undefined
可以看到prop不支持获取标签的自定义属性。
总结：
- 对于标签上有的能看到的属性和自定义属性都用attr
- 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
11.7 文档处理
把一个标签添加到指定的元素内部的最后(最后一个子节点之后)
$(A).append(B)// 把B追加到A $(A).appendTo(B)// 把A追加到B
把一个元素标签添加到指定元素内部的最签名(第一个子节点之前)
$(A).prepend(B)// 把B前置到A $(A).prependTo(B)// 把A前置到B
添加到指定元素外部的后面(最后一个兄弟节点)
$(A).after(B)// 把B放到A的后面 $(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的最前面(第一个兄弟节点的最前面)
$(A).before(B)// 把B放到A的前面 $(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。
$(".b").empty() //删除所有有b类属性的列表集合
十二、事件
12.1 常用事件
click(function(){...}) // 鼠标单击事件
hover(function(){...}) //鼠标移动到位置事件
blur(function(){...}) //失去焦点事件
focus(function(){...})//得到焦点事件
change(function(){...})//改变标签域内容事件
keyup(function(){...})//触发键盘事件
12.2 事件绑定
- events： 事件
- selector: 选择器（可选的）
- function: 事件处理函数
.on( events [, selector ],function(){})
###实例：
###方法一：
$("button").on("click",function () {
·······
})
###方法二：
$("button").click(function () {
·········
})
12.3 移出事件
off() 方法移除用 .on()绑定的事件处理程序。
- events： 事件
- selector: 选择器（可选的）
- function: 事件处理函数
.off( events [, selector ][,function(){}])
12.4 阻止后续事件执行
return false; // 常见阻止表单提交等- e.preventDefault();
实例：
<form>
<input type="text" value="" id ="id"><span class="hid">不能为空</span>
<br>
<input type="submit" value="拜拜！" id="sub">
</form>
<script>
$("#sub").on("click",function (e) {
var data= $("#id").val();
if(!data.trim()){
$(".hid").removeClass("hid");
//第一种阻止事件的方法
// return false
//第二种阻止事件的方法
e.preventDefault()
}
})
友情提醒：像click、keydown等DOM中定义的事件，我们都可以使用.on()方法来绑定事件，但是hover这种jQuery中定义的事件就不能用.on()方法来绑定了。
想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件：
<button>点击这里</button>
<script>
$("body").on("click","button",function () {
console.log(123)
})
</script>
12.5 组织事件冒泡
<style>
#a{
width: 500px;
height: 500px;
background-color: red;
}
#b{
width: 400px;
height: 400px;
background-color: green;
}
#c{
width: 200px;
height: 200px;
background-color: black;
}
</style>
<script>
$(function(){
$("#a").on("click",function () {
alert("第一")
});
$("#b").on("click",function (e) {
alert("第er");
e.stopPropagation();//阻止事件冒泡
});
$("#c").on("click",function (e) {
alert("第san");
e.stopPropagation();//阻止事件冒泡,因为这个div元素十最小的子标签，锁以点击它的时候，会一直连带的触发他的爸爸和爷爷，所以需要组织它事件的执行
});
})
</script>
<div id="a">
<div id="b">
<div id="c"></div>
</div>
12.6 页面加载
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。(window.onload() 等待html中的所有元素都加载完毕)
两种写法（方法1）：
$(document).ready(function(){
// 在这里写你的JS代码...
})
（方法二）：简写
$(function(){
// 你在这里写你的代码
})
阻止事件冒泡实例：
# 这样写script代码
$(document).ready(function(){
$("#a").on("click",function () {
alert("第一")
});
$("#b").on("click",function (e) {
alert("第er")
e.stopPropagation()
});
$("#c").on("click",function (e) {
alert("第san");
e.stopPropagation()
});
})
12.7 JQ页面加载DOM页面加载的区别
- window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
- jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）
12.8 事件委托
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。
实例：通过最父级的body标签设定click事件，这样html中所有的button都具有这个事件
<script>
$("body").on("click","button",function () {
console.log(123)
})
</script>
十三、动画效果
// 基本 show([s,[e],[fn]]) hide([s,[e],[fn]]) toggle([s],[e],[fn]) // 滑动 slideDown([s],[e],[fn]) slideUp([s,[e],[fn]]) slideToggle([s],[e],[fn]) // 淡入淡出 fadeIn([s],[e],[fn]) fadeOut([s],[e],[fn]) fadeTo([[s],o,[e],[fn]]) fadeToggle([s,[e],[fn]]) // 自定义（了解即可） animate(p,[s],[e],[fn])
点赞特效：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>点赞动画示例</title>
<style>
div {
position: relative;
display: inline-block;
}
div>i {
display: inline-block;
color: red;
position: absolute;
right: -16px;
top: -5px;
opacity: 1;
}
</style>
</head>
<body>
div id="d1"点赞/div
<script src="jquery-3.2.1.min.js"></script>
<script>
$("#d1").on("click", function () {
var newI = document.createElement("i");
newI.innerText = "+1";
$(this).append(newI);
$(this).children("i").animate({
opacity: 0
}, 1000)
})
</script>
</body>
</html>
十四、each
jQuery.each(collection, callback(indexInArray, valueOfElement))：
描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。
li =[10,20,30,40]
$.each(li,function(i, v){
console.log(i, v);//index是索引，ele是每次循环的具体元素。
})
###输出
010
120
230
340
.each(function(index, Element))：
描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。
.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。
// 为每一个li标签添加foo
$("li").each(function(){
$(this).addClass("c1");
});
注意: jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的 .each()方法：
也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了：
$("li").addClass("c1"); // 对所有标签做统一操作
注意：在遍历过程中可以使用 return false提前结束each循环。
终止each循环：return false