jQuery 笔记

jQuery 的字面意思其实就是 JavaScript 和查询（Query），即用于辅助开发 JavaScript 的库。jQuery 是继 Prototype 之后的又一个优质的 JavaScript 库，属于开源编程语言。

简介

jQuery 是一个 JavaScript 函数库。

jQuery 是一个轻量级的“写的少，做的多”的 JavaScript 库。

jQuery 库包含以下功能：

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities

除此之外，jQuery 还提供了大量的插件。

安装

下载

从 jQuery 官方网站下载。

jQuery 库是一个 JavaScript 文件，可以使用 HTML 的标签引用它：

<head>
    <script src="jquery-3.4.1.min.js"></script>
</head>

CDN

如果不希望下载并存放 jQuery，那么可以通过 CDN 引用它。

  • 谷歌 CDN：

    https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js

  • 微软 CDN：

    https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js

  • CDNJS CDN：

    https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js

  • jsDelivr CDN：

    https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js

  • jQuery CDN：

    https://code.jquery.com/jquery-3.4.1.min.js

语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

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

  1. 符号“$”定义 jQuery；
  2. 选择符（selector）“查询”和“查找” HTML 元素；
  3. jQuery 的 action() 执行对元素的操作。

示例：

  • $(this).hide()：隐藏当前元素。
  • $("p").hide()：隐藏所有段落。
  • $("p .test").hide()：隐藏所有 class="test" 的段落。
  • $("#test").hide()：隐藏所有 id="test" 的元素。

文档就绪事件

在之后示例中的所有 jQuery 函数都位于一个 document ready 函数中：

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

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

  • 试图隐藏一个不存在的元素
  • 获得未完全加载的图像的大小

简洁写法（与以上写法效果相同）：

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

选择器

jQuery 选择器允许对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等“查找”（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

元素选择器

元素选择器基于元素名选取元素。

在页面中选取所有 <p> 元素：

$("p")

示例

用户点击按钮后，所有 <p> 元素都隐藏：

$(document).ready(function () {
    $("button").click(function () {
        $("p").hide();
    });
});

id 选择器

id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以要在页面中选取唯一的元素需要通过 #id 选择器。

通过 id 选取元素语法如下：

$("#test")

示例

当用户点击按钮后，id="test" 属性的元素将被隐藏：

$(document).ready(function () {
    $("button").click(function () {
        $("#test").hide();
    });
});

class 选择器

类选择器可以通过指定的 class 查找元素。

语法如下：

$(".test")

示例

用户点击按钮后所有带有 class="test" 属性的元素都隐藏：

$(document).ready(function () {
    $("button").click(function () {
        $(".test").hide();
    });
});

CSS 选择器

CSS 选择器可用于改变 HTML 元素的 CSS 属性。

示例

下面的例子把所有 p 元素的背景颜色更改为红色：

$("p").css("background-color", "red");

更多示例

