jQuery中的DOM操作整理

最新推荐文章于 2021-08-12 18:20:13 发布

Vip宅男

最新推荐文章于 2021-08-12 18:20:13 发布

阅读量454

点赞数

分类专栏： Java Web开发实战

Java Web开发实战专栏收录该内容

24 篇文章 0 订阅

订阅专栏

一、使用jQuery创建节点

节点是DOM结构的基础。根据DOM规范，节点是一个很宽泛的概念，范围包含元素、属性、文本、文档、注释等。实际开发过程中，要创建动态内容，主要操作的节点包括元素、

属性和文本。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery创建元素 文本和属性</title>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            var $h1=$("<h1 title='一级标题'>jQuery创建元素 文本和属性</h1>");
            $("body").append($h1);
            /*写成一行*/
            $('body').append("<h2 title='二级标题'>二级标题</h2>");
        })
    </script>
</head>
<body>

</body>
</html>

很简单的一行代码就可以完成创建元素、文本和属性并且把该元素放到body元素下。比JavaScript简化了太多了。

二、使用jQuery插入元素

1、在节点内部插入内容

jQuery提供了4种方法用于在节点内部插入内容

表4-1 在节点内部插入内容方法
方法	说明
append()	向每个匹配的元素内部追加内容（既然是‘追加’，那旧说明是在匹配元素内部的后面增加）
appendTo()	把所有匹配的元素追加到另一个指定的元素集合中，实际上，这个方法颠倒了append()方法的应用。例如$(A).append($B)和 $B.appendTo($A)是等价的
prepend()	与append()相反，它是把元素插到到匹配元素内部的最前面
prependTo()	与prepend()用法颠倒，不多说了

这四个方法的参数可以是字符串、DOM元素对象或者是jQuery对象。下面示例演示append()方法分别把DOM元素对象、jQuery对象和字符串添加到ul对象下面。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery在节点内部插入内容</title>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            var $li=$('<li>jQuery对象</li>');
            var li=document.createElement('li');
            li.innerText='DOM对象';
            $('ul').append($li);
            $('ul').append(li);
            $('ul').append('<li>字符串</li>')
        })
    </script>
</head>
<body>
<ul></ul>
</body>
</html>

2、在节点外部插入内容

jQuery同样提供了四个方法

表4-2 在节点外部插入内容方法
方法	说明
after()	在每个匹配的元素之后插入内容
before()	在每个匹配的元素之前插入内容
insertAfter()	把所有匹配的元素插入到另一个指定的元素集合的后面
insertBefore()	把所有匹配的元素插入到另一个指定的元素集合的前面

这四个方法跟前面那四个方法用法相似，看个例子

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery在节点内部插入内容</title>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            $('div').after($('<p>最后一段文本</p>'))
            $('div').before($('<p>这是第一段文本</p>'))
            $('div').css('background','red');
        })
    </script>
</head>
<body>
<div id="" class="" bgcolor="red">
    <p>段落文本</p>
</div>
</body>
</html>

特别注意：appendTo()、prependTo()、insertAfter()、insertBefore()四个方法具有破坏性操作的特性。也就是说，如果选择已存在的内容并把他们插入到指定对象中，则原位

置的内容将被删除。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery插入内容的破坏性</title>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            $('div').css('background','red');
            $('p').insertAfter($('div'));
        })
    </script>
</head>
<body>
<div id="" class="" bgcolor="red">
    <p>段落文本</p>
</div>
</body>
</html>

三、使用jQuery删除元素

jQuery支持两种删除元素的方法：remove()和empty()。而DOM仅定义了与jQuery的remove()方法对应的removeChild()方法。

表4-3 jQuery删除元素的方法
方法	说明
remove()	从DOM中删除所有的匹配的元素，也就是把本身都删除。
empty()	这个意义是清空，是清空内部，本身保留。

四、使用jQuery复制元素

jQuery定义了clone()方法用来复制节点，与之对应的DOM定义了cloneNote()方法实现相同的操作功能。

这个比较简单，看个例子得了：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery插入内容的破坏性</title>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            var $tr=$('table tr:last').clone();
            $tr.find('td').each(function(index,value){
                $(this).text('第3行第'+(index+1)+'列')
            })
            $('table').append($tr);
        })
    </script>
