jQuery 链

通过 jQuery，可以将操作/方法链接在一起。链接允许我们在一条语句中运行多个 jQuery 方法（在同一个元素上）。JQuery 方法链接到目前为止，我们一次编写一条 jQuery 语句（一条接一条）。然而，有一种称为链接的技术允许我们在同一个元素上一个接一个地运行多个 jQuery 命令。提示：这样，浏览器就不必多次查找同一元素。要链接一个动作，只需将该动作附加到上一个动作。下面的示例链接了 css（）、slideup（）和 slidedown（）。“P1”元素首先变为红色，然后向上滑动，然后向下滑动：

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

<script>$(document).ready(function()  {  $("button").click(function(){    $("#p1").css("color","red").slideUp(2000).slideDown(2000);  });});</script>

如果需要，还可以添加多个方法调用。链接时，代码行变得很长。然而，jQuery 语法不是很严格；可以按所需格式写入，包括换行和缩进。以下文字也可以很好地使用：

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

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

jQuery - 获取内容和属性

JQuery 具有处理 HTML 元素和属性的强大方法。JQuery DOM 操作 jQuery 的一个非常重要的部分是操作 dom 的能力。JQuery 提供了一系列与 DOM 相关的方法，使得访问和操作元素和属性变得容易。获取内容-text（）、HTML（）和 val（）用于 DOM 操作的三种简单实用的 jQuery 方法：Text（）-设置或返回选定元素的文本内容 HTML（）-设置或返回所选元素的内容（包括 HTML 标记）Val（）-设置或返回表单字段的值

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

通过 jQuery val() 方法获得输入字段的值：

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

获取属性-attr（）jQuery attr（）方法用于获取属性值。以下示例显示了如何获取链接中 href 属性的值：

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

对于 HTML 元素的固有属性，在处理过程中使用 prop 方法。对于我们自己定义的 HTML 元素的 DOM 属性，我们在处理时使用 attr 方法。

<a href="https://www.runoob.com" target="_self" class="btn">1111</a>

在本例中，<a>元素的 DOM 属性是：href、target 和 class。这些属性是<a>元素本身的属性，包含在 W3C 标准中，或者是可以在 IDE 中智能提示的属性。这些称为内在属性。处理这些属性时，建议使用 prop 方法。

<a href="#" id="link1" action="delete" rel="nofollow">删除</a>

在本例中，<a>元素的 DOM 属性是：href、ID 和 action。很明显，前两个是固有属性，而最后一个动作属性是由我们定制的。<a>元素本身没有此属性。这是自定义 DOM 属性。在处理这些属性时，建议使用 attr 方法。prop（）函数的结果：1.如果有对应的属性，则返回指定的属性值。2.如果没有对应的属性，则返回值为空字符串。attr（）函数的结果：1.如果有对应的属性，则返回指定的属性值。2.如果没有对应的属性，则返回值未定义。对于 HTML 元素的固有属性，在处理过程中使用 prop 方法。对于我们自己定义的 HTML 元素的 DOM 属性，我们在处理时使用 attr 方法。对于具有 true 和 false 属性的特性，如选中、选中或禁用，请使用 prop（）