前端（十）

一jQuery修改樣式

用原生js去獲取或修改css樣式，當獲取的時候還要判斷是行內樣式仍是外部class，各類兼容問題撲面而來，jQuery給咱們提供了直接方法：

1.1獲取和修改樣式

獲取：（無論是行內仍是外部class中寫的css樣式，只要寫了就有返回值）

//獲取的時候若是有不少個，那麼獲取jquery對象中的第一個
$("div").css("width");複製代碼

設置：(設置的是行內樣式，單位能夠不寫默認是px)

//設置單個樣式：  css(屬性，值); 
$("div").css("background-color","red");   
//設置多個樣式：  css(json);   
$("div").css({"width":100,"height":100,"background-color":"pink"})複製代碼

1.2修改class

用原生js修改class 是經過ele.className  = "e"去改變class。固然jQuery也給咱們提供了API:

一、添加類樣式：

$(selector).addClass("liItem");  //爲指定元素添加類className複製代碼

注意：此處類名不帶點，全部類操做的方法類名都不帶點。

二、移除類樣式：

$(selector).removeClass("liItem");  //爲指定元素移除類 className
	$(selector).removeClass();          //不指定參數，表示移除被選中元素的全部類複製代碼

三、判斷有沒有類樣式：

$(selector).hasClass("liItem");   //判斷指定元素是否包含類 className複製代碼

此時，會返回true或false。jquery對象中，只要有一個帶有指定類名的就是true，全部都不帶纔是false。

四、切換類樣式：

//爲指定元素切換類 className，該元素有類則移除，沒有指定類則添加。
        $(selector).toggleClass(「liItem」); 複製代碼

實際開發中者兩種改變css樣式的方式應該怎麼抉擇呢？

• 操做的樣式很是少，那麼能夠經過.css()實現。

• 操做的樣式不少，建議經過使用類 class 的方式來操做。

• 若是考慮之後維護方便（把CSS從js中分離出來）的話，推薦使用類的方式來操做。

二操做節點

2.1原生js建立節點的方式

直接createElement或者是innerHtml的方式去建立，jQuery怎麼建立節點呢？

方式一：

var $spanNode1 = $("<span>我是一個span元素</span>");  // 返回的是 jQuery對象複製代碼

此方法相似於 原生 js 中的document.createElement("標籤名");

方式二：（推薦）

var node = $("#box").html("<li>我是li</li>");複製代碼

此方法相似於 原生 js 中的innerHTML。

由於有方式一的存在，必然會有一系列插入，刪除的方法，若是直接用方式二，這些API就不必記住了。因此關於節點的操做總結：在js中用innerHTML的方式，在jQuery中用html的方式。

三獲取和修改屬性

原生js去獲取或者修改屬性用getAttribute、setAttribute、removeAttribute方法。jQuery使用：

（1）設置屬性：

$(selector).attr("title", "生命壹號");複製代碼

參數解釋：第一個參數表示：要設置的屬性名稱。第二個參數表示：該屬性名稱對應的值。

（2）獲取屬性：

$(selector).attr("title");複製代碼

參數爲：要獲取的屬性的名稱，返回指定屬性對應的值。

總結：兩個參數是給屬性賦值，單個參數是獲取屬性值。

（3）移除屬性：

$(selector).removeAttr("title");複製代碼

四事件

最先採用的是 bind、delegate等方式綁定的。jQuery 1.7版本後，jQuery用on統一了全部的事件處理的方法，此方法兼容zepto(移動端相似於jQuery的一個庫)。

格式舉例：

$(document).on("click mouseenter", ".box", {"name": 111}, function (event) {
            console.log(event.data);      //event.data獲取的就是第三個參數這個json。
            console.log(event.data.name); //event.data.name獲取的是name的值。
        });複製代碼

參數解釋：

• 第一個參數：events，綁定事件的名稱能夠是由空格分隔的多個事件（標準事件或者自定義事件）。上方代碼綁定的是單擊事件和鼠標進入事件。

• 第二個參數：selector, 執行事件的後代元素。

• 第三個參數：data，傳遞給事件處理函數的數據，事件觸發的時候經過event.data來使用（也就是說，能夠經過event拿到data）

• 第四個參數：handler，事件處理函數。