jQuery DOM操作

对节点的操作

查找节点

查找节点可以直接利用jQuery选择器来完成,非常便利。

插入节点

jQuery提供了8种插入节点的方法。

序号

方法

描述

实例

1

append()

向每个匹配的元素内部追加内容。

HTML Code: <p>我想说:</p> jQuery Code: $("p").append("<b>你好</b>"); result: <p>我想说:"<b>你好</b></p>

2

appendTo()

将所有匹配的元素追加到指定的元素中。

HTML Code: <p>我想说:</p> jQuery Code: $("<b>你好</b>").appendTo("p"); result: <p>我想说:"<b>你好</b></p>

3

prepend()

向每个匹配的元素内部前置内容。

HTML Code: <p>我想说:</p> jQuery Code: $("p").prepend("<b>你好</b>"); result: <p><b>你好</b>我想说:</p>

4

prependTo()

将所有匹配的元素前置到指定的元素中。

HTML Code: <p>我想说:</p> jQuery Code: $("<b>你好</b>").prependTo("p"); result: <p><b>你好</b>我想说:</p>

5

after()

在每个匹配的元素之后插入内容。

HTML Code: <p>我想说:</p> jQuery Code: $("p").after("<b>你好</b>"); result: <p>我想说:</p><b>你好</b>

6

insertAfter()

将所有匹配的元素插入到指定元素前面。

HTML Code: <p>我想说:</p> jQuery Code: $("<b>你好</b>").insertAfter("p"); result: <p>我想说:</p><b>你好</b>

7

before()

在每个匹配的元素之前插入内容。

HTML Code: <p>我想说:</p> jQuery Code: $("p").before("<b>你好</b>"); result: <b>你好</b><p>我想说:</p>

8

insertBefore()

将所有匹配的元素插入到指定元素前面。

HTML Code: <p>我想说:</p> jQuery Code: $("<b>你好</b>").insertBefore("p"); result: <b>你好</b><p>我想说:</p>

删除节点

jQuery提供了三种删除节点的方法,即remove()、detach()、empty()。

(1)remove()

删除DOM中所有匹配的元素,可以传入参数来筛选要删除的元素。

var $li = $("ul li:eq(1)").remove(); // 获取第2个<li>元素节点后,将它删除
$li.appendTo("ul");                  // 将刚才删除的节点重新添加到<ul>元素中

$("ul li").remove("li[title!=菠萝]");  //将<li>元素中title属性不等于“菠萝”的<li>元素删除

(2)detach()

detach()也是从DOM中去掉所有匹配的元素。

需要注意的是,这个方法不会将匹配的元素从jQuery对象中删除,其所有绑定的事件和附加数据可以保留下来。

如果将来再使用这个元素,相关事件和数据依然存在。

var $li = $("ul li:eq(1)").detach(); // 获取第2个<li>元素节点后,将它删除
$li.appendTo("ul");                  // 重新追加此元素,发现它之前绑定的事件还在。
                                     // 如果使用remove()方法删除元素,那么之前绑定的事件将会失效。

(3)empty()

清空元素中的所有后代节点。

$("ul").empty();

复制节点

可以使用clone()方法来复制节点。如果在clone方法中传人参数true,表示复制元素的同时也复制元素中绑定的事件。

$(this).clone(true).appendTo("body");

替换节点

jQuery提供了replaceWith()和replaceAll()两种方法来替换节点。

replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或DOM元素。

而replaceAll()和replaceWith()作用相同,只是颠倒了操作。

$("p").replaceWith("<strong>你最不喜欢的水果是?</strong>");
("<strong>你最不喜欢的水果是?</strong>").replaceAll("p");

包裹节点

有时候需要把某个节点用其他标签包裹起来,jQuery有三种方法:wrap()、wrapAll()、wrapInner()。

HTML Code:

<strong title="你好">你好</strong>
<strong title="你好">你好</strong>

jQuery Code:

$("strong").wrap("<b></b>");  //用<b>标签把<strong>元素包裹起来
/* 结果是:
<b><strong title="你好">你好</strong></b>
<b><strong title="你好">你好</strong></b>
*/

// wrapAll
$("strong").wrapAll("<b></b>");  //用<b>标签把<strong>元素包裹起来
/* 结果是:
<b>
<strong title="你好">你好</strong>
<strong title="你好">你好</strong>
</b>
*/

