HTML 学习笔记 JQuery（DOM 操作2）

接着上一节的将，这一节从复制节点讲起

复制节点

继续使用之前的例子如果单击<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");