jQuery

jQuery 语法

基础语法： $(*selector*).*action*()

美元符号定义 jQuery
选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作

文档就绪事件：

所有 jQuery 函数位于一个 document ready 函数中

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

简要写法：

$(function(){
 
   // 开始写 jQuery 代码...
 
});

jQuery 选择器

元素选择器

在页面中选取所有

元素:

$("P")

id选择器

$("#test")

class选择器

$(".test")

其他常用选择器：
在这里插入图片描述

jQuery 事件

在这里插入图片描述

常用的jQuery事件方法

$(document).ready()

$(document).ready() 方法允许我们在文档完全加载完后执行函数。

click()

click() 方法是当按钮点击事件被触发时会调用一个函数。

该函数在用户点击 HTML 元素时执行。

dblclick()

当双击元素时，会发生 dblclick 事件。

mouseenter()

当鼠标指针穿过元素时，会发生 mouseenter 事件。

mouseleave()

当鼠标指针离开元素时，会发生 mouseleave 事件。

mousedown()

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

mouseup()

当在元素上松开鼠标按钮时，会发生 mouseup 事件。

hover()

hover()方法用于模拟光标悬停事件。

focus()

当元素获得焦点时，发生 focus 事件。

当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

blur()

当元素失去焦点时，发生 blur 事件。

jQuery 效果

jQuery 显示/隐藏

jQuery hide()和show()

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

第二个参数是一个字符串，表示过渡使用哪种缓动函数。jQuery自身提供两种“linear”，和“swing"

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <style>
        div {
            width: 130px;
            height: 50px;
            padding: 15px;
            margin: 15px;
            background-color: green;
        }
    </style>

    <script>
        $(document).ready(function () {
            $(".hidebtn").click(function () {
                $("div").hide(1000, "linear", function () {
                    alert("Hide() 方法已完成!");
                });
            });

            $(".showbtn").click(function () {
                $("div").show();
            });
        });
    </script>
</head>
<body>

<div>隐藏及设置回调函数</div>
<button class="hidebtn">隐藏</button>
<button class="showbtn">显示</button>

</body>
</html>

toggle()

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

$("button").click(function(){
  $("p").toggle();
});

jQuery 淡入淡出

jQuery Fading方法

jQuery 拥有下面四种 fade 方法：

fadeIn()
fadeOut()
fadeToggle()
fadeTo()

fadeln()方法

Query fadeIn() 用于淡入已隐藏的元素。

$(selector).fadeIn(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。.

可选的 callback 参数是 fading 完成后所执行的函数名称。

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
</script>
</head>

<body>
<p>以下实例演示了 fadeIn() 使用了不同参数的效果。</p>
<button>点击淡入 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

</body>

fadeOut()方法

jQuery fadeOut() 方法用于淡出可见元素。

参数同fadeln()

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

fadeToggle()方法

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

参数同fadeln()方法

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

fadeTo()方法

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

$(*selector*).fadeTo(*speed,opacity,callback*);

必需的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

可选的 callback 参数是该函数完成后所执行的函数名称。

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

jQuery 滑动

通过 jQuery，在元素上创建滑动效果。

jQuery 拥有以下滑动方法：

slideDown()
slideUp()
slideToggle()

slideDown() 方法

jQuery slideDown() 方法用于向下滑动元素。

$(*selector*).slideDown(*speed,callback*);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

jQuery slideUp() 方法

jQuery slideUp() 方法用于向上滑动元素。

jQuery slideToggle() 方法

jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("#flip1").click(function () {
                $("#panel").slideUp("slow");
                // $("#panel").slideToggle("slow");可以用这一个方法实现拉起和滑下
            });

            $("#flip2").click(function () {
                $("#panel").slideDown("slow", function () {
                    alert("你好")
                });
            });
        });
        // $("#panel").slideToggle("slow");可以用这一个方法实现拉起和滑下

    </script>

    <style type="text/css">
        #panel, #flip1, #flip2 {
            padding: 5px;
            text-align: center;
            background-color: #e5eecc;
            border: solid 1px #c3c3c3;
        }

        #panel {
            padding: 50px;
        }
    </style>
</head>
<body>

<div id="flip1">点我拉起面板</div>
<div id="flip2">点我滑下面板</div>
<div id="panel">Hello world!</div>

</body>
</html>

jQuery 动画

jQuery animate() 方法

jQuery animate() 方法用于创建自定义动画

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性（可以有多个属性）。比如：左移，右移，放大文字

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

注意：

当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

jQuery animate() 方法-使用相对值

可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=。

jQuery animate() - 使用预定义的值

可以把属性的动画值设置为 “show”、“hide” 或 “toggle”。

jQuery animate() - 使用队列功能

默认地，jQuery 提供针对动画的队列功能。

可以编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>-->
    <script src="../lib/jquery-3.5.1.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 2px solid red;
            text-align: center;
            line-height: 100px;
            background: red;
            border-radius: 100px;
            position: absolute;
        }
    </style>
</head>

<body>

<button id="btn1">点击起飞</button>
<button id="btn2">点击降落</button>
<div>
    杨欣馨
</div>


<script>
    $("#btn1").click(function () {
        $("div").animate({left: '250px'});
        $("div").animate({
            height: "+=250",
            width: "+=250"
        });
    });

    $("#btn2").click(function () {
        var div = $("div");
        div.animate({left: '100px'}, "slow");
        div.animate({fontSize: '3em'}, "slow");
    });
</script>

</body>
</html>

jQuery 停止动画

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop(false,true);
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
	padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px #c3c3c3;
}
#panel
{
	padding:50px;
	display:none;
}
</style>
</head>
<body>
 
<button id="stop">停止滑动</button>
<div id="flip">点我向下滑动面板</div>
<div id="panel">Hello world!</div>

</body>
</html>

Callback方法

Callback 函数在当前动画 100% 完成之后执行

jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide("slow",function(){
      alert("段落现在被隐藏了");
    });
  });
});
</script>
</head>
<body>
<button>隐藏</button>
<p>我们段落内容，点击“隐藏”按钮我就会消失</p>
</body>
</html>

jQuery链接

Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。

$("#p1").css("color","red").slideUp(2000).slideDown(2000);
或
$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);

jQuery HTML

jQuery 捕获

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("#btn1").click(function () {
                alert("Text: " + $("#test").text());
            });
            $("#btn2").click(function () {
                alert("HTML: " + $("#test").html());
            });
            $("#btn3").click(function () {
                alert("值为: " + $("#test1").val());
            });
        });
    </script>
</head>

<body>
<p id="test">这是段落中的 <b>粗体</b> 文本。</p>
<p>名称: <input type="text" id="test1" value="菜鸟教程"></p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
<button id="btn3">显示值</button>
</body>
</html>

获取属性 - attr()

jQuery attr() 方法用于获取属性值。

//获得链接中id号为 runoob 的 href 属性的值：
$("button").click(function(){
  alert($("#runoob").attr("href"));
});

jQuery 设置

设置内容 - text()、html() 以及 val()

设置内容（会覆盖原本的内容）：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("RUNOOB");
});

text()、html() 以及 val() 的回调函数

三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text(function(i,origText){
      return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
  });

  $("#btn2").click(function(){
    $("#test2").html(function(i,origText){
      return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
    });
  });

});
</script>
</head>

<body>
<p id="test1">这是一个有 <b>粗体</b> 字的段落。</p>
<p id="test2">这是另外一个有 <b>粗体</b> 字的段落。</p>
<button id="btn1">显示 新/旧 文本</button>
<button id="btn2">显示 新/旧 HTML</button>
</body>
</html>

结果：

旧文本: 这是一个有粗体字的段落。新文本: Hello world! (index: 0)

旧 html: 这是另外一个有粗体字的段落。新 html: Hello world! (index: 0)

设置属性 - attr()

jQuery attr() 方法也用于设置/改变属性值（可以设置多个属性）。

设置链接中 href 属性的值和链接的名称

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#runoob").attr({
      "href" : "http://www.runoob.com/jquery",
      "title" : "jQuery 教程"
    });
	// 通过修改的 title 值来修改链接名称
	title =  $("#runoob").attr('title');
	$("#runoob").html(title);
  });
});
</script>
</head>

