转,jQuery入门[4]-链式代码
jQuery入门[4]-链式代码
jQuery入门[1]-构造函数
jQuery入门[2]-选择器
jQuery入门[3]-事件
jQuery入门[4]-链式代码
jQuery入门[5]-AJAX
jQuery入门[6]-动画
jQuery另一个很令人惬意的地方是,一般的代码都是一行一行写,jQuery的代码可以一串一串写。
这一点,在前面的文章中已经介绍过了。
直接来一个Demo:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>chainning code</title>
<script src="../scripts/jquery-1.2.3.intellisense.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
//添加四个按钮
$('<input type="button" value="click me"/><input type="button" value="triggle click me"/><input type="button" value="detach handler"/><input type="button" value="show/hide text"/>').appendTo($('body'));
//找出所有按钮
$('input[type="button"]')
.eq(0)//找到第一个按钮
.click(function(){
alert('you clicked me!');
})
.end().eq(1)//返回所有按钮,再找到第二个
.click(function(){
$('input[type="button"]:eq(0)').trigger('click');
})
.end().eq(2)//返回所有按钮,再找到第三个
.click(function(){
$('input[type="button"]:eq(0)').unbind('click');
})
.end().eq(3)//返回所有按钮,再找到第四个
.toggle(function(){
$('.panel').hide('slow');
},function(){
$('.panel').show('slow');
});
});
</script>
<style type="text/css">
.panel
{
padding: 20px;
background-color: #000066;
color: #FFFFFF;
font-weight: bold;
width: 200px;
height: 50px;
}
</style>
</head>
<body>
<div class="panel">welcome to jQuery!</div>
</body>
</html>
现在,链式代码已经成为jQuery非常流行的一个特点了,在使用链条方式写代码时,可能会用到eq()/filter()……(reference:http://docs.jquery.com/Traversing)等方法变化jQuery对象的对应范围,然后,又可以用end()函数将范围复原到原来的状况。
需要注意的是,有几个函数并不返回jQuery对象,所以链条就不能继续下去,比如get()就不能像eq()那样用。
--未完待续--
转载于:https://www.cnblogs.com/lishenglyx/archive/2008/09/21/1295501.html
转,jQuery入门[4]-链式代码相关推荐
- jQuery事件的链式写法
<head> <title>jQuery事件的链式写法</title> <script src="jquery-1.9.1.js&q ...
- [jQuery] jQuery是如何链式调用的?
[jQuery] jQuery是如何链式调用的? 返回对象本身即可,类似 obj = { func: function(){ return obj } }, 那么 obj.func().func() ...
- JQuery 入门 - 附案例代码
文章目录 预备知识与后续知识及项目案例 为什么要学jquery 体验jquery的使用 jquery到底是什么 jquery的版本问题 jquery的入口函数 jq对象和dom对象(重要) jquer ...
- “jQuery风暴” 推荐及配套代码下载
近一年没有更新博客. 这一年我进行了我的第一次跳槽和转型. 从架构到一名前端开发, 这个转型是纠结的.现在我是百度的一名前端开发工程师. "从零学习jQuery"系列教程收 ...
- jQuery入门[1]-构造函数
jQuery入门[1]-构造函数 jQuery入门[2]-选择器 jQuery入门[3]-事件 jQuery入门[4]-链式代码 jQuery入门[5]-AJAX jQuery入门[6]-动画 JQu ...
- jQuery入门基础-附案例
文章目录 预备知识与后续知识及项目案例 为什么要学jquery jQuery介绍 JavaScript 库 jQuery的概念 jQuery的优点 体验jquery的使用 jquery到底是什么 jq ...
- jquery入门与实践案例教程
为什么要学jquery 使用javascript开发过程中,有许多的缺点: 查找元素的方法单一,麻烦. 遍历数组很麻烦,通常要嵌套一大堆的for循环. 有兼容性问题. 想要实现简单的动画效果,也很麻烦 ...
- JavaScriptJQuery_jQuery链式编程
jQuery链式编程 在jquery中,链式编程指的是对同一个元素一直进行函数操作:链式编程是将多行代码合并成一行代码,每一个合并的方法返回的结果是元素对象才可以进行链式编程,语法为"元素对 ...
- jquery链式写法 java_jQuery链式操作
两个问题 1.jQuery的链式操作是如何实现的? 2.为什么要用链式操作? 大家认为这两个问题哪个好回答一点呢? 链式操作 原理相信百度一下一大把,实际上链式操作仅仅是通过对象上的方法最后 retu ...
- jQuery的链式操作
什么是链式操作呢?我们来看看,本来应该写 成这样子的: $(".stripe tr").mouseover(function(){$(this).addClass("ov ...
最新文章
- Log4j2再发新版本2.16.0,完全删除Message Lookups的支持,加固漏洞防御!
- 安装Exchange2003时出0XC1037AE6错误的解决方法.
- webstorm 内存溢出怎么弄_webstrom 内存溢出,软件崩溃卡死解决的方法
- VirtualBox安装Centos6.8出现——E_INVALIDARG (0x80070057)
- JAVA图书管理系统(I/O流实现)
- Android 系统(60)---JSON
- 设计模式 C++观察者模式
- 2022-2027年(新版)中国工程造价咨询行业现状动态与未来前景预测报告
- 计算机网络考研笔记(持续更新)
- chrome transition闪烁BUG 阿星小栈
- f.read()函数详解
- xcode 可以打开xmind_如何在 iPad 上玩转 XMind?
- java爬虫模拟post请求_java爬虫之使用HttpClient模拟浏览器发送请求方法详解
- 钢绞线的弹性模量的计算方法_钢绞线伸长量计算方法.doc
- 组合数学的一些常见公式
- 【手绘漫画】图解LeetCode之x 的平方根(LeetCode 69题)
- 51单片机 智能小车
- QQ和360干起来了,中国互联网2大服务商进行白刃战
- diea社区版如何创建springboot
- mysql冷备份恢复无法启动_MYSQL冷备份 恢复
热门文章
- Microsoft Updater Application Block 1.4.3 KeyValidator类设计 [翻译]
- iTOP4412 gdbserver安装
- 4 基于优化的攻击——CW
- Python文学家为Python写的一首词?(附中英文版)
- SEO思维的优化源于生活
- 函数指针,函数指针数组,函数返回值为函数指针
- CMS 系统之 iframe 结构
- Google Map API v2 (三)----- 地图上添加标记(Marker),标记info窗口,即指定经纬度获取地址字符串...
- c#程序片段,替换所有同名文件
- oracle 常用索引分析,使用原则和注意事项