jQuery 之 [ DOM操作 ]

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>

jQuery 之 [ DOM操作 ]

jQuery的DOM操作

查找节点

元素节点

属性节点

文本节点

示例代码

获取父节点

parent()方法

parents()方法

closest()方法

获取子节点

children()方法

find()方法

获取兄弟节点

next()方法

prev()方法

创建节点

插入节点

内部插入

外部插入

删除节点

remove()方法

empty()方法

示例代码

替换节点

replaceWith()方法

replaceAll()方法

示例代码

复制节点

clone()方法

属性和文本操作

属性操作

attr()方法

removeAttr()方法

示例代码

文本操作

text()方法

示例代码

样式操作

蔡志远

引用和评论

Ajax 之 [ jQuery中的Ajax ]

CSS团队协作规范

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高

前端开发工具

开发插件集合

CSS 现在终于支持高度 auto 过渡动画了