4.JQuery
第一章
1.了解jq
1.jQuery建议使用1.x版本,因为它兼容低版本的浏览器,使用1.x版本的min更好
2.jquery是一个函数库,一个js文件,页面用script标签引入这个js文件就可以使用。
<script type="text/javascript" src="js/jquery-1.12.2.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
3.jQuery:The Write Less, Do More.
2.jq入口函数
1.jQuery的特点:写得少,做的多,效果好,支持链式编程.
2.JavaScript的入口函数
<script type="text/javascript">
// 完整写法
$(document).ready(function(){
......
});
// 简化写法 工作中常用的写法 $(匿名函数)
$(function(){
alert(2)
})
</script>
我们在之前的代码⼀直在使⽤ $(function () {}); 这 段代码进⾏⾸尾包裹,那么为什么必须 要包裹这段代码呢？
为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作,如果在文档没有完全加载之前就运行函数，操作可能失败
| 区别 | window.onload | $(document).ready() |
|---|---|---|
| 执行时间 | 必须等待网页全部加载完毕(包括图片等),然后再执行包裹代码 | 只需要等待⽹⻚中的 DOM结构加载完毕，就 能执⾏包裹的代码 |
| 执行次数 | 只能执⾏⼀次,如果第⼆次,那么第⼀次的执⾏会被覆盖 | 可以执⾏多次,第N次 都不会覆盖上⼀次 |
| 简写方案 | 无 | $(function(){}) |
3.对比js和jq
1.原生js实现隐藏显示
window.onload = function(){
var oBtn = document.getElementById('btn')
var oBox = document.getElementById('box')
oBtn.onclick = function(){
oBox.style.display = 'none'
}
}
2.jQuery实现隐藏显示
#jQuery 中所有选择器都以美元符号开头：$()
$(function(){
// 查找到按钮绑定单击，查找div隐藏
// $(目标)==jq选择器：和css一样的选择器,jq自己新增的选择器
$('#btn').click(function(){
// $('div').hide(500)
// $('div').show(500)
$('div').toggle(500)
})
})
4.多个库间的冲突
jQuery 使用$符号作为 jQuery 的简写,如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办?
使用noConflict() 方法会释放对 $ 标识符的控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<script>
console.log($) //jQuery对象
jQuery.noConflict();
$.noConflict();
console.log($); //undefined
(function ($) {
console.log($) //jQuery对象
})(jQuery)
jQuery(document).ready(function ($) {
console.log($)//jQuery对象
})
JQuery(document)
</script>
</body>
</html>
5.jquery选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class='box'>
<p id='p1'>alex</p>
<ul>
<li class='item1'>张三</li>
<li class='item2'>李四</li>
<li class='item3'>王五</li>
</ul>
</div>
</body>
</html>
1.基础选择器
| 选择器 | 描述 | 返回 | 举例 |
|---|---|---|---|
| #id | 根据给定的 ID 匹配⼀ 个元素 | 单个元素 | $(#p1) |
| .class | 根据给定的类名匹配⼀ 个元素 | 集合元素 | $(.box) |
| element | 根据给定的元素名匹配 ⼀个元素（相当于 tagName ） | 集合元素 | $(ul) |
| * | 匹配所有元素 | 集合元素 |
注意:我们可以采⽤jQuery核⼼⾃带的⼀个属性length来查看返回的元素个数
2.层次选择器
| 选择器 | 描述 | 返 回 | 举例 |
|---|---|---|---|
| ancestor descendant(空格) | 选取相应的后代元素 | 集合元素 | $(div li) |
| parent > child | 选取⼦元素 | 集合元素 | $(.box>ul>li) |
| prev + next | 选取紧接在 prev 元素后⾯的下一个 元素 | 集合元素 | $(.item1+li) |
| prev ~ siblings | 选取 prev 元素之后的所有siblings 元素 | 集合元素 | $(.item~li) |
3.过滤选择器
3.1基础选择器
| 选择器 | 描述 | 返回 | 举例 |
|---|---|---|---|
| :first | 选取第⼀个元素 | 单个元素 | $(“p:first”) |
| :last | 选取最后⼀个元素 | 单个元素 | $(“p:last”) |
| :not(selector) | 去除所有与给定选择器匹配的元素 | 集合元素 | $(“p:not(.intro)”) |
| :even | 索引为偶数(索引从0开始） | 集合元素 | $(“tr:even”) |
| :odd | 索引为奇数(索引从0开始） | 集合元素 | $(“tr:odd”) |
| :eq(index) | 索引等于index 的元素 (index 从0开始） | 单个元素 | $(“ul li:eq(3)”) |
| :gt(index) | 索引⼤于index | 集合元素 | $(“ul li:gt(3)”) |
| :lt(index) | 索引⼩于index | 集合元素 | $(“ul li:lt(3)”) |
3.2内容选择器
| 选择器 | 描述 | 返回 | 举例 |
|---|---|---|---|
| :contains(text) | 查找⽂本中含有 “text” 的元 素 | 集合 元素 | $(‘ul li:contains(张三)’) |
| :empty | 匹配所有不包含⼦元素或者⽂本的空元素 | 集合元素 | $(‘ul li:empty’) 注意:空格也是字符 |
| :has(selector) | 含有选择器所匹配的元素 | 集合元素 | $(“div:has§”) |
| :hidden | 选取所有不可⻅的元素 | 集合元素 | $(“p:hidden”) |
| :visible | 选取所有可⻅的元素 | 集合元素 | $(“table:visible”) |
3.4属性选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| [attribute] | 拥有此属性的元素 | 集合元素 | $("[href]") |
| [attribute=value] | 属性的值为value的元素 | 集合元素 | $("[href=‘default.htm’]") |
| [attribute!=value] | 属性的值 不为 value 的 元素 | 集合元素 | $("[href!=‘default.htm’]") |
| [attribute^=value] | 属性的值 以 value 开始的元 素 | 集合元素 | $("[title^=‘Tom’]") |
3.5 子元素选择器
| 选择器 | 描述 | 返 回 | 举例 |
|---|---|---|---|
| :nth-child(index) | 选取每个⽗元素下的第 index 个⼦元素或者奇偶元素(index 从1开始） | 集合元素 | $(“p:nth-child(2)”) |
| :first-child | 选取每个⽗元素第⼀个⼦元素 | 集合元素 | $(“p:first-child”) |
| :last-child | 选取每个⽗元素最后⼀个⼦元素 | 集合元素 | $(“p:last-child”) |
| :only-child | 如果某个元素是它⽗元素中唯⼀ 的⼦元素,则会被匹配 | 集合元素 | $(“p:only-child”) |
3.6表单选择器
| 选择器 | 描述 | 返回 | 举例 |
|---|---|---|---|
| :enabled | 选取所有可⽤元素 | 集合元素 | $(":enabled") |
| :disable | 选取所有不可⽤元素 | 集合元素 | $(":disabled") |
| :checked | 选取所有被选中元素(复选框,单选框) | 集合元素 | $(":checked") |
| :selected | 选取所有被选中元素(下拉列表) | 集合元素 | $(":selected") |
| 选择器 | 描述 | 返回 | 举例 |
|---|---|---|---|
| :input | 选取所有的 | 集合元素 | $(":input") |
| :text | 选择所有单⾏⽂本框 | 集合元素 | $(":text") |
| :password | 选择所有的密码框 | 集合元素 | $(":password") |
| :radio | 选择所有的单选框 | 集合元素 | $(":radio") |
| :checkout | 选择所有的多选框 | 集合元素 | $(":checkbox") |
| :submit | 选择所有的提交按钮 | 集合元素 | $(":submit") |
| :image | 选择所有的图像按钮 | 集合元素 | $(":image") |
| :reset | 选择所有的重置按钮 | 集合元素 | $(":reset") |
| :button | 选择所有的按钮 | 集合元素 | $(":button") |
3.7 jQuery选择器完善的处理机制
1.如果元素不存在时,jQuery是不会报错的,但是原生的js是会报错的
2.$(#ID) 或者其他选择器获取的永远是对象,即使⽹⻚上没有此元素.使⽤ jQuery 检查某个元素是否存在要不能使⽤
if($('#box')){
//dosomething
}
⽽是根据元素是否有⻓度判断：
if($('#box').length>0 ){ //dosomething }
或者转化为DOM元素来判断
if($('#box')[0]){ //dosomething }
6.jQuery的DOM操作
1.HTMLDOM操作
1.1插入节点
| 方法 | 描述 | 示例 |
|---|---|---|
| append() | 向每个匹配的元素内部追加内容 | $(A).append(B)将B追加到A中 |
| appendTo() | 将所有匹配内部的元素追加到指定元素 | $(B).appendTo(A)将B追加到A中 |
| prepend() | 在被选元素内部的开头插入指定内容 | $(A).prepend(B) 将B插⼊到A前⾯ |
| prependTo() | 在被选元素内部的开头插入HTML元素 | $(B).prependTo(A)将B插⼊到A前⾯ |
| after() | 在每个匹配的元素外部之后插⼊内容 | $(A).after(B) 将B插⼊到A后⾯ |
| insertAfter() | 将所有匹配的元素插⼊到指定元素外部的后⾯ | $(B).insertAfter(A) 将B插⼊到A后 |
| before() | 在每个匹配的元素外部之前插内容 | $(A).before(B) 将B插⼊在A的前⾯ |
| insertBefore() | 将所有匹配的元素插⼊到指定元素外部的前⾯ | $(B).insertBefore(A) 将 B插⼊在A的前⾯ |
1.2删除节点
| 方法 | 描述 | 示例 |
|---|---|---|
| remove | 移除元素,但不保留数据和事件 | $(“p”).remove(".italic"); |
| detach | 如需移除元素,但保留数据和事件 | $(“p”).detach() |
| empty | 删除被选元素的子元素。 | $("#div1").empty(); |
1.3 设置和查询
| 方法 | 描述 | 示例 |
|---|---|---|
| html() | 获取设置html内容 | $("#test2").html(“Hello world!”) |
| text() | 获取设置文本内容 | $("#test1").text(“Hello world!”) |
| val() | 读取或设置表单元素的内容 | $("#test3").val(“RUNOOB”) |
| attr() | 获取设置属性(对于 HTML 元素本身就带有的固有属性) | |
| prop | 获取设置属性(对于 HTML 元素我们自己自定义的 DOM 属性) |
1.4 遍历
祖先
| 方法名 | 描述 | 举例 |
|---|---|---|
| parent() | 获得集合中每个元素的⽗级元素 | $(“span”).parent(); |
| parents() | 获得集合中每个元素的祖先元素 | ( " s p a n " ) . p a r e n t s ( " u l " ) ; < b r > ("span").parents("ul");<br> ("span").parents("ul");<br>(“span”).parentsUntil(“div”); |
后代
| 方法名 | 描述 | 举例 |
|---|---|---|
| children() | 获得匹配元素的⼦元素的集合(⼦元素⾮后代元素） | ( " d i v " ) . c h i l d r e n ( ) ; < b r > ("div").children();<br> ("div").children();<br>(“div”).children(“p.1”); |
| find() | find() 方法返回被选元素的后代元素，一路向下直到最后一个后代 | $(“div”).find(“span”); |
同胞
| 方法名 | 描述 | 举例 |
|---|---|---|
| siblings() | 获得匹配元素前后⾯紧邻的同辈元元素 | $(“h2”).siblings(“p”) |
| next() | 返回被选元素的下一个同胞元素 | $(“h2”).next() |
| nextAll() | 返回被选元素的所有跟随的同胞元素 | $(“h2”).nextAll() |
| nextUntil() | 返回介于两个给定参数之间的所有跟随的同胞元素 | $(“h2”).nextUntil(“h6”) |
| prev() | ||
| prevAll() | ||
| prevUntil() |
过滤
| 方法名 | 描述 | 举例 |
|---|---|---|
| first() | 返回被选元素的首个元素 | $(“div p”).first() |
| last() | 返回被选元素的最后一个元素 | $(“div p”).last() |
| eq() | 返回被选元素中带有指定索引号的元素 | $(“p”).eq(1); |
| filter() | 不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回 | $(“p”).filter(".url"); |
| not() | 返回不匹配标准的所有元素 not() 方法与 filter() 相反 | $(“p”).not(".url"); |
其他
| 方法名 | 描述 | 举例 |
|---|---|---|
| replaceWith(*content,*function(index)) | 将所有匹配的元素替换成指定 的HTML或DOM元素 | $(“p:first”).replaceWith(“Hello world!”) |
| replaceAll(selector) | ⽤匹配的元素替换掉所有 selector匹配到的元素 | $("<span> <b>Hello world! </b></span>").replaceAll("p:last"); |
| wrap() | 把所有匹配的元素⽤其他元素 的结构化标记包裹起来 | $(“p”).wrap(" ") |
| unwrap() | 这个⽅法将移出元素的⽗元素 | $(“p”).wrap(" ") |
| removeAttr() | 删除⽂档中某个元素的特定属 性 | $(“p”).removeAttr(“style”); |
1.5 复制节点
复制节点可以使⽤ clone() ⽅法
$("ul li").click(function(){
$(this).clone().appendTo("ul");
})
但是这样复制的节点，被复制的新元素并不具有任何⾏ 为，如果需要新元素也具有相同的⾏为，那么就需要在 clone() ⽅法中传⼊参数 true
$("ul li").click(function(){
$(this).clone(true).appendTo("ul");
})
2.CSSDOM操作
1.基本操作
| 方法名 | 描述 | 举例 |
|---|---|---|
| css() | 设置或返回样式属性 | |
| addClass() | 添加 class 属性 | $(“body div:first”).addClass(“important blue”); |
| removeClass() | 删除指定的 class 属性 | $(“h1,h2,p”).removeClass(“blue”); |
| toggleClass() | 对被选元素进行添加/删除类的切换操作 | $(“h1,h2,p”).toggleClass(“blue”) |
| hasClass() | 是否含有某个类，返回布尔值 |
2.尺寸
| 方法名 | 描述 | 举例 |
|---|---|---|
| width | 设置或返回元素的宽度 | $("#div1").width() |
| height() | 设置或返回元素的高度 | $("#div1").height() |
| innerWidth() | 返回元素的宽度（包括内边距） | $("#div1").innerWidth() |
| innerWidth() | 返回元素的宽度（包括内边距） | $("#div1").innerWidth() |
| outerWidth() | 返回元素的宽度（包括内边距和边框） | $("#div1").outerWidth() |
| outerHeight() | 返回元素的高度（包括内边距和边框） | $("#div1").outerHeight() |
7.JQuery中的事件
1.常用事件
1.鼠标事件
| 方法名 | 描述 | 举例 |
|---|---|---|
| click | 当单击元素时，发生 click 事件 | $(“p”).click(function(){ alert(“段落被点击了。”); }); |
| dblclick | 当双击元素时，触发 dblclick 事件。 | |
| mouseenter | 当鼠标指针穿过（进入）被选元素时，会发生 mouseenter 事件 | $(“p”).mouseenter(function(){ $(“p”).css(“background-color”,“yellow”); }); |
| mouseleave | 当鼠标指针离开被选元素时，会发生 mouseleave 事件 | $(“p”).mouseleave(function(){ $(“p”).css(“background-color”,“gray”); }); |
| hover() | 规定当鼠标指针悬停在被选元素上时要运行的两个函数 | $(“p”).hover(function(){ $(“p”).css(“background-color”,“yellow”); },function(){ $(“p”).css(“background-color”,“pink”); }) |
2.键盘事件
| 方法名 | 描述 | 举例 |
|---|---|---|
| keypress | 键被按下(eypress 事件不会触发所有的键 （比如 ALT、CTRL、SHIFT、ESC）) keydown() 方法来检查这些键 | $(“input”).keypress(function(){ $(“span”).text(i+=1); }); |
| keydown | 键按下的过程 | $(“input”).keydown(function(){ $(“input”).css(“background-color”,“yellow”); }) |
| keyup | 键被松开 | $(“input”).keyup(function(){ $(“input”).css(“background-color”,“pink”); }) |
表单事件
| 方法名 | 描述 | 举例 |
|---|---|---|
| submit() | 当提交表单时，会发生 submit 事件 | $(“form”).submit(function(){ alert(“提交”); }); |
| change() | 会在元素失去焦点时发生 | $(“input”).change(function(){ alert(“文本已被修改”); }) |
| focus() | 当元素获得焦点时发生 focus 事件 | $(“input”).focus(function(){ $(“span”).css(“display”,“inline”).fadeOut(2000); }); |
| blur() | 当元素失去焦点时发生 blur 事件 | $(“input”).blur(function(){ alert(“输入框失去了焦点”); }); |
文档事件
| 方法名 | 描述 | 举例 |
|---|---|---|
| load() | 当图像全部加载时警报文本 | $(“img”).load(function(){ alert(“图片已载入”); }); |
| resize() | 当调整浏览器窗口大小时 | $(window).resize(function(){ $(‘span’).text(x+=1); }); |
| scroll() | 当用户滚动指定的元素时 | $(“div”).scroll(function(){ $(“span”).text(x+=1); }); |
| unload() | 当离开页面时，显示提示消息 | $(window).unload(function(){ alert(“Goodbye!”); }); |
2.事件冒泡
问题:
假设⽹⻚上有两个元素,其中⼀个嵌套在另⼀个元素⾥⾯,并且都被绑定了 click 事件.同时 元素上也 绑定了 click 事件,这样的话,点击最内层的元素,会触发三次 click 事件.这是因为 JavaScript 的事件冒泡机制。
解决方案:
| 方法名 | 描述 | 举例 |
|---|---|---|
| event.stopPropagation() | 阻止事件冒泡到父元素,阻止任何父事件处理程序被执行 | event.stopPropagation() |
| event.isPropagationStopped() | 检查 event.stopPropagation() 是否被调用 | event.isPropagationStopped() |
3.阻止默认事件
问题:
⽹⻚中有⾃⼰的默认⾏为,例如单击超链接会跳转,单击“提交”按钮后表单会提交,有时需要阻⽌默认⾏为
| 方法名 | 描述 | 举例 |
|---|---|---|
| event.preventDefault() | 阻止元素发生默认的行为 | event.stopPropagation() |
| vent.isDefaultPrevented() | 检查 preventDefault() 是否被调用 | event.isPropagationStopped() |
4.其他事件
| 方法名 | 描述 | 举例 |
|---|---|---|
| event.type | 获取到事件的类型 | event.type |
| event…target() | 获取到触发事件的元素 | event.target.nodeName |
| event.relatedTarget() | mousover 和 mouseout 所发⽣的元素 | |
| event.pageX event.pageY | 获取到光标相对于⻚⾯的 x 坐标和 y 坐标 | event.pageX |
| event.which() | ⿏标单击事件中获取到的 左,中,右键，在键盘事件 中获取键盘的按键 | |
| event.metaKey() | 为键盘事件获取 meta 键(win健)是否按下 | |
| one() | 对于只要触发⼀次，随后要⽴即解除绑定的情况，jQuery 提供了one()⽅法. 当处理函数触发⼀次后,⽴即被删除 | $(“p”).one(“click”,function(){}) |
| on() | 在被选元素及子元素上添加一个或多个事件处理程序(使用 on() 方法添加的事件处理程序适用于当前及未来的元素) | $(“p”).on(“click”,function(){ alert(“段落被点击了。”) |
| off | 移除通过 on() 方法添加的事件处理程序 | $(“p”).off(“click”); |
8.动画
1.隐藏和显示
| 方法名 | 说明 | 举例 |
|---|---|---|
| hide() | 隐藏 HTML元素 | $(“p”).hide(1000); |
| show() | 显示 HTML元素 | $(“p”).show(); |
| toggle() | toggle() 方法来切换 hide() 和 show() 方法 | $(“p”).toggle(); |
2. 淡入淡出
| 方法名 | 说明 | 举例 |
|---|---|---|
| fadeIn() | 淡入 | $("#div1").fadeIn(); |
| fadeOut() | 淡出 | $("#div1").fadeOut(); |
| fadeToggle() | 在 fadeIn() 与 fadeOut() 方法之间进行切换 | $("#div1").fadeToggle() |
| fadeTo() | 允许渐变为给定的不透明度 | $("#div1").fadeTo(“slow”,0.15); |
3.滑动
| 方法名 | 说明 | 举例 |
|---|---|---|
| slideUp() | slideUp() 方法用于向上滑动元素 | $("#panel").slideDown(); |
| slideDown() | slideDown() 方法用于向下滑动元素 | $("#panel").slideUp(); |
| slideToggle() | slideDown() 与 slideUp() 方法之间进行切换 | $("#panel").slideToggle(); |
4.动画
| 方法名 | 说明 | 举例 |
|---|---|---|
| animate() | 创建自定义动画(**注意:**操作所有 CSS 属性必须使用 Camel 标记法书写所有的属性名) | $(“div”).animate({left:‘250px’}); |
| stop() | 停止动画或效果 | $("#panel").stop(); |
5.回调函数
参照菜鸟教程
6.链
参照菜鸟教程
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix