jQuery对于链和捕获的实战研究

Posted 2022-08-09 黎燃黎燃

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 rel="nofollow" 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（）