// wrapInner
$("strong").wrapInner("<b></b>");  //用<b>标签把<strong>元素包裹起来
/* 结果是:
<strong title="你好"><b>你好</b></strong>
*/

以上操作的范例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
 <!--   引入jQuery -->
 <script src="../scripts/jquery.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
    $(function(){
        
        $("#findNode").click(function(){
            var content = $("#content").val();
            if ("" === $("#content").val()) {
                alert("请输入内容");
                return;
            }
            
            var $ul = $("ul").children();
            for (var i = 0; i < $ul.length; i++) {
                var value = $ul[i].innerHTML;
                if (value === content) {
                    alert("是ul中第" + (i+1) + "个元素");
                    return;
                }
            }
            
            alert("不存在");
            $("#content").val("");
        });
        
        $("#insertNode").click(function(){
            var content = $("#content").val();
            if ("" === content) {
                alert("请输入内容");
                return;
            }
            
            var $li = $("<li>" + content + "</li>");
            var $parent = $("ul");
            $parent.append($li);
            // $parent.prepend($li);
            
            $("#content").val("");
        });
        
        $("#removeNode").click(function(){
            var content = $("#content").val();
            if ("" === content) {
                alert("请输入内容");
                return;
            }
            
            var $ul = $("ul").children();
            for (var i = 0; i < $ul.length; i++) {
                var value = $ul[i].innerHTML;
                if (value === content) {
                    //三种删除方式
                    $("ul li:eq(" + i + ")").remove();
                    //$("ul li:eq(" + i + ")").detach();
                    //$("ul li:eq(" + i + ")").empty();
                    $("#content").val("");
                    return;
                }
            }
            
            alert("不存在");
            $("#content").val("");
        });
        
        $("#copyNode").click(function(){
            var content = $("#content").val();
            if ("" === content) {
                alert("请输入内容");
                return;
            }
            
            var $ul = $("ul").children();
            for (var i = 0; i < $ul.length; i++) {
                var value = $ul[i].innerHTML;
                if (value === content) {
                    //三种删除方式
                    $("ul li:eq(" + i + ")").clone(true).appendTo("ul");
                    $("#content").val("");
                    return;
                }
            }
            
            alert("不存在");
            $("#content").val("");
        });
        
        $("#replaceNode").click(function(){
            var content = $("#content").val();
            if ("" === content) {
                alert("请输入内容");
                return;
            }
            
            var $new_li = $("<li>" + content + "</li>");
            
           $new_li.replaceAll("li");
           //$("li").replaceWith($new_li);
           $("#content").val("");
        });
    });
  //]]>
  </script>
</head>
<body>
    <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
    <ul>
      <li title='苹果'>苹果</li>
      <li title='橘子'>橘子</li>
      <li title='菠萝'>菠萝</li>
    </ul>
    <div>
        <label for="content" style="font: bold;">请先输入内容,再点击想操作的按钮</label>
        <input type='text' id='content' />
        <p></p>
        <input type="button" value="查找节点" id="findNode"/>
        <input type="button" value="插入节点" id="insertNode"/>
        <input type="button" value="删除节点" id="removeNode"/>
        <input type="button" value="复制节点" id="copyNode"/>
        <input type="button" value="替换节点" id="replaceNode"/>
    </div>
    
    
</body>
</html>

属性操作

在jQuery中,用attr()方法来获取和设置元素属性,removeAttr()方法来删除元素属性。

var title = $("p").attr("title");   //获取p节点的title属性值
$("p").removeAttr("title");         //删除p节点的title属性值

$("p").attr("title", "New Content");    //设置p节点的title属性值为New Content
$("p").attr({"title" : "New Content", "name" : "New Name",});    // 一次性设置p节点的多个属性值

样式操作

方法

描述

实例

attr

获取样式和设置样式

$("p").attr("class");           // 获取p元素的class $("p").attr("class","high");    // 设置p元素的class为high

addClass

追加样式

$("p").addClass("another"); //给p元素追加“another”类

removeClass

移除样式

$("p").removeClass();           //移除p元素的所有class

toggleClass

切换样式

$("p").toggleClass("another");  //重置切换类名"another"

hasClass

判断是否有某个样式

