jQuery基本功能之DOM操作-阿里云开发者社区

DOM操作

1、查找节点

查找元素节点

查找文本节点—text() 方法获取其文本内容。

查找属性节点 — attr()方法获取其属性的值。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查找节点</title>
    <script src="../jquery-1.12.4.js"></script>
</head>
<body>
    <div id="d1" name="d">这是div元素</div>
</body>
<script>
    // 定位页面元素
    var $div = $('#d1');
    // text（）方法--指定获取元素的文本内容
    console.log($div.text());
    // attr（）方法--指定获取元素的属性值
    console.log($div.attr('name'));
    // 还可以用来设置修改元素的文本内容
    $div.text('第一个div元素')
    // 可以用来新增设置属性
    $div.attr('class','cls')
</script>
</html>

2、遍历节点

（1）获取父节点

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取父节点</title>
    <script src="../jquery-1.12.4.js"></script>
</head>
<body>
    <ul>
        <li id="bj">北京</li>
        <li id="nj">南京</li>
        <li id="dj">东京</li>
    </ul>
</body>
<script>
    // 获取元素节点
    var $bj=$('#bj');
    // parent(expr)：方法获取指定元素的第一个父元素，
        //参数expr为可选，表示为选择器，起过滤作用
    console.log($bj.parent());
    // parents(expr)：方法获取指定元素的所有祖先元素，
    //参数expr为可选，表示为选择器，起过滤作用
    console.log($bj.parents());
    /*closest(expr)方法：获取指定元素的指定祖先元素，返回第一个匹配的元素
    参数expr为必选，表示为选择器，起到过滤作用。
    参数不写不报错也不会输出结果*/
    console.log($bj.closest('ul'));
</script>
</html>

（2）获取子节点

jQuery中的children()方法用于获取指定元素的所有子元素。

find()方法用于获取指定元素的指定后代元素。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取父节点</title>
    <script src="../jquery-1.12.4.js"></script>
</head>
<body>
    <ul id="area">
        <li id="bj">北京</li>
        <li id="nj">南京</li>
        <li id="dj">东京</li>
    </ul>
</body>
<script>
    // 获取元素节点
    var $area=$('#area');
    // children(expr)方法 --获取指定元素的子元素
    //     参数expr：为可选，其过滤作用
   console.log($area.children());
   // 获取指定元素的指定后代元素
   console.log($area.find('li'))
</script>
</html>

（3）获取兄弟节点

（1）jQuery中的next()方法用于获取指定元素的下一个相邻兄弟元素。

（2）jQuery中的prey()方法用于获取指定元素的下一个相邻兄弟元素。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取兄弟节点</title>
    <script src="../jquery-1.12.4.js"></script>
</head>
<body>
    <div class="container">
        <ul>
            <li>南京</li>
            <li>北京</li>
            <li id="dj">东京</li>
            <li>重庆</li>
            <li>赤峰</li>
        </ul>
    </div>
</body>
<script>
    var $dj = $('#dj');
    console.log($dj.next());//获取下一个相邻兄弟元素
    console.log($dj.prev());//获取上一个相邻兄弟元素
</script>
</html>

3、创建节点

通过jQuery的工厂函数来创建元素节点。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建节点</title>
    <script src="../jquery-1.12.4.js"></script>
</head>
<body>
    <div class="container">
        <ul id="area">
            <li id="bj">北京</li>
            <li id="nj">南京</li>
            <li id="dj">东京</li>
        </ul>
    </div>
</body>
<script>
    // 新增一行li
    /*// 方法一：
    // 1、创建元素节点
    var $newli = $('<li></li>');
    // 2、设置文本内容
    $newli.text('保定');
    // 3、设置属性
    $newli.attr('id','bd')*/
    // 方法二：
    var $newli =$('<li id="bd">保定</li>');
    // 4、将新创建的li添加进ul中
     $('#area').append($newli);
</script>
</html>

4、插入节点

（1）插入内部节点

jQuery提供了一系列方法用于向指定HTML页面元素内部插人节点：

append()方法:向每个匹配的元素内部追加内容。

appendTo()方法:把所有匹配的元素追加到另一个指定的元素元素集合中。

prepend()方法:向每个匹配的元素内部前置内容。

prependTo()方法:把所有匹配的元素前置到另一个指定的元素元素集合中。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插入内部节点</title>
    <script src="../jquery-1.12.4.js"></script>
</head>
<body>
<ul id="area">
    <li>北京</li>
    <li>南京</li>
    <li>东京</li>
</ul>
<script>
    // 创建新的<li>元素
    var $li = $('<li id="bd">保定</li>');
    // append()与appendTo()--插入指定节点的所有子节点列表的末尾
    // $('#area').append($li)
    // $li.appendTo($('#area'))
    // prepend()方法 prependTo()方法--插入指定节点的所有子节点列表的最前面
    // $('#area').prepend($li)
    $li.prependTo($('#area'))
</script>
</body>
</html>

