jQuery中的DOM操作

2024年3月5日 108次阅读 来源: a达达

DOM操作

查找节点

  • $( ) – 可以通过jQuery选择器来查找元素节点
  • attr( ) – 可以通过jQuery对象提供的方法来查找属性节点
  • text( ) – 可以通过jQuery对象提供的方法来查找文本节点

示例代码:

    <script src="js/jquery.js"></script>
</head>
<body>
<button id="btn" name="button">按钮</button>
<script>
    // 定位页面元素 - jQuery的选择器
    var $btn = $('#btn');
    // 指定元素的文本内容 - 类似于DOM中的textContent属性
    console.log($btn.text());
    // 指定元素的指定属性名得到的属性值 - 类似于DOM中的getAttribute(attrName)
    console.log($btn.attr('name'));
    // 为指定元素设置文本内容
    $btn.text('新按钮');

    $btn.attr('class','cls');

    /*
        jQuery查找页面元素 - 并没有参考DOM中的Node对象，而是Element对象
        * text()方法 - 类似于DOM中的textContent属性
          * 获取 - text()
          * 设置 - text(textContent)
            * textContent - 表示新的文本内容
        * attr()方法
          * 获取 - attr(name) - 类似于DOM中的getAttribute(name)
          * 设置 - attr(name, value) - 类似于DOM中的setAttribute(name, value)
     */

</script>
</body>

遍历节点

获取父节点

  • parent( ) – 表示获取指定元素的父级“括号中填写可选参数
  • parents() – 表示获取指定元素的祖先“括号中填写可选参数（可以不写）”closest( ) – 表示获取与指定元素第一个匹配的祖先“括号中填写匹配指定元素的选择器
  • 注意:
  • parents()的参数不能不写
  • parent()的参数可以不写

示例代码:

    <script src="js/jquery.js"></script>
</head>
<body>
<div class="container">
    <ul>
        <li id="bj">北京</li>
        <li>天津</li>
        <li>重庆</li>
    </ul>
</div>
<script>
    var $bj = $('#bj');
    /*
        获取北京节点的父节点
        parent(expr)方法
        * 作用 - 获取指定元素的父元素
        * 参数
          * expr - 可选，表示为选择器，起到过滤作用
      */
    console.log($bj.parent('div'));
    /*
        获取北京节点的所有祖先节点
        parents(expr)方法
        * 作用 - 获取指定元素的所有祖先元素
        * 参数
          * expr - 可选，表示为选择器，起到过滤作用
     */
    console.log($bj.parents('div'));
    /*
        closest()方法
        * 作用 - 获取指定元素的指定祖先元素，返回第一个匹配的元素
        * 参数
          * expr - 表示为选择器，起到过滤作用
        注意 - jQuery永不报错，只是不提供结果
     */
    console.log($bj.closest('div'));

</script>
</body>

获取子节点

示例代码:

    <script src="js/jquery.js"></script>
</head>
<body>
<div class="container">
    <ul>
        <li id="bj">北京
            <ul>
                <li>东城区</li>
                <li>西城区</li>
                <li>朝阳区</li>
            </ul>
        </li>
        <li>天津</li>
        <li>重庆</li>
    </ul>
</div>
<script>
    var $ul = $('ul:first');
    // 获取指定元素的所有子元素
    console.log($ul.children());
    // 获取指定元素的指定后代元素
    console.log($ul.find('li'));

</script>
</body>

获取兄弟节点

  • siblings() – 获取指定元素所有的兄弟元素
  • prev() – 获取指定元素的上一个相邻兄弟元素
  • next() – 获取指定元素的下一个相邻兄弟元素

示例代码:

    <script src="js/jquery.js"></script>
</head>
<body>
<div class="container">
    <ul>
        <li>南京</li>
        <li>北京</li>
        <li id="tj">天津</li>
        <li>重庆</li>
        <li>长春</li>
    </ul>
</div>
<script>
    var $tj = $('#tj');
    // next() - 表示获取下一个相邻兄弟元素
    console.log($tj.next());
    // prev() - 表示获取上一个相邻兄弟元素
    console.log($tj.prev()); 
</script>
</body>

创建节点

  • $( ) – 可以创建元素节点“括号中直接填写要创建的元素
  • text( ) – 可以创建文本节点“括号中直接填写要创建的文本内容
  • attr( ) – 可以创建属性节点“括号中直接填写要创建的属性（先写属性名，在写属性值
  • $( ) – 也可以直接创建带有属性和文本内容的元素“括号中直接填写要创建的HTML代码

示例代码:

    <script src="js/jquery.js"></script>
</head>
<body>
<ul id="city">
    <li>南京</li>
    <li>北京</li>
    <li id="tj">天津</li>
    <li>重庆</li>
</ul>
<script>
    // 1.创建元素节点
    // var $newLi = $('<li></li>');
    // 2.设置文本内容
    // $newLi.text('佳木斯');
    // 3.设置属性
    // $newLi.attr('id','cc');

    // jQuery的工厂函数接收的是字符串类型的HTML代码
    var $newLi = $('<li id="cc">佳木斯</li>');

    $('#city').append($newLi);

</script>
</body>

插入节点

插入内部节点

  • 插入内部节点 – 就是为指定元素添加子节点
  • append() – 插入到指定节点的所有子节点列表的最后面
  • prepend() – 插入到指定节点的所有子节点列表的前后面
  • appendTo()方法是append()方法逆操作
  • prependTo()方法是prepend()方法逆操作

