Python全棧之jQuery筆記

jQuery runnoob網址:

http: / / www.runoob.com / jquery / jquery - tutorial.html

jQuery API手冊: http: / / www.runoob.com / manual / jquery /

 

jQuery筆記

筆記來源於:

     傳智播客的黑馬程序員視頻筆記.

     菜鳥教程:http: / / www.runoob.com /

     本身的查詢與整理.

 

JS的不完美地方:

     1.  代碼比較麻煩,給多個元素添加事件須要遍歷,可能還須要進行嵌套.

     2.  找對象麻煩,方法少,還比較長.

     3.  會有兼容性的問題.

     4.  若是想要實現簡單的動畫效果,須要用 animate, 也存在兼容性問題.

     5.js 註冊事件存在覆蓋狀況,須要使用addEventListener,比較麻煩.

 

jQuery的優勢:

     1.  隱式遍歷,不須要使用 for 循環;

     2.  找對象比較容易,很是靈活;

     3.  處理兼容性問題比較好;

     4.  實現動畫效果很是簡單,並且功能強大.

     5.  代碼簡單,粗暴.

 

jQuery版本:

     1.x 版本: 可以兼容IE678瀏覽器

     2.x 版本: 不兼容IE678瀏覽器

     1.x 和 2.x 版本的jQuery都再也不更新版本了,如今只更新 3.x 版本

     3.x 版本: 不兼容IE678,更加的精簡(在國內不流行, 由於國內使用jQuery的主要目的就是兼容IE678)

 

jQuery的入口函數:

     方式一:

         $(document).ready(function () { 代碼塊 });

     方式二:

         $(function () { 代碼塊 });

 

JS的入口函數:

     window.onload  =  function () { 代碼塊 };

 

兩種入口函數的區別:

     1.jQuery 的入口函數要比JS的入口函數先執行;

     2.jQuery 的入口函數會等待頁面加載完成才執行,但不會等待圖片的加載;

     3.JS 的入口函數會等待頁面和圖片都加載完成才執行.

 

DOM對象:

     使用JS的方式獲取的元素就是JS對象(DOM對象).

 

jQuery對象:

     使用jQuery的方式獲取的元素就是jQuery對象.

 

DOM對象與jQuery對象是兩類不一樣的對象,因此:

     DOM對象不能調用jQuery的方法;

     jQuery對象也不能調用DOM對象的方法;

     可是DOM對象和jQuery對象之間能夠相互轉換.

 

DOM對象轉換爲jQuery對象:

     $(DOM對象)

jQuery對象轉換成DOM對象:

     將jQuery中封閉的DOM對象取出來便可.

 

jQuery中的 $ 實際上就是一個函數.

 

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

jQuery中的選擇器:

jQuery的選擇器基本兼容了CSS1到CSS3全部的選擇器,而且還添加了不少複雜的選擇器.

用jQuery選擇器選擇一個對象,會有多種不一樣的方法可供選擇.

 

1. 基本選擇器(跟CSS選擇器用法如出一轍):

名稱          用法(示例)              描述

ID 選擇器       $( "#id名" )           獲取指定的 ID 元素

類選擇器       $( ".class名" )        獲取同一類 class 元素

標籤選擇器     $( "標籤名" )           獲取同一類標籤的全部元素

並集選擇器     $( "div,p,li" )        使用逗號分隔,只要符合條件之一就會被選擇

交集選擇器     $( "div.redClass" )    獲取 class 爲redClass的div元素

其餘選擇器示例:

               $(document)          選擇整個文檔對象

               $( "input[name=first]" )選擇name屬性等於first的 input 元素(標籤) 注意:這麼寫也行:$( "input[name='first']" )

               $( "[name]" )          選擇全部包含name屬性的標籤

               $( "[name=first]" )    選擇全部屬性name等於first的標籤 注意:這麼寫也行:$( "[name='first']" )

               $( "a[target!='_blank']" )  選取全部 target 屬性值不等於  "_blank"  的 <a> 元素

               $( ":button" )         選取全部  type = "button"  的 < input > 元素 和 <button> 元素

 

 

2. 層級選擇器(跟CSS選擇器用法如出一轍):

名稱          用法(示例)              描述

子代選擇器      $( "ul>li" )           使用>號,獲取兒子層級的元素,注意:並不會獲取孫子層的元素

後代選擇器      $( "ul li" )           使用空格,表明後代選擇器,獲取ul下的全部的li元素,包括孫子輩

 

3. 過濾選擇器(這種選擇器都帶冒號):

名稱          用法                                  描述

:eq(index)  $( "li:eq(2)" );                      獲取li元素中索引號爲 2 的元素(索引從 0 開始)

:odd        $( "li:odd" );                        獲取li元素中下標是奇數的元素(下標從 0 開始)

:even       $( "li:even" );                       獲取li元素中下標是偶數的元素(下標從 0 開始)

:gt         $( '#ul1 li:gt(2)' )                  選擇 id 爲ul1元素下的前三個以後的li

:lt         $( '#ul1 li:lt(2)' )                  選擇 id 爲ul1元素下的前三個li

: input       $( "#myForm :input" )                 選擇表單中的 input 元素

:visible    $( "div:visible" )                    選擇可見的div元素

 

4. 表單對象屬性選擇器

:enabled    匹配全部不可用的元素

:disabled

:checked

:selected

 

5. 篩選選擇器(方法):

篩選選擇器的功能與過濾選擇器有點相似,可是用法不同,篩選選擇器主要是方法.

名稱                      用法                    描述

children(selector)  $( "ul" ).children( "li" )      至關於$( "ul>li" ),子代選擇器

find(selector)      $( "ul" ).find( ".myClass" );   選擇div內的 class 等於myClass的元素

siblings(selector)  $( "#first" ).siblings( "li" ); 查找兄弟節點,不包括本身自己

parent()            $( "#first" ).parent();       查找父親元素

eq(index)           $( "li" ).eq( 2 );              至關於$( "li:eq(2)" ),index從 0 開始

next ()              $( "li" ). next ();             找下一下兄弟

prev()              $( "li" ).prev();             找上一個兄弟

