jQuery 中的 DOM 操作

最新推荐文章于 2024-02-28 16:51:01 发布

阅读量783

点赞数

分类专栏： JavaScript 文章标签： jquery dom

本文链接：https://blog.csdn.net/cckevincyh/article/details/53152681

版权

JavaScript 专栏收录该内容

62 篇文章 0 订阅

订阅专栏

内部插入节点

append(content) :向每个匹配的元素的内部的结尾处追加内容
appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处
prepend(content):向每个匹配的元素的内部的开始处插入内容
prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
    <style type="text/css">
            div,span{
                width: 140px;
                height: 140px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }

            div.mini{
                width: 30px;
                height: 30px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }

            div.visible{
                display:none;
            }
     </style>
     <!--引入jquery的js库-->    
    </head>

    <body>
         <ul id="city">
             <li id="bj" name="beijing">北京</li>
             <li id="tj" name="tianjin">天津</li>
             <li id="cq" name="chongqing">重庆</li>
         </ul>


          <ul id="love">
             <li id="fk" name="fankong">反恐</li>
             <li id="xj" name="xingji">星际</li>
         </ul>

        <div id="foo1">Hello1</div> 

    </body>
<script language="JavaScript">
//*   append(content) :向每个匹配的元素的内部的结尾处追加内容
    //append后面的元素插入到append前面的元素的后面
//  $("#bj").append($("#fk"));

//*   appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处
    //appendTo前面的元素插入到appendTo后面的元素的后面
//  $("#bj").appendTo($("#fk"));

//*   prepend(content):向每个匹配的元素的内部的开始处插入内容
    //prepend后面的元素插入到prepend前面的元素的前面
    $("#bj").prepend($("#fk"));

//*   prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处
    //prependTo前面的元素插入到prependTo后面的元素的前面
//  $("#bj").prependTo($("#fk"));
</script>

</html>

外部插入节点

after(content) :在每个匹配的元素之后插入内容
before(content):在每个匹配的元素之前插入内容
insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面
insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面
以上方法不但能将新创建的 DOM 元素插入到文档中, 也能对原有的 DOM 元素进行移动.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
    <style type="text/css">
            div,span{
                width: 140px;
                height: 140px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }

            div.mini{
                width: 30px;
                height: 30px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }

            div.visible{
                display:none;
            }
     </style>
     <!--引入jquery的js库-->    
    </head>

    <body>
         <ul id="city">
             <li id="bj" name="beijing">北京</li>
             <li id="tj" name="tianjin">天津</li>
             <li id="cq" name="chongqing">重庆</li>
         </ul>

         <p  id="p3">I would like to say: p3</p>

         <p  id="p2">I would like to say: p2</p>

         <p  id="p1">I would like to say: p1</p>

    </body>
<script language="JavaScript">
//*  after(content) :在每个匹配的元素之后插入内容
    //after后面的元素插入到after前面的元素的后面
//  $("#bj").after($("#p2"));

//*  before(content):在每个匹配的元素之前插入内容 
    //before后面的元素插入到before前面的元素的前面
    $("#bj").before($("#p2"));

//*  insertAfter(content):把所有匹配的元素插入到另一个、指定的元素集合的后面 
    //insertAfter前面的元素插入到insertAfter后面的元素的后面
//  $("#bj").insertAfter($("#p2"));

//*  insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面 
    //insertBefore前面的元素插入到insertBefore后面的元素的前面
//  $("#bj").insertBefore($("#p2"));
</script>

</html>

查找节点

