jQuery
目錄
jQuery介紹
1.jQuery是一個輕量級的、兼容多瀏覽器的JavaScript庫。
2.jQuery使用戶能夠更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax交互，能夠極大地簡化JavaScript編程。它的宗旨就是：“Write less, do more.“
jQuery的優勢
- 一款輕量級的JS框架。jQuery核心js文件才幾十kb，不會影響頁面加載速度。
- 豐富的DOM選擇器,jQuery的選擇器用起來很方便，比如要找到某個DOM對象的相鄰元素，JS可能要寫好幾行代碼，而jQuery一行代碼就搞定了，再比如要將一個表格的隔行變色，jQuery也是一行代碼搞定。
- 鏈式表達式。jQuery的鏈式操作可以把多個操作寫在一行代碼里，更加簡潔。
- 事件、樣式、動畫支持。jQuery還簡化了js操作css的代碼，並且代碼的可讀性也比js要強。
- Ajax操作支持。jQuery簡化了AJAX操作，后端只需返回一個JSON格式的字符串就能完成與前端的通信。
- 跨瀏覽器兼容。jQuery基本兼容了現在主流的瀏覽器，不用再為瀏覽器的兼容問題而傷透腦筋。
- 插件擴展開發。jQuery有着豐富的第三方的插件，例如：樹形菜單、日期控件、圖片切換插件、彈出窗口等等基本前端頁面上的組件都有對應插件，並且用jQuery插件做出來的效果很炫，並且可以根據自己需要去改寫和封裝插件，簡單實用。
原生DOM的寫法就是寫JS代碼，而以后我們多數都用jQuery來寫，因為jQuery的優勢很多，看上面，並且查找標簽的方式有很多，比原生的DOM豐富的多，很便利，還有重要的一點就是不需要考慮瀏覽器的兼容性，因為jQuery做到了各大瀏覽器兼容的功能。
下載鏈接：jQuery官網，首先需要下載這個jQuery的文件，然后在HTML文件中引入這個文件，就可以使用這個文件中幫我們提供的jquery的接口了。
中文文檔：jQuery AP中文文檔
jQuery的引入方式有兩種：
1.直接下載文件到本地（最常用），從本地中導入
2.使用文件的網絡地址，就像我們img標簽里面的那個src的用法差不多。
引入完之后，就可以直接使用jQuery的語法來寫了，但是還是要寫在script標簽里面，並且要注意引入順序，先引入文件，再在script標簽里面寫jQuery的代碼，先導入再使用。
jQuery對象和dom對象
jquery對象找到的標簽對象稱為--jQuery對象
原生js找到的標簽對象稱為--dom對象
DOM對象只能使用dom對象的方法 不能使用jQuery對象的方法
jQuery對象也是只能使用知己的對象方法
jQuery對象和dom對象之間可以互相轉換
jquery轉換dom
$('#d1')[0]
dom轉換jQuery
var a=$(#d1)[0]
$(a)
$($(#d1)[0])
$($('div')[0]).text().trim();
"床前明月光"
$($('div')[0]).text('安文最帥');
$($('div')[0]).text('安文最帥').text();
"安文最帥"
jQuery選擇器
jquery('#d1') 找到id為d1 的標簽
簡寫$('d1')
選擇器可能找到的是多個標簽，是一個數組，但還是jQuery對象可以直接只用jQuery的方法，對找到的所有標簽進行統一設置；如果要單獨設置選中的所有標簽中的某個標簽可以通過索引取值的方式找到，按后注意 通過索引得到的標簽 是個dom對象$($(#d1)[0])
基本選擇器（同css）
id選擇器：
$("#id") #不管找什么標簽，用什么選擇器，都必須要寫$("")，引號里面再寫選擇器，通過jQuery找到的標簽對象就是一個jQuery對象，用原生JS找到的標簽對象叫做DOM對象，看我們上面的jQuery對象部分的內容
標簽選擇器：
$("tagName")
class選擇器：
$(".className")
配合使用：
$("div.c1") // 找到有c1 class類的div標簽
所有元素選擇器：
$("*")
組合選擇器：
$("#id, .className, tagName")
層級選擇器：（同css）x和y可以為任意選擇器
$("x y");// x的所有后代y（子子孫孫）
$("x > y");// x的所有兒子y（兒子）
$("x + y")// 找到所有緊挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
基本篩選器（選擇之后進行過濾）：
:first // 第一個
:last // 最后一個
:eq(index)// 索引等於index的那個元素
$('li:eq(1)');
$('li:eq(-1)').text();
:even // 匹配所有索引值為偶數的元素，從 0 開始計數
:odd // 匹配所有索引值為奇數的元素，從 0 開始計數
:gt(index)// 匹配所有大於給定索引值的元素
:lt(index)// 匹配所有小於給定索引值的元素
:not(元素選擇器)// 移除所有滿足not條件的標簽
:has(元素選擇器)// 選取所有包含一個或多個標簽在其內的標簽(指的是從后代元素找)
$('li:has(span)');
$("div:has(h1)")// 找到所有后代中有h1標簽的div標簽，意思是首先找到所有div標簽，把這些div標簽的后代中有h1的div標簽篩選出來
$("div:has(.c1)")// 找到所有后代中有c1樣式類（類屬性class='c1'）的div標簽
$("li:not(.c1)")// 找到所有不包含c1樣式類的li標簽
$("li:not(:has(a))")// 找到所有后代中不含a標簽的li標簽
$("li:not(:has(c1)")
屬性選擇器：
[attribute]
[attribute=value]// 屬性等於
[attribute!=value]// 屬性不等於
// 示例,多用於input標簽
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox類型的input標簽
$("input[type!='text']");// 取到類型不是text的input標簽
表單篩選器
多用於找form表單里面出現的input標簽，當然通過屬性選擇器找肯定也是沒問題的，這樣就是寫着簡單一些
input標簽中type屬性為這個值的input標簽
:text
:password 實例：$(':password');
:file
:radio
:checkbox
:submit
:reset
:button
表單對象屬性:
:enabled #找到可用的input標簽
$(':enabled');
:disabled #找到不可用的input標簽
用戶名：<input type="text" disabled>
$(':disabled');
:checked
<input type="radio" name="sex">男
$(':checked');
:selected
<select name="" id="city">
<option value="">北京</option>
<option value="">上海</option>
<option value="">深圳</option>
<option value="">山西</option>
<option value="">大同</option>
</select>
$(':selected').text();
篩選器方法(用的很多)
找下一個元素：
$("#id").next() #找到下一個兄弟標簽
示例：$('#l2').next();
示例：$('#l2').next().next().next().text();
$("#id").nextAll() #找到下面所有的兄弟標簽
示例：$('#l2').nextAll().text();
$("#id").nextUntil("#i2") #直到找到id為i2的標簽就結束查找，不包含它
示例：$('#l2').nextUntil('#l4').text();
示例：
<ul>
<li>安文</li>
<li id="l2"><span>又彪</span></li>
<li>思雨</li>
<li id="l4">
<a href="" class="c1">慶青</a>
</li>
<li>相璽</li>
</ul>
找上一個元素：
$("#id").prev()
示例：$('#l4').prev().text();
$("#id").prevAll()
示例：$('#l4').prevAll().text();
$("#id").prevUntil("#i2")
示例：$('#l4').prevUntil('#l2').text();
父親元素：
$("#id").parent()
示例：$('a').parent();
$("#id").parents() // 查找當前元素的所有的父輩元素（爺爺輩、祖先輩都找到）
示例：$('a').parents();
$("#id").parentsUntil('body') // 查找當前元素的所有的父輩元素，直到遇到匹配的那個元素為止，這里直到body標簽，不包含body標簽，基本選擇器都可以放到這里面使用。
兒子和兄弟元素：
$("#id").children();// 兒子們
示例：$('ul').children().text();
示例：$('ul').children('#l4').text().trim();
$("#id").siblings();// 兄弟們，不包含自己，.siblings('#id')，可以在添加選擇器進行進一步篩選
示例：$('#l4').siblings().text();
查找
$("div").find("p") --
示例：$('ul').find('#l4').text();等價於$('ul #l4').text();
篩選
$("div").filter(".c1") // 從結果集中過濾出有c1樣式類的，從所有的div標簽中過濾出有class='c1'屬性的div，和find不同，find是找div標簽的子子孫孫中找到一個符合條件的標簽
示例：$('li').filter('#l4').text();
等價於 $("div.c1")
補充（和前面使用冒號的一樣 :first等，只不過冒號的那個是寫在選擇器里面的，而下面的這幾個是方法，如此而已，就不說啦）：
.first() // 獲取匹配的第一個元素
$('li').first();
$('li:first');
.last() // 獲取匹配的最后一個元素
.not() // 從匹配元素的集合中刪除與指定表達式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等於指定值的元素
標簽操作
樣式類操作
addClass();// 添加指定的CSS類名。
removeClass();// 移除指定的CSS類名。
hasClass();// 判斷樣式存不存在
toggleClass();// 切換CSS類名，如果有就移除，如果沒有就添加。
示例代碼
$('.c1').addClass('c2');
$('.c1').removeClass('c2');
$('.c1').hasClass('c2');
$('.c1').toggleClass('c2');
css樣式
原生js
標簽.style.color = 'red';
jquery
$('.c1').css('background-color','red');
同時設置多個css樣式
$('.c1').css({'background-color':'yellow','width':'200px'})
位置操作
查看位置
$('.c2').position(); //查看相對位置
{top: 20, left: 20}
$('.c2').offset(); //查看距離窗口左上角的絕對位置
{top: 28, left: 28}
設置位置
$('.c2').offset({'top':'20','left':'40'});
jQuery綁定點擊事件的寫法
原生js綁定點擊事件
// $('.c1')[0].onclick = function () {
// this.style.backgroundColor = 'green';
// }
jquery綁定點擊事件
$('.c1').click(function () {
$(this).css('background-color','green');
})
點擊事件和滾動事件的示例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: red;
height: 100px;
width: 100px;
}
.c2{
background-color: green;
height: 1000px;
width: 100px;
}
.c3{
background-color: blue;
height: 1000px;
width: 100px;
}
.s1{
position: fixed;
left:20px;
bottom: 20px;
height: 40px;
width: 80px;
background-color: purple;
line-height: 40px;
text-align: center;
}
.s1 a{
color: white;
font-size: 14px;
text-decoration: none;
}
.hide{
display: none;
}
</style>
</head>
<body>
<!--<a name="top">這里是頂部</a>-->
<!--<a>這里是頂部</a>-->
<span>頂部位置</span>
<div class="c1"></div>
<button class="change-postion">走你</button>
<div class="c2"></div>
<div class="c3"></div>
<span class="s1 hide">
<!--<a href="#top">返回頂部</a>-->
<span>返回頂部</span>
</span>
<script src="jquery.js"></script>
<script>
//點擊事件來改變標簽位置
$('.change-postion').click(function () {
$('.c1').offset({top:200,left:200});
});
//滾動事件,監聽滾動距離來顯示或者隱藏標簽
$(window).scroll(function () {
console.log($(window).scrollTop());
if ($(window).scrollTop() >=200){
$('.s1').removeClass('hide');
}else {
$('.s1').addClass('hide');
}
});
// 回到頂部,scrollTop設置值
$('.s1').click(function () {
$(window).scrollTop(0);
})
</script>
</body>
</html>
尺寸
$('.c1').height(); //content 高度
$('.c1').width(); //content 寬度
$('.c1').innerHeight();//content高度+padding高度
$('.c1').innerWidth(); //content寬度+padding寬度
$('.c1').outerHeight();//content高度+padding高度 + border高度
$('.c1').outerWidth();//content寬度+padding寬度+ border寬度
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 100px;
height: 100px;
border: 2px solid red;
background-color: green;
padding: 20px 30px;
}
</style>
</head>
<body>
<div class="c1"></div>
<script src="jquery.js"></script>
</body>
</html>
文本操作
html()//取得第一個匹配元素的html內容，包含標簽內容
html(val)//設置所有匹配元素的html內容，識別標簽，能夠表現出標簽的效果
text()// 取得所有匹配元素的內容，只有文本內容，沒有標簽
text(val)//設置所有匹配元素的內容，不識別標簽，將標簽作為文本插入進去
示例:
$('.c1').text('<h3>你好,太白</h3>');
$('.c1').html('<h3>你好,太白</h3>');
值操作
獲取值
input type='text'的標簽--$('#username').val();
input type='radio'標簽獲取被選中的標簽的值 --- $(':radio:checked').val();
input type='checkbox'標簽獲取被選中的標簽的值 --- 直接$(':checkbox:checked').val();是不行的,需要循環取值
var d = $(':checkbox:checked');
for (var i=0;i<d.length;i++){
console.log(d.eq(i).val());
}
單選select --- $('#city').val();
多選select --- $('#author').val(); // ["2", "3"]
設置值
input type='text'的標簽 --- $('#username').val('李傑');
input type='radio'標簽 --- $('[name="sex"]').val(['3']);
如果 $('[name="sex"]').val('3'),所有標簽的值都變成了'3';
input type='checkbox'設置值 --- $('[name="hobby"]').val(['2','3'])
單選select --- $('#city').val('1'); option value='1'
多選select --- $('#author').val(['2','3'])
屬性操作
attr(attrName)// 返回第一個匹配元素的屬性值
attr(attrName, attrValue)// 為所有匹配元素設置一個屬性值
attr({k1: v1, k2:v2})// 為所有匹配元素設置多個屬性值
removeAttr(attrName)// 從每一個匹配的元素中刪除一個屬性
示例:
設置單個屬性
$('.c1').attr('xx','oo');
設置多個屬性
$('.c1').attr({'age':'18','sex':'alex'});
查看屬性
$('.c1').attr('屬性名');
$('.c1').attr('xx');
刪除屬性
$('.c1').removeAttr('xx');
prop -- 針對的是checked\selected\disabled..
查看標簽是否有checked屬性,也就是是否被選中
attr $(':checked').attr('checked'); //checked -- undefined
prop $(':checked').prop('checked'); //true -- false
通過設置屬性的方式來設置是否選中:
$(':radio').eq(2).prop('checked',true); true和false不能加引號
$(':radio').eq(2).prop('checked',false);
簡單總結:
1.對於標簽上有的能看到的屬性和自定義屬性都用attr
2.對於返回布爾值的比如checkbox、radio和option的是否被選中或者設置其被選中與取消選中都用prop。
具有 true 和 false 兩個屬性的屬性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
文檔處理
添加到指定元素內部的后面
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
#添加字符串照樣能識別標簽 *****
$('#d1').append('<a href="http://www.jd.com">京東</a>');
添加到指定元素內部的前面
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
示例
$('a').prependTo($('div'));
添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
remove()// 從DOM中刪除所有匹配的元素。
empty()// 刪除匹配的元素集合中所有的子節點，包括文本被全部刪除，但是匹配的元素還
$('div').remove();
$('div').empty();
替換
replaceWith()
replaceAll()
示例:
var a = document.createElement('a')
a.href = 'http://www.baidu.com';
a.innerText = 'xxx';
$('span').replaceWith(a);
$(a).replaceAll('span');
clone()克隆
<button class="btn">屠龍寶刀,點擊就送!</button>
$('.btn').click(function () {
// var a = $(this).clone(); //克隆標簽
var a = $(this).clone(true); //連帶事件一起克隆
$(this).after(a);
})
事件
事件綁定方式 兩種方式
<script>
// 方式一
// $('#d1').click(function () {
// $(this).css({'background-color':'green'})
// })
// 方式二 on綁定
$('#d1').on('click',function () {
$(this).css({'background-color':'green'})
})
</script>
常用事件
<div class="c1"></div>
click(function(){...})
$('#d1').on('click',function () {
$(this).css({'background-color':'green'})
})
hover(function(){...})
//鼠標懸浮 觸發事件
$('.c1').hover(
//鼠標放上去
function () {
$(this).css({'background-color':'blue'});
},
function(){
$(this).css({'background-color':'black'});
}
);
blur(function(){...})
//失去光標(焦點)時觸發事件 使div變色
$('[type="text"]').blur(function () {
$('.c1').css({'background-color':'pink'})
})
focus(function(){...}) //獲取光標時觸發事件 使div變色
$('[type="text"]').focus(function () {
$('.c1').css({'background-color':'black'})
})
change(function(){...}) //內容發生變化，input，select等
//與內容發改變時觸發的事件
$('select').change(function () {
$('.c1').toggleClass('cc')
})
keyup(function(){...}) //鍵盤抬起觸發事件
$(window).keyup(function (e) {
console.log(e.keyCode);
})
keydown(function(){...}) //鍵盤按鍵按下事件 參數e/event
$(window).keydown(function (e) {
console.log(e.keyCode) //每個鍵都有一個keycode鍵 ，通過不同的值觸發不同的事件
if(e.keyCode===37){
$('.c1').css({'background-color':'green'})
}else if(e.keyCode===39){
$('.c1').css({'background-color':'balck'})
}
else{
$('.c1').css({'background-color':'yellow'})
}
})
mouseenter(function(){...}) // 鼠標懸浮 等同於hover事件
mouseout(function(){...})
$('.c1').mouseenter(function () {
$(this).css({'background-color':'blue'});
});
$('.c1').mouseout(function () {
$(this).css({'background-color':'yellow'});
});
//鼠標懸浮 只觸發一次
$('.c2').mouseenter(function () {
console.log('你變了');
});
//鼠標懸浮 連續觸發
$('.c2').mouseover(function () {
console.log('你變了');
})
mouseover 和 mouseenter的區別是：mouseover事件是如果該標簽有子標簽，那么移動到該標簽或者移動到子標簽時會連續觸發，mmouseenter事件不管有沒有子標簽都只觸發一次，表示鼠標進入這個對象
input事件
實時監聽input輸入值變化示例：input值變化事件：看百度搜索的效果
這叫做input事件，看代碼：只要input框里面的值發生變化就觸發某個事件，注意input事件不能直接綁定，必須用on綁定才行，$('#d1').input(function{})是不對的；只能這樣綁定$('#d1').on('input',function(){})才行
<script src="jQuery.js"></script>
百度一下 <input type="text" id="search">
<script>
$('#search').on('input',function () {
console.log($(this).val());
})
</script>
事件冒泡
<body>
<script src="jQuery.js"></script>
<div id="d1">
<div id="d2"></div>
</div>
<script>
//冒泡
$('#d1').click(function () {
alert('父級標簽')
})
$('#d2').click(function () {
alert('子級標簽')
})
</script>
</body>
阻止后續（冒泡）事件發生
//冒泡的意思就是因為html可以嵌套，如果你給兒子標簽綁定了點事件或者沒有綁定點擊事件，父級標簽綁定了點擊事件，那么你一點擊子標簽，不管子標簽 有沒有綁定事件，都會觸發父級標簽的點擊事件，如果有，會先觸發子標簽的點擊事件，然后觸發父級標簽的點擊事件，不管子標簽有沒有點擊事件，都會一級一級的還往上找點擊事件
$('#d1').click(function () {
alert('父級標簽')
})
$('#d2').click(function (e) { //這個參數e(只是個形參，寫evt或者event名字的也很多)表示當前事件本身，這個事件也是一個對象
alert('子級標簽')
// return false; //這個也可以阻止
e.stopPropagation();//用事件對象的這個方法就能阻止冒泡 （Propagation：傳遞的意思）
})
事件委托
事件委托:是通過事件冒泡的原理，利用父標簽去捕獲子標簽的事件，將未來添加進來的某些子標簽自動綁定上事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件委托</title>
</head>
<body>
<script src="jQuery.js"></script>
<div id="d1">
<button class="c1">愛的磨礪轉圈圈</button>
</div>
<script>
// $('.c1').on('click',function () {
// alert('你變了');
// var btn=document.createElement('button');
// $(btn).text('愛的磨礪轉圈圈');
// $(btn).addClass('c1');
// console.log(btn);
// $('#d1').append(btn);
// })
//事件委托 將'.c1'委托給'#d1'
$('#d1').on('click','.c1',function () {
alert('你變了');
var btn=document.createElement('button');
$(btn).text('愛的磨礪轉圈圈');
$(btn).addClass('c1');
console.log(btn);
$('#d1').append(btn)
})
</script>
</body>
</html>
頁面載入
//將js代碼寫到head標簽和寫道body標簽下面的作用是不同的嗎，寫在head標簽里面的話，如果你寫了操作某個標簽的內容的話，那個標簽還沒加載出來，先加載了你的js代碼，就找不到這個標簽，所以不會生效，所以寫在body標簽最下面是一種解決辦法，還有一種辦法就是window.onload=function(){js的代碼}，等頁面上所有的元素都加載完，在執行這里面的js代碼，還記得嗎？，但是這個window.onload有個缺點，這個缺點就是這個操作時給window.onload賦值，如果你自己寫了兩個js文件，每個js文件中都有一個window.onload的話，那么后引入的文件會把前面引入的文件的window.onload里面的js代碼全部覆蓋掉，那么第一個文件的js代碼就失去了效果，還有一個問題就是，window.onload會等到頁面上的文檔、圖片、視頻等所有資源都加載完才執行里面的js代碼，導致有些效果的加載比較慢，所以我們使用下面的寫法，不存在覆蓋問題，而且只要文檔加載完就觸發，不需要等着一些圖片啊視頻啊什么的，加載js效果的速度快。
1.jQuery文件要在使用jQuery的代碼之前引入
2.js代碼最好都放在body標簽下面或者里面的最下面
3.window.onload:
window.onload = function () {
$('.c1').click(function () {
$(this).css({'background-color': 'green'});
})
}
4.頁面載入:
$(function () {
$('.c1').click(function () {
$(this).css({'background-color': 'green'});
})
})
$(document).ready(function{});
與window.onload的區別:
1.window.onload()函數有覆蓋現象，必須等待着圖片資源加載完成之后才能調用
2.jQuery的這個入口函數沒有函數覆蓋現象，文檔加載完成之后就可以調用（建議使用此函數）
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.js"></script>
<script>
// 等待整個頁面中的內容全部加載完成之后,觸發window.onload對應的函數里面的內容
// window.onload 有覆蓋現象,會被后面的window.onload給重新賦值
// window.onload = function () {
// $('.c1').click(function () {
// $(this).css({'background-color':'green'});
// })
// }
$(function () {
$('.c1').click(function () {
$(this).css({'background-color':'green'});
})
});
</script>
<script src="頁面載入.js"></script>
<style>
.c1{
background-color: red;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div class="c1"></div>
</body>
</html>
each循環
循環標簽對象數組
$('li').each(function(k,v){
console.log(k,v);
});
循環普通數組
var d1 = ['aa','bb','cc'];
$.each(d1,function(k,v){
console.log(k,v);
})
跳出循環 return false; 類似於break
$('li').each(function(k,v){
console.log(k,v.innerText);
if (k === 1){
return false;
}
});
跳出本次循環 return; 類似於continue
$('li').each(function(k,v){
if (k === 1){
return;
}
console.log(k,v.innerText);
});
data
給標簽對象添加數據,類似於添加了全局變量
.data(key, value): 設置值
.data(key) 取值
.removeData(key) 刪除值
插件(了解)
<script>
jQuery.extend({ //$.extend({})
min:function(a, b){return a < b ? a : b;}, //自定義了一個min和max方法，min和max作為鍵，值是一個function
max:function(a, b){return a > b ? a : b;}
});
jQuery.min(2,3);// => 2
jQuery.max(4,5);// => 5
$('div').min(1,2);不能通過標簽對象來調用
</script>
<script>
jQuery.fn.extend({ //給任意的jQuery標簽對象添加一個方法
check:function(){
return this.each(function(){this.checked =true;});
},
uncheck:function(){
return this.each(function(){this.checked =false;});
}
});
// jQuery對象可以使用新添加的check()方法了。
$("input[type='checkbox']").check();
</script>