jQuery
jQuery简介
- jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
- 内部封装了js代码 使编程更加简单并且兼容所有的主流浏览器。
- jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Write less, do more.“
jQuery导入方式
本地导入
前往官网jquery.com下载源码之后在HTML文件中导入。
<script src="jQuery.js"></script>
优点在于不会受到网络的影响。
CDN导入
前往CDN网站bootcdn获取链接之后加载使用。
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script>
<!-- 推荐使用3.4.1版本 -->
优点在于不需要提前下载.
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对象 $variable[0]//jQuery对象转成DOM对象 $("#i1").html();//jQuery对象可以使用jQuery的方法 $("#i1")[0].innerHTML;// DOM对象使用DOM的方法
查找标签
$('#d1') // id选择器 $('.c1') // class选择器 $('p') // 标签选择器 $('div.c1') // 查找class含有c1的div标签 $("#d1, .c1, p") // 并列查找 $("x y") // x的所有后代y(子子孙孙) $("x > y") // x的所有儿子y(儿子) $("x + y") // 找到所有紧挨在x后面的y $("x ~ y") // x之后所有的兄弟y
通过变量名来区分指代的是何种对象:
var pEle = ... // 原生js对象 var $pEle = ... // jQuery对象
: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] // 属性不等于
实例:
$('[name]') // 含有name属性 $('[name="tom"]') // 含有name属性且值为tom $('input[name="tom"]') // 含有name属性且值为tom的input标签
表单筛选器
:text // 查找属性值是text的form表单内的标签 :password // 查找属性值是password的form表单内的标签 :file // 查找属性值是file的form表单内的标签 :radio // 查找属性值是radio的form表单内的标签 :checkbox // 查找属性值是checkbox的form表单内的标签 // 注意:checkbox会连同option默认的selected一起找到 :submit // 查找属性值是submit的form表单内的标签 :reset // 查找属性值是reset的form表单内的标签 :button // 查找属性值是button的form表单内的标签
实例:
$(":checkbox") // 找到所有的checkbox
筛选器方法
.next() // 查找当前元素的下一个同级元素 .nextAll() // 查找当前元素的后面的全部同级元素 .nextUntil() // 查找当前元素的后面的直到指定的同级元素 .prev() // 查找当前元素的上一个同级元素 .prevAll() // 查找当前元素的前面的全部同级元素 .prevUntil() // 查找当前元素的前面的直到指定的同级元素 .parent() // 查找当前元素的父辈元素 .parents() // 查找当前元素的所有的父辈元素 .parentsUntil() // 查找当前元素的父辈元素直到指定的父辈元素 .children() // 查找当前元素的儿子元素 .siblings() // 查找当前元素的兄弟元素 .find() // 搜索所有与指定表达式匹配的元素 .filter() // 从结果集中过滤出有指定样式类的 .first() // 获取匹配的第一个元素 .last() // 获取匹配的最后一个元素 .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 .has() // 保留包含特定后代的元素,去掉那些不含有指定后代的元素。 .eq() // 索引值等于指定值的元素
实例:
$("#id").next() $("#id").nextAll() $("#id").nextUntil("#i2") $("div").find("p") $("div").filter(".c1")
js与jQuery查找结果的区别
使用原生js代码批量查找到标签之后 结果是一个数组
需要索引取值之后才可以调用标签的一些方法
使用jQuery代码批量查找到标签之后 结果是一个jQuery对象(像数组)
不需要索引取值 就可以直接调用封装的方法
两者的转换:
var cEle = document.getElementsByTagName('input') // 此时cEle是数组 var cEle1 = $(cEle) // cEle1就是一个jQuery对象 var iEle1 = cEle1[0] // iEle1就是js原生对象
节点操作
样式操作
addClass(); // 添加指定的CSS类名。 removeClass(); // 移除指定的CSS类名。 hasClass(); // 判断样式存不存在 toggleClass(); // 切换CSS类名,如果有就移除,如果没有就添加。 css('属性名','属性值') // 修改样式
实例:
$("p").css("color", "red"); //将所有p标签的字体设置为红色
位置操作
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置 position()// 获取匹配元素相对父元素的偏移 scrollTop()// 获取匹配元素相对滚动条顶部的偏移 scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
实例:

