jQuery入门[4]－链式代码
jQuery入门－链式代码<div class="clear" /><div class="postBody">jQuery入门－构造函数
jQuery入门－选择器
jQuery入门－事件
jQuery入门－链式代码
jQuery入门－AJAX
jQuery入门－动画
jQuery另一个很令人惬意的地方是，一般的代码都是一行一行写，jQuery的代码可以一串一串写。
这一点，在前面的文章中已经介绍过了。
直接来一个Demo:
<div style="border-bottom: #cccccc 1px solid; border-left: #cccccc 1px solid; padding-bottom: 4px; background-color: #eeeeee; padding-left: 4px; width: 98%; padding-right: 5px; font-size: 13px; border-top: #cccccc 1px solid; border-right: #cccccc 1px solid; padding-top: 4px;"><!----><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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')
.eq(0)//找到第一个按钮
.click(function(){
alert('you clicked me!');
})
.end().eq(1)//返回所有按钮，再找到第二个
.click(function(){
$('input:eq(0)').trigger('click');
})
.end().eq(2)//返回所有按钮，再找到第三个
.click(function(){
$('input: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>
页:
[1]