jQuery操纵DOM
一、基本操作
1.html() - 类似于原生DOM的innerHTML属性
*获取 - html();
*设置 - html("html代码");
2.val() - 类似于原生DOM的value属性
*获取 - val();
*设置 - val(value);
3.text() - 类似于原生DOM的textContent属性
*获取 - text();
*设置 - text("文本内容");
4.attr() - 获取或设置指定元素的属性
*获取 - attr(attrName) - 类似于getAttribute()
*设置 - attr(attrName,attrValue) - 类似于setAttribute()
*removeAttr(attrName) - 类似于removeAttribute()
示例：
1 <ul id="city"> 2 <li id="bj" name="beijing">北京</li> 3 <li id="tj" name="tianjin">天津</li> 4 <li id="nj" name="nanjing">南京</li> 5 </ul> 6 <input type="text" id="user" value="请输入你的用户名">
1 //html() 2 $("#bj").html("纽约");//则北京被替换为纽约 3 $("#city").html("<li>中国</li>");//ul下的所有元素被删除替换 4 5 //val() 6 console.log($("#user").val());//获得value值 7 $("#user").val("请输入密码");//设置value值 8 9 //text() 10 console.log($("#bj").text());//获得节点中的文本 11 $("#bj").text("长春");//修改节点中的文本 12 console.log($("#city").text());//只获得标签中的文本节点内容 13 $("#city").text("你好");//等价于$("#city").html("你好"); 14 15 //attr() 16 console.log($("#bj").attr("name"));//beijing 17 $("#bj").attr("name","bj");//修改name属性为bj 18 $("#tj").attr({name:"tj","data-i":2});//批量修改|设置属性 (data-i 不带引号SyntaxError: Unexpected token -) 19 $("#tj").removeAttr("name");//删除name属性
二、样式操作
1.attr("class",classValue) - 设置样式|属性
2.addClass("className") - 追加样式
3.removeClass() - 删除样式
*不传参 - 删除所有样式
*传参 - 删除指定样式
4.toggleClass() - 切换样式
*只接受一个参数
*在没有样式与指定样式之间切换
5.hasClass() - 判断样式
*判断指定元素是否包含指定样式
6.css() - 操作样式
*设置
*css(name,value)
*css(options)
*options - 选项
{
name:value,
name2:value2,
...
}
*获取 - css(name);
示例：
1 <style> 2 div { 3 width : 100px; 4 height : 100px; 5 border : solid 1px black; 6 background : pink; 7 float : left; 8 margin-right : 10px; 9 } 10 .one { 11 width : 50px; 12 height : 50px; 13 background : yellow; 14 } 15 .two { 16 width : 150px; 17 height : 150px; 18 background : green; 19 } 20 </style> 21 </head> 22 23 <body> 24 <button id="btn1">attr()</button> 25 <button id="btn2">addClass()</button> 26 <button id="btn3">removeClass()</button> 27 <button id="btn4">toggleClass()</button> 28 <button id="btn5">hasClass()</button> 29 <button id="btn6">css()</button> 30 <br></br> 31 <div id="d1"></div> 32 <div id="d2"></div>
1 //attr() 2 $("#d1").attr("class","one");//设置class属性 3 4 //addClass() 5 $("#d1").addClass("two");//追加|叠加 6 7 //removeClass() 8 $("#d1").removeClass();//删除所有 相当于 .class="" 9 $("#d1").removeClass("two");//有two则删除 10 11 //toggleClass() 12 $("#d1").toggleClass("one");//有则删除，无则添加 13 14 //hasClass() 15 console.log($("#d1").hasClass("one"));//返回布尔值 16 17 //css() 18 $("#d2").css({ 19 "background" : "red",//如果设置为空则为删除当前属性 20 "width" : 50, 21 "height" : 50 22 }); 23 console.log($("#d2").css("float"));//获取当前节点的属性值(所有)
三、遍历节点
1.parent() - 获取指定节点的父节点
2.children() - 获取指定节点的所有子节点
3.next() - 获取指定节点的下一个兄弟节点
4.prev() - 获取指定节点的上一个兄弟节点
5.siblings() - 获取指定节点的所有兄弟节点
6.find(expr) - 在指定节点中查找指定内容
*注意 - 查找指定节点的后代节点
示例：
1 li id="bj" name="beijing">北京 2 <ul> 3 <li>海淀区</li> 4 <li>朝阳区</li> 5 <li>大兴区</li> 6 </ul> 7 </li> 8 <li id="tj" name="tianjin">天津</li> 9 <li id="nj" name="nanjing">南京</li> 10 <li id="sh" name="shanghai">上海</li> 11 <li id="cq" name="chongqing">重庆</li> 12 </ul>
1 // 1. 获取北京节点的父节点 2 console.log($("#bj").parent().attr("id")); 3 4 // 2. 获取id为city节点的所有子节点的个数 5 console.log($("#city").children().length); 6 7 // 3. 获取南京节点的上一个兄弟节点和下一个兄弟节点 8 console.log($("#nj").prev().attr("name")); 9 console.log($("#nj").next().attr("name")); 10 11 // 4. 获取南京节点的所有兄弟节点的个数 12 console.log($("#nj").siblings().length); 13 console.log($("#nj~li").length); 14 15 // 5. 获取id为city节点下所有li元素的个数(后代节点) 16 console.log($("#city").find("li").length);
四、创建节点
1.元素节点 - $(HTML代码)
2.文本节点 - text()
3.属性节点 - attr()
4.jQuery - $(HTML代码)
示例：
1 <ul id="city"> 2 <li id="bj" name="beijing">北京</li> 3 <li id="tj" name="tianjin">天津</li> 4 <li id="nj" name="nanjing">南京</li> 5 <li id="sh" name="shanghai">上海</li> 6 </ul>
1 // 为id为city节点增加<li id="cq" name="chongqing">重庆</li> 2 // 1. 创建<li id="cq" name="chongqing">重庆</li> 3 // a. 创建<li></li> 4 var $li = $("<li></li>"); 5 // b. 设置属性 6 $li.attr("id","cq").attr("name","chongqing"); 7 // c. 创建文本节点 8 // d. 添加文本节点 9 $li.text("重庆"); 10 //var $li = $("<li id='cq' name='chongqing'>重庆</li>"); 11 // 2. 获取id为city节点 12 var $city = $("#city"); 13 // 3. 添加append - appendChild 14 $city.append($li); 15 16 //直接添加 17 $("#city").append($("<li id='cq' name='chongqing'>重庆</li>"));
五、删除节点
1.remove() - 删除自身及后代节点
2.empty() - (清空)删除后代节点,但保留自身节点
示例：
1 // 1. 删除北京节点 2 $("#bj").remove(); 3 // 2. 删除天津节点 4 $("#tj").empty();//保留自身节点，但节点中的文本等所有都删除
六、插入节点
1.内部插入
*append()
*prepend
*appendTo()
*prependTo()
2.外部插入
*before
*after
*insertBefore
*insertAfter
示例：
1 <ul id="city"> 2 <li>北京</li> 3 <li id="tj">天津</li> 4 <li>南京</li> 5 </ul> 6 <ul id="game"> 7 <li>反恐</li> 8 <li id="ms">魔兽</li> 9 <li>星际</li> 10 </ul>
1 //---内部插入 插入节点的内部，成为其子节点 2 // 操作天津节点和魔兽节点 3 // append - append后面的节点被添加到append前面的节点的后面 4 $("#tj").append($("#ms"));//01append.png 5 6 // prepend - prepend后面的节点被添加到prepend前面的节点的前面 7 $("#tj").prepend($("#ms"));//02prepend.png 8 9 // appendTo - appendTo前面的节点被添加到appendTo后面的节点的后面 10 $("#tj").appendTo($("#ms")); 11 12 // prependTo - prependTo前面的节点被添加到prependTo后面的节点的前面 13 $("#tj").prependTo($("#ms")); 14 15 //---外部插入 成为兄弟节点 16 // 操作天津节点和魔兽节点 17 // before - before后面的节点被添加到before前面的节点的前面 18 $("#tj").before($("#ms"));//03before.png 19 20 // after - after后面的节点被添加到after前面的节点的后面 21 $("#tj").after($("#ms"));//04after.png 22 23 // insertBefore 24 $("#tj").insertBefore($("#ms")); 25 26 // insertAfter 27 $("#tj").insertAfter($("#ms"));
七、替换节点
1.repalceWith
2.replaceAll - 就是颠倒了的repalceWith
示例：
1 <button>按钮一</button> 2 <button>按钮二</button> 3 <button>按钮三</button> 4 <p>这是段落.</p>
1 // repalceWith - 前面的元素是被替换的,后面的元素时替换的 2 $("button").replaceWith($("<p>这也是段落.</p>")); 3 // replaceAll - 就是颠倒了的repalceWith 4 $("<button>按钮</button>").replaceAll($("p"));
八、复制节点
1.JQuery - clone(boolean)
*boolean参数 - 表示是否复制事件
2.DOM - cloneNode(boolean)
*boolean参数 - 表示是否复制后代节点
示例：
1 <button>点我</button> 2 <p>这是一个段落.</p>
1 /jQuery 2 $("button").click(function(){ 3 alert("xxx"); 4 }); 5 // 复制button按钮,将其追加到p标签中 6 $("button").clone(true).appendTo($("p")); 7 8 // DOM 9 var btn = document.getElementsByTagName("button")[0]; 10 var copy = btn.cloneNode(true); 11 var p = document.getElementsByTagName("p")[0]; 12 p.appendChild(copy);
