jQuery02(达)_IT分享知识网

大家好，欢迎来到IT知识分享网。

jQuery02(达)

文章目录

jQuery02(达)

DOM的脑图已经整理完毕, 可以到 FTP/DOM 中下载:DOM&BOM_ALL.zip

复习

jQuery: 是利用 JS 和 DOM 基础知识点, 封装的一套 JavaScript 框架

在早年间, 具有统治性的地位, 大多数项目都是用JQuery 制作的
虽然大趋势是vue开发为主, 但是非1线城市和旧项目的维护, 政府项目…
jQuery 很简单, 因为作者的理念: write less, do more: 写的少做的多!

写法格式: $(选择器).操作()

选择DOM加载完毕的时机: 如果脚本script 书写在html顶部的位置, 页面代码还没有生成, 是无法直接操作DOM的, 需要监听DOM加载完毕的时机
```
$(document).ready(function(){ 
      // DOM 加载完毕.... }) // 简化: $(function(){ 
      }) 
```
变量声明: 用于保存 jq对象的变量, 应该用 $ 开头, 非强制但是强烈推荐

各种选择器:

css选择器

$('p') 所有p标签 $('.danger') 所有 class='danger' 标签 $('#box') id='box' 的标签 $('ul>li') 所有 ul下的子元素的li 标签 ...

JQ提供的选择器: css选择器有时候过于复杂, 所有JQ提供了一些简化

$(':checkbox') 选择 type='checkbox' 的元素, : 专属 input 标签 $(':text') 序号: 此序号 非 css 的 nth-child, 相对于 DOM 中的元素结构 $('li:eq(0)') eq等于 eq(0) 相对的是 查询出来的所有li中 序号0的 $('li:gt(0)') gt大于 $('li:lt(0)') lt小于 // 此处的奇数偶数 针对的是 查询出来的元素 的序号的奇数偶数 奇数 odd $('li:odd') 偶数 even $('li:even')

事件
事件添加采用的是 addEventListener 作为底层, 是一个事件列表, 新增事件不会覆盖旧事件
- click: 点击
- dblclick: 双击
- mouseEnter: 鼠标进入
- mouseLeave: 鼠标离开
- hover: 参数1: 鼠标进入; 参数2: 鼠标离开
- change: 变更 – 勾选框
- focus: 获取焦点 – 输入框
- blur: 失去焦点
样式
- css
  - 读取:css(属性名)
  - 设置:css(属性名, 值)
- class
  - 添加样式: addClass()
  - 删除样式: removeClass
  - 切换样式: toggleClass
  - 判断是否存在: hasClass
属性
- prop: 用于操作系统提供的标准属性
  - 读取: prop(属性名)
  - 设置: prop(属性名, 值)
- attr: 用于操作自定义属性

包含关系选择器

contains: 文本中包含xxx
has: 子元素中包含
not: 不包含

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div> <h1>包含关系选择器</h1> <button>提交订单</button> <button>Submit注册信息</button> <button>马上提交</button> <button>清空重填</button> <hr /> <div class="alert"></div> <hr /> <div class="alert"> <span class="close">x</span> </div> </div> <script src="./vendor/jquery-3.6.0.min.js"></script> <script> // 选取 双标签内容中 含有 '提交' 字样的元素, 变为绿色按钮 // contains: 包含,含有 $("button:contains(提交)").css("background-color", "green") // 选中包含 .close 样式的 .alert 元素, 修改其样式 // has: 有, 包含 $(".alert:has(.close)").css({ 
      backgroundColor: "yellow", padding: "5px", borderRadius: "3px", textAlign: "right", }) // 选择 .alert 中, 没有 .close 样式的 // not: 没有 $(".alert:not(:has(.close))").css({ 
      "background-color": "green", height: "30px", }) // 空 empty, 代表没有子元素 // 选择 .alert中 是空的那个 $(".alert:empty").css("box-shadow", "0 0 3px 3px black") // 选择 .alert 中 不是空的, 把阴影改成 蓝色 $(".alert:not(:empty)").css("box-shadow", "0 0 3px 3px blue") </script> </body> </html>

可见性选择器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <!-- HTML的元素可以隐藏, 隐藏方式有以下几种: - display: none 移除, 不占位 - 表单元素input, 带有type='hidden' 写法, 效果与display:none相同 - opacity: 0; 透明度改全透明, 但是依然占位 - visibility:hidden 也是透明度全透明, 隐藏但是占位 此处的 不可见元素选择器, 只能选中第一种 display:none --> <div id="box"> <div style="display: none"></div> <div style="visibility: hidden">2</div> <div style="opacity: 0">3</div> <input type="hidden" /> </div> <!-- 细节: 优化方式 --> <!-- 让要显示给用户看的内容, 最先加载 --> <!-- 脚本应该放在最后书写 --> <script src="./vendor/jquery-3.6.0.min.js"></script> <script> // 选择器: 选择隐藏的DOM元素 -- 仅限 display:none 的 // 包含 input 的 type='none' console.log($("#box>*:hidden")) // 通配符 * 可以省略: console.log($("#box>:hidden")) </script> </body> </html>