prev( "p" )           $( "div" ).prev( "p" );         選擇div元素前面的第一個p元素

next ( "p" )           $( "div" ). next ( "p" );         選擇div元素後面的第一個p元素

closest( "from" )     $( "div" ).closest( "form" );   選擇離div最近的那個form父元素

 

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

jQuery之遍歷

jQuery提供了多種遍歷DOM的方法.遍歷方法中最大的種類是樹遍歷(tree - traversal).

1.jQuery 遍歷 - 祖先:

     parent()        返回被選元素的直接父元素,該方法只會向上一級對 DOM 樹進行遍歷.

     parents()

         返回被選元素的全部祖先元素，它一路向上直到文檔的根元素 (<html>).

         您也可使用可選參數來過濾對祖先元素的搜索,示例:$( "span" ).parents( "ul" );  返回全部<span>元素的全部祖先,而且它是<ul>元素.

     parentsUntil()

         parentsUntil() 方法返回介於兩個給定元素之間的全部祖先元素.

         $( "span" ).parentsUntil( "div" );  返回介於 <span> 與 <div> 元素之間的全部祖先元素(不包含div元素).

 

2.jQuery 遍歷 - 後代

後代是子、孫、曾孫等等.經過jQuery,您可以向下遍歷DOM樹,以查找元素的後代.

下面是兩個用於向下遍歷DOM樹的jQuery方法:

     children()  返回被選元素的全部直接子元素.該方法只會向下一級對DOM樹進行遍歷.

         $( "div" ).children();  返回每一個<div>元素的全部直接子元素

         您也可使用可選參數來過濾對子元素的搜索:

         $( "div" ).children( "p.1" );  返回類名爲 "1" 的全部<p>元素,而且它們是<div>的直接子元素.

     find()  返回被選元素的後代元素,一路向下直到最後一個後代.

         $( "div" ).find( "span" );  返回屬於 <div> 後代的全部 <span> 元素.

         $( "div" ).find( "*" );     返回 <div> 的全部後代

 

3.jQuery 遍歷 - 同胞(siblings)

同胞擁有相同的父元素.經過jQuery,您可以在DOM樹中遍歷元素的同胞元素.

在DOM樹中水平遍歷:

     siblings()  返回被選元素的全部同胞元素.

         $( "h2" ).siblings();     返回<h2>的全部同胞元素.注意:不包括<h2>元素.

         $( "h2" ).siblings( "p" );  返回屬於<h2>的同胞元素的全部<p>元素.

     next ()  返回被選元素的下一個同胞元素.該方法只返回一個元素.

         $( "h2" ). next ();         返回<h2>的下一個同胞元素.

     nextAll()  返回被選元素的全部跟隨的同胞元素

         $( "h2" ).nextAll();      返回<h2>的全部跟隨的同胞元素.

     nextUntil()  返回介於兩個給定參數之間的全部跟隨的同胞元素.

         $( "h2" ).nextUntil( "h6" ) 返回介於<h2>與<h6>元素之間的全部同胞元素.注意:不包括<h6>元素.

     prev(), prevAll(), prevUntil()

         prev(),prevAll()以及 prevUntil()方法的工做方式與上面的方法相似,只不過方向相反而已:

         它們返回的是前面的同胞元素(在DOM樹中沿着同胞以前元素遍歷,而不是以後元素遍歷).

 

4.jQuery 遍歷 - 過濾

縮小搜索元素的範圍:

三個最基本的過濾方法是:first(),last()和eq().它們容許您基於其在一組元素中的位置來選擇一個特定的元素.

其餘過濾方法,好比 filter ()和 not ()容許您選取匹配或不匹配某項指定標準的元素.

     first()  返回被選元素的首個元素.

         $( "div p" ).first();     選取首個 <div> 元素內部的第一個 <p> 元素.

     last()  返回被選元素的最後一個元素.

         $( "div p" ).last();      選擇最後一個<div>元素中的最後一個<p>元素.

     eq(index)  返回被選元素中帶有指定索引號的元素.索引號從 0 開始,所以首個元素的索引號是 0 而不是 1.

         $( "p" ).eq( 1 );           選取第二個<p>元素(索引號  1 ).

     filter ()  容許您規定一個標準,不匹配這個標準的元素會被從集合中刪除,匹配的元素會被返回.

         $( "p" ). filter ( ".url" );  返回帶有類名 "url" 的全部<p>元素.

     not ()  返回不匹配標準的全部元素.提示: not ()方法與 filter ()相反.

         $( "p" ). not ( ".url" );     返回不帶有類名 "url" 的全部<p>元素.

 

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

jQuery操做屬性

1.attr 操做(設置單個屬性):

     第一個參數:須要設置的屬性名

     第二個參數:對應的屬性值

attr(name, value);

示例:

     $( "img" ).attr( "title" ,  "新名字" );

     $( "img" ).attr( "alt" ,  "新說明" );

用attr設置多個屬性:

     參數是一個對象,包含全部須要設置的屬性名與屬性值

     $( "img" ).attr({

         title:  "新名字" ,

         alt:  "新說明" ,

         style:  "opacity: .5" ,  # 設置透明度

     });

獲取屬性:

     傳入須要獲取的屬性名,返回對應的屬性值

     var 變量  =  $(selector).attr( "屬性名" );

jQuery方法attr(),也提供回調函數.回調函數有兩個參數:被選元素列表中當前元素的下標,以及原始(舊的)值.而後以函數新值返回您但願使用的字符串.示例以下:

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

       $( "#runoob" ).attr( "href" , function(i,origValue){

         return  origValue  +  "/jquery" ;

       });

     });

刪除屬性:removeAttr()

 

注意:

     對於布爾類型(selected, checked, disabled等)的屬性,不要用attr方法,使用prop方法;

     prop()函數的執行結果:

       1. 若是有相應的屬性,返回指定屬性值.

       2. 若是沒有相應的屬性,返回值是空字符串.

     attr()函數的執行結果:

       1. 若是有相應的屬性,返回指定屬性值.

       2. 若是沒有相應的屬性,返回值是undefined.

     對於HTML元素自己就帶有的固有屬性,在處理時,使用prop方法.

     對於HTML元素咱們本身自定義的DOM屬性,在處理時,使用attr方法.

     具備 true 和 false 兩個屬性的屬性,如 checked, selected 或者 disabled 使用prop()

 

