企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
[TOC] **jQuery对象** VS **DOM对象** ![](https://img.kancloud.cn/42/0f/420f18a5b63e4f2e0a1e93158ceec88d_1270x397.png) ![](https://img.kancloud.cn/f2/a7/f2a7282f91c5863e40bc9b2c1cd61fab_722x173.png) * [ ] 在页面中导入jQuery的库 ``` <script src="js/jquery-3.6.0.min.js"></script> ``` [https://code.jquery.com/jquery-3.7.0.min.js](https://code.jquery.com/jquery-3.7.0.min.js) * [ ] 通过**指定对象**的**事件响应**来控制网页元素(对元素进行**查改增删**) # 案例1:获得网页元素 ![](https://img.kancloud.cn/2b/13/2b133865d496f5a16c350745adbfb2a0_484x223.png) ## 知识点1:jQuery筛选器 ``` $("#id") $(".class") $("selector") ``` ![](https://img.kancloud.cn/91/d9/91d9e5433d9168fcfa9c49299fe2a261_451x220.png) ## 知识点2:jQuery索引器 ``` $("selector").eq(index) 或 $("selector").get(index) 或 $("selector")[index] ``` ![](https://img.kancloud.cn/8d/19/8d19a94c490586601f2c8e318cc10e8b_547x223.png) ## 知识点3:jQuery对象和DOM对象互转 | 分类 | jQuery对象 | DOM对象 | | --- | --- | --- | | 获取 | j = $("selector") | d = document.querySelector("selector") | | 索引 | j.eq(index) | d[index] | | 互转 | $(d) | j.get(index) 或 j[index] | # 案例2:事件响应 ![](https://img.kancloud.cn/30/e3/30e3d816b980e0ffdf31e5a47878e2ce_477x444.gif) ## 知识点1:jQuery事件 ``` $("selector").事件名(function(){}) ``` * [ ] click * [ ] dblclick * [ ] mouseover * [ ] mouseout * [ ] keypress * [ ] change * [ ] blur * [ ] focus ## 知识点2:链式编程 ``` $(":text").blur(function(){ console.log("文本框失去了焦点"); }).change(function(){ console.log("文本框值被改变,并且失去了焦点"); }).click(function(){ console.log("点击了文本框"); }).mouseover(function(){ console.log("鼠标移入了文本框"); }).mouseout(function(){ console.log("鼠标离开了文本框"); }) ``` # 案例3:页面加载事件 ![](https://img.kancloud.cn/e5/0b/e50b208c6d85889a54cc031536af88c3_711x432.png) * [ ] 事件onload和ready的区别 > onload只能使用一次,ready可以多次 > onload是页面内容加载完毕,ready是文档结构准备完毕 # 案例4:事件绑定 ![](https://img.kancloud.cn/88/71/8871d9c2d25a90337b75880031cfeddd_357x318.gif) # 案例5:查改元素文本 * [ ] 将"文本"修改为"ok" * [ ] 将"文本1"修改为"okk" * [ ] 将"文本2"修改为"okkk" ![](https://img.kancloud.cn/23/0a/230a0a3b2658ffc2f1ac18cc49736f9f_424x121.png) | 方法 | jQuery对象 | DOM对象 | | --- | --- | --- | | 获取html/text | j.html() 或 j.text() | d.innerHTML 或 d.innerText| | 修改html/text | j.html(val) 或 j.text(val) | d.innerHTML=val 或 d.innerText=val| # 案例6:查改元素属性 ![](https://img.kancloud.cn/ab/52/ab52560a774de83e7e0c4186f37fd2d3_372x208.gif) ## 知识点1:jQuery方法 | 方法 | jQuery对象 | DOM对象 | | --- | --- | --- | | 获取属性值 | j.attr(name) | d.getAttribute(name) | | 增加/修改属性值 | j.attr(name,val) | d.setAttribute(name,val) | | 删除属性值 | j.removeAttr(name) | d.removeAttribute(name) | ## 试一试:计算器 | 方法 | jQuery对象 | DOM对象 | | --- | --- | --- | | 获取值 | j.val() | d.value| | 修改值 | j.val(newval) | d.value=newval| ![](https://img.kancloud.cn/c6/fa/c6fac75b605a0977ec7e78f6ad785466_346x112.gif) ## 学一学:复选联动 ![](https://img.kancloud.cn/a6/f6/a6f6a0acc45ce985378ff4dcea7cc1f5_302x168.gif) ``` $("selector").is(":checked"); //是否具备checked伪类 $("selector").prop("checked",false); ``` # 案例7:查改CSS样式 ## 知识点:jQuery方法 | 方法 | jQuery对象 | DOM对象 | | --- | --- | --- | | 增加CSS类 | j.addClass(classname) | / | | 移除CSS类 | j.removeClass(classname) | / | | 获取/增加样式 | j.css(name) 或j.css(name,val) 或j.css({CSS样式表}) |/| ## 改一改:开关灯颜色变化 ![](https://img.kancloud.cn/ab/52/ab52560a774de83e7e0c4186f37fd2d3_372x208.gif) ## 试一试:单选切换 ![](https://img.kancloud.cn/c5/44/c5442c384bd8d7efed30c8ffe6817efa_340x168.gif) # 案例8:其他筛选器 * [ ] 为所有的th添加"表头"字样 * [ ] 为表格添加隔行变色 * [ ] 为所有空的td添加"/" ![](https://img.kancloud.cn/19/f3/19f35ec60a7d5955dbdb39143b4f0b46_265x176.png) ## 知识点1:索引 ``` $("selector") .index(this); //返回触发事件的事件源索引 $("selector:eq("+index+")") $("selector:lt("+index+")") $("selector:gt("+index+")") $("selector:frist") $("selector:last") $("selector:odd") $("selector:even") ``` ## 知识点2:过滤 ``` $("selector:disabled") $("selector:empty") $("selector:表单type") ``` ## 知识点3:结构 ``` next(); //当前元素之后的紧邻着的第一个兄弟元素(下一个) nextAll();//当前元素之后的所有兄弟元素 prev();//当前元素之前的紧邻着的兄弟元素(上一个) prevAll();//当前元素之前的所有兄弟元素 siblings();//当前元素的所有兄弟元素(不包括当前兄弟) children();当前元素之前的所有孩子 ``` ![](https://img.kancloud.cn/ba/45/ba459bd1b99375fddfd8f51d0f152408_389x273.gif) ## 试一试:滑块 * [ ] 当前滑块是红色 * [ ] 之前的滑块是黄色 * [ ] 后面的滑块是灰色 ![](https://img.kancloud.cn/54/d4/54d46014faa86356c2ef4e4e6eae5804_338x116.gif) # 案例9:元素增删-多文件上传 * [ ] append * [ ] prepend * [ ] after * [ ] before * [ ] remove ![](https://img.kancloud.cn/af/27/af2744f46f954e1d5b761ebcf86bb401_389x273.gif)