$("p").hasClass("another");     //判断p元素是否有"another"类

范例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-9-1</title>
<style type="text/css">
.high{
 font-weight:bold;   /* 粗体字 */
 color : red;        /* 字体颜色设置红色*/
}
.another{
 font-style:italic;
 color:blue;
}
</style>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
  $(function(){
      //获取样式
      $("input:eq(0)").click(function(){
            alert( $("p").attr("class") );
      });
      //设置样式
      $("input:eq(1)").click(function(){
            $("p").attr("class","high");
      });
      //追加样式
      $("input:eq(2)").click(function(){
            $("p").addClass("another");
      });    
      //删除全部样式
      $("input:eq(3)").click(function(){
            $("p").removeClass();
      });  
       //删除指定样式
      $("input:eq(4)").click(function(){
            $("p").removeClass("high");
      });   
      //重复切换样式
      $("input:eq(5)").click(function(){
            $("p").toggleClass("another");
      });  
      //判断元素是否含有某样式
      $("input:eq(6)").click(function(){
            alert( $("p").hasClass("another") )
            alert( $("p").is(".another") )
      });  
  });
  //]]>
  </script>
</head>
<body>
    <input type="button" value="输出class类"/>
    <input type="button" value="设置class类"/>
    <input type="button" value="追加class类"/>
    <input type="button" value="删除全部class类"/>
    <input type="button" value="删除指定class类"/>
    <input type="button" value="重复切换class类"/>
    <input type="button" value="判断元素是否含有某个class类"/>

    <p class="myClass" title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
    <ul>
      <li title='苹果'>苹果</li>
      <li title='橘子'>橘子</li>
      <li title='菠萝'>菠萝</li>
    </ul>
</body>
</html>

设置和获取HTML、文本和值

方法

描述

实例

html()

获取和设置某个元素中的HTML内容

var p_html = $("p").html();             //获取p元素的HTML代码 $("p").html("<strong>Hello</strong>");  //设置p元素的HTML代码

text()

获取和设置某个元素中的文本内容

var p_txt = $("p").text();              //获取p元素的文本内容 $("p").text("Hello");                   //设置p元素的文本内容

val()

获取和设置某个元素中的值

var txt_value = $(this).val();          //获取this元素的值 $(this).text("Hello");                  //设置this元素的值为Hello

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Clive的技术分享

PHP常用魔术方法

方法名称 使用场景 __construct 对象创建完成后第一个被对象自动调用的方法 __destruct 销毁一个类之前执行的一些操作 ...

3334
来自专栏技术之路

详解c++指针的指针和指针的引用

展示一下使用指针的指针和指针的引用修改传递给方法的指针,以便更好的使用它。(这里说的指针的指针不是一个二维数组) 为什么需要使用它们 当我们把一个指针做为参数传...

1836
来自专栏锦小年的博客

python学习笔记2.6-集合(set)

一般来说,python中常用的数据结构是:列表(list)、字典(Dict)、元组(tuple)。但是我们常常还会看到另外一种结构:集合(set)。 个人认...

2047
来自专栏Android Note

Java 8之lambda表达式(三)

923
来自专栏武培轩的专栏

剑指Offer-二维数组中的查找

package Array; /** * 二维数组中的查找 * 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。...

2493
来自专栏编程

Python 迭代器和生成器

来源:田小计划 www.cnblogs.com/wilber2013/p/4652531.html 在Python中,很多对象都是可以通过for语句来直接遍历的...

17910
来自专栏ShaoYL

预处理指令(条件编译)

34611
来自专栏AzMark

Python 学习之正则表达式「下」

re.sub(pattern, repl, string, count, flags=0) 与 re.subn(…) repl 用来替换的字符串,strin...

441
来自专栏海天一树

小朋友学C语言(13):逻辑运算符

逻辑运算符有三种,“&&”(逻辑与)、“||”(逻辑或)和“!”(逻辑非) (一)逻辑与&& “&&”相当于生活中说的“并且”,就是两个条件都同时成立的情况下“...

33714
来自专栏跟着阿笨一起玩NET

C#基础知识之方法重载总结

方法重载是指在同一个类中方法同名,参数不同,调用时根据实参的形式,选择与他匹配的方法执行操作的一种技术。

452

扫码关注云+社区