<body>
<p><a href="//www.runoob.com" id="runoob">菜鸟教程</a></p>
<button>修改 href 和 title</button>
<p>点击按钮修改后，可以查看 href 和 title 是否变化。</p>
</body>
</html>

attr() 的回调函数

jQuery 方法 attr()，也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#runoob").attr("href", function(i, origValue){
            return origValue + "/jquery";
        });
    });
});
</script>
</head>
<body>

<p><a href="//www.runoob.com" id="runoob">菜鸟教程</a></p>

<button>修改 href 值</button>

<p>点击按钮修改后，可以点击链接查看 href 属性是否变化。</p>

</body>
</html>

jQuery 添加元素

添加新的 HTML 内容

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

append() 和 prepend() 方法，after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

append/prepend 是在选择元素内部嵌入。

after/before 是在元素外面追加。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        function appendText() {
            var txt1 = "<p>文本1。</p>";              // 使用 HTML 标签创建文本
            var txt2 = $("<p></p>").text("文本2。");  // 使用 jQuery 创建文本
            var txt3 = document.createElement("p");
            txt3.innerHTML = "文本3。";               // 使用 DOM 创建文本 text with DOM
            $("body").append(txt1, txt2, txt3);        // 追加新元素

        }

        $(document).ready(function () {
            $("#btn").click(function () {
                $("p").append("append添加元素 ");
                $("p").prepend("prepend添加元素 ");
            });
        });

        function appendText1() {
            var txt1 = "<b>I </b>";                    // 使用 HTML 创建元素
            var txt2 = $("<i></i>").text("love ");     // 使用 jQuery 创建元素
            var txt3 = document.createElement("big");  // 使用 DOM 创建元素
            txt3.innerHTML = "jQuery!";
            $("p").append(txt1, txt2, txt3);        // 追加新元素
        }

        $(document).ready(function () {
            $("#btn1").click(function () {
                $("p").append("after添加元素 ");
                $("p").prepend("before添加元素 ");
            });
        });
    </script>
</head>
<body>

<p>这是一个段落。</p>
<button οnclick="appendText()">append追加多个文本</button>
<button id="btn">append,prepend追加文本</button>
<button οnclick="appendText1()">after追加多个文本</button>
<button id="btn1">after,追加文本</button>


</body>
</html>

jQuery 删除元素

删除元素/内容

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            // 移除选定元素和子元素
            $("#btn1").click(function () {
                $("#div1").remove();
            });
            // 移除子元素
            $("#btn2").click(function () {
                $("#div1").empty();
            });
        });
    </script>
</head>

<body>

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

    这是 div 中的一些文本。
    <p>这是在 div 中的一个段落。</p>
    <p>这是在 div 中的另外一个段落。</p>

</div>
<br>
<button id="btn1">移除div元素及其子元素</button>
<button id="btn2">移除div的子元素</button>

</body>
</html>

过滤被删除的元素

jQuery remove() 方法也可接受一个参数，允许对被删元素进行过滤。

该参数可以是任何 jQuery 选择器的语法。

$("p").remove(".italic")

jQuery CSS类

jQuery操作CSS

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="//cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <style>
        .red {
            color: red;
        }
    </style>
    <script>
        $(document).ready(function () {
            $("#btn1").click(function () {
                $("#div1").addClass("red");
            });
            $("#btn2").click(function () {
                $("#div2").removeClass("red");
            });
            $("#btn3").click(function () {
                $("#div2,#div1").toggleClass("red");
            });
        });
    </script>

</head>
<body>

<div id="div1">这是文本1</div>
<div id="div2" class="red">这是文本2</div>

<button id="btn1">从元素中添加class</button>
<button id="btn2">从元素中移除class</button>
<button id="btn3">从元素中移除/添加class</button>

</body>
</html>

jQuery css()方法

css() 方法设置或返回被选元素的一个或多个样式属性。

返回指定的 CSS 属性的值

css("propertyname");  // propertyname属性名

设置一个或多个CSS 属性

// 设置一个css属性
css("propertyname","value");	// 属性名：属性值

// 设置多个css属性
css({"propertyname":"value","propertyname":"value",...});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("#btn1").click(function () {
                $("p").css({"background-color": "yellow", "font-size": "200%"});
            });
            $("#btn2").click(function () {
                alert($("p").css("background-color"));
            })
        });
    </script>
