js和jQuery的總結

 

js部分

一 語法結構

1 區分大小寫

2注意 ／／單行      ／＊多行註釋＊／

3子面量（直接量 literal）

12／／數字

5.8／／小數

「hello」字符串

 true

／is/gi   ／／正規

null  ／／kong

｛x：1， y：2｝

｛1，2，3，4｝

4 標示符（變量）和保留字

五、分號能夠省略可是可能會產生問題 js會自動不全

var y = x+f

（a+b）toString（）

等價於      var y = x+f（a+b）.toString（）;

2、類型、值和變量

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

2對象類型

3類 Array  Function Date RegExp Error

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

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

undefined

null

0

－0

NaN

「」 都被轉換爲false

6 包裝對象

var s＝「hello」 ／／原始類型（沒有方法）

s.len ＝4  ／／ 當調用原始類型的屬性或方法的時候（原始類型是沒有屬性和方法的）

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

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

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

alert（n）；

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

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

顯示定義包裝對象 var S ＝new string（「hello「）；是不一樣的

7＝＝和＝＝＝

8 類型的轉換

var n＝17；

alert（n。toString（2））；／／二進制 10001

aleat（n。toString）／／021

alert（n.toString（16））; //  0x21

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

var date ＝new Date（2011，1，1）；

date.valueOf（）   返回毫秒數表明的時間

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

十一、變量做用域

       函數做用域和聲明提早

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

十二、做用域鏈scope chain

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

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

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

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

              做用域鏈是不一樣的。

1三、delete  in  eval  void

第五章 對象

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

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

       三、對象的對象特性 

              對象的原型 prototype

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

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

       ／／建立對象的三種方法

4 對象直接量

var  empty＝｛｝

var point＝｛x：0，y：0｝；

5 ne我建立對象

var a = new Object（）；／／空對象和｛｝同樣

var a＝ newArray（）；

6 Object。Create（｛x：1，y：0｝）；01 繼承自對像原型｛x：1，y：0｝；

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;

檢測屬性

 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  

十一、對象的三個屬性

       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章 函數

1. 函數調用，方法調用

function t(){}

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

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

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

 

1. 構造函數調用

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

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

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

 

1. p184 函數的執行調用了做用域鏈，這個做用域鏈是函數調用的時候建立的‘

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

 

做用域鏈：

調用s() 將建立函數s的執行環境（調用對象），並將該對象置於鏈表開頭，而後將函數t 的調用對象連接在以後，最後是全局對象。而後從鏈表開頭尋找變量name，調用css()     ss() ==>   t()  ==>window

function t(){                   var name="tlwy";                   function s(){                      var name="slwy";                      console.log(name);                   }                   function ss(){                      console.log(name);                   }                   s();                   ss();  }               t(); 每次調用函數，都會生成一個新的做用域鏈。包括新的內部變量

 

1. JQuery 是什麼？

JQuery其實就是一堆的js函數，是普通的js，只不過應用普遍，造成了行業標準。

 

2. JQuery的重點

  2.1Jquery入口函數

   2.2 JQuery的選擇器

   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  文檔的加載順序

3.4 下載HTML頁面，解析HTML標籤，遇到link標籤加載css,遇到script加載js。。

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

參數的順序是一致的。