jQuery 之 [ DOM操作 ]

2024年2月19日 135次阅读来源: 蔡志远

jQuery的DOM操作

查找节点

元素节点

可以通过jQuery选择器来查找元素节点

属性节点

通过attr()方法来获取指定元素节点的属性节点

文本节点

通过text()方法来获取指定元素节点的文本节点

示例代码

<body>
<button id="btn" name="anniu">按钮</button>
<script>
    /* 定位页面元素 - 获取指定的元素节点 */
    var $btn = $( '#btn' );
    console.log( $btn );// 显示 jQuery.fn.init [button#btn, context: document, selector: "#btn"]
    /* 通过text()方法来获取指定元素节点的文本节点 */
    console.log( $btn.text() );// 显示 按钮(文本内容)
    /* 通过attr()方法来获取指定元素节点的属性节点 - 该方法接收的参数为要获取的属性名 */
    console.log( $btn.attr( 'name' ) );// 显示 anniu(属性值)
</script>
</body>

获取父节点

parent()方法

表示获取指定元素的父节点
参数 – 可选
- 通过选择器来进一步筛选

<body>
<div class="game">
    <ul>
        <li id="gwlr">怪物猎人</li>
        <li>天涯明月刀</li>
        <li>绝地求生</li>
    </ul>
</div>
<script>
    /* 定位页面元素 */
    var $lr = $( '#gwlr' );
    
    console.log( $lr.parent( 'div' ) );// 显示 jQuery.fn.init [ul, prevObject: jQuery.fn.init(1), context: document] - 写参数后显示 jQuery.fn.init [prevObject: jQuery.fn.init(1), context: document]
</script>
</body>

parents()方法

表示获取指定元素的所有祖先节点
参数 – 可选
- 通过选择器来进一步筛选

<body>
<div class="game">
    <ul>
        <li id="gwlr">怪物猎人</li>
        <li>天涯明月刀</li>
        <li>绝地求生</li>
    </ul>
</div>
<script>
    /* 定位页面元素 */
    var $lr = $( '#gwlr' );
    
    console.log( $lr.parents( 'div' ) );// 显示 jQuery.fn.init(4) [ul, div.game, body, html, prevObject: jQuery.fn.init(1), context: document] - 写参数后显示  jQuery.fn.init [div.game, prevObject: jQuery.fn.init(1), context: document]
</script>
</body>

closest()方法

表示获取指定元素的指定祖先节点，并返回第一个匹配的
参数
- 通过选择器来进一步筛选

<body>
<div class="game">
    <ul>
        <li id="gwlr">怪物猎人</li>
        <li>天涯明月刀</li>
        <li>绝地求生</li>
    </ul>
</div>
<script>
    /* 定位页面元素 */
    var $lr = $( '#gwlr' );
    
    console.log( $lr.closest( 'div' ) );// 显示 jQuery.fn.init [prevObject: jQuery.fn.init(1), context: document] - 写参数后显示  jQuery.fn.init [div.game, prevObject: jQuery.fn.init(1), context: document]
</script>
</body>

获取子节点

children()方法

表示获取指定元素的所有子元素

<body>
<div class="game">
    <ul>
        <li id="gwlr">怪物猎人
            <ul>
                <li>古龙种</li>
                <li>鸟龙种</li>
                <li>爬虫种</li>
            </ul>
        </li>
        <li>天涯明月刀</li>
        <li>绝地求生</li>
    </ul>
</div>
<script>
    /* 定位页面元素 */
    var $ul = $( 'ul' );
   
    console.log( $ul.children() );// 显示 jQuery.fn.init(3) [li#gwlr, li, li, prevObject: jQuery.fn.init(1), context: document]
</script>
</body>

find()方法

表示获取指定元素的指定后代元素

<body>
<div class="game">
    <ul>
        <li id="gwlr">怪物猎人
            <ul>
                <li>古龙种</li>
                <li>鸟龙种</li>
                <li>爬虫种</li>
            </ul>
        </li>
        <li>天涯明月刀</li>
        <li>绝地求生</li>
    </ul>
</div>
<script>
    /* 定位页面元素 */
    var $ul = $( 'ul' );
    
    console.log( $ul.find( 'li' ) );// 显示 jQuery.fn.init [prevObject: jQuery.fn.init(1), context: document]
</script>
</body>

获取兄弟节点

next()方法

表示获取指定元素的下一个相邻兄弟元素

<body>
<div class="game">
    <ul>
        <li>怪物猎人</li>
        <li id="tiandao">天涯明月刀</li>
        <li>绝地求生</li>
    </ul>
</div>
<script>
    /* 定位页面原元素 */
    var $td = $( '#tiandao' );
    
    console.log( $td.next() );// 显示 jQuery.fn.init [li, prevObject: jQuery.fn.init(1), context: document]