效果图如下：

（2）插入外部节点

jQuery提供了一系列方法用于向指定HTML页面元素外部插人节点:

before()方法:在每个匹配的元素之前插入内容。

after()方法:在每个匹配的元素之后插入内容。

insertBefore()方法：在目标元素前面插入集合中每个匹配的元素(注：插入的元素作为目标元素的兄弟元素)。

insertAfter()方法：在目标元素后面插入集合中每个匹配的元素(注：插入的元素作为目标元素的兄弟元素)。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插入内部节点</title>
    <script src="../jquery-1.12.4.js"></script>
</head>
<body>
<ul id="area">
    <li>北京</li>
    <li>南京</li>
    <li>东京</li>
</ul>
<script>
    // 创建新的<li>元素
    var $li = $('<li id="bd">保定</li>');
    // before()方法:在每个匹配的元素之前插入内容。
    // $('ul').before($li);
    // after()方法:在每个匹配的元素之后插入内容。
    $('ul').after($li);
</script>
</body>
</html>

效果图如下：

插入节点还可以实现移动节点操作

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插入（移动）节点</title>
    <script src="../jquery-1.12.4.js"></script>
</head>
<body>
    <ul id="area">
        <li>北京</li>
        <li>天津</li>
        <li>南京</li>
    </ul>
    <ul id="phone">
        <li id="phone1">华为</li>
        <li>小米</li>
        <li>苹果</li>
    </ul>
</body>
<script>
    // 插入节点的方法也可以实现移动效果
    var $phone1 = $('#phone1');
    // $('#area').append($phone1)
</script>
</html>

效果图如下所示：

左右移动选项案例

具体实现效果描述：点击左边选项选择单个移动或全部移动到右边框内。移动到右边框内后，可以选择单个或全选移动回左边框。

示例代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左右移动选项案例</title>
    <script src="../jquery-1.12.4.js"></script>
    <style>
        select{
            width: 100px;
            height: 85px;
        }
        div{
            margin: 0 auto;
            display: inline-block;
            width: 50px;
        }
    </style>
</head>
<body>
<select  id="first" size="5" multiple>
    <option>A</option>
    <option>AB</option>
    <option>ABC</option>
    <option>ABCD</option>
    <option>ABCDE</option>
    <option>AFFFE</option>
    <option>ADDDD</option>
    <option>ABBBB</option>
</select>
<div>
    <button id="add">></button>
    <button id="add_all">>>></button>
    <button id="remove"><</button>
    <button id="remove_all"><<<</button>
</div>
<select id="second" size="5" multiple></select>
</body>
<script>
    /*// DOM操作
    var add = document.getElementById('add');
    add.addEventListener("click", function () {
    var first =document.getElementById('first');
    var opts = first.getElementsByTagName('option');
    for (var i=0;i<opts.length;i++){
        var opt = opts[i];
        if (opt.selected){
            var second = document.getElementById('second');
            second.appendChild(opt);
            i--;
        }
    }
    });*/
    // jQuery操作
    // 1、实现选中单个向右移动
    $('#add').click(function () {
        $('#first>option:selected').appendTo($('#second'));
    });
    // 2、实现全选向右移动、
    $('#add_all').click(function () {
        $('#first>option').appendTo($('#second'));
    });
    // 3、实现单个向左移动
    $('#remove').click(function () {
        $('#second>option:selected').appendTo($('#first'));
    });
    // 4、实现全选向左移动
    $('#remove_all').click(function () {
        $('#second>option').appendTo($('#first'));
    });
</script>
</html>

效果图如下所示：

5、删除节点

remove()方法：用于从DOM中删除所有匹配的元素。

empty()方法：用于删除匹配的元素集合中的所有子节点。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除节点</title>
    <script src="../jquery-1.12.4.js"></script>
</head>
<body>
<ul id="city">
    <li id="bj">北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>
</body>
<script>
    // remove()方法哪个元素调用该方法，将删除自身
    $('#bj').remove();
    // empty()方法，删除该元素的后代节点，保留自身节点---适用于清空操作
    $('#city').empty();
</script>
</html>

效果图如下：

6、替换节点

jQuery中提供replaceWith()方法将所有匹配的元素替换成指定的HTML或DOM元素。

replaceAll()方法是replaceWith()方法的逆操作，效果一样。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>替换节点</title>
    <script src="../jquery-1.12.4.js"></script>
</head>
<body>
<ul id="city">
    <li class="bj">北京</li>
    <li class="bj">东京</li>
    <li class="j">南京</li>
    <li class="j">天津</li>
</ul>
</body>
<script>
    // replaceWith()方法是被替换的元素主动调用的，该方法接受的参数是替换后要传入的内容
    $('.bj').replaceWith($('<li id="cc">长春</li>'));
    // replaceAll()方法是replaceWith()方法的逆操作
    $('<li id="cc">长春</li>').replaceAll($('.j'))
    // 两个方法都可以同时替换多个元素节点