语法 描述
$("*") 选取所有元素
$(this) 选取当前 HTML 元素
$("p.intro") 选取 class 为 intro 的 <p> 元素
$("p:first") 选取第一个 <p> 元素
$("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素
$("[href]") 选取带有 href 属性的元素
$("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button") 选取所有 <button> 元素和 type="button" 的 <input> 元素
$("tr:even") 选取偶数位置的 <tr> 元素
$("tr:odd") 选取奇数位置的 <tr> 元素

独立文件中使用 jQuery 函数

独立的 jQuery 函数文件通过 src 属性来引用

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="my_jquery_functions.js"></script>
</head>

事件

jQuery 是为事件处理特别设计的。

什么是事件

页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

示例：

  • 在元素上移动鼠标。
  • 选取单选按钮
  • 点击元素

在事件中经常使用术语“触发”（或“激发”）。例如：“当按下按键时，触发 keypress 事件”。

常见 DOM 事件：

鼠标事件 键盘事件 表单事件 文档 / 窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave hover blur unload

jQuery 事件方法语法

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

页面中指定一个点击事件：

$("p").click();

下一步是定义什么时间触发事件。可以通过一个事件函数实现：

$("p").click(function () {
    // 动作触发后执行的代码
});

常用的 jQuery 事件方法

$(document).ready()

$(document).ready() 方法允许在文档完全加载完后执行函数。该事件方法在前面已经提到过。

click()

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

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

在下面的示例中，当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素：

$("p").click(function () {
    $(this).hide();
});

dblclick()

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

dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：

$("p").dblclick(function () {
    $(this).hide();
});

mouseenter()

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

mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：

$("#p1").mouseenter(function () {
    alert("鼠标移到该段落上！");
});

mouseleave()

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

mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：

$("#p1").mouseleave(function () {
    alert("再见！鼠标离开了该段落。");
});

mousedown()

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

mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：

$("#p1").mousedown(function () {
    alert("鼠标在该段落上按下！");
});

mouseup()

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

mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：

$("#p1").mouseup(function () {
    alert("鼠标在段落上松开。");
});

hover()

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

当鼠标移动到元素上时，会触发指定的第一个函数（mouseenter）；当鼠标移出这个元素时，会触发指定的第二个函数（mouseleave）。

$("#p1").hover(function () {
        alert("鼠标移到该段落上！");
    },
    function () {
        alert("再见！鼠标离开了该段落。");
    });

focus()

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

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

focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：

$("input").focus(function () {
    $(this).css("background-color", "#cccccc");
});

blur()

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

blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：

$("input").blur(function () {
    $(this).css("background-color", "#ffffff");
});

比较 keypress、keydown 与 keyup

  • keydown：在键盘上按下某键时发生，一直按着则会不断触发，返回键盘代码；
  • keypress：在键盘上按下一个按键，并产生一个字符时发生，返回 ASCII 码。注意：Shift、Alt、Ctrl 等键按下并不会产生字符，所以监听无效。换句话说，只有按下能在屏幕上输出字符的按键时 keypress 事件才会触发。若一直按着某按键则会不断触发。
  • keyup：用户松开某一个按键时触发，与 keydown 相对，返回键盘代码。

效果

隐藏和显示

可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

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

语法：

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

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

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称，其具有以下三点说明：

  • $(selector) 选中的元素的个数为 n 个，则 callback 函数会执行 n 次；
  • callback 函数名后加括号，会立刻执行函数体，而不是等到显示 / 隐藏完成后才执行；
  • callback 既可以是函数名，也可以是匿名函数。

淡入淡出

通过 jQuery，可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法：

  • fadeIn()：淡入已隐藏的元素；
  • fadeOut()：淡出可见元素；
  • fadeToggle()：在 fadeIn() 与 fadeOut() 方法之间进行切换；
  • fadeTo()：允许渐变为给定的不透明度。

前三种 fadeIn()、fadeOut() 和 fadeToggle() 方法的语法如下：

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

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

fadeTo() 方法的语法如下：

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

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

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

滑动

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

jQuery 拥有以下滑动方法：

  • slideDown()：向下滑动元素；
  • slideUp()：向上滑动元素；
  • slideToggle()：在 slideDown() 与 slideUp() 方法之间进行切换。

语法如下：

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

动画

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

语法如下：

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

必需的 params 参数定义形成动画的 CSS 属性。

下面的例子演示 animate() 方法的简单应用。它把 <div> 元素往右边移动了 250 像素：

$("button").click(function () {
    $("div").animate({
        left: '250px'
    });
});

默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。

操作多个属性

生成动画的过程中可同时使用多个属性：

$("button").click(function () {
    $("div").animate({
        left: '250px',
        opacity: '0.5',
        height: '150px',
        width: '150px'
    });
});

可以用 animate() 方法来操作几乎所有 CSS 属性。不过，需要记住一件重要的事情：当使用 animate() 时，必须使用驼峰标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

同时，色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画，需要下载 Color Animations 插件。

使用相对值

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

$("button").click(function () {
    $("div").animate({
        left: '250px',
        height: '+=150px',
        width: '+=150px'
    });
});

使用预定义的值

甚至可以把属性的动画值设置为 show、hide 或 toggle：

$("button").click(function () {
    $("div").animate({
        height: 'toggle'
    });
});

使用队列功能

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

这意味着如果在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列，然后逐一运行这些 animate 调用。

$("button").click(function () {
    var div = $("div");
    div.animate({
        height: '300px',
        opacity: '0.4'
    }, "slow");
    div.animate({
        width: '300px',
        opacity: '0.8'
    }, "slow");
    div.animate({
        height: '100px',
        opacity: '0.4'
    }, "slow");
    div.animate({
        width: '100px',
        opacity: '0.8'
    }, "slow");
});

下面的例子把 <div> 元素往右边移动了 100 像素，然后增加文本的字号：

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

停止动画

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

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

语法如下：

$(selector).stop(stopAll, goToEnd);
  • 可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
  • 可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

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

下面的例子演示 stop() 方法，不带参数：

$("#stop").click(function () {
    $("#panel").stop();
});

回调函数

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

许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。由于 JavaScript 语句（指令）是逐一执行的：按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。为了避免这个情况，可以以参数的形式添加 Callback 函数。

以下示例在隐藏效果完全实现后回调函数：

$("button").click(function () {
    $("p").hide("slow", function () {
        alert("该段落现在被隐藏了。");
    });
});

以下示例没有回调函数，警告框会在隐藏效果完成前弹出：

$("button").click(function () {
    $("p").hide("slow");
    alert("该段落现在被隐藏了。");
});

Chaining

通过 jQuery，可以把动作／方法链接在一起。

Chaining 允许在一条语句中运行多个 jQuery 方法（在相同的元素上）。这样的话，浏览器就不必多次查找相同的元素。

如需链接一个动作，只需简单地把该动作追加到之前的动作上。

下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。p1 元素首先会变为红色，然后向上滑动，最后向下滑动：

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

如果需要，也可以添加多个方法调用。

当进行链接时，代码行会变得很差。不过，jQuery 语法不是很严格。可以按照希望的格式来写，包含换行和缩进：

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

jQuery 会抛掉多余的空格，并当成一行长代码来执行上面的代码行。

jQuery 与 HTML

获取

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

DOM = Document Object Model（文档对象模型）

DOM 定义访问 HTML 和 XML 文档的标准：

“W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。”

获取内容

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

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

下面的例子演示如何通过 text() 和 html() 方法来获得内容：

$("#btn1").click(function () {
    alert("Text: " + $("#test").text());
});
$("#btn2").click(function () {
    alert("HTML: " + $("#test").html());
});

下面的例子演示如何通过 val() 方法获得输入字段的值：

$("#btn1").click(function () {
    alert("Value: " + $("#test").val());
});

获取属性

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

下面的例子演示如何获得链接中 href 属性的值：

$("button").click(function () {
    alert($("#w3c").attr("href"));
});

设置

设置内容

使用上一节中的三个相同的方法来设置内容：

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

下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容：

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

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

下面的例子演示带有回调函数的 text() 和 html()：

$("#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 + ")"; 
    });
});

