JQuery經典總結

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).οnclick=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>