一、jQuery 对象遍历

通过某一个 dom 对象的父子、兄弟之间的关系检索对象

1.children(‘selector’)

获得当前元素的全部直接子元素(集合)，可以在参数中使用选择器过滤。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">function test() {$("div").children().css("background", "red");}</script></head><body><p>Hello</p><div><span>Hello Again</span><span>Hello Again</span><span>Hello Again</span><span>Hello Again</span></div><p>And Again</p> <button type="button" onclick="test()">点我</button></body>
</html>

效果展示：
在这里插入图片描述

2.find(‘selector’)

获得当前元素的全部后代元素，可以在参数中使用选择器过滤。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">function test() {$("p").find("span").css("background", "red");}</script></head><body><p><span>Hello</span>, how are you?</p> <button type="button" onclick="test()">点我</button></body>
</html>

效果展示：
在这里插入图片描述

3.next()

获得当前元素的下一个兄弟元素。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {$("#btn").click(function() { //找到每个段落的后面紧邻的同辈元素。 $("p").next("p").css("background", "red"); }); }); </script></head><body><p>Hello</p><p>Hello Again</p><div><span>And Again</span></div> <button type="button" id="btn">点我</button></body>
</html>

效果展示：
在这里插入图片描述

4.nextAll()

获得当前元素之后的全部兄弟元素。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {$("#btn").click(function() { //给第一个 div 之后的所有元素加个类 $("div:first").nextAll().addClass("red"); }) });</script></head><body><div>div1</div><div>div2</div><div>div3</div><div>div4</div><div>div5</div> <button type="button" id="btn">点我</button></body>
</html>

效果展示：
在这里插入图片描述
prev():获得当前元素的前一个兄弟元素。
prevAll()：获得当前元素之前的全部兄弟元素。

5.parent()

获得当前元素的直接父元素。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {$("#btn").click(function() { //查找每个段落的父元素 $("p").parent().css("background","red"); }) }) </script></head><body><div><p>Hello</p><p>Hello</p></div> <div style="background-color: aquamarine;width: 100px;height: 50px;"></div><button type="button" id="btn">点我</button></body>
</html>

效果展示：
在这里插入图片描述

6.parents()

获得当前元素的所有父元素。
offsetParent()：获取距离当前元素最近的含有定位信息的祖先元素。含有定位信息的元素指的是，CSS 的 position 属性是 relative, absolute, 或 fixed 的元素。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {$("#btn").click(function() { //找到每个 span 元素的所有祖先元素。 $("span").parents().css("background","red"); })});</script></head><body><div style="background-color: aquamarine;width: 100px;height:100px;"><p><span>Hello</span></p><span>Hello Again</span></div> <button type="button" id="btn">点我</button></body>
</html>

效果展示：
在这里插入图片描述

二、Jquery特效

jQuery 对于特效的封装都是用动画效果来显示和隐藏元素

1.显示及隐藏

基本的隐藏和显示
hide():隐藏匹配的元素。示例： $(‘img’).hide();
show():显示匹配的元素. 示例： $(‘img’).show();
toggle()：显示或隐藏匹配元素。示例： $(‘img’).toggle(); $(‘img’).toggle(3000,function() { alert(‘操作成功’);});

2.淡入淡出

在这里插入图片描述

3.滑动的隐藏和显示

在这里插入图片描述

三、一个好玩的综合案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery-1.10.2.min.js"></script><script>function turnRight() {$("#second").append($("#first option:selected"));//相当于剪切}function turnLeft() {$("#first").append($("#second option:selected"));}function turnAllRight() {$("#second").append($("#first option"));//相当于剪切}function turnAllLeft() {$("#first").append($("#second option"));}// 从 DOM 中把带有 hello 类的段落删除 function test(){//  $("p").detach(".hello");$("p").remove(".hello");$("h1").empty();}</script><style type="text/css">input[type="button"] {width: 100px;}select {width: 300px;}</style></head><body><div id="outerDiv"><select id="first" multiple="multiple"><option value="">java</option><option value="">.net</option><option value="">web 前端</option><option value="">测试</option><option value="">运维</option></select><div style="display: inline-block;"><input type="button" value=">>" onclick="turnRight()" /><br /><input type="button" value="<<" onclick="turnLeft()" /><br /><input type="button" value=" 全 部 >>" onclick="turnAllRight()" /><br /><input type="button" value=" 全 部 <<" onclick="turnAllLeft()" /><br /></div><select id="second" multiple="multiple"> </select></div><h1>天天开心</h1><p class="hello">Hello</p> <p>how are you?</p> <button type="button" onclick="test()">点我</button></body>
</html>