<!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> .c1 { height: 50px; width: 50px; position: fixed; bottom: 15px; right: 15px; background-color: #2b669a; } .hide { display: none; } .c2 { height: 2000px; width: 300px; background-color: red; } </style> </head> <body> <div class="c2"></div> <button id="b1" class="c1 hide">返回顶部</button> <script src="jQuery.js"></script> <script> $(window).scroll(function () { if ($(window).scrollTop() > 100) { $("#b1").removeClass("hide"); }else { $("#b1").addClass("hide"); } }); $("#b1").on("click", function () { $(window).scrollTop(0); }) </script> </body> </html>
文本操作
html()// 取得第一个匹配元素的html内容 html(val)// 设置所有匹配元素的html内容 text()// 取得所有匹配元素的内容 text(val)// 设置所有匹配元素的内容 val()// 取得第一个匹配元素的当前值 val(val)// 设置所有匹配元素的值 val([val1, val2])// 设置多选的checkbox、多选select的值
上述方法括号内不写参数就是获取值 写参数就是设置值。
实例:
/* <input type="checkbox" value="basketball" name="hobby">篮球 <input type="checkbox" value="football" name="hobby">足球 <select multiple id="s1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> */ // 设置复选框是否选中 $("[name='hobby']").val(['basketball', 'football']); $("#s1").val(["1", "2"])
属性操作
用于ID等或自定义属性:
attr(attrName)// 返回第一个匹配元素的属性值 attr(attrName, attrValue)// 为所有匹配元素设置一个属性值 attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值 removeAttr()// 从每一个匹配的元素中删除一个属性
用于checkbox和radio:
prop() // 获取属性 removeProp() // 移除属性
attr全称attribute(属性)
prop全称property(属性)
虽然都是属性,但他们所指的属性并不相同,attr所指的属性是HTML标签属性,而prop所指的是DOM对象属性
attr适用于属性为静态的情况(不经常修改动态变化的)
prop适用于动态变化的情况,尤其是选择类标签。
文档处理
添加到指定元素内部的后面
$(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()// 删除匹配的元素集合中所有的子节点。
克隆元素
$('id').clone() // 仅仅克隆标签及其样式、属性 $('id').clone(true) // clone(true)传递参数true克隆标签还会复制标签绑定的事件
事件
绑定事件的方式
// 方式1 jQuery对象.事件名(function(){}) $('#d1').click(function(){alert(123)}) // 方式2 jQuery对象.on('事件名',function(){}) $('#d1').on('click',function(){alert(123)})
常用事件
click(function(){...}) //当用户点击某个对象时调用的事件句柄。 hover(function(){...}) // 鼠标移到某元素之上 blur(function(){...}) // 元素失去焦点。 focus(function(){...}) // 元素获得焦点。 change(function(){...}) // 域的内容被改变。 keyup(function(){...}) // 某个键盘按键被松开
阻止后续事件执行
方式1:return false(推荐)
方式2:e.preventDefault()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阻止默认事件</title> </head> <body> <form action=""> <button id="b1">点我</button> </form> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script> <script> $("#b1").click(function (e) { alert(123); //return false; e.preventDefault(); }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阻止事件冒泡</title> </head> <body> <div> <p> <span>点我</span> </p> </div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script> <script> $("span").click(function () { alert("span"); return false; // 如果不阻止就会触发三次 }); $("p").click(function () { alert("p"); // return false; // 在此处阻止则触发两次 }); $("div").click(function () { alert("div"); }) </script> </body> </html>
// 原生js文档加载方式 window.onload = function () {} // jQuery文档加载方式01 $(document).ready(function () {}) // jQuery文档加载方式02 $(function(){})
事件委托
事件委托是通过事件冒泡的原理,利用父标签去捕获子标签的事件。
// 将body内部所有的点击事件委托给button按钮执行 $('body').on('click','button',function () { // 创建一个button标签 var btnEle = document.createElement('button') // 设置内部文本 btnEle.innerText = '点我' // 将button标签添加到body内部 $('body').append(btnEle) })
动画效果
// 基本 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])
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库