jQuery基本功能之DOM操作

最新推荐文章于 2021-06-28 09:47:14 发布

不苒

最新推荐文章于 2021-06-28 09:47:14 发布

阅读量1k

点赞数 1

分类专栏： jQuery 随笔文章标签： jquery

本文链接：https://blog.csdn.net/qq_49002903/article/details/109498039

版权

jQuery 随笔专栏收录该内容

5 篇文章 1 订阅

订阅专栏

文章目录

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>