前端 - jQuery - DOM操作
一、基础语法
<!DOCTYPE html><html lang="zh_hans"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="../jquery/jquery.min.js"></script> </head> <ul> <li>01</li> <li>02</li> <li>03</li> <li>04</li> </ul> <body> <script> //使用包含 CSS 选择器的字符串匹配一组元素 var lis = $("li"); console.log(lis); //动态创建一个元素 var li05 = $("<li>li05</li>"); console.log(li05); </script> </body></html>
二、选择器
<!DOCTYPE html><html lang="zh_hans"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> </head> <ul id="ul"> <li class="li">01</li> <li class="li active">02</li> <li class="li" id="li03">03</li> <li class="li active">04</li> </ul> <div class="d1"> <div class="d2"> <div class="d3"></div> </div> <div class="d4"></div> <div class="d5"></div> <div class="d6"></div> </div> <form action=""> <input type="text" name="username" id="username" /> <input type="hidden" value="h123" /> <input type="radio" value="篮球" /> <input type="checkbox" value="足球" /> <input type="password" name="password" id="password" /> <input type="file" name="" id="" /> <button type="submit">提交</button> </form> <form action=""> <input type="text" disabled /> </form> <select> <option value="1">Flowers</option> <option value="2" selected="selected">Gardens</option> <option value="3">Trees</option> </select> <body> <script> // 1. 基本 //根据ID获取元素 var ul = $("#ul"); console.log(ul); //根据标签名获取元素 var lis = $("li"); console.log(lis); //根据类名获取元素 var lis1 = $(".li"); console.log(lis1); // 2. 层级 //选择指定父元素下的所有指定的子元素（递归） var ds = $(".d1 div"); console.log(ds); //选择指定父元素下的所有指定的子元素 var d2 = $(".d1 > div"); console.log(d2); //选择指定元素后紧接着的指定的兄弟元素 var d = $(".d2 + div"); console.log(d); //选择指定元素后的所有指定的兄弟元素 var dd = $(".d2 ~ div"); console.log(dd); // 3. 基本 //匹配第一个元素 var li01 = $("li:first")[0]; console.log(li01); //匹配索引为偶数的元素 var li2 = $("li:even"); console.log(li2); //匹配索引为奇数的元素 var li3 = $("li:odd"); console.log(li3); //匹配指定索引的元素 var li02 = $("li:eq(1)")[0]; console.log(li02); //匹配大于指定索引的元素 var li4 = $("li:gt(1)"); console.log(li4); //匹配最后一个元素 var li03 = $("li:last")[0]; console.log(li03); //匹配小于指定索引的元素 var li5 = $("li:lt(2)"); console.log(li5); // 4. 内容 //匹配包含给定文本的元素 var l01 = $("li:contains('01')"); console.log(l01[0]); //匹配不包含子元素或者文本的空元素 var ndiv = $("div:empty"); console.log(ndiv); //匹配含有指定元素的元素 var ddiv = $("div:has('div')"); console.log(ddiv); //匹配包含子元素或者文本的元素 var hli = $("li:parent"); console.log(hli); // 5. 可见性 //匹配不可见元素 var hin = $("form input:hidden"); console.log(hin[0]); //匹配可见元素 var vin = $("form input:visible"); console.log(vin); // 6. 属性 //匹配包含指定属性的元素 var ili = $("li[id]"); console.log(ili[0]); //匹配包含指定属性值的元素 var pin = $("form input[type='password']"); console.log(pin[0]); //匹配包含某些属性值的元素 var ali = $("li[class*='active']"); console.log(ali); // 7. 子元素 //匹配第一个子元素 var c1 = $("ul li:first-child"); console.log(c1[0]); //匹配同类型的第一个元素 var c2 = $("ul li:first-of-type"); console.log(c2[0]); //匹配最后一个子元素 var c3 = $("ul li:last-child"); console.log(c3[0]); //匹配同类型的最后一个元素 var c4 = $("ul li:last-of-type"); console.log(c4[0]); //匹配指定的子元素 var c5 = $("ul li:nth-child(2)"); console.log(c5[0]); //匹配指定的子元素，从末尾数起 var c6 = $("ul li:nth-last-child(2)"); console.log(c6[0]); //匹配指定的同类型的子元素 var c7 = $("ul li:nth-of-type(3)"); console.log(c7[0]); //匹配只有一个子元素 var c8 = $("form input:only-child"); console.log(c8[0]); // 8. 表单 //匹配单行文本框 var b1 = $(":text"); console.log(b1); //匹配密码框 var b2 = $(":password"); console.log(b2[0]); //匹配单选按钮 var b3 = $(":radio"); console.log(b3[0]); //匹配复选框 var b4 = $(":checkbox"); console.log(b4[0]); //匹配提交按钮 var b5 = $(":submit"); console.log(b5[0]); //匹配按钮 var b6 = $(":button"); console.log(b6[0]); //匹配文件域 var b7 = $(":file"); console.log(b7[0]); //匹配隐藏元素 var b8 = $("input:hidden"); console.log(b8[0]); // 9.表单对象属性 //匹配可用的input元素 var v1 = $("input:enabled"); console.log(v1); //匹配不可用的input元素 var v2 = $("input:disabled"); console.log(v2[0]); //匹配被选中的元素 var v3 = $("input:checked"); console.log(v3[0]); //匹配被选中的option元素 var v4 = $("select option:selected"); console.log(v4[0]); </script> </body></html>
三、属性
<!DOCTYPE html><html lang="zh_hans"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <style> .active { color: blue; } </style> </head> <body> <ul id="ul01"> <li class="li01">01</li> <li>02</li> <li>03</li> <li>04</li> </ul> </body> <form action=""> <input type="radio" value="篮球" name="" id="" /> </form> <script> // 1. 属性 //获取指定属性值 var ul = $("ul").attr("id"); console.log(ul); //删除属性 var li01 = $("ul li:nth-of-type(1)"); li01.removeAttr("class"); console.log(li01[0]); //设置属性值 var li02 = $("ul li:nth-of-type(2)"); li02.prop({ class: "li02", style: "color: red;", }); console.log(li02[0]); // 2. CSS类 //添加一个类 li01.addClass("active"); //删除一个类 li02.removeClass("li02"); //存在则删除，不存在则添加一个类 var li03 = $("ul li:nth-of-type(3)"); li03.toggleClass("li03"); console.log(li03[0]); // 3. HTML代码/文本/值 //获取文本内容 console.log(li03.html()); //设置文本内容 li02.text("0202"); console.log(li02[0]); //获取value值 var val = $("form input").val(); console.log(val); //设置value值 $("form input").val("足球"); console.log($("form input")[0]); </script></html>
四、文档处理
<!DOCTYPE html><html lang="zh_hans"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> </head> <body> <ul id="u01"> <li>01</li> <li>02</li> <li>03</li> <li>04</li> </ul> <li class="oli">1</li> <li class="oli">2</li> <li class="oli">3</li> <li class="oli">4</li> <li class="o2li">1</li> <li class="o2li">2</li> <li class="o2li">3</li> <li class="o2li">4</li> <div style="color: blue;"> <p>123</p> </div> </body> <script> // 1. 内部插入 //在末尾插入一个子元素 $("ul").append("<li>05</li>"); //将子元素插入到该元素的末尾 $("<li>06</li>").appendTo("ul"); //在起始位置插入一个子元素 $("ul").prepend("<li>00</li>"); //将子元素插入到该元素的起始位置 $("<li>-1</li>").prependTo("ul"); // 2. 外部插入 //在元素后面添加一个元素 $("ul li:last-child").after("<li>001</li>"); //在元素前面添加一个元素 $("ul li:first-child").before("<li>002</li>"); //将元素添加到该元素的后面 $("<li>003</li>").insertAfter("ul li:last-child"); //将元素添加到该元素的前面 $("<li>004</li>").insertBefore("ul li:first-child"); // 3. 包裹 //把一个元素用另一个元素包裹起来 $(".oli").wrap("<ol></ol>"); //移除父元素 $("p").unwrap(); //把所有元素用另一个元素包裹起来 $(".o2li").wrapAll("<ol></ol>"); // 4. 替换 //替换元素 console.log($("ul li").length); $("ul li").replaceWith("<p>hello</p>"); //用新元素把旧元素给替换掉 $("<li>test</li>").replaceAll("ul p"); // 5. 删除 //删除元素 $(".oli:last").remove(); //删除子元素 $("#u01").empty(); // 6. 复制 var lili02 = $(".o2li").clone(); console.log(lili02); </script></html>
五、课程总结
- 今天学习了 jQuery 的基础知识和DOM操作，通过上课认真听讲和认真完成老师布置的作业，使得我对 jQuery的理解和运用更加深入和熟悉。最主要的知识点是明白和掌握了DOM操作的特点以及基本用法。