设置属性

attr() 方法也用于设置／改变属性值。

下面的例子演示如何改变（设置）链接中 href 属性的值：

$("button").click(function () {
    $("#w3c").attr("href", "https://www.w3cschool.cn/jquery");
});

attr() 方法也允许同时设置多个属性。

下面的例子演示如何同时设置 href 和 title 属性：

$("button").click(function () {
    $("#w3c").attr({
        "href": "https://www.w3cschool.cn/jquery",
        "title": "jQuery 教程"
    });
});

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

下面的例子演示带有回调函数的 attr() 方法：

$("button").click(function () {
    $("#w3cschool").attr("href", function (i, origValue) {
        return origValue + "/jquery";
    });
});

添加元素

用于添加新内容的四个 jQuery 方法：

  • append()：在被选元素内部的结尾插入指定内容。
  • prepend()：在被选元素内部的开头插入指定内容。
  • after()：在被选元素之后插入内容。
  • before()：在被选元素之前插入内容。

append()

append() 方法在被选元素的结尾插入内容。

$("#btn1").click(function () {
    $("p").append("<b>追加文本</b>。");
});
$("#btn2").click(function () {
    $("ol").append("<li>追加列表项</li>");
});

prepend()

prepend() 方法在被选元素的开头插入内容。

$("#btn1").click(function () {
    $("p").prepend("<b>在开头追加文本</b>。");
});
$("#btn2").click(function () {
    $("ol").prepend("<li>在开头添加列表项</li>");
});

通过 append() 和 prepend() 添加若干新元素

在上面的例子中，只在被选元素的开头／结尾插入文本／HTML。

不过，append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本／HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。

在下面的例子中，创建若干个新元素。这些元素可以通过文本／HTML、jQuery 或者 JavaScript／DOM 来创建。然后通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：

function appendText() {
    var txt1 = "<p>文本。</p>"; // 使用 HTML 标签创建文本
    var txt2 = $("<p></p>").text("文本。"); // 使用 jQuery 创建文本
    var txt3 = document.createElement("p");
    txt3.innerHTML = "文本。"; // 使用 DOM 创建文本
    $("body").append(txt1, txt2, txt3); // 追加新元素
}

after() 和 before()

after() 方法在被选元素之后插入内容；before() 方法在被选元素之前插入内容。

$("#btn1").click(function () {
    $("img").before("<b>之前</b>");
});
$("#btn2").click(function () {
    $("img").after("<i>之后</i>");
});

通过 after() 和 before() 添加若干新元素

after() 和 before() 方法能够通过参数接收无限数量的新元素。