</script>
</body>

prev()方法

表示获取指定元素的上一个相邻兄弟元素

<body>
<div class="game">
    <ul>
        <li>怪物猎人</li>
        <li id="tiandao">天涯明月刀</li>
        <li>绝地求生</li>
    </ul>
</div>
<script>
    /* 定位页面原元素 */
    var $td = $( '#tiandao' );
    
    console.log( $td.prev() );// 显示 jQuery.fn.init [li, prevObject: jQuery.fn.init(1), context: document]
</script>
</body>

创建节点

通过jQuery对象的工厂函数来进行创建元素节点
通过text()方法来创建文本内容
通过attr()方法来创建属性
也可以通过工厂函数来创建完整HTML代码

<body>
<div class="game">
    <ul>
        <li id="gwlr">怪物猎人</li>
        <li>天涯明月刀</li>
        <li>绝地求生</li>
    </ul>
</div>
<script>
    /* 创建元素节点 */
    var $newLi = $( '<li></li>' );
    /* 创建文本内容 */
    $newLi.text( '使命召唤' );
    /* 创建属性 */
    $newLi.attr( 'id', 'smzh' );

    /* 将创建的元素节点添加到指定元素中 */
    $( '#game' ).append( $newLi );

    /* 通过工厂函数创建完整的元素 */
    var $newLi2 = $( '<li id="nsh">逆水寒</li>' );
    /* 将创建的元素节点添加到指定元素中 */
    $( '#game' ).append( $newLi2 );
</script>
</body>

插入节点

分为内部插入和外部插入

内部插入

append()方法
- 表示插入到指定节点中的最后面 – 该方法由被插入的节点调用
appendTo()方法
- 表示插入到指定节点中的最后面 – 该方法由插入的节点调用
prepend()方法
- 表示插入到指定节点中的最前面 – 该方法由被插入的节点调用
prependTo()方法
- 表示插入到指定节点中的最前面 – 该方法由插入的节点调用

<body>
<div class="game">
    <ul>
        <li id="gwlr">怪物猎人</li>
        <li>天涯明月刀</li>
        <li>绝地求生</li>
    </ul>
</div>
<script>
    /* 获取页面指定元素 */
    var $ul = $( 'ul' );
    /* 创建新元素节点 */
    var $newLi1 = $( '<li>逆水寒</li>' );
    
    /* 内部插入 */
    /* append()方法插入 */
    $ul.append( $newLi1 );
    /* appendTo()方法插入 */
    $newLi1.appendTo( $ul );
    /* prepend()方法插入 */
    $ul.prepend( $newLi1 );
    /* prependTo()方法插入 */
    $newLi1.prependTo( $ul );
</script>
</body>

外部插入

before()方法
- 表示插入到指定节点前一个相邻位置 – 该方法由被插入的节点调用
insertBefore()方法
- 表示插入到指定节点前一个相邻位置 – 该方法由插入的节点调用
after()方法
- 表示插入到指定节点后一个相邻位置 – 该方法由被插入的节点调用
insertAfter()方法
- 表示插入到指定节点后一个相邻位置 – 该方法由插入的节点调用

<body>
<div class="game">
    <ul>
        <li id="gwlr">怪物猎人</li>
        <li>天涯明月刀</li>
        <li>绝地求生</li>
    </ul>
</div>
<script>
    /* 获取页面指定元素 */
    var $ul = $( 'ul' );
    /* 创建新元素节点 */
    var $newLi2 = $( '<li>使命召唤</li>' );
    
    /* 外部插入 */
    /* before()方法插入 */
    $ul.before( $newLi2 );
    /* insertBefore()方法插入 */
    $newLi2.insertBefore( $ul );
    /* after()方法插入 */
    $ul.after( $newLi2 );
    /* insertAfter()方法插入 */
    $newLi2.insertAfter( $ul );
</script>
</body>

删除节点

remove()方法

表示删除指定元素
该方法为指定元素调用删除自身

empty()方法

表示删除指定元素的所有后代元素

示例代码

<body>
<div class="game">
    <ul>
        <li id="gwlr">怪物猎人</li>
        <li>天涯明月刀</li>
        <li>绝地求生</li>
    </ul>
</div>
<script>
    /* 获取页面元素 */
    var $ul = $( 'ul' );
    var $lr = $( '#gwlr' );

    /* 通过remove()方法删除指定元素 */
    $lr.remove();

    /* 通过empty()方法删除指定元素的所有后代元素 */
    $ul.empty();
</script>
</body>

替换节点

replaceWith()方法

表示由被替换的元素调用该方法进行替换“括号中填写用来替换的元素”

replaceAll()方法