注意:

1.1 類比attr操做的css操做:

     jQuery經過CSS方法同時設置多種樣式:

     $( "li" ).css( "backgroudColor" ,  "pink" ).css( "color" ,  "red" ).css( "fontSize" ,  "14px" );

jQuery設置CSS樣式的推薦方法:

     $( "li" ).css({

         backgroundColor:  "pink" ,

         color:  "red" ,

         fontSize:  "14px" ,

         border:  "1px solid black" ,

         ...

     });

1.2  jQuery獲取CSS樣式的值:

     var 變量  =  $(selector).css( "樣式的key,好比background或color等" );

     特別注意:

         選擇器獲取的多個元素,獲取信息獲取的是第一個,好比：$( "div" ).css( "width" ).獲取的是第一個div的width.

         緣由:jQuery的隱式迭代致使

         關於jQuery的隱匿迭代:

             jQuery進行設置操做時,會給符合條件的全部jQuery對象設置上相應的值;

             jQuery在進行值獲取時,只會返回第一個元素對應的值.

 

1.3  操做樣式類名(jQuery獲取並設置 CSS 類):

     $( "#div1" ).addClass( "divClass2" )  / / 爲 id 爲div1的對象追加樣式divClass2

     $( "#div1" ).removeClass( "divClass" )   / / 移除 id 爲div1的對象的 class 名爲divClass的樣式

     $( "#div1" ).removeClass( "divClass divClass2" )  / / 移除多個樣式

     $( "#div1" ).toggleClass( "anotherClass" )  / / 重複切換anotherClass樣式

 

2.prop 操做:

     在jQuery1. 6 以後,對於checked, selected, disabled等這類boolean類型的屬性來講,不能用attr方法,只能用prop方法.

設置屬性:

     $(selector).prop( "checked" , true);

獲取屬性:

     $(selector).prop( "checked" );  # 返回true或false

 

3.jQuery 動畫

jQuery提供了三組基本動畫,這些動畫都是標準的,有規律的的效果,jQuery還提供了自定義動畫的功能.

3.1 三組基本動畫:

     顯示(show)與隱藏(hide)是一組動畫,注意:show與hide動畫效果若是不傳speed參數是沒有動畫效果的;

         語法:

             $(selector).hide(speed,callback);

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

     滑入(slideUp)與滑出(slideDown)以及切換(slideToggle),注意:slide相關動畫不傳speed參數也有動畫效果;

         語法:

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

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

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

     淡入(fadeIn)與淡出(fadeOut)以及切換(fadeToggle),(fadeTo).

         語法:

             $(selector).fadeOut(speed, easing, callback);

             $(selector).fadeIn(speed, easing, callback);

             $(selector).fadeToggle(speed, easing, callback);

             $(selector).fadeTo(speed, opacity, easing, callback);  opacity爲 0 - 1 之間,表明透明度.

show([speed], [callback]);

     speed:可選參數,表示動畫執行的時間,單位毫秒

           1. 若是不傳,就沒有動畫效果,若是是slide和fade系列,會默認爲normal;

           2. 推薦設置speed爲 1000 毫秒;

           3. 固定字符串(即:show(slow)), slow( 200 ), normal( 400 ), fast( 600 ).若是傳其餘字符串,則默認爲normal.

     callback:可選參數,執行完動畫後執行回調函數.

 

3.2 自定義動畫:

animate: 自定義動畫:

$(selector).animate({params}, [speed], [easing], [callback]);

參數:

     {params}: 要執行動畫的css屬性,帶數字(必選);

     speed: 執行動畫的時長(可選);

     easing: 執行動畫的效果,默認爲swing(緩動), 能夠是linear(勻速);

     callback: 動畫執行完後當即執行的回調函數(可選).

注意:

     默認狀況下，全部的 HTML 元素有一個靜態的位置，且是不可移動的。

     若是須要改變，咱們須要將元素的 position 屬性設置爲 relative, fixed, 或 absolute!

 

3.3 動畫隊列與中止動畫:

     在同一個元素上執行多個動畫,那麼對於這個動畫來講,後面的動畫會被放到動畫隊列中,等前面的動畫

     執行完成纔會執行.

stop(clearQueue, jumpToEnd);

參數:

     clearQueue:是否清除隊列;

     jumpToEnd:是否跳轉到最終效果.

示例:$(selector).stop();   - - > 等現於$(selector).stop(false, false);

 

一般animate方法與stop方法會一同使用,語法以下:$(selector).stop().animate({params: values}, speed, easing, callback);

 

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

jQuery節點操做:

1. 建立節點:

     $(htmlStr)

     htmlStr: html格式的字符串

     $( "<span>這是一個span元素</span>" );

 

2. 添加節點

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

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

after()  -  在被選元素以後插入內容

before()  -  在被選元素以前插入內容

     注意:append / prepend 是在選擇元素內部嵌入;after / before 是在元素外面追加.

appendTo

prependTo

 

3. 清空節點與刪除節點:

empty: 清空指定節點的全部元素,自身保留(清理門戶)

     $( "div" ).empty();   清空div的全部內容(推薦使用,會清除子元素上綁定的內容,源碼)

     $( "div" ).html("");  使用html方法來清空元素,不推薦使用,會形成內存泄漏,綁定的事件不會清除.

remove: 相比於empty,自身也刪除

注意:jQuery remove() 方法也可接受一個參數,容許您對被刪元素進行過濾:

     $( "p" ).remove( ".italic" );   刪除全部具備屬性 class = 'italic' 的元素.

 

4. 克隆節點:

做用:複製匹配的元素

複製$(selector)所匹配到的元素(深度複製)

     cloneNode(true)

返回值爲複製的新元素,和原來的元素沒有任何關係.即修改新元素,不會影響到原來的元素

     $(selector).clone();

 

jQuery特殊屬性操做

