前端开发JS框架之jQuery的基础知识分享
jQuery对象
jQuery对象是通过jQuery包装DOM对象后产生的对象
注意：jQuery对象只能使用jQuery里的**前端培训**方法，DOM对象只能使用DOM对象的方法
jQuery基础知识点
查找标签
基本选择器
id选择器：$('#id')
标签选择器：$('tagName')
class选择器：$(".className“）
配合使用：$("div.c1") //找到有c1的div标签
所有元素选择器：$("*")
组合选择器：$("#id, .className, tagName")
层级选择器：
$("div span"); //div标签下所有后代span标签（子标签 ，子子标签...)
$("div > sapn"); //div标签下所有儿子span标签
$("div + span"); //紧挨着div标签的第一span元素
$("div~span"); //div标签下所有兄弟元素span.
基本筛选器：
:first // 第一个 :last // 最后一个 :eq(index)// 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素，从 0 开始计数 :odd // 匹配所有索引值为奇数的元素，从 0 开始计数 :gt(index)// 匹配所有大于给定索引值的元素 :lt(index)// 匹配所有小于给定索引值的元素 :not(元素选择器)// 移除所有满足not条件的标签 :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)//例子 $('ul li:first') S.fn.init [li, prevObject: S.fn.init(1)] $('ul li:gt(3)') S.fn.init(6) [li, li#l1, li, li.cl1, li, li, prevObject: S.fn.init(1)] $('ul li:has(#l1)') S.fn.init [prevObject: S.fn.init(1)]length: 0prevObject: S.fn.init [document]__proto__: Object(0) $('ul li:not(.cl1)') S.fn.init(9) [li, li, li, li, li, li#l1, li, li, li, prevObject: S.fn.init(1)] $('ul li:odd') S.fn.init(5) [li, li, li#l1, li.cl1, li, prevObject: S.fn 复制代码属性选择器：
[属性】
[属性名=value]
[属性!=value]
//例子 $('[username]') S.fn.init(2) [input, input, prevObject: S.fn.init(1)] $('[username="hello"]') S.fn.init [input, prevObject: S.fn.init(1)] 复制代码表单筛选器：
:text :password :file :radio :checkbox :submit :reset :button 复制代码
//例子： $(":checkbox") // 找到所有的checkbox //表单对象属性： :enabled :disabled :checked :selected //例子 $("input:enabled") // 找到可用的input标签 $(":selected") // 找到所有被选中的option $(":checked") // 会将checked和selected都拿到，一般使用的时候会加个 限制条件，如： $("input:selected") //找到被选中的input标签 复制代码筛选器方法：
//下一个元素： $("#id").next() $("#id").nextAll() $("#id").nextUntil("#d1") //寻找下一个元素，直到#d1位置为止，不包括#d1标签 //上一个元素 $("#id").prev() $("#id").prevAll() $("#id").prevUntil("#i2") //寻找上一个元素，直到#d1位置为止，不包括#d1标签 //父元素 $("#id").parent() $("#id").parents() // 查找当前元素的所有的父辈元素 $("#id").parentsUntil(".c1") // 查找当前元素的所有的父辈元素，直到遇到匹配的.c1元素为止。不包括.c1元素 //儿子和兄弟元素 $("#id").children();// 儿子 $("#id").siblings();// 兄弟 复制代码jQuery的一些方法：
("div").find("p")//查找div标签下的p标签等价于("div").find("p") //查找div标签下的p标签 等价于("div").find("p")//查找div标签下的p标签等价于("div p")
("div").filter(".c1")//查找含有c1样式类的div标签。等价于("div").filter(".c1") //查找含有c1样式类的div标签。 等价于("div").filter(".c1")//查找含有c1样式类的div标签。等价于("div.c1)
$("div").first()
$("div").last()
$("div").not()
$("div").has()
$("div").eq()
标签操作
样式操作
jQuery js addClass(); classList.add() removeClass(); classList.remove() hasClass(); //判断样式是否存在 classList.contains() toggleClass();//有则删去，无则添加 classList.toggle()//例子 $("#d1").toggleClass('c1') S.fn.init [div#d1.c2] $("#d1").addClass('c1') S.fn.init [div#d1.c2.c1] $("#d1").toggleClass('c2') S.fn.init [div#d1.c1] 复制代码位置操作
offset() 获取匹配元素在当前窗口的相对偏移或这种元素位置
position() 获取匹配元素相对父元素的偏移
scrollTop() 获取匹配元素相对滚动条顶部的偏移
scrollLeft() 获取匹配元素相对滚动条左侧的偏移
尺寸：
height() 高度
widght() 宽度
innerHeight()
innerWidth()
outerHeght()
outerWidth()
文本操作
复制代码
//jQuery js text() innerText() html() innerHtml() //例子 $('div').text() //获取标签文本 $('div').text('hello world') //设置标签文本内容 $('div').html() //获取标签html文本 $('div').html('<h1>hello world</h1>') //设置html文本内容 复制代码取值操作
复制代码
//jQuery js .val() .value() //例子： $('input').val() //获取值 $('input').val('hello') //设置值 //例子 S.fn.init [input#ip] $('#ip')[0] <input type="file" id="ip"> $('#ip')[0].files[0] //$('#ip')[0]先转化为原js对象，再用原js对象中files获取文件信息 File {name: "1.png", lastModified: 1600868737120, lastModifiedDate: Wed Sep 23 2020 21:45:37 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 21844, …} $('#ip')[0].files FileList {0: File, length: 1}0: File {name: "1.png", lastModified: 1600868737120, lastModifiedDate: Wed Sep 23 2020 21:45:37 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 21844, …}length: 1__proto__: FileList 复制代码属性操作
//jQuery attr(属性) //获取属性值 attr(属性，属性值) //设置属性值 removeAttr(属性） //删除属性 //对应的js操作方法 setAttribute() getAttribute() removeAttribute() //用于checkbox和radio prop() //获取属性 removeProp() //移除属性//例子 let $pEle=$('#d1') undefined $pEle.attr('username') "hello" $pEle.attr('username','hello world') $pEle.attr('username') "hello world" $pEle.attr('value','11') let $iEle=$('#d2') $iEle.prop('checked') false $iEle.prop('checked') true //attr所指的属性时HTML标签属性，而prop是指DOM对象属性 复制代码注意：对于标签上有的能够看到的属性和自定义属性用attr()方法
对于返回布尔值比如checkbox，radion，option这三个标签是否被选中，用prop方法
文档操作
//js jQuery createElement('p') $('<p>') //创建新标签 appendChild() append() //追加新标签//例子 let $pEle=$('<p>') //创建p标签 undefined $pEle.text('你好 世界 ') S.fn.init [p] $pEle.attr('id','p2') $('#d1').append($pEle) //d1内部尾部追加p标签 S.fn.init [div#d1] $pEle.appendTo($('#d1')) S.fn.init [p#p2, prevObject: S.fn.init(1)] $('#d3').prepend($pEle) //内部头部追加 S.fn.init [div#d3] $pEle.prependTo($('#d3')) S.fn.init [p, prevObject: S.fn.init(1)] $('#d3').after($pEle) //放在id=d3的标签后面 S.fn.init [div#d3] $pEle.insertAfter($('#d3')) S.fn.init [p, prevObject: S.fn.init(1)] $('#d3').before($pEle) //放在id=d3的标签前面 S.fn.init [div#d3] $pEle.insertBefore($('#d3')) S.fn.init [p, prevObject: S.fn.init(1)] $('#d1').remove() //删除标签 S.fn.init [div#d1] $('#p1').empty() //清空标签内容 S.fn.init {} 复制代码事件
事件绑定方式：
复制代码
//第一种 $('#d1').click(functino(){ alert('1'); }) //第二种 语法：.on( events [, selector(选择器） ],function(){})$('#d1').on('click',function(){ alert('1') }) $('#d1').on('click',‘div',function(){ alert('1') }) 复制代码注意：DOM定义的事件可以用 .on()方法来绑定事件，但是jQuery定义的事件就不可以
常用事件有：
click 点击
hover 鼠标悬浮在目标上面
blur 输入域失去焦点
focus 输入域获取焦点（点击input输入框）
change 改变，一般用在选择、勾选框
keyup 释放键盘上的按键时触发
keydown 按下按键时触发
input 用户输入时触发
移除事件：把on改成off，就是移除 .on()绑定的事件
阻止后续事件执行：事件函数中添加 return false; (常用于阻止表单提交等）或者e.preventDefault()
阻止事件冒泡：添加e.stopPropagation()
页面载入
复制代码
//当页面加载完触发： $(function(){ } /* 与js的window.onload的区别 1、window.onload()函数有覆盖现象，必须等待图片资源加载完才能调用 2、$(functino(){}不会出现覆盖，而且只要文档加载完毕就可以调用，不用等待图片资源加载 */ 复制代码事件委托
利用父标签去捕获子标签的事件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>事件委托</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> td{ height: 20px; } </style> </head> <body> <table border="solid"> <thead> <th>增加</th> <th>删除</th> </thead> <tbody> <tr> <td>11</td> <td>22</td> </tr> </tbody> </table> <div id="d1" value="hello"> hello <p value="world">hello world</p> </div> <script> $("table").on("click", ".delete", function () { console.log(this) $(this).parent().remove() }) $("table").on("click", ".add", function () { $(this).parent().clone().insertAfter($('tbody')) }) $('#d1').on('click','p',function () { alert(this) console.log(this) }) </script> </body> </html> 复制代码原创作者：NQ31
作者：IT小尚
链接：https://juejin.cn/post/7038788650796056590