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

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

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()

相关文章
|
6月前
|
开发框架 JSON JavaScript
ASP.NET Core3.1实战教程---基于Jquery单文件上传
ASP.NET Core3.1实战教程---基于Jquery单文件上传
81 0
|
6月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
152 0
|
5月前
|
开发框架 JavaScript 前端开发
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
46 0
|
XML JSON JavaScript
jQuery入门到实战
jQuery入门到实战
jQuery入门到实战
|
前端开发 JavaScript
Echarts实战案例代码(22):jquery使用ajax属性beforeSend实现预加载loading效果代替showLoading的解决方案
Echarts实战案例代码(22):jquery使用ajax属性beforeSend实现预加载loading效果代替showLoading的解决方案
115 0
|
6月前
|
前端开发 JavaScript
Jquery ajax捕获错误信息
Jquery ajax捕获错误信息
58 0
|
JavaScript
jQuery之实战
jQuery之实战
142 0
jQuery之实战
|
JavaScript 前端开发 API
jQuery入门到实战
jQuery入门到实战
121 0
jQuery入门到实战
|
JavaScript 前端开发 CDN
Prototype以及jQuery和CDN -内容分发网络在使用JavaScript实战运用
Prototype以及jQuery和CDN -内容分发网络在使用JavaScript实战运用
Prototype以及jQuery和CDN -内容分发网络在使用JavaScript实战运用
|
JavaScript 前端开发
对于jQuery选择器和动画效果停止动画的实战心得【前端jQuery框架】
对于jQuery选择器和动画效果停止动画的实战心得【前端jQuery框架】
对于jQuery选择器和动画效果停止动画的实战心得【前端jQuery框架】