1.1  val方法

     val方法用於設置和獲取 "表單元素" 的值,例如 input ,textarea的值(只針對表單元素)

     設置值:$(selector).val( "要設置的值" );

     獲取值:var 變量  =  $(selector).val();

1.2  html方法與text方法

     html方法至關於innerHTML, text方法至關於innerText

     html方法的使用:

         設置內容:$(selector).html( "<span>要設置的內容</span>" );

         獲取內容:var 變量  =  $(selector).html();

     text方法的使用:

         設置內容:$(selector).text( "<span>這是要設置的內容</span>" );

         獲取內容:var 變量  =  $(selector).text();

     區別:html方法會識別html標籤, text方法會把內容直接當成字符串,並不會識別字符串內的html標籤.

補充說明:

text()、html()以及val()的回調函數:

上面的三個jQuery方法:text()、html()以及val(),一樣擁有回調函數.回調函數有兩個參數:被選元素列表中當前元素的下標,以及原始(舊的)值.

而後以函數新值返回您但願使用的字符串.示例以下:

     $( "#btn1" ).click(function(){

         $( "#test1" ).text(function(i,origText){

             return  "舊文本: "  +  origText  +  " 新文本: Hello world! (index: "  +  i  +  ")" ;

         });

     });

     $( "#btn2" ).click(function(){

         $( "#test2" ).html(function(i,origText){

             return  "舊 html: "  +  origText  +  " 新 html: Hello <b>world!</b> (index: "  +  i  +  ")" ;

         });

     });

 

1.3  width方法與height方法

     設置或者獲取高度

     帶參數表示設置高度:$(selector).height( 200 );

     不帶參數表示獲取高度:$(selector).height();

         innerWidth()方法,innerWidth()獲取的是width + padding的值

         outerWidth()方法,outerWidth(flase)獲取的是width + padding + border的值

                          outerWidth(true)獲取的是width + padding + border + margin的值

     其餘:

         $(window).height();獲取可視區高度

         $(document).height();獲取頁面高度

1.4  scrollTop與scrollLeft:

     設置或者獲取垂直滾動條的位置

     獲取頁面被捲曲的高度: $(window).scrollTop();

     獲取頁面被捲曲的寬度: $(window).scrollLeft();

1.5  offset方法與position方法:

     offset方法獲取元素距離document的位置,position方法獲取的是元素距離有定位的父元素的位置.

     獲取元素距離document的位置,返回值爲對象{left:  100 , top:  100 }

         $(selector).offset();

     獲取相對於其最近的有定位的父元素的位置:$(selector).position();

 

2  jQuery事件機制

jQuery事件:

事件函數列表：

     blur() 元素失去焦點

     focus() 元素得到焦點

     change() 表單元素的值發生變化

     click() 鼠標單擊

     dblclick() 鼠標雙擊

         當單擊元素時,發生click事件.

         click()方法觸發click事件,或規定當發生click事件時運行的函數.

         觸發被選元素的click事件: $(selector).click()

         添加函數到click事件:$(selector).click(function)

 

     mouseover() 鼠標進入（進入子元素也觸發）

     mouseout() 鼠標離開（離開子元素也觸發）

     mouseenter() 鼠標進入（進入子元素不觸發）

     mouseleave() 鼠標離開（離開子元素不觸發）

     hover() 同時爲mouseenter和mouseleave事件指定處理函數

     mouseup() 鬆開鼠標

     mousedown() 按下鼠標

     mousemove() 鼠標在元素內部移動

     keydown() 按下鍵盤

     keypress() 按下鍵盤

     keyup() 鬆開鍵盤

     load() 元素加載完畢

     ready() DOM加載完成

     resize() 瀏覽器窗口的大小發生改變

     scroll() 滾動條的位置發生變化

     select() 用戶選中文本框中的內容

     submit() 用戶遞交表單

     toggle() 根據鼠標點擊的次數，依次運行多個函數

     unload() 用戶離開頁面

注意事項:

關於mouseover / mouseout事件與mouseenter / mouseleave事件的區別:

     mouseover / mouseout會在鼠標通過本身和本身的子元素時都會觸發事件;

     mouseenter / mouseleave只會在鼠標通過本身時觸發事件.

 

主動觸發事件:

可以使用jquery對象上的trigger方法來觸發對象上綁定的事件.

示例:

     給element綁定hello事件

     element.bind( "hello" ,function(){

         alert( "hello world!" );

     });

     觸發hello事件

     element.trigger( "hello" );

 

事件冒泡:

     在一個對象上觸發某類事件(好比單擊onclick事件),若是此對象定義了此事件的處理程序,那麼此事件就會調用這個處理程序,

     若是沒有定義此事件處理程序或者事件返回true,那麼這個事件會向這個對象的父級對象傳播,從裏到外,直至它被處理(父級對象全部同類事件都將被激活),

     或者它到達了對象層次的最頂層,即document對象(有些瀏覽器是window).

事件冒泡的做用:

     事件冒泡容許多個操做被集中處理(把事件處理器添加到一個父級元素上,避免把事件處理器添加到多個子級元素上),它還可讓你在對象層的不一樣級別捕獲事件.

阻止事件冒泡:

     事件冒泡機制有時候是不須要的,須要阻止掉,經過 event.stopPropagation()來阻止.

示例(若是每一個元素的父元素都定義了事件,則會從下到上依次觸發):

$(function(){

     var $box1  =  $( '.father' );

     var $box2  =  $( '.son' );

     var $box3  =  $( '.grandson' );

     $box1.click(function() {

         alert( 'father' );

     });

     $box2.click(function() {

         alert( 'son' );

     });

     $box3.click(function(event) {

         alert( 'grandson' );

         event.stopPropagation();

 

     });

     $(document).click(function(event) {

         alert( 'grandfather' );

     });

})

 

......

<div  class = "father" >

     <div  class = "son" >

         <div  class = "grandson" >< / div>

     < / div>

< / div>

 

阻止默認行爲:

阻止右鍵菜單:寫入下列代碼可阻止頁面的右鍵菜單行爲.

$(document).contextmenu(function(event) {

     event.preventDefault();

});

 

     js中已經學習過了事件,可是jQuery對JS事件進行了封裝,增長並擴展了事件處理機制,

     jQuery不只提供了更加優雅的事件處理語法 ,並且極大的加強了事件處理的能力.

