接着上一节的将，这一节从复制节点讲起
复制节点
继续使用之前的例子 如果单击<li>元素后 需要在复制一个<li>元素，可以使用clone()方法完成。全部代码如下
<html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-2.1.1.min.js"></script> </head> <body> <p title="选择你喜欢的水果">你最喜欢的水果?</p> <ul> <li title="苹果">苹果</li> <li title="橘子">橘子</li> <li title="菠萝">菠萝</li> </ul> <script> $("ul li").click(function() { $(this).clone().appendTo("ul"); }) </script> </body> </html>
复制节点后，被复制的新元素并不具备任何行为，如果需要新元素也具有复制功能 可以修改以上代码成为下面的代码
$("ul li").click(function() {
$(this).clone(true).appendTo("ul");
})
在clone()方法中传入了一个true 他的含义是复制元素的同时复制元素中所绑定的事件，因此该元素也同样具有复制功能
替换节点
如果替换某个节点，JQuery提供了相应的方法 即ReplaceWith()和ReplaceAll()。
ReplaceWith()方法的作用是将所有的匹配元素替换成指定的HTML或者DOM元素。
例如将上例中的<p title = "选择你最喜欢的水果">你最喜欢的水果？</p> 替换一下
$("p").replaceWith("<strong>你最喜欢的水果是什么呢</strong>");
也可以使用replaceAll()来实现，该方法于replaceWith()方法的作用相同，只是颠倒了replaceWith()操作
$("p").replaceWith("<strong>你最喜欢的水果是什么呢</strong>");
//下面的代码和上面是一样的
$("<strong>你最喜欢的水果是什么呢</strong>").replaceAll("p");
注意 如果在替换之前 已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失 需要在新元素上重新绑定事件
包裹节点
如果要将某个节点用其他标记包裹起来，可以使用wrap(),该方法对于需要在文档中插入额外的结构化标记非常有用。而且他不会破坏原始文档的语义。
$("strong").wrap("<b>一二</b>")
包裹节点 还有其他两个方法
wrapAll()
该方法用于将所有匹配的元素用一个元素来包裹（匹配的所有元素放在一起被包裹一次），它不同于wrap()方法。wrap()方法是将所有的元素进行单独包裹，就是每个匹配的元素都会被包裹一次。
<p title="选择你喜欢的水果">你最喜欢的水果?</p> <p title="选择你最喜欢的水果">你的最爱</p>
执行一下代码
$("p").wrap("<b></b>");
会变成一下效果
<b><p>你最喜欢的水果</p></b> <b><p>你的最爱</p></b>
而使用wrapAll()呢
$("p").wrapAll("<b></b>");
是这样的效果
<b> <p title="选择你喜欢的水果">你最喜欢的水果?</p> <p title="选择你最喜欢的水果">你的最爱</p> </b>
wrapinner()方法
该方法是将每一个匹配的元素的字内容(包括文本节点)用其他结构化的标记包裹起来
例如
$("p").wrapInner("<b style='color: red;'></b>")
运行后是这样的
<p title="选择你喜欢的水果"><b>你最喜欢的水果?</b></p>
效果
属性操作
1.获取属性和设置属相
在JQuery中使用attr()方法来获取属性 使用removeattr()来删除属性
//获取属性 移除属性
alert($("p").attr("title"));
if ($("p").length > 0) {
$("p").removeAttr("title");
}
alert($("p").attr("title") + "哈哈哈");//undefined哈哈哈哈
//设置属性
$("p").attr("title","我是新的title");
alert($("p").attr("title"));//我是新的title
样式操作
1.获取样式和设置样式
HTML代码如下
<p class="myClass" title="选择你喜欢的水果">你最喜欢的水果?</p>
CSS 样式表
<style> .addStyle { font-weight: bold; color: red; /*斜体*/ font-style: italic; } </style>
给p元素添加样式
//给p元素添加样式
$("p").addClass("addStyle");
效果
移除样式
$("p").removeClass("addStyle");
效果
切换样式
JQuery中有一种方法toggle() 代码如下
$("p").toggle(function() {
代码3
},function() {
代码4
});
toggle()方法此处的作用就是交替之行代码3和代码4两个函数。在这种情况下toggle()方法主要是控制行为上的重复切换
此外JQuery也提供了toggleClass()方法控制样式上的重复切换 如果类名存在久删除它 如果类名不存在就添加它.
对p元素进行操作
$("p").click(function(){
$(this).toggleClass("addStyle");
})
当单击p元素后 会变成这样
<p class="myClass addStyle" title="选择你喜欢的水果">你最喜欢的水果?</p>
在此点击会变成原来的样子
<p class="myClass" title="选择你喜欢的水果">你最喜欢的水果?</p>
就这样不断的切换
判断是否还有某个样式使用方法hasClass("yangshi");