JS和JQuery總結

目錄
目錄    2

js部分
1、詞法結構

    一、區分大小寫

    二、注意   // 單行      /*  多行註釋  */

    三、字面量(直接量  literal)

        12  //數字

        5.8 // 小數

        "hello"  

        'hello'

        true

        /js/gi  //正則

        null    //空

        {x:1,y:2}

        [1,2,3,4]

    四、標示符(變量)和保留字

    五、分號能夠省略可是可能會產生問題,js會自動補;

    var y = x+f

    (a+b).toString()  

    等價於

    var y = x+f(a+b).toString();

2、類型、值和變量

    一、原始類型   數字、字符串和布爾   null空  undefined未定義

    二、對象類型

    三、類  Array  Function Date RegExp  Error

    四、js解析器 中集成了垃圾回收

    五、任意js的值均可以轉爲布爾值

        undefined

        null

        0

        -0

        NaN

        ""     都被轉換爲false
六、包裝對象

        var s= "hello";  //原始類型 (沒有方法)

        s.len = 4;     //當調用原始類型的屬性或方法的時候(原始類型是沒有屬性和方法的)

                 //只要引用了字符串的屬性或方法,就會調用new String(s)把原始類型,包裝成對象

                 //之後調用s.len 是調用String對象的屬性和方法,一旦引用結束,新建立的臨時對象會銷燬

        var n = s.len;   //此時爲undefined

        alert(n);



        //調用字符串  布爾 數字的屬性或方法時,建立的臨時對象。是包裝對象

        顯示定義包裝對象  var S = new String("hello")

            var s = "hello";  是不一樣的

    七、==和===

    八、類型轉換

        var n = 17;

        alert(n.toString(2));  //二進制  10001

        alert(n.toString(8));  //  021

        alert(n.toString(16)); //  0x21

        alert(n.toString(10));  alert(n.toString());

    九、toString()  valueOf()

        var date = new Date(2011,1,3);

        date.valueOf()   返回毫秒數表明的時間

    十、js是動態類型  var n = 10;  程序運行期間 纔會肯定變量的類型

    十一、變量做用域

        函數做用域和聲明提早

            函數內定義的變量 聲明自動提早到函數頂部

    十二、做用域鏈scope chain

        在不包含函數的函數體內,做用域鏈有兩個對象,第一個是定義函數

        參數和局部變量的對象,第二個是全局對象。

        在一個嵌套函數體內,做用域鏈上至少有三個對象。



        定義一個函數時,它保存了一個做用域鏈。調用函數時,它建立一個

        新的對象存儲它的局部變量,並將這個對象添加到保存的那個做用域鏈

        上,同時建立一個新的更長的表示函數調用做用域的「鏈」。對於嵌套函數

        每次調用外部函數時,內部函數會從新定義一遍。每次調用外部函數的時候

        做用域鏈是不一樣的。

    1三、delete  in  eval  void