2.1  簡單事件綁定>>bind事件綁定>>delegate事件綁定>>on事件綁定

     bind註冊多個事件示例:

     $(selector).bind({

         mouseenter: function(){

             alert( "mouseenter方法" );

         },

         click: function() {

             alert( "click方法" );

         },

         ...

     });

     bind爲多種事件綁定同一函數示例:

     $(selector).bind( "mouseenter click" , function(){函數體});

     delegate事件綁定:

     示例:

         $(selector).delegate( "p" ,  "click" , function(){函數體});

         參數:

         第一個參數:事件最終由誰來執行(示例爲事件最終由p標籤來執行);

         第二個參數:事件的類型(示例爲click事件);

         第三個參數:函數,須要作的事件

         delegate事件綁定的優勢: 動態建立的元素也能綁定事件;

         注意: 委託事件只能給父元素以及祖先元素註冊,不能給子元素註冊,其實現原理爲冒泡原理.

2.2  on註冊事件(重點)

     jQuery1. 7 以後,jQuery用on統一了全部事件的處理方法.

     最現代的方式,兼容zepto(移動端相似jQuery的一個庫),強烈建議使用.

on註冊簡單事件:

$(selector).on( "click" , function(){});表示給$(selector)綁定事件,而且由本身觸發,不支持動態綁定事件.

on註冊委託事件:

$(selector).on( "click" ,  "span" , function(){});

     表示給$(selector)綁定代理事件,當必須是它的內部元素span才能觸發這個事件,支持動態綁定.

on註冊事件的語法:

第一個參數:events,綁定事件的名稱能夠是由空格分隔的多個事件(標準事件或自定義事件)

第二個參數:selector,執行事件的後代元素(可選),若是沒有後代元素,那麼事件將由本身執行.

第三個參數:data:傳遞給處理函數的數據,事件觸發的時候經過event.data來使用(不常使用)

第四個參數:handler,事件處理函數

$(selector).on(event[, selector][, data], handler);

2.3 事件解綁

unbind方式(不用)

     $(selector).unbind();解綁全部的事件

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

undelegate方式(不用)

     $(selector).undelegate();解綁全部的delegate事件

     $(selector).undelegate( "click" );解綁全部的click事件

off方式(推薦):

     $(selector).off();解綁selector選中元素的全部事件

     $(selector).off( "click" );解綁selector選中元素的click事件

2.4  觸發事件

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

     $(selector).trigger( "click" );

2.5  jQuery事件對象

     jQuery事件對象其實就是對JS事件對象的一個封裝,處理了兼容性的問題

     screenX和screenY:對應屏幕最左上角的值

     clientX和clientY:距離頁面左上角的位置(忽視滾動條)

     pageX和pageY:距離頁面最頂部的左上角的位置(會計算滾動條的距離)

 

     event,keyCode:按下的鍵盤代碼

     event.data:存儲綁定事件時傳遞的附加值

 

     event.stopPropagation():阻止事件的冒泡行爲(propagation英文:宣傳; 傳播,傳輸,蔓延,擴展,波及深度; 〔生〕繁殖法,〔地〕傳導; 培養)

     event.preventDefault():阻止瀏覽器默認的行爲

     return  false:既能阻止事件冒泡,又能阻止瀏覽器的默認行爲.

 

3.  jQuery補充知識點

3.1  鏈式編程

         jQuery鏈式調用:

         jQuery對象的方法會在執行完後返回這個jQuery對象，全部jQuery對象的方法能夠連起來寫.下列的方法都返回jQuery對象,可鏈式調用:

             $( '#div1' )  / /  id 爲div1的元素

             .children( 'ul' )  / / 該元素下面的ul子元素

             .slideDown( 'fast' )  / / 高度從零變到實際高度來顯示ul元素

             .parent()   / / 跳到ul的父元素，也就是 id 爲div1的元素

             .siblings()   / / 跳到div1元素平級的全部兄弟元素

             .children( 'ul' )  / / 這些兄弟元素中的ul子元素

             .slideUp( 'fast' );   / / 高度實際高度變換到零來隱藏ul元素

         示例:$( "#p1" ).css( "color" , "red" ).slideUp( 2000 ).slideDown( 2000 );

     一般狀況下,只有設置操做才能把鏈式編程延續下去.

     由於獲取操做的時候,會返回獲取的相應的值,沒法返回jQuery對象.

     end();  篩選選擇器會改變jQuery對象的DOM對象,想要回復到上一次的狀態,而且返回匹配元素以前的狀態.

3.2  each方法

     jQuery的隱匿迭代會對全部的DOM對象設置相同的值,可是若是咱們須要給每個對象設置不一樣的值的時候,就須要隱匿迭代了.

     each做用:遍歷jQuery對象集合,爲每一個匹配的元素執行一個函數

     $(selector).each(function(index, element){});

         第一個參數表示當前元素全部匹配元素中的索引號

         第二個參數表示當前元素(DOM對象)

 

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

jQuery - AJAX

1.jQuery  load()方法:

     load() 方法從服務器加載數據,並把返回的數據放入被選元素中.

     語法: $(selector).load(URL,data,callback);

          必需的URL參數規定您但願加載的URL

          可選的data參數規定與請求一同發送的查詢字符串鍵 / 值對集合.

          可選的callback參數是load()方法完成後所執行的函數名稱.回調函數能夠設置不一樣的參數:

             responseTxt  -  包含調用成功時的結果內容

             statusTXT  -  包含調用的狀態

             xhr  -  包含 XMLHttpRequest 對象

 

          示例:

          $( "#div1" ).load( "demo_test.txt" );      把文件 "demo_test.txt" 的內容加載到指定的<div>元素中.

          $( "#div1" ).load( "demo_test.txt #p1" );  把 "demo_test.txt" 文件中 id = "p1" 的元素的內容,加載到指定的<div>元素中.

          報錯示例:Cross origin requests are only supported  for  protocol schemes: http, data, chrome, chrome - extension, https

 