</head>
<body>

<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p>这是一个段落。</p>
<button id="btn1">为 p 元素设置多个样式</button>
<button id="btn2">为 p 元素设置多个样式</button>

</body>
</html>

jQuery 尺寸

jQuery 尺寸方法

width()：设置或返回元素的宽度（不包括内边距、边框或外边距）。
height()：设置或返回元素的高度（不包括内边距、边框或外边距）
innerWidth()：返回元素的宽度（包括内边距）。
innerHeight()：返回元素的高度（包括内边距）。
outerWidth()：返回元素的宽度（包括内边距和边框）
outerHeight()：返回元素的高度（包括内边距和边框）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                var txt = "";
                txt += "div 宽度: " + $("#div1").width() + "</br>";
                txt += "div 高度: " + $("#div1").height() + "</br>";
                txt += "div 宽度，包含内边距: " + $("#div1").innerWidth() + "</br>";
                txt += "div 高度，包含内边距: " + $("#div1").innerHeight();
                txt += "div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
                txt += "div 高度，包含内边距和边框: " + $("#div1").outerHeight();
                $("#div1").html(txt);
            });
        });
    </script>
</head>

<body>
<div id="div1"
     style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>

<button>显示 div 元素的尺寸</button>
<p>outerWidth() - 返回元素的宽度 (包含内边距和边框)。</p>
<p>outerHeight() - 返回元素的高度 (包含内边距和边框)。</p>
<p>innerWidth() - 返回元素的宽度 (包含内边距)。</p>
<p>innerHeight() - 返回元素的高度 (包含内边距)。</p>

</body>
</html>

jQuery 遍历

什么是遍历？

jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

jQuery 祖先

向上遍历 DOM 树

parent()
parents()
parentsUntil()

jQuery parent() 方法

parent() 方法返回被选元素的直接父元素。

该方法只会向上一级对 DOM 树进行遍历。

jQuery parents() 方法

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。且可以在所有的祖先元素中进行筛选。

jQuery parentsUntil() 方法

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        body div, span, ul, li {
            display: block;
            border: 2px solid lightgrey;
            color: lightgrey;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("#btn1").click(function () {
                // 父元素
                $("span").parent().css({"color": "red", "border": "2px solid red"});
            });
            $("#btn2").click(function () {
                // 所有祖先元素
                $("span").parents().css({"color": "red", "border": "2px solid red"});
                // 所有 <span> 元素的所有祖先，并且它是 <ul> 元素
                // $("span").parents("ul").css({"color": "red", "border": "2px solid red"});
            });
            $("#btn3").click(function () {
                // 两个给定元素之间的所有祖先元素
                $("span").parentsUntil("div").css({"color": "red", "border": "2px solid red"});
            });
        });
    </script>
</head>
<body>

<div class="ancestors">
    <div style="width:500px;">div (曾祖父元素)
        <ul>ul (祖父元素)
            <li>li (父元素)
                <span>span</span>
            </li>
        </ul>
    </div>
</div>

<button id="btn1">parent()</button>
<button id="btn2">parents()</button>
<button id="btn3">parentUntil()</button>

</body>
</html>

jQuery 后代

向下遍历 DOM 树

向下遍历 DOM 树的 jQuery 方法：

children()
find()

jQuery children() 方法

children() 方法返回被选元素的所有直接子元素。

该方法只会向下一级对 DOM 树进行遍历。

可以在children的括号中加入选择器来实现过滤搜索

jQuery find() 方法

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

在find的括号中加入元素则可以实现返回指定的后代

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .descendants * {
            display: block;
            border: 2px solid lightgrey;
            color: lightgrey;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("btn1").click(function () {
                // 返回乜咯div元素的直接子元素
                $("div").children().css({"color": "red", "border": "2px solid red"});
                // 返回div元素中类名为 1 的p元素
                $("div").children("p.1").css({"color": "red", "border": "2px solid red"});
            });
            $("btn2").click(function () {
                // 返回属于div后代的所有span元素
                $("div").find("span").css({"color": "red", "border": "2px solid red"});
                // 返回属于div后代的所有元素
                // $("div").find("*").css({"color":"red","border":"2px solid red"});
            });
        });
    </script>
