## 插入节点 插入节点分为在节点内部插入和作为同级（兄弟）节点插入： ~~~JavaScript //在被选元素内部作为子节点插入到最后 $("#first").append("aaaa"); //$("<b>baidu</b>").appendTo("p");、 //在被选元素内部作为子节点插入到第一位 $("#fruit").prepend("<li>芒果</li>"); //$("<li>西瓜</li>").prependTo("#fruit"); //在被选元素之后作为兄弟节点插入到后面 $("#fruit").after("<a href='#'>baidu</a>"); //$("<a href='#'>baidu</a>").insertAfter("#second"); //在被选元素之前作为兄弟节点插入到前面 $("#fruit").before("<a href='#'>360</a>"); //$("<a href='#'>360</a>").insertBefore("#second"); ~~~ ## 删除节点 删除节点同样分为内部节点清空和选中节点删除 ~~~JavaScript //清空被选元素所有的子节点，返回选中的元素 $("#first").empty(); //eq(index)方法：返回对应索引为index的对象 //用于删除被选元素，返回被删除的元素 $("#fruit li:eq(1)").remove(); //用于删除被选元素，返回被删除的元素 var a = $("#fruit li:eq(1)").detach(); a.appendTo("ul"); ~~~ ## 复制节点和替换节点 注意使用append和prepend等方法时，是直接移动元素！！！ ~~~JavaScript //append，perpend等方法其实是将节点移动到某个地方 $("#fruit li:eq(1)").appendTo("#copy"); //为无序列表中的橘子添加事件监听 //JS中的监听addEventListener("click",function() {}) //jQuery中的监听事件 $("#fruit li:eq(1)").click(function() { alert("hahaha"); }) //clone()方法可以复制节点，并返回被复制的节点。 //传入true可以将选中节点的事件也复制过来 $("#fruit li:eq(1)").clone(true).appendTo("#copy"); //replaceWith()方法可以用于替换元素 $("#fnext").replaceWith("<span>happy,everyday</span>") //$("<span>happy,everyday</span>").replaceAll("#flast") ~~~ ## 包裹节点 包裹节点通常是与wrap有关 ~~~JavaScript //wrap可以将选中的每个节点用标签包裹起来，这个标签通常是开始和闭合标签共同使用，要注意尖括号 $("p").wrap("<div></div>"); //wrapAll会将所有的选中标签用同一个标签包裹起来，有时会产生一些意想不到的情况，尽量少用 $("#first p").wrapAll("<div></div>"); //wrapInner会将选中节点的子节点使用标签包裹起来，这个标签通常也是开始和闭合标签共同使用 $("p").wrapInner("<div></div>"); ~~~ ## 操作元素的属性 使用attr可以用来操作元素的属性 ~~~JavaScript //使用attr方法获取属性值 console.log($("#lastSpan").attr("data-say")); //使用attr方法设置单独一个属性值 $("#lastSpan").attr("data-say","info-name"); //使用attr方法设置多个属性值，传入一个json格式的数据 $("#lastSpan").attr({"style":"color:red;background-color:yellow","data-say":"info"}); //删除属性removeAttr $("#lastSpan").removeAttr("style"); ~~~ ## 操作元素的样式 使用attr和class相关的方法来操作元素的样式 ~~~JavaScript //使用attr来修改class属性和style属性，以达到修改样式的效果 $("#first").attr("class","red"); //$("#first").attr("class","size red"); //addClass用于追加类名 $("#first").addClass("size"); //removeClass删除全部或者指定的类名 $("#first").removeClass("red"); //toggleClass实现类名的切换，存在则删除，不存在则添加 $("#first").toggleClass('size'); //hasClass判断选中的元素中是否存在类名 $("#first").hasClass('size'); //css():可以直接用于获取和设置匹配元素的样式 console.log($("#second").css("background-color")); $("#second").css("background-color","red"); $("#second").css({"background-color":"red","font-size":30}); ~~~