JS和JQuery的總結

 JS部分

一，  詞法結構

1. 區分大小
2. 注意：//單行  /*多行註釋*/
3. 字面量（直接量literal）

   12 // 數字

   5.8//小數

   「hello」

   ‘hello’

   true

   /js/gi  //正則

     null    //空

     {x:1,y:2}

     [1,2,3,4]

1. 標示符（變量）和保留字
2. 分號能夠省略可是可能會產生問題，js會自動補

 var y = x+f

      (a+b).toString() 

      等價於

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

二.類型、值和變量

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

   2.對象類型

3. 類 Array Function Date RegExp Error

4.js解析器 中集成了垃圾回收

5.任意js’的值均可以轉爲布爾值

undefined

null

0

-0

       NaN

   「」 都被轉換爲false

1. 包裝對象
2. var=「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；」是不一樣的

7.==和===

8.類型轉換

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()   返回毫秒數表明的時間

10.js是動態類型 var n= 10；程序運行期間 ，纔會肯定變量的類型

11.變量做用域

  函數做用域的聲明提早

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

12.做用域鏈 scope chain

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

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

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

定義一個函數時，它保存了一個做用域，調用函數時它建立一個新的對象存儲它的局部變量，並將這個對象添加到保存的那個做用域鏈上，同時建立一個新的更長的表示函數調用做用域的「鏈」。對於嵌套函數每次調用函數時，內部函數會從新定於一遍。每次調用外部函數的時候做用域鏈是不一樣的

13.delete in eval void

 

第五章

1.對象的基本操做 create   set  query  delete test  enumerate

2.對象屬性特性；可寫  可枚舉 可配置（是否可刪除）

3.對象的屬性特性

   對象的原始 prototype

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

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

 

4.建立對象的三種方法

   var empty = {}

   var point = {}

5.new建立對象

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

var a = new Array()

6. 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)

7.屬性的操做 做爲關聯數組的對象

   object .Property

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

1. 繼承

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

若是對象book爲null或uundefined

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){} )

參數的順序是一致的。