示例代码:

    <script src="js/jquery.js"></script>
</head>
<body>
<ul>
    <li>北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>
<script>
    // 1.创建新的<li>元素
    var $li = $('<li id="cc">佳木斯</li>');
    // append() - 类似于DOM中的appendChild()
    // $('ul').append($li);
    // appendTo()方法与append()互为逆操作
    // $li.appendTo($('ul'));

    // prepend()方法 - 插入指定节点的所有子节点列表的最前面
    $('ul').prepend($li);

</script>
</body>

插入外部节点

  • 插入外部节点 – 就是为指定元素添加兄弟节点

示例代码:

   <script src="js/jquery.js"></script>
</head>
<body>
<ul>
    <li>北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>
<script>
    // 1.创建新的<li>元素
    var $li = $('<li id="cc">佳木斯</li>');

    // $('ul').before($li);
    $('ul').after($li);

</script>
</body>

删除节点

  • remove( ) – 表示删除指定元素,()中填写与指定的元素相匹配的选择器
  • empty( ) – 表示删除指定元素的所有后代元素 – 就是清空
  • 备注: jQuery中删除节点是谁调用remove删除谁

示例代码:

    <script src="js/jquery.js"></script>
</head>
<body>
<ul id="city">
    <li id="bj">北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>
<script>
    // 哪个元素调用remove() - 哪个元素被删除
    // $('#bj').remove();
    // empty()表示删除后代节点，保留自身节点 - 清空
    $('#city').empty();

</script>
</body>

复制节点

  • clone() – 表示对指定的元素进行复制
  • 注意()中填写布尔值被的无效
  • true – 表示对指定元素所绑定事件进行复制
  • false – 表示不对指定元素所绑定的事件进行复制
  • 注意: 事件需要通过jQuery方式进行绑定才可复制

示例代码:

    <script src="js/jquery.js"></script>
</head>
<body>
<button id="btn">按钮</button>
<script>
    $('#btn').click(function(){
        console.log('this is button');
    });
    /*
        * jQuery的clone(boolean)方法 - 参数表示是否复制事件
        * DOM的cloneNode(boolean)方法 - 参数表示是否复制后代节点
     */
    var $copy = $('#btn').clone(true);

    $('body').append($copy);

</script>
</body>

替换节点

  • replaceWith() – 表示由被替换调用该方法进行替换,()中填写用来替换的元素
  • replaceAll() – 表示由用来替换元素调用该方法进行替换()中填写被替换的元素

示例代码:

    <script src="js/jquery.js"></script>
</head>
<body>
<ul id="city">
    <li id="bj">北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>
<script>
    // 被替换的元素调用replaceWith()方法，该方法接收的参数是替换的元素
    // $('#bj').replaceWith($('<li id="cc">长春</li>'));
    // replaceAll()方法就是颠倒了的replaceWith()方法
    $('<li id="cc">长春</li>').replaceAll($('#bj'));

</script>
</body>

属性操作

  • attr( ) – 表示获取指定元素的指定属性
  • removeAttr( ) – 表示删除指定元素的指定属性

示例代码:

    <script src="js/jquery.js"></script>
</head>
<body>
<ul id="city">
    <li id="bj">北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>
<script>
    // removeAttr()方法 - 类似于DOM中的removeAttribute()
    $('#bj').removeAttr('id');

</script>
</body>

样式操作

  • text() – 表示获取指定元素的文本内容

示例代码:

    <style>
        .one {
            width: 200px;
            height: 200px;
            background-color: lightcoral;
        }
        .two {
            width: 400px;
            height: 400px;
            background-color: yellowgreen;
        }

    </style>
    <script src="js/jquery.js"></script>
</head>
<body>
<div id="box"></div>
<script>
    // 通过设置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()方法 - 删除所有样式
        * removeClass(className) - 删除指定样式
          * 如果删除多个指定样式，样式名称之间使用空格分隔
     */
    // $('#box').removeClass('one');

    // toggleClass()方法 - 在删除指定样式与添加指定样式之间切换
    // $('#box').toggleClass('one');

    // hasClass(className)方法 - 判断指定元素中是否包含指定样式名称
    console.log($('#box').hasClass('one'));

    /*
        css()方法
        * css(name) - 获取指定元素的指定样式属性值
        * css(name, value) - 为指定元素设置指定的样式属性值(内联样式)
        * css(options) - 为指定元素设置指定的样式属性值(内联样式)
          * options - 是一个对象类型的，表示所有的样式属性
     */
    console.log($('#box').css('width'));

    // $('#box').css('width','600px');
    // $('#box').css('height','600px');
    // jQuery支持链式操作 - jQuery提供的方法都统一返回jQuery对象
    // $('#box').css('width','600px').css('height','600px');

    $('#box').css({
        width: '600px',
        height: '600px'
    });

</script>
</body>

HTML操作

示例代码:

    <script src="js/jquery.js"></script>
</head>
<body>
<ul id="city">
    <li id="bj">北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>
<input type="text" value="请输入你的用户名">
<script>
    console.log($('#city').html());

    var $html = $('#city').html();
    $html += '<li>长春</li>';
    $('#city').html($html);

    console.log($('input').val());

    $('input').val('密码');

</script>
</body>
    原文作者：a达达
    原文地址: https://segmentfault.com/a/1190000016302030
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