祖先选择器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> div { 
      border: 2px solid gray; padding: 10px; margin: 10px; } </style> </head> <body> <!-- div#d1>div#d2>div#d3>div#d4>div#d5 --> <div id="d1"> d1 <div id="d2"> d2 <div id="d3"> d3 <div id="d4"> d4 <div id="d5">Hello World!</div> </div> </div> </div> </div> <script src="./vendor/jquery-3.6.0.min.js"></script> <script> // parent: 父母 // 选择 id='d5' 的元素的 父元素 // 由于css没有选择父元素的 选择器, 所有JQ提供了专门的方法来实现 $("#d5").parent().css("border-color", "blue") // 所有的祖辈元素 parents $("#d5").parents().css("border-color", "orange") // 选择 在 当前元素 和 指定元素 之间的所有祖辈元素 // Until: 直到...为止 // 不含 #d2 元素 $("#d5").parentsUntil("#d2").css("border-color", "green") </script> </body> </html>

后代选择器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> div { 
      border: 2px solid gray; padding: 10px; margin: 10px; } </style> </head> <body> <div id="d1"> <div>11111</div> <div> <div>2222</div> <div>2222</div> </div> <div>11111</div> </div> <script src="./vendor/jquery-3.6.0.min.js"></script> <script> // 后代选择器: // 选择d1 下方所有的子元素 $("#d1>div").css("border-color", "blue") // 另一种写法: 适合动态获取子元素 $("#d1").children().css("border-color", "red") // 需求: 点击div元素后, 把子元素添加阴影 $("div").click(function () { 
      //选择当前元素的 子元素 $(this).children().css("box-shadow", "0 0 3px 3px black") }) // 后代元素的获取 $("#d1 div").css("border-color", "orange") // 另一种写法: 适合动态获取 find $("#d1").find("div").css("border-color", "purple") </script> </body> </html>

