jQuery入門[4]－鏈式代碼
編輯：關於JavaScript
jQuery另一個很令人惬意的地方是，一般的代碼都是一行一行寫，jQuery的代碼可以一串一串寫。
這一點，在前面的文章中已經介紹過了。
直接來一個Demo:
<!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[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()那樣用。
這一點，在前面的文章中已經介紹過了。
直接來一個Demo:
<!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[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()那樣用。
- 上一頁:jQuery入門[3]－事件
- 下一頁:jQuery入門[5]－AJAX
小編推薦
熱門推薦