jQuery DOM操作

简介: 对节点的操作 查找节点 查找节点可以直接利用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
目录
相关文章
|
1月前
|
JavaScript
jQuery -第3次课-DOM操作元素属性-样式等-附资料、作业
jQuery -第3次课-DOM操作元素属性-样式等-附资料、作业
20 0
|
1月前
|
JavaScript 索引
jquery操作select(取值,设置选中)
jquery操作select(取值,设置选中)
|
2月前
|
JavaScript 前端开发
jQuery 第八章(jQuery操作dom元素)
jQuery 第八章(jQuery操作dom元素)
49 0
|
2月前
|
JavaScript 前端开发
jQquery 第七章(jQuery操作dom元素)
jQquery 第七章(jQuery操作dom元素)
32 0
|
2月前
|
JavaScript 前端开发
【jQuery学习】—jQuery操作CSS和表格
【jQuery学习】—jQuery操作CSS和表格
|
2月前
|
JavaScript 容器
【jQuery学习】—jQuery操作元素位置
【jQuery学习】—jQuery操作元素位置
|
3月前
|
JavaScript 前端开发 开发者
jQuery文档对象模型DOM的实际应用
jQuery文档对象模型DOM的实际应用
25 0
|
3月前
|
JavaScript
JS/JQuery操作iframe元素
JS/JQuery操作iframe元素
|
4月前
|
JavaScript 前端开发
前端基础 -JQuery之 对属性的操作
前端基础 -JQuery之 对属性的操作
20 0
|
4月前
|
前端开发 JavaScript
前端基础 -JQuery之 对样式的操作
前端基础 -JQuery之 对样式的操作
20 1