2.jQuery - AJAX get()和post()方法:

     jQuery get()和post()方法用於經過HTTP GET或POST請求從服務器請求數據.

     $.get()

         該方法經過 HTTP GET 請求從服務器上請求數據.

         語法: $.get(URL,callback);

             必需的 URL 參數規定您但願請求的 URL.

             可選的 callback 參數是請求成功後所執行的函數名.第一個回調參數 data 存有被請求頁面的內容,第二個回調參數 status 存有請求的狀態.

         示例:

             $.get( "/try/ajax/demo_test.php" ,function(data,status){ 函數體 });

     $.post()

         該方法經過 HTTP POST 請求向服務器提交數據.

         語法: $.post(URL,data,callback);

             必需的 URL 參數規定您但願請求的 URL.

             可選的 data 參數規定連同請求發送的數據.

             可選的 callback 參數是請求成功後所執行的函數名.第一個回調參數 data 存有被請求頁面的內容,而第二個回調參數 status 存有請求的狀態.

         示例:

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

                 $.post( "/try/ajax/demo_test_post.php" ,

                 {

                     name: "菜鳥教程" ,

                     url: "http://www.runoob.com"

                 },

                     function(data,status){

                     alert( "數據: \n"  +  data  +  "\n狀態: "  +  status);

                 });

             });

 

3.jQuery - Ajax

     $.ajax使用方法:

     經常使用參數:

         1 、url 請求地址

         2 、 type  請求方式,默認是 'GET' ,經常使用的還有 'POST'

         3 、dataType 設置返回的數據格式,經常使用的是 'json' 格式,也能夠設置爲 'html'

         4 、data 設置發送給服務器的數據

         5 、success 設置請求成功後的回調函數

         6 、error 設置請求失敗後的回調函數

         7 、async 設置是否異步,默認值是 'true' ,表示異步

     之前的寫法:

         $.ajax({

             url:  'js/user.json' ,

             type :  'GET' ,

             dataType:  'json' ,

             data:{ 'aa' : 1 }

             success:function(data){

                 ......

             },

             error:function(){

                 alert( '服務器超時，請重試！' );

             }

         });

     新的寫法(推薦):

         $.ajax({

             url:  'js/user.json' ,

             type :  'GET' ,

             dataType:  'json' ,

             data:{ 'aa' : 1 }

         })

         .done(function(data) {

             ......

         })

         .fail(function() {

             alert( '服務器超時，請重試！' );

         });

 

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

jQuery - noConflict()方法

jQuery noConflict()  該方法會釋放對 $ 標識符的控制,這樣其餘腳本就可使用它了.雖然釋放了 $ ,但依然能夠用jQuery來代替 $ 執行jQuery全部的功能.

示例:

     $.noConflict();

     jQuery(document).ready(function(){

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

         jQuery( "p" ).text( "jQuery 仍然在工做!" );

       });

     });

您也能夠建立本身的簡寫,noConflict()會返回對 jQuery 的引用,您能夠把它存入變量,以供稍後使用,示例以下:

     var jq  =  $.noConflict();

     jq(document).ready(function(){

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

         jq( "p" ).text( "jQuery 仍然在工做!" );

       });

     });

若是你的jQuery代碼塊使用$簡寫,而且您不肯意改變這個快捷方式,那麼您能夠把$符號做爲變量傳遞給ready方法.這樣就能夠在函數內使用$符號了

     -  而在函數外,您依舊不得不使用  "jQuery"  示例以下:

     $.noConflict();

     jQuery(document).ready(function($){

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

         $( "p" ).text( "jQuery 仍然在工做!" );

       });

     });

 

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

jQuery擴展:

1  jQuery插件簡介(不做展開):

1.1  jQuery經常使用插件:

     插件: jQuery不可能包含全部的功能,咱們能夠經過插件來擴展jQuery的功能

     jQuery有着豐富的插件,使用這些插件能給jQuery提供一些額外的功能.

1.1 . 1jQuery .color.js

     animate不支持顏色的漸變,但使用jQuery.color.js後就能夠支持.

     使用該插件的步驟:

     1. 引入jQuery文件

     2. 引入插件(若是有用到css的)

     3. 使用插件

1.1 . 2jQuery .lazyload.js

     懶加載插件

1.1 . 3jQuery .ui.js插件

     jQueryUI專指由jQuery官方維護的UI方向的插件

     官方API: http: / / api.jqueryui.com / category / all /

     其餘教程:jQueryUI教程

     基本使用:

     1. 引入jQueryUI的樣式文件

     2. 引入jQuery

     3. 引入jQueryUI的JS文件

     4. 使用jQueryUI功能

     使用jQuery.ui.js實現新聞模塊的案例.

 

1.2 製做 jQuery插件

     原理: jQuery插件其實就是給jQuery對象增長一個新的方法,讓jQuery對象擁有某一個功能.

     經過給$.fn添加方法就可以擴展jQuery對象

     $.fn.pluginName  =  function(){};

 

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

2  移動端庫和框架(不做展開):

2.1  移動端js事件

     移動端的操做方式和PC端是不一樣的,移動端主要用手指操做,因此有特殊的touch事件,touch事件包括以下幾個事件:

         1 、touchstart: 手指放到屏幕上時觸發

         2 、touchmove: 手指在屏幕上滑動式觸發

         3 、touchend: 手指離開屏幕時觸發

         4 、touchcancel: 系統取消touch事件的時候觸發,比較少用.

移動端通常有三種操做:點擊、滑動、拖動.這三種操做通常是組合使用上面的幾個事件來完成的,全部上面的 4 個事件通常不多單獨使用,

通常是封裝使用來實現這三種操做,可使用封裝成熟的js庫.

 

 

2.2  zeptojs

Zepto是一個輕量級的針對現代高級瀏覽器的JavaScript庫,它與jquery有着相似的api.若是你會用jquery,那麼你也會用zepto.

Zepto的一些可選功能是專門針對移動端瀏覽器的,它的最初目標是在移動端提供一個精簡的相似jquery的js庫.

zepto官網: http: / / zeptojs.com /

zepto中文api: http: / / www.css88.com / doc / zeptojs_api /

