简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > jQuery操作节点的方式
Blogger Information
Blog 12
fans 0
comment 0
visits 12715
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jQuery操作节点的方式
留情的博客
Original
679 people have browsed it

先附上完整运行文件。jQuery和CSS引用bootCDN的，方便运行调试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="col-xs-6 col-md-offset-3">
    <table class="table table-bordered">
        <caption>演示表格</caption>
        <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>爱好</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>18</td>
            <td>游泳</td>
        </tr>
        <tr>
            <td>赵四</td>
            <td>男</td>
            <td>20</td>
            <td>长跑</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>女</td>
            <td>18</td>
            <td>跳舞</td>
        </tr>
        </tbody>
    </table>
</div>
<br>
<div class="col-xs-6 col-md-offset-3">
    <button class="col-xs-3 btn btn-primary">给第一行添加颜色</button>
    <button class="col-xs-3 btn btn-success">给最后一行添加颜色</button>
    <button class="col-xs-3 btn btn-success">点击添加一行</button>
    <button class="col-xs-3 btn btn-success">从头插入一行</button>
    <br><br>
    <button class="col-xs-3 btn btn-success">最后一行后插入一行</button>
    <button class="col-xs-3 btn btn-success">最后一行前插入一行</button>
    <button class="col-xs-3 btn btn-success">添加爱好</button>
    <button class="col-xs-3 btn btn-success">添加外号</button>
    <br><br>
    <button class="col-xs-3 btn btn-success">添加假名</button>
</div>
<script>
 $('button:eq(0)').click(function () {
 $('tr:first').addClass('success')
    })
 $('button:eq(1)').click(function () {
 $('tr:last').toggleClass('success')
    })
 $('button:eq(2)').click(function () {
 $('tbody').append('<tr><td>赵四</td><td>女</td><td>22</td><td>尬舞</td></tr>')
 $('tr:last').addClass('warning')
    })
 $('button:eq(3)').click(function () {
 $('tbody').prepend('<tr><td>春哥</td><td>女</td><td>22</td><td>唱歌</td></tr>')
 $('tr:eq(1)').addClass('warning')
    })
 $('button:eq(4)').click(function () {
 $('tr:last').after('<tr><td>小天</td><td>女</td><td>22</td><td>卖萌</td></tr>')
 $('tr:eq(-1)').addClass('warning')
    })
 $('button:eq(5)').click(function () {
 $('tr:last').before('<tr><td>钟声</td><td>女</td><td>42</td><td>新闻联播</td></tr>')
 $('tr:eq(-2)').addClass('warning')
    })
 $('button:eq(6)').click(function () {
 $('td:eq(11)').append('&nbsp;&nbsp;唱歌')
    })
 $('button:eq(7)').click(function () {
 $('<em>&nbsp;&nbsp;尼古拉斯</em>').appendTo($('td:eq(4)'))
    })
 $('button:eq(8)').click(function () {
 $('<em>假名&nbsp;&nbsp;</em>').prependTo($('td:eq(4)'))
    })
</script>
</body>
</html>

其中在jQuery中选择第几个对象可以使用

$('button：eq(1)') //对象名button  eq(1)是选择第二个button  ()内其中第一个为0 最后一个为-1

或者

$('button：first')  //first是第一个  last是最后一个

append appendTo的区别

$(selector).append(content)  //append 中的content可以是纯文本也可以是HTML，可以使用回调函数
$(content).appendTo(selector) //appendTo中的content注意是在前面，而且只能是HTML，不支持纯文本，不支持回调

append after的区别

after运行前

<ul>
    <li>a1</li>
</ul>
<script>
    $('ul').after('<li>a2</li>')  
</script>

after运行后结果

<ul>
    <li>a1</li>
</ul>
<li>a2</li>
<script>
    $('ul').after('<li>a2</li>')  
</script>

append 运行前

<ul>
    <li>a1</li>
</ul>
<script>
    $('ul').append('<li>a2</li>')
</script>

append 行后结果

<ul>
    <li>a1</li>
    <li>a2</li>
</ul>
<script>
    $('ul').append('<li>a2</li>')
</script>

可以看出after方法中的<li>a2</li>已经跟<ul>是兄弟关系，而append方法中的<li>a2</li>则跟<li>a1</li>是兄弟关系，跟<ul>则是父子关系。

所以可以得出

append/prepend是父子节点操作 

after/before则是兄弟节点操作

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！