jQuery是什么？

jQuery就是javascript的一個庫，把我們常用的一些功能進行了封裝，方便我們來調用，提高我們的開發效率。

極大地簡化了 JavaScript 編程。

Javascipt跟jQuery的區別：

Javascript是一門編程語言，我們用它來編寫客戶端瀏覽器腳本。

jQuery是javascript的一個庫，包含多個可重用的函數，用來輔助我們簡化javascript開發

 jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到。

 

 

 www.github.com

• jQuery 其實就是一堆的js函數，是普通的js，只不過應用廣泛，形成了行業標准。

• 參考書：鋒利的jQuery

• 學習參考：http://www.w3school.com.cn/jquery/

• 官網：http://jquery.com/

•  

2. jQuery的重點

• 2.1 jQuery入口函數(全球都會)

• 2.2 jQuery的選擇器(其實就是CSS的選擇器)

• 2.3 jQuery的Dom操作

• 2.4 jQuery的樣式操作

• 2.5 jQuery的動畫

• 2.6 jQuery的事件處理

3.jQuery的入口函數

• 3.1 語法

◦                     jQuery(document).read(function(){ });

◦                     $(function(){ });// **

◦                     window.onlaod = function(){}

◦                     $ === jQuery // $是jQuery全局函數的別名。

• 3.2注意事項：（重點）

◦                     document ready: 是html文檔准備就緒，也就是dom樹創建完成了。可以進行dom操作了。

• 重要的是：html頁面下載完成，並准備就緒

◦                     window.onload: 是整個頁面所有的資源都加載完成，圖片、js、css等...

• 3.3 文檔加載順序：（重點）

◦                     下載html頁面，解析html標簽，遇到link標簽加載css，遇到script加載js..

4. jQuery 選擇選取元素

4.1 jQuery選擇器

• 4.1.1 ID選擇器（js一般盡量用ID選擇器，效率最高）（重點）

◦                     $("#id").html();

• 4.1.2 類選擇器（重點）

◦                     $(".className").text();

• 4.1.3 標簽選擇器（重點）

◦                     $('p').click();

• 4.1.4 屬性選擇器

◦                     $("li[id]")、 $("li[id='link']").fadeIn();

• 4.1.5 層級選擇器（重點）

◦                     $("li .link").show();

• 4.1.6 父子選擇器

◦                     $("ul > li")

• 4.1.7 偽類選擇器

◦                     $("p:first")

◦                     $("ul li:eq(3)")

• 4.1.8 表單選擇器

◦                     $(":text")

◦                     $(":checkbox")

◦                     $(":checked")

4.2 選擇器匯總

*               $("*")              所有元素

 

#id             $("#lastname")      id="lastname" 的元素

 

.class          $(".intro")         所有 class="intro" 的元素

 

element         $("p")              所有 <p> 元素

 

.class.class    $(".intro.demo")    所有 class="intro" 且 class="demo" 的元素

 

:first  $("p:first")    第一個 <p> 元素

 

:last   $("p:last")     最后一個 <p> 元素

 

:even   $("tr:even")    所有偶數 <tr> 元素

 

:odd    $("tr:odd")     所有奇數 <tr> 元素

 

:eq(index)      $("ul li:eq(3)")    列表中的第四個元素（index 從 0 開始）

 

:gt(no)         $("ul li:gt(3)")    列出 index 大於 3 的元素 greater than

 

:lt(no)         $("ul li:lt(3)")    列出 index 小於 3 的元素 less than

 

:not(selector)  $("input:not(:empty)")  所有不為空的 input 元素

 

 

 

:header         $(":header")        所有標題元素 <h1> - <h6>

 

:animated       所有動畫元素

 

:contains(text)     $(":contains('W3School')")  包含指定字符串的所有元素

 

:empty              $(":empty")                 無子（元素）節點的所有元素

 

:hidden             $("p:hidden")               所有隱藏的 <p> 元素

 

:visible            $("table:visible")          所有可見的表格

 

 

 

s1,s2,s3            $("th,td,.intro")            所有帶有匹配選擇的元素

 

[attribute]         $("[href]")         所有帶有 href 屬性的元素

 