在下面的例子中，创建若干新元素。这些元素可以通过文本／HTML、jQuery 或者 JavaScript／DOM 来创建。然后通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）：

function afterText() {
    var txt1 = "<b>I </b>"; // 使用 HTML 创建元素
    var txt2 = $("<i></i>").text("love "); // 使用 jQuery 创建元素
    var txt3 = document.createElement("big"); // 使用 DOM 创建元素
    txt3.innerHTML = "jQuery!";
    $("img").after(txt1, txt2, txt3); // 在图片后添加文本
}

删除元素

删除元素／内容

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

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

过滤被删除的元素

remove() 方法也可接受一个参数，允许对被删元素进行过滤。该参数可以是任何 jQuery 选择器的语法。

下面的例子删除 class="italic" 的所有 <p> 元素：

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

CSS 类

jQuery 拥有若干进行 CSS 操作的方法：

  • addClass()：向被选元素添加一个或多个类。
  • removeClass()：从被选元素删除一个或多个类。
  • toggleClass()：对被选元素进行添加／删除类的切换操作。
  • css()：设置或返回样式属性。

示例样式表

下面的样式表将用于本节的所有例子：

.important {
    font-weight: bold;
    font-size: xx-large;
}

.blue {
    color: blue;
}

addClass()

下面的例子展示如何向不同的元素添加 class 属性。当然，在添加类时，也可以选取多个元素（以逗号分隔）：

$("button").click(function () {
    $("h1, h2, p").addClass("blue");
    $("div").addClass("important");
});

也可以在 addClass() 方法中规定多个类（以空格分隔）：

$("button").click(function () {
    $("#div1").addClass("important blue");
});

removeClass()

下面的例子演示如何在不同的元素中删除指定的 class 属性：

$("button").click(function () {
    $("h1, h2, p").removeClass("blue");
});

toggleClass()

toggleClass() 方法对被选元素进行添加／删除类的切换操作：

$("button").click(function () {
    $("h1, h2, p").toggleClass("blue");
});

css() 方法

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

返回 CSS 属性

如需返回指定的 CSS 属性的值，请使用如下语法：

css("propertyname");

下面的例子将返回首个匹配元素的 background-color 值：

$("p").css("background-color");

设置 CSS 属性

如需设置指定的 CSS 属性，请使用如下语法：

css("propertyname", "value");

下面的例子将为所有匹配元素设置 background-color 值：

$("p").css("background-color", "yellow");

设置多个 CSS 属性

如需设置多个 CSS 属性，请使用如下语法：

css({
    "propertyname": "value",
    "propertyname": "value",
    …
});

下面的例子将为所有匹配元素设置 background-color 和 font-size：

$("p").css({
    "background-color": "yellow",
    "font-size": "200%"
});

尺寸

通过 jQuery，可以很容易地处理元素和浏览器窗口的尺寸。

jQuery 提供多个处理尺寸的重要方法：

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()
尺寸示意图

width() 和 height()

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

下面的例子返回指定的 <div> 元素的宽度和高度：

$("button").click(function () {
    var txt = "";
    txt += "Width: " + $("#div1").width() + "</br>";
    txt += "Height: " + $("#div1").height();
    $("#div1").html(txt);
});

innerWidth() 和 innerHeight()

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。

下面的例子返回指定的 <div> 元素的 inner-width/height：

$("button").click(function () {
    var txt = "";
    txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
    txt += "Inner height: " + $("#div1").innerHeight();
    $("#div1").html(txt);
});

outerWidth() 和 outerHeight()

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。

下面的例子返回指定的 <div> 元素的 outer-width/height：

$("button").click(function () {
    var txt = "";
    txt += "Outer width:" + $("#div1").outerWidth() + "</br>";
    txt += "Outer height:" + $("#div1").outerHeight();
    $("#div1").html(txt);
});

outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）；outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。

遍历

什么是遍历？

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

下图展示了一个家族树。通过 jQuery 遍历，能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先）、向下移动（子孙）、水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

DOM 家族树
  • <div> 元素是 <ul> 的父元素，同时是其中所有内容的祖先。
  • <ul> 元素是 <li> 元素的父元素，同时是 <div> 的子元素。
  • 左边的 <li> 元素是 <span> 的父元素、<ul> 的子元素，同时是 <div> 的后代。
  • <span> 元素是 <li> 的子元素，同时是 <ul> 和 <div> 的后代。
  • 两个 <li> 元素是同胞（拥有相同的父元素）。
  • 右边的 <li> 元素是 <b> 的父元素、<ul> 的子元素，同时是 <div> 的后代。
  • <b> 元素是右边的 <li> 的子元素，同时是 <ul> 和 <div> 的后代。

祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。

遍历 DOM

jQuery 提供了多种遍历 DOM 的方法。

遍历方法中最大的种类是树遍历（tree-traversal）。

祖先遍历

祖先是父、祖父或曾祖父等等。

通过 jQuery，能够向上遍历 DOM 树，以查找元素的祖先。

parent()

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

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

下面的例子返回每个 <span> 元素的的直接父元素：

$(document).ready(function () {
    $("span").parent();
});

parents()

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。

下面的例子返回所有 <span> 元素的所有祖先：

$(document).ready(function () {
    $("span").parents();
});

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

下面的例子返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素：

$(document).ready(function () {
    $("span").parents("ul");
});

parentsUntil()

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

下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：

$(document).ready(function () {
    $("span").parentsUntil("div");
});

后代遍历

后代是子、孙、曾孙等等。

通过 jQuery，能够向下遍历 DOM 树，以查找元素的后代。

children()

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

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

下面的例子返回每个 <div> 元素的所有直接子元素：

$(document).ready(function () {
    $("div").children();
});

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

下面的例子返回类名为“1”的所有 <p> 元素，并且它们是 <div> 的直接子元素：

$(document).ready(function () {
    $("div").children("p.1");
});

find()

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

下面的例子返回属于 <div> 后代的所有 <span> 元素：

$(document).ready(function () {
    $("div").find("span");
});

下面的例子返回 <div> 的所有后代：

$(document).ready(function () {
    $("div").find("*");
});

同胞遍历

同胞拥有相同的父元素。

通过 jQuery，能够在 DOM 树中遍历元素的同胞元素。

siblings()

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

下面的例子返回 <h2> 的所有同胞元素：

$(document).ready(function () {
    $("h2").siblings();
});

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

下面的例子返回属于 <h2> 的同胞元素的所有 <p> 元素：

$(document).ready(function () {
    $("h2").siblings("p");
});

next()

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

该方法只返回一个元素。

下面的例子返回 <h2> 的下一个同胞元素：

$(document).ready(function () {
    $("h2").next();
});

nextAll()

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

下面的例子返回 <h2> 的所有跟随的同胞元素：

$(document).ready(function () {
    $("h2").nextAll();
});

nextUntil()

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

下面的例子返回介于 <h2> 与 <h6> 元素之间的所有同胞元素：

$(document).ready(function () {
    $("h2").nextUntil("h6");
});

prev()、prevAll() 和 prevUntil()

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

过滤

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

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

first()

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

下面的例子选取首个 <div> 元素内部的第一个 <p> 元素：

$(document).ready(function () {
    $("div p").first();
});

last()

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

下面的例子选择最后一个 <div> 元素中的最后一个 <p> 元素：

$(document).ready(function () {
    $("div p").last();
});

eq()

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

索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）：

$(document).ready(function () {
    $("p").eq(1);
});

filter()

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

下面的例子返回带有类名“intro”的所有 <p> 元素：

$(document).ready(function () {
    $("p").filter(".intro");
});

not()

not() 方法返回不匹配标准的所有元素，正好与 filter() 相反。

下面的例子返回不带有类名“intro”的所有 <p> 元素：

$(document).ready(function () {
    $("p").not(".intro");
});
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 157,298评论 4赞 360
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 66,701评论 1赞 290
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 107,078评论 0赞 237
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,687评论 0赞 202
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,018评论 3赞 286
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,410评论 1赞 211
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,729评论 2赞 310
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,412评论 0赞 194
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,124评论 1赞 239
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2赞 242
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1赞 257
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,268评论 2赞 251
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 32,894评论 3赞 233
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0赞 192
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2赞 269
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2赞 260

推荐阅读更多精彩内容

  • JQ
    通过jQuery，您可以选取（查询，query）HTML元素，并对它们执行“操作”（actions）。 jQuer...
    枇杷树8824阅读 627评论 0赞 3
  • jQuery笔记（四）-- 操作DOM
    DOM操作可分为3个方面：DOM Core(核心)、HTML DOM和CSS DOM（1）DOM Core不属于J...
    寒桥阅读 460评论 0赞 1
  • 十二、事件
      JavaScript 与 HTML 之间的交互是通过事件实现的。   事件，就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,424评论 1赞 11
  • jQuery基础(1)
    一、样式篇 第1章 初识jQuery （1）环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,276评论 0赞 44
  • 电子商务网站开发与建设
    概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 8,613评论 0赞 3