大小图联动效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div> <img src="./img/1.jpg" data-big="./img/1-l.jpg" width="100" alt="" /> <img src="./img/2.jpg" data-big="./img/2-l.jpg" width="100" alt="" /> <img src="./img/3.jpg" data-big="./img/3-l.jpg" width="100" alt="" /> <img src="./img/4.jpg" data-big="./img/4-l.jpg" width="100" alt="" /> </div> <hr /> <div> <img src="./img/1-l.jpg" width="400" alt="" /> </div> <script src="./vendor/jquery-3.6.0.min.js"></script> <script> $("div:eq(0)>img").mouseover(function () { 
      console.log("鼠标经过") // attr: 读取自定义属性 // let big_img = $(this).attr("data-big") // 设置到 大图的 src - 系统属性 // $("div:eq(1)>img").prop("src", big_img) // // 观察发现: 小图 xxx.jpg 大图 xxx-l.jpg // 利用正则替换: 把 .jgp 换成 -l.jpg let src = $(this).prop("src") // .是正则的 通配符, 需要 \. 转义成不同的. console.log("替换前:", src) src = src.replace(/\.jpg/, "-l.jpg") console.log("替换后:", src) $("div:eq(1)>img").prop("src", src) }) </script> </body> </html>

兄弟选择器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <ul> <li>000</li> <li id="a1">111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> <li>666</li> <li>777</li> </ul> <script src="./vendor/jquery-3.6.0.min.js"></script> <script> console.log($("ul>li")) // 等价于 ul>li:eq(4) ; 单独的eq() 方法适合动态获取 let $li4 = $("ul>li").eq(4) // 修改 li4 下方的元素颜色 // next: 下一个 $li4.next().css("color", "blue") // 下面所有的 $li4.nextAll().css("color", "red") // 下方内容, 从当前项 到 指定项中间部分 $li4.nextUntil("li:eq(7)").css("color", "orange") // 上一个元素 // prev: 全称是 previous 上一个 $li4.prev().css("border", "1px solid red") // 上方所有元素 $li4.prevAll().css("border", "1px solid purple") // 上方元素 到 id='a1' 为止 $li4.prevUntil("#a1").css("background-color", "blue") // 同胞: 所有的同级别元素 $li4.siblings().css("color", "red") </script> </body> </html>

标签内容操作

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="box"> <div> <h3>Hello</h3> </div> <div> <h3>World!</h3> </div> <input type="text" value="555" /> </div> <script src="./vendor/jquery-3.6.0.min.js"></script> <script> let $d0 = $("#box").children(":eq(0)") // text(): 就是 DOM 的 innerText, 读取可见的文本 console.log($d0.text()) // html(): 就是 DOM 的 innerHTML, 读取所有html代码 console.log($d0.html()) // 设置: 会覆盖原有内容! // text: 设置的内容 原样输出在页面 $("#box>div:eq(0)").text("<b>我是粗体</b>") // html: 设置的内容 会被 浏览器解析 $("#box>div:eq(1)").html("<b>我是粗体</b>") // 输入框值的操作: val() console.log($("input").val()) // 设置 $("input").val("新的输入内容") </script> </body> </html>

html的使用场景

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <ul id="news"> <!-- 小技巧: 先在html中模拟要生成的 代码 --> <!-- <li><a href="">内容...</a></li> --> </ul> <script src="./vendor/jquery-3.6.0.min.js"></script> <script> let data = [ "1.人民论坛网评|为群众版实事还需一办到底", "2.人民论坛网评|为群众版实事还需一办到底", "3.人民论坛网评|为群众版实事还需一办到底", "4.人民论坛网评|为群众版实事还需一办到底", "5.人民论坛网评|为群众版实事还需一办到底", ] let all = "" //用于拼接所有生成的html代码字符串 data.forEach(item => { 
      let el = `<li><a href="">${ 
       item}</a></li>` // + : 字符串拼接符号 all += el // += 相当于 all = all+el }) console.log(all) // html: 设置的内容可以被 解析 $("ul").html(all) </script> </body> </html>

表格的动态生成

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <!-- 动态生成表格: - 静态: 是指通过写html代码, 然后运行起来做显示 - 动态: 是指代码运行起来之后, 通过JS代码的后续操作, 生成内容 - 结合网络请求, 就可以实现 页面内容的 动态变化 --> <!-- table#emps>(thead>tr>th*4)+tbody --> <table id="emps" border="1"> <thead> <tr> <th>序号</th> <th>阶段</th> <th>讲师</th> <th>课程内容</th> </tr> </thead> <tbody> <!-- <tr> <td></td> <td></td> <td></td> <td></td> </tr> --> </tbody> </table> <script src="./vendor/jquery-3.6.0.min.js"></script> <script> // 假设通过网络请求, 请求到如下的数组: let data = [ { 
      name: "阶段1", teacher: "亮亮", content: "JS,服务器,数据库" }, { 
      name: "阶段2", teacher: "亚楠", content: "CSS,AJAX,HTML" }, { 
      name: "阶段3", teacher: "小新", content: "JS,DOM,JQUERY,VUE" }, { 
      name: "阶段4", teacher: "铭铭", content: "HTML高级,小程序" }, { 
      name: "阶段5", teacher: "贾", content: "三大框架" }, ] let all = "" data.forEach((item, index) => { 
      // element: 元素 // 模板字符串 允许换行写法 let el = `<tr> <td>${ 
       index + 1}</td> <td>${ 
       item.name}</td> <td>${ 
       item.teacher}</td> <td>${ 
       item.content}</td> </tr>` all += el }) // document.getElementsByTagName('tbody')[0].innerHTML = all $("tbody").html(all) </script> </body> </html>

动态变色

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <ul> <li>00</li> <li>11</li> <li>22</li> <li>33</li> </ul> <script src="./vendor/jquery-3.6.0.min.js"></script> <script> $("li").click(function (e) { 
      //被点击元素的 下方的元素 //静态写法: 代码无需运行, 就能明确知道要写什么 // $("用户点击元素的+li") // //$(this): 这个值是用户点击之后才能得到的 -- 动态的值 $(this).next().css("color", "red") // }) </script> </body> </html>

添加元素

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <ul> <li>00</li> <li>11</li> </ul> <button>添加新内容</button> <script src="./vendor/jquery-3.6.0.min.js"></script> <script> // append: 添加 $("button").click(function (e) { 
      // shift+del: 删除整行 // append: 在子元素中的结尾添加新元素 // $("ul").append("<li>新内容</li>") // 参数接受 多参数 或 数组类型 : 灵活应用了 函数重载机制 // $("ul").append("11<br>", "22<br>", "33<br>") let arr = ["11<br>", "22<br>", "33<br>"] $("ul").append(arr) // prepend: 子元素的开头添加 $("ul").prepend(arr) }) </script> </body> </html>

添加元素

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <!-- 添加兄弟级别的元素 --> <ul> <li>00</li> <li>11</li> <li>22</li> </ul> <script src="./vendor/jquery-3.6.0.min.js"></script> <script> // 在 11 的下面添加元素 // after: 在...后面 $("li:eq(1)").after("<li>新元素</li>") // 允许多参数, 数组参数 $("li:eq(1)").after("aa<br>", "bb<br>") // 数组 $("li:eq(1)").after(["aa<br>", "bb<br>"]) // before: 在...之前 // 添加操作的底层使用的 innerHTML 的方式, 内容可以被解析 $("li:eq(1)").before("<li></li>") // 同样支持 多参数, 数组. </script> </body> </html>

删除元素

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <ul style="border: 1px solid red"> <li>00</li> <li>11</li> <li>22</li> <li>33</li> </ul> <button>删除</button> <button>清空</button> <script src="./vendor/jquery-3.6.0.min.js"></script> <script> $("button:eq(0)").click(function (e) { 
      //删除ul中的最后一个元素 // last: 最后一个 // remove(): 删除元素 $("ul>li").last().remove() }) $("button:eq(1)").click(function (e) { 
      // 阻止事件冒泡 e.stopPropagation() //empty: 清空 $("ul").empty() }) </script> </body> </html>

输入框相关

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <input type="text" /> <button>查询商品</button> <script src="./vendor/jquery-3.6.0.min.js"></script> <script> // 实时监听输入框内容变化 // 输入框的事件: input事件 // 万能绑定事件的方法: on(事件名, 回调函数) // jq并没有封装所有的事件, 可以利用on来实现 未封装事件的绑定 $("input").on("input", function () { 
      console.log($(this).val()) // 后续: 如果有查询接口, 应该发送网络请求 去查找数据 }) // 点击按钮获取输入框内容 $("button").click(function (e) { 
      console.log("到服务器搜索:", $("input").val()) }) // 键盘的回车 可以触发搜索操作 // 事件名: keyup 按下后弹起时触发 $("input").keyup(function (e) { 
      console.log(e) // keyCode: 键盘上 每个按键的 标识码 // 13 是回车的标识 if (e.keyCode == 13) { 
      console.log("到服务器查询:", $(this).val()) } }) </script> </body> </html>

替换与克隆

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <h2>替换节点</h2> <div id="chosen"> <img src="img/p0.png" /> </div> <hr /> <div id="list"> <img src="img/p3.png" /> <img src="img/p4.png" /> <img src="img/p5.png" /> </div> <script src="./vendor/jquery-3.6.0.min.js"></script> <script> // 点击 id='list' 中的图片, 克隆一份, 替换掉 id='chosen'中的图片 $("#list>img").click(function () { 
      //克隆/复制: 当前被点击的图片 let img_clone = $(this).clone() // 替换 : replaceWith-- 替换为 $("#chosen>img").replaceWith(img_clone) }) </script> </body> </html>

事件冒泡

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <h2>替换节点</h2> <div id="chosen"> <img src="img/p0.png" /> </div> <hr /> <div id="list"> <img src="img/p3.png" /> <img src="img/p4.png" /> <img src="img/p5.png" /> </div> <script src="./vendor/jquery-3.6.0.min.js"></script> <script> // 浏览器清理缓存的方式: ctrl+F5 // 事件冒泡机制: 当点击子元素之后, 事件会被父元素感知到 // 不需要为每个图片添加事件, 只需要给父元素添加即可 $("#list").click(function (e) { 
      // console.log(e.target) // e.target是原生的DOM对象, 无法使用JQ的方法, // 除非 封装成JQ的对象 $(DOM对象) // $("#chosen>img").replaceWith($(e.target).clone()) }) // on: 通用绑定事件方式 // on(事件名, 选择器, 触发的事件) // 选择器参数: 可以指定哪个子元素才能触发事件 $("#list").on("click", "img:gt(0)", function (e) { 
      // on的参数2: 专为冒泡机制而生 // 添加参数2之后, 事件触发时的 this 指向的是 参数2 选择的元素 console.log($(this)) $("#chosen>img").replaceWith($(this).clone()) }) </script> </body> </html>

作业: 待办事项

输入框中开始没有数据, 确定按钮应该是 disabled 状态
当输入框中输入内容时, 需要判断实时切换输入框的 disabled 状态
- 例如: 有内容, 则按钮可用, 没有内容: 按钮不可用
当点击确定按钮之后, 获取输入框的值, 填入到列表的最下方
- 并且要清空输入框的值, 确定按钮变为不可用
在输入框中按回车, 如果输入框有值, 则填入到列表最下方, 并且清空输入框, 按钮不可用
- 如果输入框没有值, 即空的时候, 则回车无效
删除按钮点击后, 能够删除对应的行
待办事项:刚开始是隐藏状态display:none, 当删除了所有项目后, 则暂无待办事项变为可见状态.
- 当添加了新事项之后, 暂无待办事项 隐藏

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/142811.html

jQuery02(达)

jQuery02(达)

文章目录

复习

包含关系选择器

可见性选择器

祖先选择器

后代选择器

大小图联动效果

兄弟选择器

标签内容操作

html的使用场景

表格的动态生成

动态变色

添加元素

添加元素

删除元素

输入框相关

替换与克隆

事件冒泡

作业: 待办事项

相关推荐

发表回复