目录
1. 查找标签
1.1 基本选择器
// id选择器
var aEle = document.getElementById('a') // js获取标签
aEle
// <div class="div" id="a">…</div>
var $aEle=jQuery('#a'); // jq获取标签
// 等同于 var $aEle=$('#a');
$aEle
// k.fn.init [div#a.div]
var aELe = $aEle[0]; // jq对象变js对象
aELe
// <div class="div" id="a">…</div>
var $a1Ele = $(aEle) // js对象变jq对象
$a1Ele
// k.fn.init [div#a.div]
// 标签选择器
$('div');
// k.fn.init(2) [div#a.div, div.div1, prevObject: k.fn.init(1)]
// class选择器
$('.div1');
// k.fn.init [div.div1, prevObject: k.fn.init(1)]
// 配合使用
$('div span'); // 找到有span标签的div标签
// k.fn.init [span, prevObject: k.fn.init(1)]
$('div.div'); //找到有div class类的div标签
// k.fn.init [div#a.div, prevObject: k.fn.init(1)]
// 所有元素选择器
$('*');
// k.fn.init(20) [html, head, meta, title, script, body, div#a.div, span, div.div1, ul, li#1, span#span, li, li#3, li, li#5, input, input, select, option, prevObject: k.fn.init(1)]
// 组合选择器
$('#a,sapn');
// k.fn.init [div#a.div, prevObject: k.fn.init(1)]
1.2 层级选择器
// x的所有后代y（子子孙孙）
$('ul li');
// k.fn.init(5) [li#1, li, li#3, li, li#5, prevObject: k.fn.init(1)]
// x的所有儿子y（儿子）
$('ul>li');
// k.fn.init(5) [li#1, li, li#3, li, li#5, prevObject: k.fn.init(1)]
// 找到所有紧挨在x后面的y
$('#1+li');
// k.fn.init [li, prevObject: k.fn.init(1)]
$('#1+li')[0];
// <li>2</li>
// x之后所有的兄弟y,同级后面的
$('#1~li');
// k.fn.init(4) [li, li#3, li, li#5, prevObject: k.fn.init(1)]
1.3 基本筛选器
// 第一个
$('ul li:first');
// k.fn.init [li#1, prevObject: k.fn.init(1)]
// 最后一个
$('ul li:last');
// k.fn.init [li#5, prevObject: k.fn.init(1)]
// 索引等于index的那个元素
$('ul li:eq(2)');
// k.fn.init [li#3, prevObject: k.fn.init(1)]
// 匹配所有索引值为偶数的元素，从 0 开始计数
$('ul li:even');
// k.fn.init(3) [li#1, li#3, li#5, prevObject: k.fn.init(1)]
// 匹配所有索引值为奇数的元素，从 0 开始计数
$('ul li:odd');
// k.fn.init(2) [li, li, prevObject: k.fn.init(1)]
// 匹配所有大于给定索引值的元素
$('ul li:gt(2)');
// k.fn.init(2) [li, li#5, prevObject: k.fn.init(1)]
// 匹配所有小于给定索引值的元素
$('ul li:lt(2)');
// k.fn.init(2) [li#1, li, prevObject: k.fn.init(1)]
// 移除所有满足not条件的标签
$('ul li:not(#1)');
// k.fn.init(4) [li, li#3, li, li#5, prevObject: k.fn.init(1)]
// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
$('ul li:has(span)');
// k.fn.init [li#1, prevObject: k.fn.init(1)]
1.4 属性选择器
$("input [type='checkbox']"); // 取到checkbox类型的input标签
// k.fn.init [prevObject: k.fn.init(1)]length: 0prevObject: k.fn.init [document]__proto__: Object(0)
$("input [type!='text']"); // 取到类型不是text的input标签
// k.fn.init [prevObject: k.fn.init(1)]
1.5 表单筛选器
// :text | :password | :file | :radio | :checkbox | :submit | :reset | :button
$(':checkbox'); // 找到所有的checkbox
// k.fn.init [input, prevObject: k.fn.init(1)]
// 表单对象属性
:enabled | :disabled | :checked | :selected
$('input:enabled'); // 找到可用的input标签
// k.fn.init(2) [input, input, prevObject: k.fn.init(1)]
$(':checked');
// k.fn.init(2) [input, option, prevObject: k.fn.init(1)]
$('input:checked'); // 坑点
// k.fn.init [input, prevObject: k.fn.init(1)]
2. 筛选器方法
// 下一个元素
$('#1').next();
// k.fn.init [li, prevObject: k.fn.init(1)]0: lilength: 1prevObject: k.fn.init [li#1]__proto__: Object(0)
// 下面的所有
$('#1').nextAll();
// k.fn.init(4) [li, li#3, li, li#5, prevObject: k.fn.init(1)]
// 下面的所有，到哪里为止
$('#1').nextUntil('#5');
// k.fn.init(3) [li, li#3, li, prevObject: k.fn.init(1)]
// 上一个元素
$('#5').prev();
// k.fn.init [li, prevObject: k.fn.init(1)]0: lilength: 1prevObject: k.fn.init [li#5]__proto__: Object(0)
$('#5').prevAll();
// k.fn.init(4) [li, li#3, li, li#1, prevObject: k.fn.init(1)]
$('#5').prevUntil('#1');
// k.fn.init(3) [li, li#3, li, prevObject: k.fn.init(1)]
// 父亲元素
$("#1").parent();
// k.fn.init [ul, prevObject: k.fn.init(1)]
$("#1").parents(); // 查找当前元素的所有的父辈元素
// k.fn.init(3) [ul, body, html, prevObject: k.fn.init(1)]
$("span").parentsUntil('html'); // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止
// k.fn.init(4) [li#1, ul, div#a.div, body, prevObject: k.fn.init(2)]
// 儿子和兄弟元素
$('ul').children(); // 儿子们
// k.fn.init(5) [li#1, li, li#3, li, li#5, prevObject: k.fn.init(1)]
$('ul').siblings(); // 兄弟们
// k.fn.init(5) [div#a.div, div.div1, input, input, select, prevObject: k.fn.init(1)]
// 查找：搜索所有与指定表达式匹配的元素，这个函数是找出正在处理的元素的后代元素的好方法
$('div').find('span');
// k.fn.init [span, prevObject: k.fn.init(2)]
$('div span'); // 等价
// k.fn.init [span, prevObject: k.fn.init(1)]
$('div').find('span')[0];
// <span>我是span</span>
$('div span')[0];
// <span>我是span</span>
// 筛选：筛选出与指定表达式匹配的元素集合
$('ul').filter('#1'); // 从结果集中过滤出有1样式id的
// k.fn.init [prevObject: k.fn.init(1)]
$('ul#1'); // 等价
// k.fn.init [prevObject: k.fn.init(1)]
// 补充
.first() // 获取匹配的第一个元素，等同于 :first
.last() // 获取匹配的最后一个元素,等同于 :last
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq(index) // 索引值等于指定值的元素,等同于 :eq(index)
3. 操作标签
3.1 样式操作
// 添加类属性值
$('.div').addClass('div1');
// k.fn.init [div#a.div.div1, prevObject: k.fn.init(1)]
// 移除类属性值
$('.div').removeClass('div1');
// k.fn.init [div#a.div, prevObject: k.fn.init(1)]
// 判断样式存不存在
$('.div').hasClass('div');
// true
$('.div').hasClass('div1');
// false
// 切换CSS类名，有就移除，没有就添加
$('.div').toggleClass('div1');
// k.fn.init [div#a.div.div1, prevObject: k.fn.init(1)]0: div#a.div.div1length: 1prevObject: k.fn.init [document]__proto__: Object(0)
$('.div').toggleClass('div1');
// k.fn.init [div#a.div, prevObject: k.fn.init(1)]
// 添加css样式
$('span').css('color','red'); // 将所有span标签的字体设置为红色
// k.fn.init(2) [span, span#span, prevObject: k.fn.init(1)]
// 获取样式的值
$('span').css('color');
// "rgb(255, 0, 0)"
// 添加多个样式
$('span').css({'color':'green','font-size':36});
// k.fn.init(2) [span, span#span, prevObject: k.fn.init(1)]
3.2 位置操作
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
// .offset()方法允许我们检索一个元素相对于文档（document）的当前位置。和 .position()的差别在于： .position()是相对于相对于父级元素的位移。
3.3 尺寸
// 内容的宽高
$('div').height();
// 69
$('div').width();
// 1094
// 内容加padding的宽高
$('div').innerHeight();
// 89
$('div').innerWidth();
// 1124
// 内容加padding加border的宽高
$('div').outerWidth();
// 1126
$('div').outerHeight();
// 91
3.4 文本操作
// 获取value值
$('input').val(); // 获取第一个匹配元素的当前值
// "123"
$('input').val(789); // 传参就是设置值
// k.fn.init [input, prevObject: k.fn.init(1)]
// HTML代码
$('div').html(); // 获取第一个匹配元素的html内容
/* "
<h1>123</h1>
" */
$('div').html('<h2>456</h2>'); // 设置所有匹配元素的html内容
// k.fn.init [div.a1, prevObject: k.fn.init(1)]0: div.a1length: 1prevObject: k.fn.init [document]__proto__: Object(0)
// 文本值
$('div').text(); // 获取所有匹配元素的内容
/* "
123
" */
$('div').text('<h2>456</h2>'); // 设置所有匹配元素的内容
// k.fn.init [div.a1, prevObject: k.fn.init(1)]
3.5 属性操作
// 用于ID等或自定义属性
$('div').attr('name','aa'); // 为所有匹配元素设置一个属性值
// k.fn.init [div.a1, prevObject: k.fn.init(1)]
$('div').attr('name'); // 返回第一个匹配元素的属性值
// "aa"
$('div').removeAttr('name'); // 从每一个匹配的元素中删除一个属性
// k.fn.init [div.a1, prevObject: k.fn.init(1)]
$('div').attr({'name':'aa','like':'eat'}); // 为所有匹配元素设置多个属性值
// k.fn.init [div.a1, prevObject: k.fn.init(1)]
// 用于checkbox和radio
$('input').prop('checked'); // 获取属性
// false
$('input').prop('checked',false);
// k.fn.init [input, prevObject: k.fn.init(1)]
$('input').attr('checked'); // 用attr可能会因为版本问题出现不兼容，所以在处理checkbox和radio的时候尽量使用特定的prop()
// undefined
removeProp() // 移除属性
/*
attr全称attribute(属性)
prop全称property(属性)
虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。
对于标签上有的能看到的属性和自定义属性都用attr
对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
*/
3.6 文档处理
var aELe = document.createElement('div');
aELe.innerText = 'asdf'
// "asdf"
aELe.setAttribute('id','rr');
aELe
// <div id="rr">asdf</div>
// 添加到指定元素内部的后面
$('.a1').append(aELe); // 把B追加到A
// k.fn.init [div.a1, prevObject: k.fn.init(1)]
$(A).appendTo(B); // 把A追加到B
// 添加到指定元素内部的前面
$(A).prepend(B); // 把B前置到A
$(A).prependTo(B); // 把A前置到B
// 添加到指定元素外部的后面
$(A).after(B); // 把B放到A的后面
$('#rr').insertAfter($('#ee')); // 把A放到B的后面$(A).insertAfter(B) // 把A放到B的后面
// k.fn.init [div#rr, prevObject: k.fn.init(1)]
// 添加到指定元素外部的前面
$(A).before(B); // 把B放到A的前面
$(A).insertBefore(B); // 把A放到B的前面
//移除和清空元素
remove(); // 从DOM中删除所有匹配的元素。
empty(); // 删除匹配的元素集合中所有的子节点
// 替换
replaceWith();
replaceAll();
// 克隆: clone方法不加参数true，表示克隆标签但不克隆标签带的事件,加参数true，克隆标签并且克隆标签带的事件
clone();
4. 事件
4.1 常用事件
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})
4.2 事件绑定
// .on()绑定的事件处理程序
.on( events [, selector ],function(){})
4.3 移除事件
// .off() 方法移除用
.off( events [, selector ][,function(){}])
4.4 阻止后续事件执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
.hid{
display: none;
}
</style>
</head>
<body>
<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()
}
})
</script>
</body>
</html>
注意 ：
像click、keydown等DOM中定义的事件，我们都可以使用.on()方法来绑定事件，但是hover这种jQuery中定义的事件就不能用.on()方法来绑定了。
使用事件委托的方式绑定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>
</head>
<body>
<div style=" 200px;height: 200px;background-color: red">来玩啊</div>
<script>
$("div").hover(
function () {
alert("很开心为你服务");
},
function () {
alert("大爷，慢走，下次再来")
}
)
</script>
</body>
</html>
4.5 阻止事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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{
500px;
height: 500px;
background-color: red;
}
#b{
400px;
height: 400px;
background-color: green;
}
#c{
200px;
height: 200px;
background-color: black;
}
</style>
<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");
});
})
// 简写
// $(function(){
// $("#a").on("click",function () {
// alert("第一")
// });
// $("#b").on("click",function (e) {
// alert("第二")
// e.stopPropagation()
// });
// $("#c").on("click",function (e) {
// alert("第三");
// });
// })
</script>
</head>
<body>
<div id="a">
<div id="b">
<div id="c"></div>
</div>
</div>
</body>
</html>
4.6 页面载入
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度
$(document).ready(function(){
// JS代码
})
// 简写：
$(function(){
// JS代码
})
4.7 事件委托
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
$("body").on("click","button",function () {
console.log(123)
})
</script>
</body>
</html>
5. 动画效果
// 基本
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])