一、修改元素
和 DOM 相同，可修改元素的 内容、属性、样式 ，仍然注意凡是和修改有关的函数，都一个函数两用。
1. 修改内容
（1）元素开始标签到结束标签之间的原始的 HTML 内容
//DOM 元素.innerHTML //jQuery $元素.html("新内容") //无“新内容”时表示获取元素的内容，有则表示将原内容修改为新内容（一函数两用）
（2）元素开始标签到结束标签之间的纯文本内容
//DOM 元素.textContent //jQuery $元素.text("新内容")
（3）表单元素的值
//DOM 元素.value //jQuery $元素.val("新值")
举例：使用元素内容实现表单验证；
<body> <h1>操作元素的内容和值</h1> <form action=""> 用户名:<input name="uname"> <span></span><br> 密码:<input type="password" name="upwd"> <span></span><br> <input type="submit" value="提交注册信息"> </form> <script src="js/jquery-1.11.3.js"></script> <script> //正确时，使用图片:"<img src='img/ok.png'>" //姓名错误时: "<img src='img/err.png'>用户名必须介于3~9位之间!" //密码错误时: "<img src='img/err.png'>密码必须介于6~8位之间!" //DOM 4步 // 验证用户名 //1. 查找触发事件的元素 // 触发事件的元素是文本框，文本框失去焦点时进行验证 $(":text") //2. 绑定事件处理函数 .blur(function () { var $this = $(this); //3. 查找要修改的元素 //查找当前文本框旁边的span元素 var $span = $this.next(); //4. 修改元素 // 4.1获得当前文本框的内容 var value = $this.val(); // 4.2进行验证 if (value.length >= 3 && value.length <= 9) { // 4.3修改span的内容 $span.html(`<img src='img/ok.png'>`); } else { $span.html(`<img src='img/err.png'>用户名必须介于3~9位之间!`); } }) // 验证密码 // 1.查找触发事件的元素 // 触发事件的为密码框 $(":password") // 2.绑定事件处理函数 .blur(function () { var $this = $(this); // 3.查找需要修改的元素 // 当前密码框跟前的span元素 var $span = $this.next(); // 4.修改元素 // 4.1先获取密码框的内容 var value = $this.val(); // 4.2进行验证 if (value.length >= 6 && value.length <= 8) { $span.html(`<img src='img/ok.png'>`); } else { $span.html(`<img src='img/err.png'>密码必须介于6~8位之间!`); } }) </script> </body>
2. 修改属性
（1）字符串类型的 HTML 标准属性
//DOM/ //旧核心DOM/ 元素.getAttribute("属性名") 元素.setAttribute("属性名","新值") //新HTML DOM 元素.属性名=新值 //jQuery $元素.attr("属性名","新值") $元素.prop("属性名","新值") 举例：点击图片切换下一张； <body> <h1>操作元素的属性</h1> <img src="img/1.jpg" alt="1"> <script src="js/jquery-1.11.3.js"></script> <script> //DOM 4步 // 1. 查找触发事件的元素 // 查找img $("img") // 2. 绑定事件处理函数 .click(function () { // 3. 查找要修改的元素 // 修改img本身 var $this = $(this); // 4. 修改元素 // 4.1取出当前img元素中alt属性值转为整数 var alt = parseInt( $this.attr("alt") ); // 4.2如果属性值<4，就++;否则变回1 if (alt < 4) { alt++; } else { alt = 1; } // 4.3.3将新的alt值拼成图片路径，放入当前img的src属性中 $this.attr({ src: `img/${alt}.jpg`, alt: alt }); }) </script> </body>
（2）bool 类型的 HTML 标准属性
//DOM //HTML DOM 元素.属性名 //jQuery $元素.prop("属性名",新bool值)
（3）自定义扩展属性
//DOM //旧核心DOM: 元素.getAttribute() 元素.setAttribute() //HTML5: 元素.dataset.属性名 //jQuery $元素.attr()
举例：点小图片，切换大图片；
<body> <img src="img/1.jpg" data-click data-target="img/1-l.jpg" class="my-small"> <img src="img/2.jpg" data-click data-target="img/2-l.jpg" class="my-small"> <img src="img/3.jpg" data-click data-target="img/3-l.jpg" class="my-small"> <img src="img/4.jpg" data-click data-target="img/4-l.jpg" class="my-small"> <hr /> <img src="img/1-l.jpg" class="my-big"> <script src="js/jquery-1.11.3.js"></script> <script> //点击小图片，下方my-big中显示大图片 //DOM 4步 // 1. 查找触发事件的元素 // 查找所有带有data-click属性的img元素 $("[data-click]") // 2. 绑定事件处理函数 .click(function () { // 3. 查找要修改的元素 // 修改下方大图 var $big = $(".my-big"); // 4. 修改元素 // 4.1获得当前点击的img的data-click属性值保存的大图片路径 var src = $(this).attr("data-target"); // 4.2将大图路径设置给大图的src属性 $big.attr("src", src); }) </script> </body>
3. 修改样式
//DOM //修改内联样式 元素.style.css属性="新值" //获取完整样式 getComputedStyle(元素) //jQuery //获取css属性值、修改css属性值 $元素.css("css属性","新值") //如果.css()中没有给新值，则.css()底层自动执行getComputedStyle()操作，获取属性值 //如果.css()中给了新值，则.css()底层自动执行.style.css属性，执行修改操作 批量修改一个元素的多个css属性： //DOM 元素.className="class名" //只能整体替换所有class，不便于修改其中某一个class //jQuery $元素.addClass("className") //添加一个class $元素.removeClass("className") //去除一个class $元素.hasClass("className") //判断是否有某个calss $元素.toggleClass("className") //在有或没有一个class之间来回切换
举例：实现双态按钮；
<head lang="en"> <meta charset="UTF-8"> <title></title> <style> .btn { padding: 5px 10px; border-radius: 3px; border: 1px solid #aaa; outline: none; } .up { background: #fff; color: #333; } .down { background: #ddd; color: #fff; } </style> </head> <body> <button class="btn up">双态按钮</button> <script src="js/jquery-1.11.3.js"></script> <script> //双态按钮: 让按钮的class在up和down之间切换 //DOM 4步 //1. 查找触发事件的元素 $(".btn") //2. 绑定事件处理函数 .click(function () { //3. 查找要修改的元素 var $this = $(this); if ($this.hasClass("down")) { $this.removeClass("down") } else { $this.addClass("down") } //$(this).toggleClass("down") //等价于if else //4. 修改元素 }) </script> </body>
二、按节点间关系查找
1. DOM 两种关系，六个属性
（1）父子关系
元素.parentElement //父元素 元素.children //所有直接子元素 元素.firstElementChild //第一个直接子元素 元素.lastElementChild //最后一个直接子元素
（2）兄弟关系
元素.previousElementSibling //前一个兄弟元素 元素.nextElementSibling //后一个兄弟元素 2. jQuery两种关系，八个属性
（1）父子关系
$元素.parent() //父元素 $元素.children() //所有直接子元素 $元素.children("选择器") //只选择符合要求的个别直接子元素 $元素.find("选择器") //选择所有后代中符合要求的元素 $元素.children(":first-child") //第一个直接子元素 $元素.children(":last-child") //最后一个直接子元素
（2）兄弟关系
$元素.prev() //前一个兄弟 $元素.prevAll("选择器") //之前所有兄弟： $元素.next() //后一个兄弟 $元素.nextAll("选择器") //之后所有兄弟 $元素.siblings("选择器") //除当前元素之外，其余所有兄弟元素
案例：标签页效果；
<head> <meta charset="UTF-8"> <style> .tabs { list-style: none; padding: 0 } .tabs a { text-decoration: none; color: #000; padding: 6px 12px; display: inline-block; } .tabs>li { float: left; border-bottom: 1px solid #000; } .tabs>.active { border: 1px solid #000; border-bottom: 0; } </style> </head> <body> <h1>使用属性选择器实现标签页头的切换</h1> <ul class="tabs"> <li class="active"> <a data-toggle="tab" href="#">十元套餐</a> </li> <li> <a data-toggle="tab" href="#">二十元套餐</a> </li> <li> <a data-toggle="tab" href="#">三十元套餐</a> </li> </ul> <script src="js/jquery-1.11.3.js"></script> <script> //DOM 4步 //1. 查找触发事件的元素 // 查找带有data-toggle属性，且属性值为tab的所有标签按钮 $("[data-toggle=tab]") //2. 绑定事件处理函数 .click(function () { //3. 查找要修改的元素 //需要修改的是 a标签的父级元素以及父级的兄弟元素 //4. 修改元素 var $this = $(this); // 4.1先为父级元素添加.active属性 $this.parent().addClass("active"); // 4.2在为父级元素的其他兄弟元素取消.active属性 $this.parent().siblings().removeClass("active"); //4.1和4.2可以合二为一（链式） //$this.parent().addClass("active").siblings().removeClass("active"); }) </script> </body>
效果如图，每点击一个套餐，就会切换到当前套餐下。
