AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

jQuery DOM操作

2014-12-16 860
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 对节点的操作 查找节点 查找节点可以直接利用jQuery选择器来完成，非常便利。 插入节点 jQuery提供了8种插入节点的方法。   序号 方法 描述 实例 1 append() 向每个匹配的元素内部追加内容。

 

对节点的操作

查找节点

查找节点可以直接利用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>
View Code

 

属性操作

在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>
View Code

 

设置和获取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
文章标签：
JavaScript
前端开发
关键词：
jQuery dom
dom操作
dom jquery
jQuery操作
jQuery DOM操作
guitar_zp
目录
相关文章
Star时光
|
2月前
|
JavaScript 前端开发 开发者
深入了解jQuery：轻松实现高效的DOM操作
【10月更文挑战第11天】深入了解jQuery：轻松实现高效的DOM操作
Star时光
67 0
杀死一只知更鸟debug
|
3月前
|
JavaScript 前端开发
jQuery 操作 DOM 及 CSS
本文介绍了如何使用jQuery进行DOM操作和CSS样式的修改，包括如何获取和设置元素的文本内容、属性值、添加和删除元素，以及如何使用jQuery的addClass、removeClass、toggleClass、hasClass和css方法来操作元素的CSS。通过示例代码，展示了jQuery在实际开发中的便捷性。
杀死一只知更鸟debug
39 1
jQuery 操作 DOM 及 CSS
老板这功能得加钱
|
7月前
|
缓存 JavaScript
jQuery属性操作
jQuery属性操作
老板这功能得加钱
41 1
杀死一只知更鸟debug
|
3月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总，dom操作，ajax请求
本文汇总了jQuery的一些常用操作，包括DOM元素的选择、添加、移除，表单操作，以及如何使用jQuery发送Ajax请求，涵盖了GET、POST请求和文件上传等常见场景。
杀死一只知更鸟debug
27 2
Star时光
|
2月前
|
JavaScript 前端开发 API
深入理解jQuery：高效DOM操作与事件处理
【10月更文挑战第11天】深入理解jQuery：高效DOM操作与事件处理
Star时光
22 0
夏天49597
|
6月前
|
JavaScript 前端开发 UED
JavaScript基础-DOM操作：查找、创建、修改
【6月更文挑战第12天】本文介绍了DOM基础，包括查找元素（getElementById、getElementsByClassName等）、创建新节点（createElement、createTextNode）和修改节点（innerText、innerHTML、setAttribute等）。强调了易错点，如ID唯一性、性能考量和安全问题，并提供了代码示例。熟练掌握DOM操作对前端开发至关重要，但应注意性能优化，适时使用框架或库。
夏天49597
70 2
JavaScript基础-DOM操作：查找、创建、修改
sunrr
|
6月前
|
JavaScript 前端开发
DOM操作有哪些方法可以改变元素的样式？
【6月更文挑战第30天】DOM操作有哪些方法可以改变元素的样式？
sunrr
47 2
sunrr
|
6月前
|
JavaScript 前端开发 开发者
DOM操作
【6月更文挑战第30天】DOM操作
sunrr
41 1
今天是几号
|
6月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
今天是几号
54 5
夏天49597
|
5月前
|
JavaScript 前端开发 API
前端框架与库 - jQuery基础与DOM操作
【7月更文挑战第18天】jQuery 是一个简化JavaScript任务的库，以其“write less, do more”理念著称。核心功能包括DOM操作、事件处理和Ajax。DOM操作如选择元素（`$(&quot;p&quot;)`、`$(&quot;#myDiv&quot;)`、`$(&quot;.myClass&quot;)`）、创建及添加元素、修改属性和内容。事件处理如绑定(`click`)和触发(`trigger`)。常见问题涉及`$`符号冲突（使用`jQuery`代替）、异步加载管理和选择器性能优化。了解并规避这些问题能提升jQuery使用效率。
夏天49597
38 0