[attribute=value]   $("[href='#']")     所有 href 屬性的值等於 "#" 的元素

 

[attribute!=value]  $("[href!='#']")    所有 href 屬性的值不等於 "#" 的元素

 

[attribute$=value]  $("[href$='.jpg']") 所有 href 屬性的值包含以 ".jpg" 結尾的元素

 

:input      $(":input")         所有 <input> 元素

 

:text       $(":text")          所有 type="text" 的 <input> 元素

 

:password   $(":password")      所有 type="password" 的 <input> 元素

 

:radio      $(":radio")         所有 type="radio" 的 <input> 元素

 

:checkbox   $(":checkbox")      所有 type="checkbox" 的 <input> 元素

 

:submit     $(":submit")        所有 type="submit" 的 <input> 元素

 

:reset      $(":reset")         所有 type="reset" 的 <input> 元素

 

:button     $(":button")        所有 type="button" 的 <input> 元素

 

:image      $(":image")         所有 type="image" 的 <input> 元素

 

:file       $(":file")          所有 type="file" 的 <input> 元素

 

:enabled    $(":enabled")   所有激活的 input 元素

 

:disabled   $(":disabled")  所有禁用的 input 元素

 

:selected   $(":selected")  所有被選取的 input 元素

 

:checked    $(":checked")   所有被選中的 input 元素

4.3 jQuery選擇方法

• • 4.3.1 獲取父級元素

• •     * $(selector).parent();     //獲取直接父級

• •  

• •     * $(selector).parents('p'); //獲取所有父級元素直到html  

• • 4.3.2 獲取子代和后代的元素

• •     * $(selector).children();   //獲取直接子元素

• •  

• •     * $(selector).find("span"); //獲取所有的后代元素

• •  

• •     * find方法可能用的多。

• • 4.3.3 獲取同級的元素

• •     * $(selector).siblings()    //所有的兄弟節點

• •  

• •     * $(selector).next()        //下一個節點

• •  

• •     * $(selector).nextAll()     //后面的所有節點

• •  

• •     * $(selector).prev()        //前面一個的兄弟節點

• •  

• •     * $(selector).prevAll()     //前面的所有的兄弟節點

• • 4.3.4 過濾方法

• •     * $("div p").last();        //取最后一個元素

• •  

• •     * $("div p").first();       //取第一個元素

• •  

• •     * $("p").eq(1);             //去第n個元素

• •  

• •     * $("p").filter(".intro");  //過濾，選擇所有p標簽帶有 .intro類

• •  

• •     $('p.intro')

• •  

• •     * $("p").not(".intro");     //去除，跟上面的filetr正好相反

5.jQuery的Dom操作

5.1 獲取html的內容

$(selector).text() - 設置或返回所選元素的文本內容

 

$(selector).html() - 設置或返回所選元素的內容（包括 HTML 標記）

 

$(selector).val()  - 設置或返回表單字段的值

• • 獲取和設置相同方法名,通過不同參數來確定是獲取還是設置值

• •     $("#blin").text("貝沃匯力");

• •  

• •     var txt = $("#blin").text();

• 使用html來創建dom的方式效率比較高。遠大於： document.createElement();

 

5.2 樣式操作

• • 5.2.1 基本樣式操作

• •     $(selector).css("color","red") |css({})  設置或返回匹配元素的樣式屬性。

• •  

• •     $(selector).height()        設置或返回匹配元素的高度。

• •  

• •     $(selector).offset().left   => { left:99, top: 22}     返回第一個匹配元素相對於文檔的位置。left,top

• •  

• •     $(selector).offsetParent()  返回最近的定位祖先元素。

• •  

• •     $(selector).position()      返回第一個匹配元素相對於父元素的位置。

• •  

• •     $(window).scrollLeft()    設置或返回匹配元素相對滾動條左側的偏移。

• •  

• •     $(window).scrollTop(0)     設置或返回匹配元素相對滾動條頂部的偏移。

• •  

• •     <!-- onscroll -->

• •  

• •     $(selector).on("scroll",function(){});

• •  

• •  

• •  

