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

jQuery DOM操作的更多相关文章

jQuery DOM操作之结点转移复制
jQuery DOM操作之结点转移复制 $('div').append($('p'))这样即可把p标签移动到div标签里 $('div').append( $('p').html() )是把p标签里的 ...
JQuery DOM操作（属性操作/样式操作/文档过滤）
jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤) 一.DOM属性操作 1.属性 (1).attr() 方法语法:$(selector).attr(name|prop ...
Jquery DOM 操作列表
jQuery 文档操作方法这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). jQuery 属性操作方法下面列出的这些方法获得或设置元素的 DOM 属性. 这些方法对于 ...
JQuery DOM操作、属性和CSS样式操作、其他函数
DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...
事件冒泡及事件委托的理解（JQuery Dom操作）
jQuery事件冒泡: click mouseenter 等事件没有绑定也会触发,只是触发后没有任何结果子元素触发事件后,会把触发事件传递给父元素,那么父元素也会被触发. 不管有没有绑定事件,都会 ...
jquery DOM操作（一）
上一篇文章是记录了jquery中选择器的作用,这里只要记录下jquery中的DOM操作,还是按照上篇的格式来. 下面是测试用的html代码,接下来DOM的操作会在下面的代码下进行. <body& ...
JQuery -- Dom操作，示例代码
1.内部插入节点 * append(content) :向每个匹配的元素的内部的结尾处追加内容 * appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处 * ...
JQuery dom 操作总结
DOM 操作之获取值获得内容 - text():设置或返回所选元素的文本内容 $("#btn1").click(function(){ alert("Text: &qu ...
Query节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作
一．创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...

随机推荐

Android前端人员与后台开发的撕逼（一）
首先表明一下身份,本人是Android前端开发人员,本篇只做合理性探讨,不进行人身攻击: 其次希望各位大神进行点评!点评!点评! 我们讨论一下接口的两种返回方式,直接举例说明一下,假设书籍信息表有30 ...
ENode 1.0 - 事件驱动架构（EDA）思想的在框架中如何体现
开源地址:https://github.com/tangxuehua/enode 上一篇文章,我给大家分享了我的一个基于DDD以及EDA架构的框架enode,但是只是介绍了一个大概.接下来我准备用很多 ...
记一次Url重写_发布之后iis 404
把api封装完,客户要求app的url能不能不变(客户之前用的php的api开发app,已经开发了很多了,所以希望不改动url).但是这个规则要求是:xx/api.php?s=/{controller ...
把 Notepad++ 打造成一款易用的C#脚本编辑器
以前一直用Linqpad在写小程序脚本,但是Linqpad自动完成功能要收费,且不开源,这样的话就不方便扩展了.今天在 http://csscriptnpp.codeplex.com/ 发现了一款C# ...
BIT祝威博客汇总(Blog Index)
+BIT祝威+悄悄在此留下版了个权的信息说: 关于硬件(Hardware) <穿越计算机的迷雾>笔记继电器是如何成为CPU的(1) 继电器是如何成为CPU的(2) 关于操作系统(Oper ...
虚拟化平台cloudstack（6）——使用maven:jetty调试
调试环境 ubuntu 12.04 JDK1.7 apache-maven-3.10 eclipse 4.2 Juno mysql 5 apache ant JDK的配置和安装安装可以参考: htt ...
VS2013 好用的插件
切换到vs2013上有些时间了,以下是我个人认为比较好的插件. Resharper 神器中的神器,提升编码效率的第一神器,附带提高编码能力:除去臃肿的体积,堪称完美: Productivity Pow ...
JS基础知识总结
js基础知识点总结如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划() ...
Atitit 发帖机系列（8）词法分析器v5 版本新特性说明）
Atitit 发帖机系列(8) 词法分析器v5 版本新特性说明) v5 增加对sql单引号的内部支持.可以作为string 结构调整,使用递归法重构循环发..放弃循环发. V4 java dsl词 ...
Atitit图片复制父目录给你设计的实现基于win 图片浏览器
Atitit图片复制父目录给你设计的实现基于win 图片浏览器打开属性,获取其路径...1 Ahk参数传递,使用环境变量即可1 如何ahk异常转换为java异常1 如何获取ahk的输出.1 C:\ ...

jQuery DOM操作

jQuery DOM操作的更多相关文章

随机推荐

热门专题