JQuery經典總結

一、jQuery介紹

jQuery是一個js框架(其實就是一個.js文件),它的特色是使用選擇器查找要操做的節點,而且將這些節點封裝成一個jQuery對象。封裝的目的是爲了更好地兼容不一樣的瀏覽器之間的差別，同時也會簡化代碼。

注：

選擇器是jQuery借鑑css選擇器的語法而建立的一種查找要操做的節點的語法格式。好比  $('#id');

二、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"。

 

三、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的元素

四、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): 從當前節點開始，查找全部後代，包括孫子。

 

 

五、如何將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;'});

}

}

六、事件處理機制   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效果同樣，能夠互換使用

七、動畫   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');

八、類數組的操做  

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');

}

});

});

 

九、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);

十、給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>