• •     $(selector).width()         設置或返回匹配元素的寬度。

• • 5.2.2 樣式類操作盡量操作樣式類，少直接操作css屬性

• •     $(selector).addClass('class');     向匹配的元素添加指定的類名。

• •  

• •     $(selector).removeClass('class');  從所有匹配的元素中刪除全部或者指定的類。

• •  

• •     $(selector).toggleClass('class')   從匹配的元素中添加或刪除一個類。

• •  

• •     $(selector).hasClass('class')      檢查匹配的元素是否擁有指定的類。

5.3 屬性操作

    $(selector).attr("id")      設置或返回匹配元素的屬性和值

 

    $(selector).removeAttr()從所有匹配的元素中移除指定的屬性。

5.4 動態創建

    $(selector).append()    - 在被選元素的結尾插入內容

 

        $(selector).append(node)

 

        $(selector).append('<div></div>')   

 

    $(selector).appendTo(); - 追加到..

 

 

 

 

 

 

 

    $(selector).prepend()   - 在被選元素的開頭插入內容

 

    $(selector).after()     - 在被選元素之后插入內容

 

    $(selector).before()    - 在被選元素之前插入內容

案例04城市選擇案例.html

6. 事件處理

6.1 簡單事件綁定方法

• .click(hander) .click() //綁定事件或者觸發 click事件

• .blur() //失去焦點事件，同上

• .hover(mousein, mouseleave) //鼠標移入，移出

• mouseout：當鼠標離開元素及它的子元素的時都會觸發。

•  

• mouseleave: 當鼠標離開自己時才會觸發，子元素不觸發。

• .dbclick() 雙擊

• change 改變,比如：文本框發送改變，下來列表發生改變等...

• focus 獲得焦點

• keyup, keydown, keypress : 鍵盤鍵被按下。

• mousedown, mouseover

•  

6.2 綁定事件的方式 bind方式（不推薦，1.7以后的jQuery版本被on取代）

• 語法格式：.bind( eventType [, eventData ], handler )

• 參數說明

◦                     第一個參數：事件類型

◦                     第二個參數：傳遞給事件響應方法的數據對象，可以省略。

◦                     事件響應方法中獲取數據方式： e.data

◦                     第三個參數：事件響應方法

• • 第二個參數可以省略。

• •     例如：   

• •  

• •     $("p").bind("click", function(e){

• •  

• •         //事件響應方法

• •  

• •     });

• •  

• •  

• •  

• •     $("p").on('click',function(e){

• •  

• •         //事件響應方法

• •  

• •     })

6.3 delegate方式（推薦，性能高，支持動態創建的元素）

* 語法格式：$(selector).delegate( selector, eventType, handler )

 

* 語法說明：

 

    - 第一個參數:selector，子選擇器

 

    - 第二個參數：事件類型

 

    - 第三個參數：事件響應方法

 

 

 

```

 

    例如：  

 

    $(".parentBox").delegate("p", "click", function(){

 

        //為 .parentBox下面的所有的p標簽綁定事件

 

    });

 

 

 

    $(".parentBox").on("click","p", function(){

 

        //為 .parentBox下面的所有的p標簽綁定事件

 

    });

 

```

 

*優勢：效率較高*

6.4 one綁定一次事件的方式

* .one( events [, data ], handler )

 

    例如：

 

    $( "p" ).one( "click", function() {

 

      alert( $( this ).text() );

 

    });

 

 

 

    $("p").on("click",function(){

 

        $(this).off('click');//事件方法執行了一次后，就立即解綁事件

 

    })

6.5 on綁定的方式（整合了bind、delegate 烈建議使用的方式））

• jQuery1.7版本后，jQuery用on統一了所有的事件處理的方法

• 語法格式：$(selector).on( events [, selector ] [, data ], handler )

• 參數介紹：

◦                     第一個參數：events，事件名

◦                     第二個參數：selector,類似delegate

◦                     第三個參數: 傳遞給事件響應方法的參數

◦           第四個參數：handler，事件處理方法

◦               例如：

◦            

◦               //綁定一個方法

◦            

