1、jQuery介紹
jQuery是一個js框架(其實就是一個.js文件),它的特點是使用選擇器查找要操作的節點,並且將這些節點封裝成一個jQuery對象。封裝的目的是為了更好地兼容不同的瀏覽器之間的差異，同時也會簡化代碼。
注：
選擇器是jQuery借鑒css選擇器的語法而創建的一種查找要操作的節點的語法格式。比如 $('#id');
2、jQuery基礎
(1)jQuery編程的基本步驟
step1,引入jQuery.js文件
step2, 使用選擇器查找要操作的節點
step3,調用jQuery對象的屬性或者方法來操作相應的節點。
(2)jQuery對象與dom對象之間的轉換
1)dom對象 --- > jQuery對象
var $obj = $(dom對象);
eg:var $d = $(div);
2)jQuery對象 ---- > dom對象
第一種方式: var obj = $obj.get(0);
第二種方式: var obj = $obj.get()[0];
JQuery經典總結
(3) jQuery與prototype如何同時使用？
因為jQuery與prototype都使用$函數，需要使用
var $a = jQuery.noConflict()將$函數改名為"$a"。
3、jQuery選擇器 selector
1)、基本選擇器 selector/a1.html
* ——>匹配所有元素
#id ——> 根據給定的ID匹配一個元素。
.class ——> 根據給定的類匹配元素。
element ——>根據給定的元素名匹配所有元素
selector1,selector2..selectorn ——>將每一個選擇器匹配到的元素合並
后一起返回。
2)、層次選擇器 selector/a2.html
select1 select2——>匹配select1下的所有兒子元素（不包含孫子元素）
select1>select2——>匹配select1下的所有子元素（包含孫子元素）
select1+select2——>匹配緊跟在select1后的第一個兄弟元素（同輩元素）
select1~select2——>匹配select1后的所有兄弟元素（及找到所有的同
輩元素）
3)、過濾選擇器
a.基本過濾選擇器 selector/ a3.html
:first——>獲取第一個元素
:last——>獲取第一個元素
:not(selector)——>獲取去除給定元素后的所有匹配元素
:even——>匹配所有索引值為偶數的元素，從 0 開始計數
:odd——>匹配所有索引值為奇數的元素，從 0 開始計數
:eq(index)——>匹配一個給定索引值的元素
:gt(index)——>匹配所有大於給定索引值的元素
:lt(index)——>匹配所有小於給定索引值的元素
JQuery經典總結
b.內容過濾選擇器 selector/ a4.html
:contains(text)——>匹配包含給定文本的元素
:empty ——>匹配沒有子元素且文本為空的元素 :has(selector)——>匹配含有選擇器所匹配的元素的元素
:parent ——> 跟empty相反,即有子節點，或者內容不為空的節點。
c.可見性過濾選擇器 selector/ a5.html
:hidden——>匹配所有不可見元素，或者type為hidden的元素
:visible——>匹配所有的可見元素
d.屬性過濾選擇器 selector/ a6.html
[attribute]——>匹配包含給定屬性的元素
[attribute=value]——>匹配給定的屬性是某個特定值的元素
[attribute!=value]——>匹配屬性不等於特定值的元素。
e.子元素過濾選擇器 selector/ a7.html
:nth-child(index/even/odd)——>匹配其父元素下的第N個子或奇
偶元素（即同輩中第N個元素）
:first-child——>匹配其父元素下第一個子元素
:last-child——>匹配其父元素下最后一個子元素
f.表單對象屬性過濾選擇器
:enabled——>匹配所有可用元素
:disabled——>匹配所有不可用元素
:checked——>匹配復選框、單選按鈕中被選中的元素
:selected——>匹配所有選中的option元素
4)、表單選擇器
:input——>匹配所有 input, textarea, select 和 button 元素
:text——>匹配所有的單行文本框
:pasword——>匹配所有密碼框
:radio——>匹配所有單選按鈕
:checkbox——>匹配所有復選框
:submit——>匹配所有提交按鈕
:image——>匹配所有圖像域
:reset——>匹配所有重置按鈕
:button——>匹配所有按鈕
:file——>匹配所有文件域
:hidden——> 匹配所有不可見元素，或者type為hidden的元素
4、dom操作
1)、查詢 dom / d1.html
利用選擇器找到要操作的節點之后，訪問節點的html內容、text內容、
節點的值以及節點的屬性值。除此之外，還可以修改這些值。
a, html() : 相當於innerHTML
b, text(): 獲取div,p,span等元素內文本相當於innerText，
c, val():獲取文本框text、下拉列表select或選擇框checkbox的值
d, attr():獲取或設置節點的屬性值
2)、創建 dom / d2.html
$(html);
3)、插入節點
append():向每個匹配的元素內部追加內容，當做最后一個兒子
prepend():向每個匹配的元素內部前置內容。當做第一個兒子
after():在每個匹配的元素之后插入內容，當做后一個兄弟
before():在每個匹配的元素之前插入內容，當做前一個兄弟
eg:JQuery經典總結
var $obj = $('<div>首先是培養興趣，然后是多寫代碼</div>');
$('body').append($obj);
也可以簡化為
$('body').append('<div>首先是培養興趣，然后是多寫代碼</div>');
4)、刪除節點 dom / d3.html
remove()：$('ul li:eq(1)').remove();
remove(selector)：$('ul li').remove('#l1');
empty():清空節點：$('ul li:eq(1)').empty();
5)、復制節點 dom / d6.html
clone():不復制行為
clone(true):使復制的節點也具有行為
6)、屬性操作 dom / d7.html
讀取：attr(' '); $("img").attr("src");
設置： attr(' ',' ') $("img").attr(‘src’, ‘test.jpg’);
s('#d1').attr('value','font-size:40px;color:red;');
$('#form1 input:disabled').attr('disabled',false);
或者一次設置多個 attr({"":"","":""});
eg:$('div').attr({'class':'s1','style':'color:red;'});
刪除：removeAttr(' ')
7)、樣式操作 dom / d8.html
獲取和設置: attr("class",""), attr("style","");
alert($('div').attr('class'));
$('div').attr('class','s1')
$('div').attr('style','color:blue;');
追加:addClass(''):$('div').addClass('s2 s3');
移除:removeClass('') :$('div').removeClass('s3');
或者removeClass('s1 s2')
或者removeClass()//會刪除所有樣式
切換樣式：toggleClass:$('div').toggleClass('s3');
是否有某個樣式 hasClass(''):alert($('div').hasClass('s3'));
讀取css('')
設置css('','')或者css({'':'','':''})//設置多個樣式
$('table tr:first').css('background-color','#cccccc');
$('table tr:first').css({'background-color':'#cccccc',’width’:’3px’});
8)、遍歷節點 dom / d9.html
children()/children(selector):var $obj = $('#d0').children('div');
只考慮子元素，不考慮其它后代元素。
next(selector): 下一個兄弟$('#d2').next()
prev(selector):上一個兄弟$('#d2').prev()
siblings(selector):其它兄弟，
$('#d2').siblings(‘#id’)除#d2之外的其他兄弟節點
也可以寫成：$(‘#id’).siblings()
parent():父節點,不是爺爺節點
find(selector): 從當前節點開始，查找所有后代，包括孫子。
5、如何將js代碼與html分開(將數據與行為分離)
就上將形如<input type=”button” id=”b1” onclick=”fun();”/>改寫為：
<input type=”button” id=”b1” />
$(function(){
$('#b1').click(function(){
//.........
});
});
的形式
window.onload : 當整個頁面加載完畢，會產生load事件，就會執行綁訂
的函數。
window.onload = function () {
var obj = document.getElementById("d1");
obj.onclick = function () {
obj.innerHTML = "hello java";
};
};
在使用jQuery時，可以使用如下的代碼來實現js與html的分離:
$(function(){
//js代碼: 這些js代碼會在整個頁面加載完畢之后
//執行。
});
eg:
$(function(){相當於window.onload = function ()
$('#b1').click(function(){
$('div').attr({'class':'s1','style':'color:red;'});
});
});
上面的代碼等同於：
window.onload = function () {
$('#b1').get(0).onclick=function(){
$('div').attr({'class':'s1','style':'color:red;'});
}
}
6、事件處理機制 event
1)、事件綁訂 event/e1.html
bind(type,fn)
eg:
$(function(){
$('#d1').bind('click',function(){
$(this).html('hello java');
});
});
2)、綁訂方式的簡寫形式
上個列子可以簡寫為：
$(function(){
$('#d1').click(function(){
$(this).html('hello java');
});
});
3)、合成事件 event/e2.html e3.html
hover(mouseenter,leave) : 模擬光標懸停事件，區別於CSS中的偽
類
$('.s1').hover(function(){
$(this).addClass('s2');
},function(){
$(this).removeClass('s2');
});
相當於以下連個函數的合成：
$('.s1').mouseenter(function(){
$(this).addClass('s2');
});
$('.s1').mouseleave(function(){
$(this).removeClass('s2');
});
上面的mouseenter和mouseleave兩個函數可以合並為：
$('.s1').mouseenter(function(){
$(this).addClass('s2');
}).mouseleave(function(){
$(this).removeClass('s2');
});
toggle(fn1,fn2...)：模擬鼠標連續單擊事件
$('#a1').toggle(function(){
$('#d1').show('slow');
},function(){
$('#d1').hide('slow');
});
4)、事件冒泡
(1)獲得事件對象 event/e4.html e5.html e6.html
click(function(e){
});
function f1(e){
依據事件對象獲得事件源(即哪一個節點產生了該事件，返回的是原
始的DOM節點)，其中e不再是DOM對象，而是封裝之后的JQuery
對象。
var srcObj = e.srcElement; //ie
var srcObj = e.target; //firefox,chrome
var srcObj = e.srcElement || e.target; //同時兼容ie,firefox,chrome
alert(srcObj.innerHTML);
依據事件對象獲得鼠標點擊的坐標（相對於屏幕）
alert(e.clientX + ':' + e.clientY);
}
(2)事件對象的屬性 event/e6.html
event.type
event.target:返回事件源(是dom對象)
event.pageX/pageY 獲得相對於當前瀏覽器頁面的坐標
(3)停止冒泡 event / e7.html
event.stopPropagation()
function clickA(e){
alert("你點擊了一個鏈接");
//取消冒泡
e.stopPropagation();
}
function clickDiv(e){
alert("你點擊了一個Div");
}
上列中，鏈接處於div中，當取消冒泡后，單擊鏈接便不會觸發div上面
onlick事件的執行，上例中的輸出結果為：你點擊了一個鏈接
(4)停止默認行為 event / e8.html
event.preventDefault()
$(function(){
$('#d1').click(function(e){
var flag = confirm('確定刪除嗎');
if(!flag){
e.preventDefault();
}
});
});
設置停止了默認行為后，表單提交按鈕便不會自動提交了。相當於：
<input type=”submit” id=”d1” name=”username”
onclick=”return fonfirm(‘確定要刪除嗎’)”/>
5)、模擬操作 event / e9.html
trigger('click')
$(function(){
$('#b1').click(function(){
//$('#username').trigger('focus');
$('#username').focus();
});
});
上列模擬了文本框控件獲得焦點的行為，當點擊按鈕后，文本框便獲得了焦點，表現為文本框內有光標閃動。
mouseenter和mouseover效果一樣，可以互換使用
mouseout和mouseleave效果一樣，可以互換使用
7、動畫 animate
1)、show(), hide() a1.html
作用：通過同時改變元素的寬度與高度來實現顯示和隱藏的效果。
語法:
show(速度,callback);
速度: 'slow','normal','fast' / 800(毫秒)
callback: 在動畫執行完畢之后，會執行這個函數
$(function(){
$('#btn1').click(function(){
$('#sp1').hide/show(500);
$('#sp1').hide/show(500,function(){alert("H");});
});
});
2)、fadeIn() fadeOut(): animate / a2.html
作用， 通過改變元素的不透明度來實現顯示和隱藏的效果。
語法: fadeIn/fadeOut(速度,callback);
$(function(){
$('#btn1').click(function(){
$('#sp1').fadeIn/fadeOut(500);
$('#sp1').fadeIn/fadeOut(500,function(){alert("H");});
});
});
3)、slideUp() slideDown() : amimate/a1.html
作用：通過改變元素的高度來實現顯示和隱藏的效果。
語法: slideUp(速度,callback);
$(function(){
$('#a1').toggle(function(){
$('#d1').slideDown('slow');
},function(){
$('#d1').slideUp('slow');
});
});
4)、自定義動畫 animate(params,speed,callback) a3.html
語法: JQuery經典總結
params:是一個js對象，描述了動畫執行結束時元素的樣式，
比如:
{'top':'600px','left':'200px'}
speed: 毫秒
callback: 在動畫執行完畢之后，會執行這個函數
$(this).animate({'left':'500px'},4000);
$(this).animate({'top':'250px'},2000).fadeOut('slow');
8、類數組的操作
jQuery選擇器返回的是一個jQuery對象(該對象可能包括了多個dom
節點),如果要對這些dom節點分別做不同的處理，就需要去遍歷，需要
調用jQuery對象提供的一些方法或者屬性，稱之為類數組的操作。
類數組就是DOM節點數組
1)each(fn(i)):循環遍歷每一個元素,this代表被迭代的dom對象，
$(this)代表被迭代的jQuery對象。（i根據實際情況選擇要
還是不要）。
2)eq(index)：返回index+1位置處的jQuery對象
3)index(obj)：返回下標，其中obj可以是dom對象或者jQuery對象。
4)length屬性：dom對象的個數
5)get()：返回dom對象組成的數組
6)get(index)：返回index+1個dom對象。
eg1:
//把我的好友中所有的用戶放到用戶列表中
$('#b4').click(function(){
$('#s2 option').each(function(){
$('#s1').append($(this));
});
});
eg2:
$(function(){
$('#b1').click(function(){
var $obj = $('ul li');
$obj.each(function(i){
//i:表示正在被訪問的那個節點的下標,
//下標從0開始
if(i == 0){
$(this).css('font-size','50px');
}else if(i==1){
$(this).css('font-style','italic');
}else{
$(this).css('color','red').css('font-size','80px');
}
});
});
9、jQuery對ajax編程的支持
(1)load方法:
作用：是將服務器返回的數據直接添加到符合要求的節點之上，相當於
obj.innerHTML = 返回的數據。
語法:
$obj.load(請求地址,[請求參數]);
其中，請求參數可以有兩種形式:
第一種：請求字符串，比如 "username=zs",或者
“username=zs&age=22"。
第二種：javascript對象，比如
{'username':'zs'}，或者{'username':'zs','age':22}
load方法如果沒有請求參數，會發送get請求，如果有請求參數，會發送
post請求。
(2)$.get方法
作用：向服務器發送get請求
語法: $.get(url,[data],[callback],[type]):
url:請求地址
data:請求參數,可以是請求字符串或者是js對象。
格式為：{key,value}
eg:{"name":$("#cost_name").val()}
callback: 是一個回調函數，用於處理服務器返回的數據，其格式
function(data,statusText),
data是服務器返回的數據，如果服務器返回的是json字符串，$.get
方法會自動將其轉換成一個js對象或者js對象組成的數組。
statusText是服務器處理的狀態。
type:服務器返回的數據類型:
text : 文本字符串
html : html內容
xml: 返回dom兼容的xml對象
json: json字符串
script: javascript腳本
eg:
function quoto(){
$('#tb1').empty();
$.get('quoto.do?' + Math.random(),function(data){
//data:服務器返回的數據, 如果服務器
//返回的是json字符串，$.get方法會自動
//將其轉換成一個js對象或者js對象組成的數組。
for(i=0;i<data.length;i++){
$('#tb1').append(
'<tr><td>' + data[i].code
+'</td><td> '+ data[i].name
+ '</td><td> ' + data[i].price
+ '</td></tr>');
}
},'json');
}
$.post()格式同上。
$.put(url,[data],[callback],[type]):
//焦點離開資費名輸入框進行ajax檢測
$(function(){
$("#name").blur(function(){
var name = $(this).val();
//發送ajax請求
$.post(
"validFeeName.action",//請求url
{"name":name},//提交參數
function(data){//data是服務器返回的ok值
if(data){//如果返回true $("#name_error").removeClass("error_msg")
.html("資費名稱可用");
}else{//如果返回false
$("#name_error").addClass("error_msg")
.html("資費名稱重復");
}
}
,"text");
});
});
(3)$.ajax方法
作用：可以設置不同的參數，控制ajax對象向服務器發請求。
語法:
$.ajax(options):
其中，options是一個形如
{key1:value1,key2,value2...}的js對象，
用於指定發送請求的選項。
選項參數如下：
url(string):請求地址
type(string):GET/POST
data(object/string):請求參數，可以是請求字符串或者js對象
dataType(string) :服務器返回的數據類型
success(function):請求成功后調用的回調函數，有兩個參數：
function(data,textStatus),其中，
data是服務器返回的數據，
textStatus 描述狀態的字符串。
error(function):請求失敗時調用的函數，有三個參數
function(xhr,textStatus,errorThrown),
xhr: ajax對象，即XMLHttpRequest對象。
textStatus和errorThrown，jQuery保證其中的一個
參數可以獲得異常的描述。
async: true(缺省)/false
eg:
$(function(){
$('#s1').change(function(){
//先清空表格
$('#tb1').empty();
$.ajax({
'url':'carInfo.do',
'type':'post',
'data':'carName=' + $('#s1').val(),
'dataType':'xml',
'success':function(data){
//data:服務器返回的數據如果服務器返回的是xml,
瀏覽器不一樣，則生成的dom樹的結果也不一樣，
為了方便解析dom樹，一般 我們使用$()函數將其
轉換成jQuery對象,然后進行遍歷或者查找。
$('#tb1').append(
'<tr><td>價格:' + $(data).find('price').text()
+ ' 車重:' + $(data).find('weight').text()
+ '</td><td>門數:'
+ $(data).find('doors').text()
+ ' 長寬高:' + $(data).find('size').text()
+ '</td><td>排量:' + $(data).find('vol').text()
+ ' 加速性能:'
+ $(data).find('speed').text() + '</td></tr>');
$('#d2').show();
setTimeout(function(){
$('#d2').fadeOut('slow');
},3000);
},
'error':function(){
alert('服務暫時不可用');
}
});
});
});
練習1：商品熱賣
練習2：自動完成
step1,服務器端代碼
服務器會返回一個類似於以下的字符串:
小米,小米2,小說,小米官網
step2,
分解服務器返回的字符串，並且將
其添加到文本輸入框的下面。
每一個選項要綁訂click事件(將用戶
選中的選項復制到文本輸入框)和mouseenter
事件(加亮對應的選項)處理代碼。
keyup事件：
注意：keyup事件在某些瀏覽器中，在切換中文輸入法時，會有
bug,需要我們自己解決，如果發現有這個問題，需要使用如下
代碼：
var eventname = 'input';
if(navigator.userAgent.indexOf('MSIE')!=-1){
eventname = 'propertychange';
}
$('#key').bind(eventname,fn);
10、給JQuery添加插件
可以把JQuery看做一個類，給JQuery添加插件就是給Jquery類中添加方法。相當於在Java中給String類增加方法（當然是不可以增加的），這樣就可以用JQuery對象直接調用了，方便多次使用。
使用場合：使用頻率高的方法，
JQuery經典總結
eg:下面代碼的作用是對指定的文本框(errorContent)進行非空驗證，並輸出（errorMsg）驗證提示信息。
寫法一：
$.fn.required = function(errorContent, errorMsg) {
var val = $(this).val();
if (val != null && val.length > 0) {
$(errorContent).text("");
return true;
} else {
$(errorContent).text(errorMsg);
return false;
}
}
寫法二：
;(function($){
$.fn.extend({
rangeLength:function(errorContent, errorMsg){
var val = $(this).val();
if (val != null && val.length > 0) {
$(errorContent).text("");
return true;
} else {
$(errorContent).text(errorMsg);
return false;
}
}
});
})(jQuery)
<script type="text/javascript">
$(function() {
$("#submit").bind("click",function(){
var b1 = $("#adminCode")
.required($("#error_adminCode"),"賬號必須填寫");
var b2 = $("#password")
.required($("#error_password"),"密碼必須填寫")
if(b1 && b3) {
$("#loginForm").submit();
}
});
});
</script>