目录
jQuery
jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。
jQuery对象是jQuery独有的。如果一个对象是jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。
$("#i1").html()的意思是：获取id值为i1的元素的html代码。其中是jQuery里的方法。
html()相当于： document.getElementById("i1").innerHTML;
一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：
var $variable = jQuery对像 var variable = DOM对象 $variable[0] // jQuery对象转成DOM对象
拿上面那个例子举例，jQuery对象和DOM对象的使用：
$("#i1").html(); // jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML; // DOM对象使用DOM的方法
jQuery基础语法
$(selector).action()
查找标签
基本选择器
id选择器：
$("#id")
标签选择器：
$("tagName")
class选择器：
$(".className")
配合使用：
$("div.c1") // 找到有c1 class类的div标签
所有元素选择器：
$("*")
组合选择器：
$("#id, .className, tagName")
层级选择器
x和y可以为任意选择器
$("x y"); // x的所有后代y（子子孙孙）
$("x > y"); // x的所有儿子y（儿子）
$("x + y") // 找到所有紧挨在x后面的y
$("x ~ y") // x之后所有的兄弟y
基本筛选器
:first // 第一个 :last // 最后一个 :eq(index) // 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素，从0开始计数 :odd // 匹配所有索引值为奇数的元素，从0开始计数 :gt(index) // 匹配所有大于给定索引值的元素 :lt(index) // 匹配所有小于给定索引值的元素 :not(元素选择器) / / 移除所有满足not条件的标签 :has(元素选择器) // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
例子：
$("div:has(h1)") // 找到所有后代中有h1标签的div标签
$("div:has(.c1)") // 找到所有后代中有c1样式类的div标签
$( "li:not(.c1)") // 找到所有不包含c1样式类的li标签
$("li:not(:has(a))") // 找到所有后代中不含a标签的li标签
属性选择器
[attribute] [attribute =value] // 属性等于 [attribute!=value] // 属性不等于
例子：
// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$( "input[type='checkbox']"); // 取到checkbox类型的input标签
$("input[type!='text']"); // 取到类型不是text的input标签
表单筛选器
:text :password :file :radio :checkbox :submit :reset :button
例子：
$(":checkbox") // 找到所有的checkbox
表单对象属性:
:enabled :disabled :checked //被选中的 :selected
例子：
找到可用的input标签
<form> <input name="email" disabled="disabled" /> <input name="id" /> </form> $( "input:enabled") // 找到可用的input标签
找到被选中的option：
<select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">广州市</option> <option value="shenzhen">深圳市</option> </select> $( "option:selected") // 找到所有被选中的option
筛选器方法
下一个元素：
$("#id" ).next()
$( "#id" ).nextAll()
$( "#id").nextUntil("#i2")
上一个元素：
$("#id" ).prev()
$( "#id" ).prevAll()
$( "#id").prevUntil("#i2")
父亲元素：
$("#id" ).parent()
$( "#id" ).parents() //查找当前元素的所有的父辈元素
$( "#id").parentsUntil() //查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
儿子和兄弟元素：
$("#id").children(); // 儿子们
$("#id").siblings(); // 兄弟们
查找
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
$("div").find("p")
//等价于$("div p")
eg:
$("div").find("p")
r.fn.init(6) [p#p1, p.help-block, p#p2.divider, p#p3.divider, p, p, prevObject: r.fn.init(39)]
$("div p")
r.fn.init(6) [p#p1, p.help-block, p#p2.divider, p#p3.divider, p, p, prevObject: r.fn.init(1)]
筛选
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
$("div").filter(".c1") // 从结果集中过滤出有c1样式类的
等价于$("div.c1")
$("div").filter(".radio")
r.fn.init(2) [div.radio, div.radio, prevObject: r.fn.init(39)]
$("div.radio")
r.fn.init(2) [div.radio, div.radio, prevObject: r.fn.init(1)]
补充：
.first() // 获取匹配的第一个元素 .last() // 获取匹配的最后一个元素 .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 .has() / / 保留包含特定后代的元素，去掉那些不含有指定后代的元素。 .eq() // 索引值等于指定值的元素
$(".checkbox").first()
r.fn.init [div.checkbox, prevObject: r.fn.init(4)]
$(".checkbox").last()
r.fn.init [div.checkbox, prevObject: r.fn.init(4)]
$(".checkbox").not(".radio")
r.fn.init(4) [div.checkbox, div.checkbox, div.checkbox, div.checkbox, prevObject: r.fn.init(4)]
$(".row").has(".o1")
r.fn.init [prevObject: r.fn.init(5)]
$(".row").has(".form-group")
r.fn.init [div.row, prevObject: r.fn.init(5)]
$(".row").eq(1)
r.fn.init [div.row, prevObject: r.fn.init(5)]
操作标签
样式操作
样式类
addClass(); // 添加指定的CSS类名。 removeClass(); // 移除指定的CSS类名。 hasClass(); // 判断样式存不存在 toggleClass(); // 切换CSS类名，如果有就移除，如果没有就添加。
CSS
css("color","red") // DOM操作：tag.style.color="red"
var a = $(".checkbox [type='checkbox']").first()
undefined
console.log(a);
VM4225:1 r.fn.init [input, prevObject: r.fn.init(4)]
undefined
a.css("color","red")
r.fn.init [input, prevObject: r.fn.init(4)]
示例：
$("p").css("color", "red"); // 将所有p标签的字体设置为红色
位置操作
offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置 position() // 获取匹配元素相对父元素的偏移 scrollTop() // 获取匹配元素相对滚动条顶部的偏移 scrollLeft( ) // 获取匹配元素相对滚动条左侧的偏移
.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。
.position()和的差别在于：是相对于相对于父级元素的位移。
height() width() innerHeight() innerWidth() outerHeight() outerWidth()
文本操作
HTML代码：
html() // 取得第一个匹配元素的html内容 html(val) // 设置所有匹配元素的html内容
文本值：
text() // 取得所有匹配元素的内容 text(val) // 设置所有匹配元素的内容
值：
val() // 取得第一个匹配元素的当前值 val(val) // 设置所有匹配元素的值 val([val1, val2]) // 设置多选的checkbox、多选select的值
例如：
<select multiple id ="s1" >
<option value ="1" > 1 </option>
<option value ="2" > 2 </option>
<option value ="3" > 3 </option>
</select>
<body>
<input type ="checkbox" value ="basketball" name ="hobby" > 篮球
<input type ="checkbox" value ="football" name ="hobby" > 足球
</body>
设置值：
$("[name='hobby']").val(['basketball', 'football' ]);
$( "#s1").val(["1", "2"])
$("option")
r.fn.init(3) [option, option, option, prevObject: r.fn.init(1)]
$("option").html()
" 1 "
$("option").text()
" 1 2 3 "
$("option").html('hhhgfdghjhg')
r.fn.init(3) [option, option, option, prevObject: r.fn.init(1)]
$("option").text(123)
r.fn.init(3) [option, option, option, prevObject: r.fn.init(1)]
$("[name='hobby']").val(['basketball', 'football' ]);
r.fn.init(2) [input, input, prevObject: r.fn.init(1)]
$( "#s1").val(["1", "2"])
r.fn.init [select#s1]
示例：
获取被选中的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">
可以使用：
$("input[name='gender']:checked").val()
prop和attr的区别：
attr全称attribute(属性)
prop全称property(属性)
虽然都是属性，但他们所指的属性并不相同
attr所指的属性是HTML标签属性
而prop所指的是DOM对象属性
可以认为attr是显式的，而prop是隐式的
举个例子：
<input type="checkbox" id="i1" value="1">
针对上面的代码，
$("#i1").attr("checked") // undefined
$("#i1").prop("checked") // false
可以看到attr获取一个标签内没有的东西会得到undefined，而prop获取的是这个DOM对象的属性，因此checked为false。
如果换成下面的代码：
<input type="checkbox" checked id="i1" value="1">
再执行：
$("#i1").attr("checked") // checked
$("#i1").prop("checked") // true
$("#i1").attr("checked")
"checked"
$("#i1").prop("checked")
true
这已经可以证明attr的局限性，它的作用范围只限于HTML标签内的属性，而prop获取的是这个DOM对象的属性，选中返回true，没选中返回false。
接下来再看一下针对自定义属性，attr和prop又有什么区别：
<input type="checkbox" checked id="i1" value="1" me="自定义属性">
执行以下代码：
$("#i1").attr("me") // "自定义属性"
$("#i1").prop("me") // undefined
$("#i1").attr("me")
"自定义属性"
$("#i1").prop("me")
undefined
可以看到prop不支持获取标签的自定义属性。
总结一下：
- 对于标签上有的能看到的属性和自定义属性都用attr
- 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
文档处理
添加到指定元素内部的后面
$(A).append(B)// 把B追加到A $(A).appendTo(B)// 把A追加到B
var a =$("#c1")
undefined
a
r.fn.init [input#c1]
var b = $("#i1")
undefined
b
r.fn.init [input#i1]
$(a).append(b)
r.fn.init [input#c1]0: input#c1length: 1__proto__: Object(0)
$(b).appendTo(a) //把b追加到a，和上年的例子一样
添加到指定元素内部的前面
$(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()// 删除匹配的元素集合中所有的子节点。
var a = $("#c1")
undefined
a.empty()
替换
replaceWith() //这个替换不是交换，而是把前面一个替换掉 replaceAll()
var a = $("#i2")
undefined
var b = $("#i3")
undefined
a.replaceWith(b)
克隆
clone()// 参数 //可能在代码里面不显示，但是在浏览器上就会发现他克隆了
var a = $("#i1")
undefined
a.clone();
r.fn.init [input#i1, prevObject: r.fn.init(1)]
克隆示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<button>点我试试</button>
<script>
$("button").click(function () {
$(this).clone(true).insertAfter(this)
})
</script>
</body>
</html>
事件
常用事件
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})
事件绑定
两种绑定方法
方法一
$("button").click(function () {
alert("您好啊")
})
方法二（推荐）
$("button").on("click",function () {
alert("你好啊")
})
.on( events [, selector ],function(){})
- events： 事件
- selector: 选择器（可选的）
- function: 事件处理函数
移除事件
.off( events [, selector ][,function(){}])
off() 方法移除用 .on()绑定的事件处理程序。
- events： 事件
- selector: 选择器（可选的）
- function: 事件处理函数
阻止后续事件执行
return false;// 常见阻止表单提交等e.preventDefault();- 注意：
像click、keydown等DOM中定义的事件，我们都可以使用.on()方法来绑定事件，但是hover这种jQuery中定义的事件就不能用.on()方法来绑定了。
想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件：
$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件
$(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件
$(this).removeClass('hover');
});
阻止事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<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("第1")
});
$("#b").on("click",function (e) {
alert("第2")
e.stopPropagation() //就这个东西阻止了事件冒泡
});
$("#c").on("click",function (e) {
alert("第3");
});
})
</script>
</head>
<body>
<div id="a">
<div id="b">
<div id="c"></div>
</div>
</div>
</body>
</html>
事件委托
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。
示例：
表格中每一行的编辑和删除按钮都能触发相应的事件。
$("table").on("click", ".delete", function () {
// 删除按钮绑定的事件
})
实时监听input输入值变化示例：
<!DOCTYPE html>
<html lang="en">
<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>实时监听input输入值变化</title>
</head>
<body>
<input type="text" id="i1">
<script src="jquery-3.2.1.min.js"></script>
<script>
/*
* oninput是HTML5的标准事件
* 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化，
* 在内容修改后立即被触发，不像onchange事件需要失去焦点才触发
* oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代
* 使用jQuery库的话直接使用on同时绑定这两个事件即可。
* */
$("#i1").on("input propertychange", function () {
alert($(this).val());
})
</script>
</body>
</html>
动画效果
// 基本 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])