您的位置: 首页  >  IT文章  >  HTML 学习笔记 JQuery（DOM 操作2）

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

分类: IT文章 • 2022-04-04 13:27:46

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>

效果

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

属性操作

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");

效果

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

移除样式

$("p").removeClass("addStyle");

效果

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

切换样式

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");

相关推荐