小白教程
所有教程
关于
Search
172.69.59.135
172.69.59.135
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“JQuery 链”的源代码
本页内容
上一节:
JQuery_Callback_方法
下一节:
JQuery_获取内容和属性
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:jQuery 链}}[[Category:jQuery 教程|13]] = jQuery - 链(Chaining) = 通过 jQuery,可以把动作/方法链接在一起。 Chaining 允许我们在一条语句中运行多个 jQuery 方法(在相同的元素上)。 == jQuery 方法链接 == 直到现在,我们都是一次写一条 jQuery 语句(一条接着另一条)。 不过,有一种名为链接(chaining)的技术,允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条。 '''提示:''' 这样的话,浏览器就不必多次查找相同的元素。 如需链接一个动作,您只需简单地把该动作追加到之前的动作上。 下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色,然后向上滑动,再然后向下滑动: <sample title="" desc="" lang="html" hererun="1"> $("#p1").css("color","red").slideUp(2000).slideDown(2000); </sample> <run name=""> <!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(){ $("#p1").css("color","red").slideUp(2000).slideDown(2000); }); }); </script> </head> <body> <p id="p1">小白教程!!</p> <button>点我</button> </body> </html> </run> 如果需要,我们也可以添加多个方法调用。 '''提示:'''当进行链接时,代码行会变得很长。不过,jQuery 语法不是很严格;您可以按照希望的格式来写,包含换行和缩进。 如下书写也可以很好地运行: <sample title="" desc="" lang="html" hererun="1"> $("#p1").css("color","red") .slideUp(2000) .slideDown(2000); </sample> <run name=""> <!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(){ $("#p1").css("color","red") .slideUp(2000) .slideDown(2000); }); }); </script> </head> <body> <p id="p1">小白教程!!</p> <button>点我</button> </body> </html> </run> jQuery 会抛掉多余的空格,并当成一行长代码来执行上面的代码行。
返回至“
JQuery 链
”。
上一节:
JQuery_Callback_方法
下一节:
JQuery_获取内容和属性