表示由用来替换的元素调用该方法进行替换“括号中填写被替换的元素”

示例代码

<body>
<div class="game">
    <ul>
        <li id="gwlr">怪物猎人</li>
        <li>天涯明月刀</li>
        <li>绝地求生</li>
    </ul>
</div>
<script>
    /* 定位被替换的元素 */
    var $lr = $( '#gwlr' );
    /* 创建替换的元素 */
    var $nsh = $( '<li>逆水寒</li>' );

    /* 通过replaceWith()方法进行替换 */
    $lr.replaceWith( $nsh );

    /* 通过replaceAll()方法进行替换 */
    $nsh.replaceAll( $lr );
</script>
</body>

复制节点

clone()方法

表示对指定的元素进行复制
参数 – 布尔值
- true – 表示对指定元素所绑定事件进行复制
- false – 表示不对指定元素所绑定的事件进行复制
该事件需要通过jQuery方式进行绑定才可复制

<body>
<button id="btn">按钮</button>
<script>
    /* 定位被复制元素的位置 */
    var $btn = $( '#btn' );
    /* 为指定元素绑定事件 */
    $btn.click( function(){
        console.log( '这是按钮...' );
    } );
    /* 进行复制并插入到指定元素中 */
    $btn.clone( true ).appendTo( $( 'body' ) );
</script>
</body>

属性和文本操作

属性操作

attr()方法

可以通过该方法对指定元素的指定属性进行获取
也可以通过该方法对指定元素的指定属性进行设置

removeAttr()方法

用于删除指定元素的指定属性

示例代码

<body>
<p id="p" name="text">三步白头</p>
<script>
    /* 定位页面元素 */
    var $p = $( '#p' );

    /* 通过attr()方法获取指定元素的指定属性的属性值 */
    console.log( $p.attr( 'name' ) );// 显示 text(属性值)
    
    /* 通过attr()方法对指定元素的指定属性进行设置 */
    console.log( $p.attr( 'name', 'wenben' ) );// 显示 <p id="p" name="wenben">三步白头</p>
    
    /* 通过removeAttr()方法删除指定元素的指定属性 */
    console.log( $p.removeAttr( 'name' ) );// 显示 <p id="p">三步白头</p>
</script>
</body>

文本操作

text()方法

可以通过该方法来获取指定元素的文本内容
也可以通过该方法对指定元素添加文本内容

示例代码

<body>
<p id="p" name="text">三步白头</p>
<script>
    /* 定位页面元素 */
    var $p = $( '#p' );
    
    /* 通过text()方法获取指定元素的文本内容 */
    console.log( $p.text() );// 显示 三步白头
    /* 通过text()方法对指定元素文本内容进行设置 */
    console.log( $p.text( '天道昭彰' ) );// 显示 <p id="p">天道昭彰</p>
</script>
</body>

样式操作

<head>
    <meta charset="UTF-8">
    <title>样式操作</title>
    <style>
        .d1 {
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .d2 {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="d1" style="width: 100px;height: 100px;background-color: red"></div>
<div id="d2" class="d1"></div>
<div id="d3"></div>
<script src="jquery.js"></script>
<script>
    /*
        样式操作
        attr( ) - 表示获取指定元素的指定样式“括号中填写指定的样式名”
        addClass( ) - 表示添加指定样式“括号中填写指定的样式名”
        removeClass( ) - 表示删除样式“括号中填写指定的样式名”
         * removeClass(样式名) - 删除指定样式名的样式
         * removeClass( ) - 删除所有的样式
        toggleClass( ) - 表示切换样式“括号中填写指定的样式名”
         * 如果指定元素具有指定的样式名，将删除该样式名
         * 如果指定元素不具有指定的样式名，将添加该样式名
        hasClass( ) - 表示判断指定元素是否具有指定样式名的样式“括号中必须填写指定的样式名”
        css( ) - 表示获取当前有效样式“括号中填写指定的样式属性名”
         * css( 属性名，属性值 ) - 也可以用来设置指定元素的指定样式属性
     */
    var $d1 = $( '#d1' );
    console.log( $d1.attr( 'style' ) );
    var $d2 = $( '#d2' );
    console.log( $d2.attr( 'class' ) );

    var $d3 = $( '#d3' );

    $d3.addClass( 'd2' );

    $d3.removeClass( 'd2' );

    $d2.toggleClass( 'd1' );

    var $d2s = $d2.hasClass( 'd1' );
    console.log( $d2s );

    var $d2x = $d2.css( 'width' );
    console.log( $d2x );
    $d2.css( 'backgroundColor', 'blueviolet' );
</script>
</body>

    原文作者：蔡志远
    原文地址: https://segmentfault.com/a/1190000016302106
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。