</script>
</html>

7、复制节点

jQuery提供了clone()方法克隆匹配的DOM元素并且选中这些克隆的副本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复制节点</title>
    <script src="../jquery-1.12.4.js"></script>
</head>
<body>
    <button id="btn">按钮</button>
</body>
<script>
    $('#btn').click(function () {
    console.log('this is function');
    });
  /* jQuery中的 clone(boolean)方法 - 参数表示是否复制事件
        true--表示复制 ，false--表示不复制
    DOM的cloneNode(boolean)方法- 参数表示是否复制后代节点*/
    var $copy = $('#btn').clone(true);
    // 通过body元素将copy添加到页面中
    $('body').append($copy);
</script>
</html>

需要注意的是：复制元素后可能将id属性也复制过去，虽然浏览器不报错，但会出现逻辑错误，必须重视。

8、属性操作

jQuery提供了.removeAttr( attributeName )方法用于为匹配的元素集合中的每个元素中移除一个属性。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性操作</title>
    <script src="../jquery-1.12.4.js"></script>
</head>
<body>
<ul id="city">
    <li>南京</li>
    <li>北京</li>
    <li id="dj">东京</li>
</ul>
</body>
<script>
    // removeAttr()方法作用：为匹配的元素集合中的每个元素中移除一个属性（attribute）。
    //类似于DOM中的removeAttribute()
    $('#dj').removeAttr('id');
</script>
</html>

9、样式操作

jQuery提供了以下方法来完成样式操作：arrt()方法、 addClass()方法、 removeClass()方法、 toggleClass()方法、 hasClass()方法和css()方法。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式操作</title>
    <script src="../jquery-1.12.4.js"></script>
    <style>
        .one{
            width: 200px;
            height: 200px;
            background-color: greenyellow;
        }
        .two{
            width: 400px;
            height: 400px;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script>
    // 添加CSS样式方法一：通过设置style属性为div元素添加内联样式--代码可读性差
    // $('#box').attr('style','width:100px;height:100px;background-color:red;')
    // 方法二 通过设置class属性为div元素添加外联样式  -- 缺点需要提前定义外联样式
    $('#box').attr('class','one');
    // 方法三 addClass(className)方法--表示添加样式（并不影响指定元素原本的样式）
    $('#box').addClass('two');
    //     $('#box').attr('class','two');//替换样式
    /*
        removeClass()方法--删除样式
           *作用：删除所有样式
           *removeClass(className):删除指定样式
               *如果删除多个指定样式，样式名称之间使用空格分隔
    * */
    // $('#box').removeClass('one');
    // toggleClass()方法 - 在删除没有指定样式与添加样式之间切换
    $('#box').toggleClass('one');
    // hasClass(className)方法 - 判断指定元素中是否包含指定样式名称
    console.log($('#box').hasClass('one'));//false
    /*
    * css()方法
        * css(name) - 获取指定元素的指定样式属性值
        * css(name,value) - 为指定元素设置指定的样式属性值（内联样式）
        * css(options)- 为指定元素设置指定的样式属性值（内联样式）
            *options - 是一个对象类型的，表示所有的样式属性
    */
    // console.log($('#box').css('width'))//400px
    // 第一种：
    // $('#box').css('width','600px');
    // 第二种：jQuery支持链式操作-jQuery提供的方法都统一返回jQuery对象
    // $('#box').css('width','600px').css('height','600px');
    // 第三种：
    $('#box').css({
        width:'600px',
        height:'500px',
        background:'black'
    });
</script>
</html>

10、HTML操作

jQuery提供了html()方法和val()方法

html()：获取集合中第一个匹配元素的HTML内容。

val()：获取匹配的元素集合中第一个元素的当前值。还可以用来重新设置value值。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML操作</title>
    <script src="../jquery-1.12.4.js"></script>
</head>
<body>
<ul id="city">
    <li>南京</li>
    <li>北京</li>
    <li id="dj">东京</li>
</ul>
<input type="text" value="请输入账号">
</body>
<script>
    console.log($('#city').html());
    var $html = $('#city').html();
    $html += '<li id="cc">重庆</li>';
    $('#city').html($html);
    console.log($('input').val());
    // 还可以用来重新设置value值
    $('input').val('请输入密码')
</script>
</html>

jQuery基本功能之DOM操作

DOM操作

1、查找节点

2、遍历节点

（1）获取父节点

（2）获取子节点

（3）获取兄弟节点

3、创建节点

4、插入节点

5、删除节点

6、替换节点

7、复制节点

8、属性操作

9、样式操作

10、HTML操作

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

jQuery基本功能之DOM操作

DOM操作

1、查找节点

2、遍历节点

（1）获取父节点

（2）获取子节点

（3）获取兄弟节点

3、创建节点

4、插入节点

5、删除节点

6、替换节点

7、复制节点

8、属性操作

9、样式操作

10、HTML操作

热门文章

最新文章

相关课程

相关电子书

相关实验场景