◦               $( "#dataTable tbody tr" ).on( "click", function() {

◦            

◦                 console.log( $( this ).text() );

◦            

◦               });

◦            

◦            

◦            

◦               //給子元素綁定事件

◦            

◦               $( "#dataTable tbody" ).on( "click", "tr", function() {

◦            

◦                 console.log( $( this ).text() );

◦            

◦               });

◦            

◦            

◦            

◦               //綁定多個事件的方式

◦            

◦               $( "div.test" ).on({

◦            

◦                 click: function() {

◦            

◦                   $( this ).toggleClass( "active" );

◦            

◦                 }, mouseenter: function() {

◦            

◦                   $( this ).addClass( "inside" );

◦            

◦                 }, mouseleave: function() {

◦            

◦                   $( this ).removeClass( "inside" );

◦            

◦                 }

◦            

◦               });

6.6 解綁

• unbind解綁 bind方式綁定的事件( 在jQuery1.7以上被 on和off代替)

◦                     $(selector).unbind(); //解綁所有的事件

◦                     $(selector).unbind("click"); //解綁指定的事件

• undelegate解綁delegate事件

◦                     $( "p" ).undelegate(); //解綁所有的delegate事件

◦                     $( "p" ).undelegate( "click" ); //解綁所有的click事件

• off解綁on方式綁定的事件

◦                     $( "p" ).off();

◦                     $("P").off('click');

◦                     $( "p" ).off( "click", "**" ); // 解綁所有的click事件，兩個*表示所有

◦                     $( "body" ).off( "click", "p", foo );

6.7 觸發事件

• 6.7.1 簡單事件觸發

◦                     $(selector).click(); //觸發 click事件

• 6.7.2 trigger() 方法觸發被選元素的指定事件類型。

◦                     $( "#foo" ).trigger( "click" );

• 6.7.3 triggerHandler觸發事件響應方法，不觸發瀏覽器行為（triggerHandler() 方法觸發被選元素的指定事件類型。但不會執行瀏覽器默認動作，也不會產生事件冒泡。）

◦                     $( "input" ).triggerHandler( "focus" );

6.8 event對象的簡介

• event.data //傳遞的額外事件響應方法的額外參數

• event.currentTarget === this //在事件響應方法中等同於this，當前Dom對象

• event.target //事件觸發源，不一定===this

• event.pageX //The mouse position relative to the left edge of the document

• event.pageY

• event.stopPropagation()//阻止事件冒泡

• e.preventDefault(); //阻止默認行為

• event.type //事件類型：click，dbclick...

• event.which //鼠標的按鍵類型：左1 中2 右3

• keydown : a,b,c

• event.keyCode// code的c是大寫

7. jQuery動畫系統

7.1隱藏顯示

* $(selector).show(speed,callback);

 

* $(selector).hide(1000);

 

* $(selector).toggle("slow");

 

 

 

* 三個方法的語法都一致，參數可以有兩個，第一個是動畫的速度，第二個是動畫執行完成后的回調函數。

 

* 第一個參數是：可以是單詞或者毫秒數

7.2淡入淡出

$(selector).fadeIn(speed, callback)

 

$(selector).fadeOut(1000)

 

$(selector).fadeToggle('fast',function(){})

 

參數等同於 7.1

 

 

 

* $(selector).fadeTo(.5); //淡入到  0透明，1不透明

7.3滑動

* $(selector).slideDown(speed,callback);

 

* $(selector).slideUp(speed,callback);

 

* $(selector).slideToggle(speed,callback);

7.4動畫

* $(selector).animate({params},speed,callback);

 

    $("button").click(function(){

 

      $("div").animate({

 

        left:'250px',

 

        opacity:'0.5',

 

        height:'150px',

 

        width:'150px'

 

      },2000);

 

    }).animate({},1000);

7.5結束動畫

* $(selector).stop()

 

* $(selector).stop(stopAll,goToEnd);

• 案例：

8. jQuery補充

• 8.1 each函數

◦                     全局的

▪                                       $.each(array, function(index, object){})

◦                     普通jQuery對象的each方法

▪                                       $("li").each(function(index, element){} )

參數的順序是一致的。