</head>
<body>
<div id="">
  <table width="100%" border="1px;" cellpadding="0">
      <tr>
          <td>第1行第1列</td>
          <td>第1行第2列</td>
      </tr>
      <tr>
          <td>第2行第1列</td>
          <td>第2行第2列</td>
      </tr>
  </table>
</div>
</body>
</html>

五、使用jQuery替换元素

jQuery定义了replaceWith()方法和replaceAll()方法用来替换节点，与之对应的DOM定义了replaceChild()方法实现相同的操作功能，不过他们的用法迥然不同。

replaceWith()方法能够将所有匹配的元素替换成指定的HTML或DOM元素，replaceAll()方法与之功能相同，但是操作相反，例如在下例中将所有的p元素替换为div元素

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery插入内容的破坏性</title>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            $('p').replaceWith('<div>111</div>')
            //$('<div>111</div>').replaceAll($('p'))//与上面的效果相同
        })
    </script>
</head>
<body>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
</body>
</html>

六、使用jQuery操作属性

jQuery和DOM都提供了元素属性的基本操作方法

1、设置属性

jQuery通常使用attr()方法来设置属性,而DOM定义了setAttribute()方法来设置元素的属性。

在使用jQuery提供的attr()方法的时候，需要为该方法设置两个参数值，分别是属性名和属性值。还可以用一个函数替换第二个参数（属性值），用函数的返回结果充当属性值。

用法很简单，例如：$("p").attr("title","段落文本");

2、获取属性

jQuery里还是用attr(),DOM里用getAttribute()。

当为attr()设置了一个参数值时，代表要获取这个属性的属性值，如果没有该属性，那么返回undefined。不用举例了，很简单，也经常用。

3、删除属性

jQuery里定义的方法是removeAttr()方法删除指定的元素属性，DOM里定义的是removeAttribute()。

$("p").removeAttr("title");

七、jQuery操作类样式

在设计动态样式时，经常需要与元素的class属性打交道，该属性可以为元素定义样式。既然作为元素的属性，我们当然可以用上面介绍的attr()方法进行动态修改元素的class。

不过，jQuery为了开发者方便操作，又单独定义了几个与class操作相关的方法。

1、追加样式 addClass

使用addClass方法前首先的定义好样式类。用法也很简单，看个例子

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .red{
            color: red;
        }
        .bold{
            font-weight: bold;/*加粗字体样式*/
        }
        .italic{
            font-style: italic;/*倾斜字体样式*/
        }
    </style>
</head>
<body>
<p>手握日月摘星辰,世间无我这般人</p>
<input type="button" value="红色" οnclick=""/>
<input type="button" value="加粗" οnclick=""/>
<input type="button" value="倾斜" οnclick=""/>
</body><script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
    $(function(){
        $('input').eq(0).click(function(){
            $('p').addClass('red');
        })
        $('input').eq(1).click(function(){
            $('p').addClass('bold');
        })
        $('input').eq(2).click(function(){
            $('p').addClass('italic');
        })
    })
</script>

</html>

2、移除样式removeClass()

使用方法大同小异，不做介绍了。

3、切换样式toggleClass()

样式切换在鼠标动态操作中非常实用，在Web开发中诸如折叠、开关、伸缩、Tab切换等动态效果中都需要用到交互切换。jQuery为此定义了toggleClass()方法，该方法可用来

开/关指定类样式，从而实现切换类样式的目标。

jQuery的toggleClass()方法包含两个参数，第一个参数指定作为开关的类样式名称，第二个参数用来决定是否打开类样式，该参数为可选。如果没有设置第二个参数，则

toggleClass()方法根据是否存在参数设置的样式，如果存在，就去除，否则追加。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hidden{
            display: none;
        }
    </style>
</head>
<body>
<input type="button" value="切换样式" οnclick=""/>
<p>手握日月摘星辰,世间无我这般人</p>
</body><script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
    $(function(){
        $('input').click(function () {
            $('p').toggleClass('hidden');
        })
    })
</script>

</html>