jQuery 遍历

来源：互联网发布：软件测试平均工资编辑：程序博客网时间：2024/06/08 05:38

学习网站如下：http://www.runoob.com/jquery/jquery-traversing.html

遍历必须的，目前就是老板要用jQuery来实现遍历添加修改数据（js编程已经实现）

向上遍历 DOM 树 parent() parents() parentsUntil()

js代码：

$(document).ready(function(){    $("span").parent().css('color','red');    $("#bt_id").click(function(){        $("#bt_id").text("按钮改变了");        $("#p_id").text("增长引擎");    })});

html代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>祖先</title>    <script src="../../../jquery-3.1.0.min.js"></script>    <script src="祖先.js"></script>    <style>        .ancestors *        {            display: block;            border: 2px solid lightgrey;            color: lightgrey;            padding: 5px;            margin: 15px;        }    </style></head><body><p id ="p_id">我是一个人</p><button id="bt_id">点击向上</button><div class="ancestors">    <div style="width:500px;">div (曾祖父元素)        <ul>ul (祖父元素)            <li>li (父元素)                <span>span</span>            </li>        </ul>    </div></div></body></html>

效果如下：

可以将js函数换一下看一下效果

向下遍历 DOM 树 children() find()
js代码如下：
//parent() parents() parentUntil()$(document).ready(function(){    // $("li").parentsUntil("div").css('color','red');    $("#bt_id").click(function(){        $("#bt_id").text("按钮改变了");        $("#p_id").text("增长引擎");    })    $("li").children().css('color','blue');});
html代码：
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>祖先</title>    <script src="../../../jquery-3.1.0.min.js"></script>    <script src="祖先.js"></script>    <style>        .ancestors *        {            display: block;            border: 2px solid lightgrey;            color: lightgrey;            padding: 5px;            margin: 15px;        }    </style></head><body><p id ="p_id">我是一个人</p><button id="bt_id">点击向上</button><div class="ancestors">    <div style="width:500px;">div (曾祖父元素)        <ul>ul (祖父元素)            <li>li (父元素)                <span>span</span>                <p>p</p>            </li>        </ul>    </div></div></body></html>
效果如下：
设置函数属性 换个函数看看效果

0 0