jQuery常用知识点大总结
程序员文章站
2022-06-24 11:40:55
jQuery [TOC] jQuery介绍 1.jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 2.jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write ......
jquery
jquery介绍
1.jquery是一个轻量级的、兼容多浏览器的javascript库。
2.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插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。
原生dom的写法就是写js代码，而以后我们多数都用jquery来写，因为jquery的优势很多，看上面，并且查找标签的方式有很多，比原生的dom丰富的多，很便利，还有重要的一点就是不需要考虑浏览器的兼容性，因为jquery做到了各大浏览器兼容的功能。
下载链接：jquery官网，首先需要下载这个jquery的文件，然后在html文件中引入这个文件，就可以使用这个文件中帮我们提供的jquery的接口了。
中文文档：jquery ap中文文档
jquery的引入方式有两种：
1.直接下载文件到本地（最常用），从本地中导入
2.使用文件的网络地址，就像我们img标签里面的那个src的用法差不多。
引入完之后，就可以直接使用jquery的语法来写了，但是还是要写在script标签里面，并且要注意引入顺序，先引入文件，再在script标签里面写jquery的代码，先导入再使用。
jquery对象和dom对象
jquery对象找到的标签对象称为--jquery对象
原生js找到的标签对象称为--dom对象
dom对象只能使用dom对象的方法 不能使用jquery对象的方法
jquery对象也是只能使用知己的对象方法
jquery对象和dom对象之间可以互相转换
jquery转换dom
$('#d1')[0]
dom转换jquery
var a=$(#d1)[0]
$(a)
$($(#d1)[0])
$($('div')[0]).text().trim();
"床前明月光"
$($('div')[0]).text('安文最帅');
$($('div')[0]).text('安文最帅').text();
"安文最帅"
jquery选择器
jquery('#d1') 找到id为d1 的标签
简写$('d1')
选择器可能找到的是多个标签，是一个数组，但还是jquery对象可以直接只用jquery的方法，对找到的所有标签进行统一设置；如果要单独设置选中的所有标签中的某个标签可以通过索引取值的方式找到，按后注意 通过索引得到的标签 是个dom对象$($(#d1)[0])
基本选择器（同css）
id选择器：
$("#id") #不管找什么标签，用什么选择器，都必须要写$("")，引号里面再写选择器，通过jquery找到的标签对象就是一个jquery对象，用原生js找到的标签对象叫做dom对象，看我们上面的jquery对象部分的内容
标签选择器：
$("tagname")
class选择器：
$(".classname")
配合使用：
$("div.c1") // 找到有c1 class类的div标签
所有元素选择器：
$("*")
组合选择器：
$("#id, .classname, tagname")
层级选择器：（同css）x和y可以为任意选择器
$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
基本筛选器（选择之后进行过滤）：
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
$('li:eq(1)');
$('li:eq(-1)').text();
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
$('li:has(span)');
$("div:has(h1)")// 找到所有后代中有h1标签的div标签，意思是首先找到所有div标签，把这些div标签的后代中有h1的div标签筛选出来
$("div:has(.c1)")// 找到所有后代中有c1样式类（类属性class='c1'）的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
$("li:not(:has(c1)")
属性选择器：
[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于
// 示例,多用于input标签
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签
表单筛选器
多用于找form表单里面出现的input标签，当然通过属性选择器找肯定也是没问题的，这样就是写着简单一些
input标签中type属性为这个值的input标签
:text
:password 实例：$(':password');
:file
:radio
:checkbox
:submit
:reset
:button
表单对象属性:
:enabled #找到可用的input标签
$(':enabled');
:disabled #找到不可用的input标签
用户名：<input type="text" disabled>
$(':disabled');
:checked
<input type="radio" name="sex">男
$(':checked');
:selected
<select name="" id="city">
<option value="">北京</option>
<option value="">上海</option>
<option value="">深圳</option>
<option value="">山西</option>
<option value="">大同</option>
</select>
$(':selected').text();
筛选器方法(用的很多)
找下一个元素：
$("#id").next() #找到下一个兄弟标签
示例：$('#l2').next();
示例：$('#l2').next().next().next().text();
$("#id").nextall() #找到下面所有的兄弟标签
示例：$('#l2').nextall().text();
$("#id").nextuntil("#i2") #直到找到id为i2的标签就结束查找，不包含它
示例：$('#l2').nextuntil('#l4').text();
示例：
<ul>
<li>安文</li>
<li id="l2"><span>又彪</span></li>
<li>思雨</li>
<li id="l4">
<a href="" class="c1">庆青</a>
</li>
<li>相玺</li>
</ul>
找上一个元素：
$("#id").prev()
示例：$('#l4').prev().text();
$("#id").prevall()
示例：$('#l4').prevall().text();
$("#id").prevuntil("#i2")
示例：$('#l4').prevuntil('#l2').text();
父亲元素：
$("#id").parent()
示例：$('a').parent();
$("#id").parents() // 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到）
示例：$('a').parents();
$("#id").parentsuntil('body') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用。
儿子和兄弟元素：
$("#id").children();// 儿子们
示例：$('ul').children().text();
示例：$('ul').children('#l4').text().trim();
$("#id").siblings();// 兄弟们，不包含自己，.siblings('#id')，可以在添加选择器进行进一步筛选
示例：$('#l4').siblings().text();
查找
$("div").find("p") --
示例：$('ul').find('#l4').text();等价于$('ul #l4').text();
筛选
$("div").filter(".c1") // 从结果集中过滤出有c1样式类的，从所有的div标签中过滤出有class='c1'属性的div，和find不同，find是找div标签的子子孙孙中找到一个符合条件的标签
示例：$('li').filter('#l4').text();
等价于 $("div.c1")
补充（和前面使用冒号的一样 :first等，只不过冒号的那个是写在选择器里面的，而下面的这几个是方法，如此而已，就不说啦）：
.first() // 获取匹配的第一个元素
$('li').first();
$('li:first');
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
标签操作
样式类操作
addclass();// 添加指定的css类名。 removeclass();// 移除指定的css类名。 hasclass();// 判断样式存不存在 toggleclass();// 切换css类名，如果有就移除，如果没有就添加。
示例代码
$('.c1').addclass('c2');
$('.c1').removeclass('c2');
$('.c1').hasclass('c2');
$('.c1').toggleclass('c2');
css样式
原生js
标签.style.color = 'red';
jquery
$('.c1').css('background-color','red');
同时设置多个css样式
$('.c1').css({'background-color':'yellow','width':'200px'})
位置操作
查看位置
$('.c2').position(); //查看相对位置
{top: 20, left: 20}
$('.c2').offset(); //查看距离窗口左上角的绝对位置
{top: 28, left: 28}
设置位置
$('.c2').offset({'top':'20','left':'40'});
jquery绑定点击事件的写法
原生js绑定点击事件
// $('.c1')[0].onclick = function () {
// this.style.backgroundcolor = 'green';
// }
jquery绑定点击事件
$('.c1').click(function () {
$(this).css('background-color','green');
})
点击事件和滚动事件的示例代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
.c1{
background-color: red;
height: 100px;
width: 100px;
}
.c2{
background-color: green;
height: 1000px;
width: 100px;
}
.c3{
background-color: blue;
height: 1000px;
width: 100px;
}
.s1{
position: fixed;
left:20px;
bottom: 20px;
height: 40px;
width: 80px;
background-color: purple;
line-height: 40px;
text-align: center;
}
.s1 a{
color: white;
font-size: 14px;
text-decoration: none;
}
.hide{
display: none;
}
</style>
</head>
<body>
<!--<a name="top">这里是顶部</a>-->
<!--<a>这里是顶部</a>-->
<span>顶部位置</span>
<div class="c1"></div>
<button class="change-postion">走你</button>
<div class="c2"></div>
<div class="c3"></div>
<span class="s1 hide">
<!--<a href="#top">返回顶部</a>-->
<span>返回顶部</span>
</span>
<script src="jquery.js"></script>
<script>
//点击事件来改变标签位置
$('.change-postion').click(function () {
$('.c1').offset({top:200,left:200});
});
//滚动事件,监听滚动距离来显示或者隐藏标签
$(window).scroll(function () {
console.log($(window).scrolltop());
if ($(window).scrolltop() >=200){
$('.s1').removeclass('hide');
}else {
$('.s1').addclass('hide');
}
});
// 回到顶部,scrolltop设置值
$('.s1').click(function () {
$(window).scrolltop(0);
})
</script>
</body>
</html>
尺寸
$('.c1').height(); //content 高度
$('.c1').width(); //content 宽度
$('.c1').innerheight();//content高度+padding高度
$('.c1').innerwidth(); //content宽度+padding宽度
$('.c1').outerheight();//content高度+padding高度 + border高度
$('.c1').outerwidth();//content宽度+padding宽度+ border宽度
示例:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
.c1{
width: 100px;
height: 100px;
border: 2px solid red;
background-color: green;
padding: 20px 30px;
}
</style>
</head>
<body>
<div class="c1"></div>
<script src="jquery.js"></script>
</body>
</html>
文本操作
html()//取得第一个匹配元素的html内容，包含标签内容
html(val)//设置所有匹配元素的html内容，识别标签，能够表现出标签的效果
text()// 取得所有匹配元素的内容，只有文本内容，没有标签
text(val)//设置所有匹配元素的内容，不识别标签，将标签作为文本插入进去
示例:
$('.c1').text('<h3>你好,太白</h3>');
$('.c1').html('<h3>你好,太白</h3>');
值操作
获取值
input type='text'的标签--$('#username').val();
input type='radio'标签获取被选中的标签的值 --- $(':radio:checked').val();
input type='checkbox'标签获取被选中的标签的值 --- 直接$(':checkbox:checked').val();是不行的,需要循环取值
var d = $(':checkbox:checked');
for (var i=0;i<d.length;i++){
console.log(d.eq(i).val());
}
单选select --- $('#city').val();
多选select --- $('#author').val(); // ["2", "3"]
设置值
input type='text'的标签 --- $('#username').val('李杰');
input type='radio'标签 --- $('[name="sex"]').val(['3']);
如果 $('[name="sex"]').val('3'),所有标签的值都变成了'3';
input type='checkbox'设置值 --- $('[name="hobby"]').val(['2','3'])
单选select --- $('#city').val('1'); option value='1'
多选select --- $('#author').val(['2','3'])
属性操作
attr(attrname)// 返回第一个匹配元素的属性值
attr(attrname, attrvalue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeattr(attrname)// 从每一个匹配的元素中删除一个属性
示例:
设置单个属性
$('.c1').attr('xx','oo');
设置多个属性
$('.c1').attr({'age':'18','sex':'alex'});
查看属性
$('.c1').attr('属性名');
$('.c1').attr('xx');
删除属性
$('.c1').removeattr('xx');
prop -- 针对的是checked\selected\disabled..
查看标签是否有checked属性,也就是是否被选中
attr $(':checked').attr('checked'); //checked -- undefined
prop $(':checked').prop('checked'); //true -- false
通过设置属性的方式来设置是否选中:
$(':radio').eq(2).prop('checked',true); true和false不能加引号
$(':radio').eq(2).prop('checked',false);
简单总结:
1.对于标签上有的能看到的属性和自定义属性都用attr
2.对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。
具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
文档处理
添加到指定元素内部的后面
$(a).append(b)// 把b追加到a
$(a).appendto(b)// 把a追加到b
#添加字符串照样能识别标签 *****
$('#d1').append('<a href="http://www.jd.com">京东</a>');
添加到指定元素内部的前面
$(a).prepend(b)// 把b前置到a
$(a).prependto(b)// 把a前置到b
示例
$('a').prependto($('div'));
添加到指定元素外部的后面
$(a).after(b)// 把b放到a的后面
$(a).insertafter(b)// 把a放到b的后面
添加到指定元素外部的前面
$(a).before(b)// 把b放到a的前面
$(a).insertbefore(b)// 把a放到b的前面
移除和清空元素
remove()// 从dom中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点，包括文本被全部删除，但是匹配的元素还
$('div').remove();
$('div').empty();
替换
replacewith()
replaceall()
示例:
var a = document.createelement('a')
a.href = 'http://www.baidu.com';
a.innertext = 'xxx';
$('span').replacewith(a);
$(a).replaceall('span');
clone()克隆
<button class="btn">屠龙宝刀,点击就送!</button>
$('.btn').click(function () {
// var a = $(this).clone(); //克隆标签
var a = $(this).clone(true); //连带事件一起克隆
$(this).after(a);
})
事件
事件绑定方式 两种方式
<script>
// 方式一
// $('#d1').click(function () {
// $(this).css({'background-color':'green'})
// })
// 方式二 on绑定
$('#d1').on('click',function () {
$(this).css({'background-color':'green'})
})
</script>
常用事件
<div class="c1"></div>
click(function(){...})
$('#d1').on('click',function () {
$(this).css({'background-color':'green'})
})
hover(function(){...})
//鼠标悬浮 触发事件
$('.c1').hover(
//鼠标放上去
function () {
$(this).css({'background-color':'blue'});
},
function(){
$(this).css({'background-color':'black'});
}
);
blur(function(){...})
//失去光标(焦点)时触发事件 使div变色
$('[type="text"]').blur(function () {
$('.c1').css({'background-color':'pink'})
})
focus(function(){...}) //获取光标时触发事件 使div变色
$('[type="text"]').focus(function () {
$('.c1').css({'background-color':'black'})
})
change(function(){...}) //内容发生变化，input，select等
//与内容发改变时触发的事件
$('select').change(function () {
$('.c1').toggleclass('cc')
})
keyup(function(){...}) //键盘抬起触发事件
$(window).keyup(function (e) {
console.log(e.keycode);
})
keydown(function(){...}) //键盘按键按下事件 参数e/event
$(window).keydown(function (e) {
console.log(e.keycode) //每个键都有一个keycode键 ，通过不同的值触发不同的事件
if(e.keycode===37){
$('.c1').css({'background-color':'green'})
}else if(e.keycode===39){
$('.c1').css({'background-color':'balck'})
}
else{
$('.c1').css({'background-color':'yellow'})
}
})
mouseenter(function(){...}) // 鼠标悬浮 等同于hover事件
mouseout(function(){...})
$('.c1').mouseenter(function () {
$(this).css({'background-color':'blue'});
});
$('.c1').mouseout(function () {
$(this).css({'background-color':'yellow'});
});
//鼠标悬浮 只触发一次
$('.c2').mouseenter(function () {
console.log('你变了');
});
//鼠标悬浮 连续触发
$('.c2').mouseover(function () {
console.log('你变了');
})
mouseover 和 mouseenter的区别是：mouseover事件是如果该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发，mmouseenter事件不管有没有子标签都只触发一次，表示鼠标进入这个对象
input事件
实时监听input输入值变化示例：input值变化事件：看百度搜索的效果
这叫做input事件，看代码：只要input框里面的值发生变化就触发某个事件，注意input事件不能直接绑定，必须用on绑定才行，$('#d1').input(function{})是不对的；只能这样绑定$('#d1').on('input',function(){})才行
<script src="jquery.js"></script>
百度一下 <input type="text" id="search">
<script>
$('#search').on('input',function () {
console.log($(this).val());
})
</script>
事件冒泡
<body>
<script src="jquery.js"></script>
<div id="d1">
<div id="d2"></div>
</div>
<script>
//冒泡
$('#d1').click(function () {
alert('父级标签')
})
$('#d2').click(function () {
alert('子级标签')
})
</script>
</body>
阻止后续（冒泡）事件发生
//冒泡的意思就是因为html可以嵌套，如果你给儿子标签绑定了点事件或者没有绑定点击事件，父级标签绑定了点击事件，那么你一点击子标签，不管子标签 有没有绑定事件，都会触发父级标签的点击事件，如果有，会先触发子标签的点击事件，然后触发父级标签的点击事件，不管子标签有没有点击事件，都会一级一级的还往上找点击事件
$('#d1').click(function () {
alert('父级标签')
})
$('#d2').click(function (e) { //这个参数e(只是个形参，写evt或者event名字的也很多)表示当前事件本身，这个事件也是一个对象
alert('子级标签')
// return false; //这个也可以阻止
e.stoppropagation();//用事件对象的这个方法就能阻止冒泡 （propagation：传递的意思）
})
事件委托
事件委托:是通过事件冒泡的原理，利用父标签去捕获子标签的事件，将未来添加进来的某些子标签自动绑定上事件。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>事件委托</title>
</head>
<body>
<script src="jquery.js"></script>
<div id="d1">
<button class="c1">爱的磨砺转圈圈</button>
</div>
<script>
// $('.c1').on('click',function () {
// alert('你变了');
// var btn=document.createelement('button');
// $(btn).text('爱的磨砺转圈圈');
// $(btn).addclass('c1');
// console.log(btn);
// $('#d1').append(btn);
// })
//事件委托 将'.c1'委托给'#d1'
$('#d1').on('click','.c1',function () {
alert('你变了');
var btn=document.createelement('button');
$(btn).text('爱的磨砺转圈圈');
$(btn).addclass('c1');
console.log(btn);
$('#d1').append(btn)
})
</script>
</body>
</html>
页面载入
//将js代码写到head标签和写道body标签下面的作用是不同的吗，写在head标签里面的话，如果你写了操作某个标签的内容的话，那个标签还没加载出来，先加载了你的js代码，就找不到这个标签，所以不会生效，所以写在body标签最下面是一种解决办法，还有一种办法就是window.onload=function(){js的代码}，等页面上所有的元素都加载完，在执行这里面的js代码，还记得吗？，但是这个window.onload有个缺点，这个缺点就是这个操作时给window.onload赋值，如果你自己写了两个js文件，每个js文件中都有一个window.onload的话，那么后引入的文件会把前面引入的文件的window.onload里面的js代码全部覆盖掉，那么第一个文件的js代码就失去了效果，还有一个问题就是，window.onload会等到页面上的文档、图片、视频等所有资源都加载完才执行里面的js代码，导致有些效果的加载比较慢，所以我们使用下面的写法，不存在覆盖问题，而且只要文档加载完就触发，不需要等着一些图片啊视频啊什么的，加载js效果的速度快。
1.jquery文件要在使用jquery的代码之前引入
2.js代码最好都放在body标签下面或者里面的最下面
3.window.onload:
window.onload = function () {
$('.c1').click(function () {
$(this).css({'background-color': 'green'});
})
}
4.页面载入:
$(function () {
$('.c1').click(function () {
$(this).css({'background-color': 'green'});
})
})
$(document).ready(function{});
与window.onload的区别:
1.window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
2.jquery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）
示例:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<script src="jquery.js"></script>
<script>
// 等待整个页面中的内容全部加载完成之后,触发window.onload对应的函数里面的内容
// window.onload 有覆盖现象,会被后面的window.onload给重新赋值
// window.onload = function () {
// $('.c1').click(function () {
// $(this).css({'background-color':'green'});
// })
// }
$(function () {
$('.c1').click(function () {
$(this).css({'background-color':'green'});
})
});
</script>
<script src="页面载入.js"></script>
<style>
.c1{
background-color: red;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div class="c1"></div>
</body>
</html>
each循环
循环标签对象数组
$('li').each(function(k,v){
console.log(k,v);
});
循环普通数组
var d1 = ['aa','bb','cc'];
$.each(d1,function(k,v){
console.log(k,v);
})
跳出循环 return false; 类似于break
$('li').each(function(k,v){
console.log(k,v.innertext);
if (k === 1){
return false;
}
});
跳出本次循环 return; 类似于continue
$('li').each(function(k,v){
if (k === 1){
return;
}
console.log(k,v.innertext);
});
data
给标签对象添加数据,类似于添加了全局变量
.data(key, value): 设置值
.data(key) 取值
.removedata(key) 删除值
插件(了解)
<script>
jquery.extend({ //$.extend({})
min:function(a, b){return a < b ? a : b;}, //自定义了一个min和max方法，min和max作为键，值是一个function
max:function(a, b){return a > b ? a : b;}
});
jquery.min(2,3);// => 2
jquery.max(4,5);// => 5
$('div').min(1,2);不能通过标签对象来调用
</script>
<script>
jquery.fn.extend({ //给任意的jquery标签对象添加一个方法
check:function(){
return this.each(function(){this.checked =true;});
},
uncheck:function(){
return this.each(function(){this.checked =false;});
}
});
// jquery对象可以使用新添加的check()方法了。
$("input[type='checkbox']").check();
</script>