zepto包含不少模塊,默認下載版本包含的模塊有Core, Ajax, Event, Form, IE模塊.若是還須要其餘的模塊,能夠自定義構建.

zepto自定義構建地址: http: / / github.e - sites.nl / zeptobuilder /

 

touch模塊封裝了針對移動端經常使用的事件,可以使用此模塊進行移動端特定效果開發,這些事件有:

     1.tap  元素tap的時候觸發,此事件相似click,可是比click快.

     2.longTap  當一個元素被按住超過 750ms 觸發.

     3.swipe , swipeLeft, swipeRight, swipeUp, swipeDown 當元素被劃過期觸發.(可選擇給定的方向)

 

2.3  swiper

swiper.js是一款成熟穩定的應用於PC端和移動端的滑動效果插件,通常用來觸屏焦點圖、觸屏整屏滾動等效果.

swiper分爲 2.x 版本和 3.x 版本, 2.x 版本支持低版本瀏覽器(IE7), 3.x 放棄支持低版本瀏覽器,適合應用在移動端.

     2.x 版本中文網址:http: / / 2.swiper .com.cn /

     3.x 版本中文網地址:http: / / www.swiper.com.cn /

 

swiper使用方法:

<script  type = "text/javascript"  src = "js/swiper.min.js" >< / script>

......

 

<link rel = "stylesheet"  type = "text/css"  href = "css/swiper.min.css" >

......

 

<div  class = "swiper-container" >

   <div  class = "swiper-wrapper" >

     <div  class = "swiper-slide" >slider1< / div>

     <div  class = "swiper-slide" >slider2< / div>

     <div  class = "swiper-slide" >slider3< / div>

   < / div>

     <div  class = "swiper-pagination" >< / div>

     <div  class = "swiper-button-prev" >< / div>

     <div  class = "swiper-button-next" >< / div>

< / div>

 

<script>

var swiper  =  new Swiper( '.swiper-container' , {

     pagination:  '.swiper-pagination' ,

     prevButton:  '.swiper-button-prev' ,

     nextButton:  '.swiper-button-next' ,

     initialSlide : 1 ,

     paginationClickable: true,

     loop: true,

     autoplay: 3000 ,

     autoplayDisableOnInteraction:false

});

< / script>

 

swiper使用參數:

     1 、initialSlide:初始索引值,從 0 開始

     2 、direction:滑動方向 horizontal | vertical

     3 、speed:滑動速度,單位ms

     4 、autoplay:設置自動播放及播放時間

     5 、autoplayDisableOnInteraction:用戶操做swipe後是否還自動播放,默認是true,再也不自動播放

     6 、pagination:分頁圓點

     7 、paginationClickable:分頁圓點是否點擊

     8 、prevButton:上一頁箭頭

     9 、nextButton:下一頁箭頭

     10 、loop:是否首尾銜接

     11 、onSlideChangeEnd:回調函數，滑動結束時執行

 

 

2.4  bootstrap

bootstrap是簡單、直觀、強悍的前端開發框架,讓web開發更迅速、簡單.來自Twitter,是目前很受歡迎的前端框架之一.

Bootrstrap是基於HTML、CSS、JavaScript的,讓書寫代碼更容易.移動優先,響應式佈局開發.

bootstrap中文網址: http: / / www.bootcss.com /

 

bootstrap容器

     container - fluid 流體

     container

         1170

         970

         750

         100 %

 

bootstrap柵格系統

bootstrap將頁面橫向分爲 12 等分,按照 12 等分定義了適應不一樣寬度等分的樣式類,這些樣式類組成了一套響應式、移動設備優先的流式柵格系統:

     1 、col - lg -

     2 、col - md -

     3 、col - sm -

     4 、col - xs -

 

bootstrap響應式查詢區間:

     1 、大於等於 768

     2 、大於等於 992

     3 、大於等於 1200

 

bootstrap表單:

     1 、form 聲明一個表單域

     2 、form - inline 內聯表單域

     3 、form - horizontal 水平排列表單域

     4 、form - group 表單組、包括表單文字和表單控件

     5 、form - control 文本輸入框、下拉列表控件樣式

     6 、checkbox checkbox - inline 多選框樣式

     7 、radio radio - inline 單選框樣式

     8 、 input - group 表單控件組

     9 、 input - group - addon 表單控件組物件樣式  10 、 input - group - btn 表單控件組物件爲按鈕的樣式

     10 、form - group - lg 大尺寸表單

     11 、form - group - sm 小尺寸表單

 

bootstrap按鈕:

     1 、btn 聲明按鈕

     2 、btn - default 默認按鈕樣式

     3 、btn - primay

     4 、btn - success

     5 、btn - info

     6 、btn - warning

     7 、btn - danger

     8 、btn - link

     9 、btn - lg

     10 、btn - md

     11 、btn - xs

     12 、btn - block 寬度是父級寬 100 % 的按鈕

     13 、active

     14 、disabled

     15 、btn - group 定義按鈕組

 

bootstrap圖片:

     img - responsive 聲明響應式圖片

 

bootstrap隱藏類:

     1 、hidden - xs

     2 、hidden - sm

     3 、hidden - md

     4 、hidden - lg

 

bootstrap字體圖標:

     經過字體代替圖標,font文件夾須要和css文件夾在同一目錄

 

bootstrap下拉菜單:

     1 、dropdown - toggle

     2 、dropdown - menu

 

bootstrap選項卡:

     1 、nav

     2 、nav - tabs

     3 、nav - pills

     4 、tab - content

 

bootstrap導航條:

     1 、navbar 聲明導航條

     2 、navbar - default 聲明默認的導航條樣式

     3 、navbar - inverse 聲明反白的導航條樣式

     4 、navbar - static - top 去掉導航條的圓角

     5 、navbar - fixed - top 固定到頂部的導航條

     6 、navbar - fixed - bottom 固定到底部的導航條

     7 、navbar - header 申明logo的容器

     8 、navbar - brand 針對logo等固定內容的樣式

     11 、nav navbar - nav 定義導航條中的菜單

     12 、navbar - form 定義導航條中的表單

     13 、navbar - btn 定義導航條中的按鈕

     14 、navbar - text 定義導航條中的文本

     9 、navbar - left 菜單靠左

     10 、navbar - right 菜單靠右

 