第五章 對象

    一、對象的基本操做  create  set  query delete test  enumerate

    二、對象的屬性特性  可寫  可枚舉  可配置(是否可刪除)

    三、對象的對象特性  

        對象的原型 prototype

        對象的類  標示對象類型的字符串

        對象的擴展標記  是否可添加新屬性

    //建立對象的三種方法

    四、對象直接量

        var empty = {};

        var point = {x:0,y:0};

    五、new建立對象

        var o = new Object();  //空對象  和{}同樣

        var a = new Array();

    六、Object.create()

        var o1 = Object.create({x:1,y:2});  //o1 繼承自對象原型{x:1,y:2}

        var o2 = Object.create(null);       //o2不繼承任何屬性和方法

        var o3 = Object.create(Object.prototype);  

        //空對象和 {} new Object()同樣

    七、屬性的操做  做爲關聯數組的對象

        object.property

        object["property"]   散列  映射  字典 關聯數組

    八、繼承

        js的繼承只能從父類獲取屬性的值,而不能修改原型鏈

        若是對象book爲null或undefined

         book.subtitle.length會報錯

         解決方法

         var len = book && book.subtitle && book.subtitle.length;



         刪除屬性

         delete book.subtitle



         檢測屬性  in  hasOwnPreperty()  propertyIsEnumerable()

         var o = {x:1};

         "x" in o

         "toString" in o



        hasOwnPreperty();判斷屬性是不是本身的。繼承屬性返回false



        propertyIsEnumerable() 只有是自有屬性,並可枚舉





        獲取全部屬性

        Object.keys()

        Object.getOwnPropertyNames()

    九、屬性getter和setter

         var o = {

            x: 0,

            y: 1,

            set r(value) { value = this.r;},

            get r() { return this.x + this.y;}

        };

        x數據屬性,r存取器屬性

    十、屬性的特性  ecmascript5   老的ie不支持以下用法

        數據屬性的特性:值value 可寫性writable

                可枚舉enumerable

                可配置configurable

        存取器屬性特性:get  set

                可枚舉enumerable

                可配置configurable

        //返回{value:1,writable:true,emunerable:true,configurable:true}

        Object.getOwnPropertyDescriptor({x:1},x)

        //查不到屬性 返回undefined

        

        設置屬性的特性  不能修改繼承的屬性特性

        Object.defineProperty()

        //設置不可枚舉屬性

        var o = {};

        Object.defineProperty(o,"x",{

            value:1,

            writable:true,

            emunerable:false,

            configurable:true

        })



        //設置只讀

        Object.defineProperty(o,"x",{writable:false})



        修改多個屬性特性

        Object.defineProperties()



        擴展Object.prototype   書 P137

    十一、對象的三個屬性

        prototype  class  extensible attribute



        查詢對象的原型

        ecmascript5中 Object.getPrototypeOf(o1)

        ecmascript3中 o1.constructor.prototype



        經過對象直接量或new Object()方式建立的對象

        包含一個constructor的屬性,指Object()的構造函數

        constructor.prototype纔是真正的原型



        p.isPrototypeOf(o)檢測對象p是不是o的原型





        //獲取對象的類型 字符串

        Object.prototype.toString.call(o1).slice(8,-1)

    十二、對象的可擴展性

        對象是否能夠新加屬性

        Object.preventExtensions() 設置對象不可擴展

        Object.isExtensible()

        Object.seal()  除了將對象設置爲不可擴展,還將屬性設置爲不可配置

        Object.freeze()

        除了將對象設置爲不可擴展,將屬性設置爲不可配置,還把屬性設置爲只讀



第8章 函數

    一、函數調用,方法調用

        function t(){ }

        t();  函數調用  this是全局對象  嚴格模式下是undefined



        var o = {a:function(){}};

        o.a()  方法調用  this是當前調用的對象

    二、構造函數調用

        var o = new Object();  var o= new Object;

        o繼承自構造函數的prototype屬性  內部的this是此對象



        var r = new o.m();中的this不是o

    三、P184 函數的執行用到了做用域鏈,這個做用域鏈是函數定義的時候建立的。

        嵌套的函數f()定義在這個做用域鏈裏,其中的變量scope是局部變量





        做用域鏈    

        

        調用s()將建立函數s的執行環境(調用對象),並將該對象置於鏈表開頭,

        而後將函數t的調用對象連接在以後,最後是全局對象。而後從鏈表開頭尋找變量name   



        調用ss()     ss() ==>  t()  ==> window

        name="lwy";  

        function t(){  

            var name="tlwy";  

            function s(){  

            var name="slwy";  

            console.log(name);  

            }  

            function ss(){  

            console.log(name);  

            }  

            s();  

            ss();  

        }  

        t();  



        每次調用函數,都會生成一個新的做用域鏈。包括新的內部變量


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){} )
參數的順序是一致的。

css

相關文章
相關標籤/搜索