</head>
<body>

<div class="descendants" style="width:500px;">div (当前元素)
    <p class="1">p (儿子元素)
        <span>span (孙子元素)</span>
    </p>
    <p class="2">p (儿子元素)
        <span>span (孙子元素)</span>
    </p>
</div>

<button id="btn1">children()</button>

</body>
</html>

jQuery 同胞

在 DOM 树中水平遍历

siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()

jQuery siblings() 方法

siblings() 方法返回被选元素的所有同胞元素。

也可以使用可选参数来过滤对同胞元素的搜索。

jQuery next() 方法

next() 方法返回被选元素的下一个同胞元素。

该方法只返回一个元素。

jQuery nextAll() 方法

nextAll() 方法返回被选元素的所有跟随的同胞元素。

jQuery nextUntil() 方法

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

jQuery prev(), prevAll() & prevUntil() 方法

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历）。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .siblings div, span, p, h2, h3, h4, h5, h6 {
            display: block;
            border: 2px solid lightgrey;
            color: lightgrey;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("#btn1").click(function () {
                // siblings() 方法返回被选元素的所有同胞元素
                $("h2").siblings().css({"color": "red", "border": "2px solid red"});
                // 返回属于 <h2> 的同胞元素的所有 <p> 元素
                $("h2").siblings("p").css({"color": "red", "border": "2px solid red"});
            })
            $("#btn2").click(function () {
                // next() 方法返回被选元素的下一个同胞元素
                $("h2").next().css({"color": "red", "border": "2px solid red"});
            })
            $("#btn3").click(function () {
                // nextAll() 方法返回被选元素的所有跟随的同胞元素。
                $("h2").nextAll().css({"color": "red", "border": "2px solid red"});
            })
            $("#btn4").click(function () {
                // nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素
                $("h2").nextUntil("h6").css({"color": "red", "border": "2px solid red"});
            })
        });
    </script>
</head>
<body class="siblings">

<div>div (父元素)
    <p>p</p>
    <span>span</span>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>
    <p>p</p>
</div>

<button id="btn1">siblings()</button>
<button id="btn2">next()</button>
<button id="btn3">nextall()</button>
<button id="btn4">nextUntil()</button>

</body>
</html>

jQuery 过滤

缩小搜索元素的范围

三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。

其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

jQuery first() 方法

first() 方法返回被选元素的首个元素。

// 选取首个 <div> 元素内部的第一个 <p> 元素
$(document).ready(function(){
  $("div p").first();
});

jQuery last() 方法

last() 方法返回被选元素的最后一个元素。

// 选择最后一个 <div> 元素中的最后一个 <p> 元素：
$(document).ready(function(){
  $("div p").last();
});

jQuery eq() 方法

eq() 方法返回被选元素中带有指定索引号的元素。

索引号从 0 开始，因此首个元素的索引号是 0 而不是 1

// 选取第二个 <p> 元素（索引号 1）：
$(document).ready(function(){
  $("p").eq(1);
});

jQuery filter() 方法

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

// 返回带有类名 "url" 的所有 <p> 元素：
$(document).ready(function(){
  $("p").filter(".url");
});

jQuery not() 方法

not() 方法返回不匹配标准的所有元素。

提示：not() 方法与 filter() 相反。

// 返回不带有类名 "url" 的所有 <p> 元素：
$(document).ready(function(){
  $("p").not(".url");
});

JQuery学习（来自菜鸟教程）

jQuery

jQuery 语法

jQuery 选择器

jQuery 事件

jQuery 效果

jQuery 显示/隐藏

jQuery 淡入淡出

jQuery 滑动

jQuery 动画

jQuery 停止动画

Callback方法

jQuery链接

jQuery HTML

jQuery 捕获

jQuery 设置

jQuery 添加元素

jQuery 删除元素

jQuery CSS类

jQuery css()方法

jQuery 尺寸

jQuery 遍历

jQuery 遍历

jQuery 祖先

jQuery 后代

jQuery 同胞

jQuery 过滤

猜你喜欢