bootstrap模態框:

     1 、modal 聲明一個模態框

     2 、modal - dialog 定義模態框尺寸

     3 、modal - lg 定義大尺寸模態框

     4 、modal - sm 定義小尺寸模態框

     5 、modal - header

     6 、modal - body

     7 、modal - footer

 

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

3  前端自動化及優化(不做展開):

3.1  less、sass、stylus

它們是三種相似的樣式動態語言,屬於css預處理語言,它們有相似css的語法,爲css賦予了動態語言的特性、如變量、繼承、運算、函數等.

這麼作是爲了css的編寫和維護.

它們使用的文件分別是: .less、.scss、 * .styl,這些文件是不能再網頁上直接使用的,最終要編譯成css文件來使用,編譯的方法有軟件編譯,或者用nodejs程序.

less、sass編譯軟件:http: / / koala - app.com / index - zh.html

less中文網址:http: / / lesscss.cn /

 

less語法：

     1 、註釋

         / /  不會被編譯的註釋

         / *  會被編譯的註釋  * /

 

     2 、變量

     @w : 200px ;

     .box{

         width:@w;

         height:@w;

         background - color:red;

     }

 

     3 、混合

     .border{

         border: 1px  solid  #ddd;

     }

     .box(@w: 100px ,@h: 50px ,@bw: 1px ){

         width:@w;

         height:@h;

         border:@bw solid  #ddd;

     }

     .box{

         .border;

         background - color:red;

     }

 

     4 、匹配模式

     .p(r){

         postion:relative;

     }

     .p(a){

         postion:absolute;

     }

     .p(f){

         postion:fixed;

     }

     .box{

         .p(f);

     }

 

     5 、運算

     @w : 300px ;

     .box{

         width:@w + 20 ;

     }

 

     6 、嵌套

     . list {

         li{

             ...

         }

         a{

             ...

             &:hover{

                 ...

             }

         }

         span{

             ...

         }

     }

 

     7 、導入

     / /  導入common.less,導入a.css文件

 

     @import  "common" ;

     @import  (less)  "a.css" ;

 

 

3.2  前端自動化

Node.js

     Node.js能夠理解爲是一門後端腳本語言,使用了和JavaScript相同的語法,會使用JavaScript的程序員能很快上手node.js.

     nodjs在處理高併發方面性能卓越,目前許多公司都在使用nodejs做爲後端數據服務和前端開發的中間層.

     node.js的中文網站:https: / / nodejs.org / zh - cn /

 

前端自動化

     前端開發的流程愈來愈複雜,其中有代碼的合併和壓縮、圖片的壓縮;對less、sass的預處理;文件操做等.

     這些工做是重複乏味的,爲了優化開發流程,提升工做效率,前端自動化工具就出現了,自動化工具能夠經過配置,自動完成這些工做.

 

grunt、gulp

     grunt和gulp是使用node.js編寫的,前端首選的自動化工具,gulp在書寫配置上比grunt更簡潔,運行的性能更高,gulp逐漸成爲主流.

 

gulp的使用

     gulp使用步驟: 安裝nodejs - >全局安裝gulp - >項目安裝gulp以及gulp插件 - >配置gulpfile.js - >運行任務

     gulp網站:http: / / gulpjs.com /

 

經常使用gulp插件：

     壓縮js代碼(gulp - uglify)

     less的編譯(gulp - less)

     css的壓縮(gulp - minify - css)

     自動添加css3前綴(gulp - autoprefixer)

     文件更名字 (gulp - rename)

 

 

3.3  前端性能優化

從用戶訪問資源到資源完整的展示在用戶面前的過程當中,經過技術手段和優化策略,縮短每一個步驟的處理時間從而提高整個資源的訪問和呈現速度.

網站的性能直接會影響到用戶的數量,全部前端性能優化很重要.

前端性能優化分爲以下幾個方面:

1、代碼部署:

     1 、代碼的壓縮與合併

     2 、圖片、js、css等靜態資源使用和主站不一樣域名地址存儲,從而使得在傳輸資源時不會帶上沒必要要的cookie信息.

     3 、使用內容分發網絡 CDN

     4 、爲文件設置Last - Modified、Expires和Etag

     5 、使用GZIP壓縮傳送

     6 、權衡DNS查找次數(使用不一樣域名會增長DNS查找)

     7 、避免沒必要要的重定向(加 "/" )

 

2、編碼:

html:

     1 、使用結構清晰，簡單，語義化標籤

     2 、避免空的src和href

     3 、不要在HTML中縮放圖片

css:

     1 、精簡css選擇器

     2 、把CSS放到頂部

     3 、避免@ import 方式引入樣式

     4 、css中使用base64圖片數據取代圖片文件,減小請求數,在線轉base64網站: http: / / tool.css - js.com / base64.html

     5 、使用css動畫來取代javascript動畫

     6 、使用字體圖標,圖標庫網站: http: / / fontawesome.io / icons /     在線製做網站: www.iconfont.cn

     7 、使用css sprite

     8 、使用svg圖形

     9 、避免使用CSS表達式

         a {star : expression(onfocus = this.blur)}

     10 、避免使用濾鏡

javascript:

     1 、減小引用庫的個數

     2 、使用requirejs或seajs異步加載js

     3 、JS放到頁面底部引入

     4 、避免全局查找

     5 、減小屬性查找

     6 、使用原生方法

     7 、用switch語句代替複雜的 if  else 語句

     8 、減小語句數,好比說多個變量聲明能夠寫成一句

     9 、使用字面量表達式來初始化數組或者對象

     10 、使用DocumentFragments或innerHTML取代複雜的元素注入

     11 、使用事件代理(事件委託)

     12 、避免屢次訪問dom選擇集

     13 、高頻觸發事件設置使用函數節流，如：onmousemove、onmouseover

     14 、使用Web Storage緩存數據

     15 、使用Array的join方法來代替字符串的 "+" 鏈接(先將要鏈接的字符串放進數組)

 

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =