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 条评论
登录 后参与评论

相关文章

来自专栏Ryan Miao

java变量的加载顺序

学习编程思想 1 package com.test.java.classs; 2 3 /** 4 * Created by Administrato...

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

Winform 实现像菜单一样弹出层

在实际工作中,如果能像菜单一样弹出自定义内容,会方便很多,比如查询时,比如下拉列表显示多列信息时,比如在填写某个信息需要查看一些信息树时。这个时候自定义弹出界面...

471
来自专栏鬼谷君

JavaScript中的CSS属性对照表

854
来自专栏快乐八哥

委托(一个主窗体统计多个从窗体的按钮单击的次数)

  最近在学习金老师的《.NET2.0面向对象编程揭秘》,学到了13章,委托、事件驱动和异步调用。书上有个试一试,要求:利用委托,达到一个主窗体统计多个从窗体...

1818
来自专栏老马寒门IT

03-老马jQuery教程-DOM操作(上)

在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索。目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作...

1980
来自专栏九彩拼盘的叨叨叨

jQuery 写法示例

682
来自专栏从零开始学 Web 前端

从零开始学 Web 之 jQuery(五)操作元素其他属性,为元素绑定事件

如果我们在设置为原来宽高2倍的时候,就要先把获取的宽高转换成数字类型,再乘以2,这样操作比较麻烦,有没有简单的方法呢?

1144
来自专栏前端布道

CSS选择器详解

最近在做一些面试的工作,我经常会问的一个问题就是:CSS中有哪些选择器。我往往得到的答案就是id选择器啊、class选择器啊,再追问下去就没了,这让我很是意外!...

3004
来自专栏从零开始学 Web 前端

从零开始学 Web 之 jQuery(四)元素的创建添加与删除,自定义属性

一般 val() 是获取表单的 value 属性; val(值); 设置表单的 value 属性。

863
来自专栏python3

tkinter -- Spinbox

只是创建了一个 Spinbox,其它的什么也做不了,与 Scale 不同,Scale 使用缺省值就可以控制 值的改变

693

扫码关注云+社区