查找属性节点: 通过 jQuery 选择器完成.
查找属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
    <style type="text/css">
            div,span{
                width: 140px;
                height: 140px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }

            div.mini{
                width: 30px;
                height: 30px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }

            div.visible{
                display:none;
            }
     </style>
     <!--引入jquery的js库-->

    </head>

    <body>

         <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
         <input type="button" value=" 每个class为one的div父元素下的第2个子元素"  id="b1"/>
         <input type="button" value=" 每个class为one的div父元素下的第一个子元素"  id="b2"/>
         <input type="button" value=" 每个class为one的div父元素下的最后一个子元素"  id="b3"/>
         <input type="button" value=" 如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素"  id="b4"/>


         <!--文本隐藏域-->
         <input type="hidden" value="hidden_1">
         <input type="hidden" value="hidden_2">
         <input type="hidden" value="hidden_3">
         <input type="hidden" value="hidden_4">

         <h1>天气冷了</h1>
         <h2>天气又冷了</h2>

         <div id="one">
             id为one   div
         </div>

         <ul>
             <li id="bj" name="beijing">北京</li>
             <li id="tj" name="tianjin">天津</li>

         </ul>

    </body>
    <script language="JavaScript">
     //获取"北京"
     var $bjElement = $("#bj");

     alert($bjElement.attr("name"));   //在这里相当于DOM操作里的getAttribute()

     /*
      * jquery中的attr()方法相当于DOM操作里的getAttribute和setAttribute
      *     * 对应DOM操作里getAttribute是attr(name)
      *         * name：属性名称
      *     * 对应DOM操作里setAttribute是attr(name,value)
      *         * name：属性名称
      *         * value：属性的值
      */
    </script>

</html>

创建节点

创建节点: 使用 jQuery 的工厂函数 $():$ (html); 会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回.
注意:
动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中;
当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式. 例如创建一个元素, 可以使用 $(“”) 或 $(“”), 但不能使用 $(“”) 或 $(“”)或$(“p”)
创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
    <style type="text/css">
            div,span{
                width: 140px;
                height: 140px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }

            div.mini{
                width: 30px;
                height: 30px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }

            div.visible{
                display:none;
            }
     </style>
     <!--引入jquery的js库-->

    </head>

    <body>


         <ul id="city">
             <li id="bj" name="beijing">北京</li>
         </ul>

    </body>
<script language="JavaScript">
    ///在city下增加<li id="tj" name="tianjin">天津</li>节点
        //1 创建<li id="tj" name="tianjin">天津</li>
            /*
             * 1 创建<li></li>
             * 
             *  * 标签的闭合
             *      * 开始标签和截止标签：<li></li>
             *      * <li />
             *      
             *  * 以下几种方式是不正确的：
             *      * <li>
             *      * $("li")获取对应标签
             */
            var $li = $("<li></li>");    //document.createElement("li");

            //2 设置属性
            $li.attr("id","tj");
            $li.attr("name","tianjin");

            //3 创建文本节点
            //4 插入
            /*
             * text()：同时也具备get和set两种属性
             *      * 如果是get的话，text()无参数形式
             *      * 如果是set的话，text(name)传入文本内容
             */
            $li.text("天津");

        //2 获取city标签
        var $city = $("#city");

        //3 插入
        $city.append($li);
</script>

</html>

删除节点

remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选元素. 当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用.
empty(): 清空节点 – 清空元素中的所有后代节点(不包含属性节点).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
    <style type="text/css">
            div,span{
                width: 140px;
                height: 140px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }

            div.mini{
                width: 30px;
                height: 30px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }

            div.visible{
                display:none;
            }
     </style>
     <!--引入jquery的js库-->

    </head>

    <body>
         <ul id="city">
             <li id="bj" name="beijing">北京</li>
             <li id="tj" name="tianjin">天津</li>
             <li id="cq" name="chongqing">重庆</li>
         </ul>
        <p class="hello">Hello</p> how are <p>you?</p> 
    </body>
<script language="JavaScript">
   //删除<li id="bj" name="beijing">北京</li>
   $("#bj").remove();



   //删除所有的子节点   清空元素中的所有后代节点(不包含属性节点).
   $("#tj").empty();

   alert($("#tj").attr("name"));

</script>

</html>

复制节点

clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为.
clone(true): 复制元素的同时也复制元素中的的事件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
    <style type="text/css">
            div,span{
                width: 140px;
                height: 140px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }

            div.mini{
                width: 30px;
                height: 30px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }

            div.visible{
                display:none;
            }
     </style>
     <!--引入jquery的js库-->
    </head>
    <body>
        <button>保存</button> 
        <br>    <br>    <br>    
        <p>段落</p>
    </body>
    <script language="JavaScript">
          //button增加事件
        $("button").click(function(){
            alert("yyy");
        });


        //克隆button 追加到p上 ,但事件不克隆
        //clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为
//      $("button").clone().appendTo($("p"));



        //克隆button 追加到p上 ,但事件也克隆
        //clone(true): 复制元素的同时也复制元素中的的事件 
        $("button").clone(true).appendTo($("p"));
    </script>
</html>

替换节点

replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM 元素
replaceAll(): 颠倒了的 replaceWith() 方法.
注意: 若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
    <style type="text/css">
            div,span{
                width: 140px;
                height: 140px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }

            div.mini{
                width: 30px;
                height: 30px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }

            div.visible{
                display:none;
            }
     </style>
     <!--引入jquery的js库-->
    </head>
    <body>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>

    </body>
<script language="JavaScript">
         //$("button")用 <p>tttttttt</P>替换
        //replaceWith前面的元素是被替换的，replaceWith后面的元素是替换后的
        $("button").replaceWith($("<p>tttttttt</P>"));



        // p 用  <button>保存</button>  替换
        //replaceAll前面的元素是替换后的，replaceAll后面的元素是要被替换的
        $("<button>保存</button>").replaceAll($("p"));

        //replaceWith与replaceAll，效果刚好相反
</script>
</html>

属性操作

attr(): 获取属性和设置属性
当为该方法传递一个参数时, 即为某元素的获取指定属性
当为该方法传递两个参数时, 即为某元素设置指定属性的值
jQuery 中有很多方法都是一个函数实现获取和设置. 如: attr(), html(), text(), val(), height(), width(), css() 等.
removeAttr(“属性名”): 删除指定元素的指定属性

样式操作

获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成.
追加样式: addClass()
移除样式: removeClass() — 从匹配的元素中删除全部或指定的 class
切换样式: toggleClass() — 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它.
判断是否含有某个样式: hasClass() — 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
    <style type="text/css">
           .one{
                width: 200px;
                height: 140px;
                margin: 40px;
                background: red;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }

            div,span{
                width: 140px;
                height: 140px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }

            div.mini{
                width: 30px;
                height: 30px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }
     </style>
     <!--引入jquery的js库-->
    </head>
    <body>
         <input type="button" value="采用属性增加样式"  id="b1"/>
         <input type="button" value=" addClass"  id="b2"/>
         <input type="button" value="removeClass"  id="b3"/>
         <input type="button" value=" 切换样式"  id="b4"/>
         <input type="button" value=" hasClass"  id="b5"/>


         <h1>天气冷了</h1>
         <h2>天气又冷了</h2>



        <br>
        <div id="mover">
              动画
        </div>
        <br>
        <span class="spanone">    span
        </span>

    </body>
<script language="JavaScript">
            //<input type="button" value="采用属性增加样式"  id="b1"/>
            $("#b1").click(function(){
                $("#mover").attr("class","one");
            });

            //<input type="button" value=" addClass"  id="b2"/>
            $("#b2").click(function(){
                $("#mover").addClass("mini");
            });


            //<input type="button" value="removeClass"  id="b3"/>
            $("#b3").click(function(){
                /*
                 * removeClass()
                 *      * 删除样式
                 *      * 如果不带任何参数，removeClass()可以删除任何样式
                 *      * 如果带参数的话，removeClass()只能删除指定样式
                 */
                $("#mover").removeClass("one");
            });


            //<input type="button" value=" 切换样式"  id="b4"/>
            $("#b4").click(function(){
                /*
                 * toggleClass();
                 *      * 切换样式
                 *      * 该方法只能接受一个参数
                 *      * 所谓的切换样式，是在指定样式和没有样式(只是把指定样式删除)之间切换
                 */
                $("#mover").toggleClass("mini");
            });


            //<input type="button" value=" hasClass"  id="b5"/>
            $("#b5").click(function(){
                /*
                 * hasClass()
                 *      * 判断是否含有某个样式，并不是判断是否含有样式
                 *      * 该方法要指定样式名称
                 *      * 如果有多个样式存在，hasClass()方法依然只判断是否含有该方法指定的样式
                 */
                alert($("#mover").hasClass("one"));
            });



</script>
</html>

设置和获取 HTML, 文本和值

读取和设置某个元素中的 HTML 内容: html(“”) . 该方法可以用于 XHTML, 但不能用于 XML 文档
读取和设置某个元素中的文本内容: text(). 该方法既可以用于 XHTML 也可以用于 XML 文档.
读取和设置某个元素中的值: val() — 该方法类似 JavaScript 中的 value 属性. 对于文本框, 下拉列表框, 单选框该方法可返回元素的值(多选框只能返回第一个值).如果为多选下拉列表框, 则返回一个包含所有选择值的数组