JQuery學習筆記(1)

JQuery學習筆記(1)

認識JQuery

簡介

JQuery是一個JavaScript庫，語法簡潔，有跨平臺的兼容性，簡化了開發人員遍歷html文檔、操做dom、處理事件、執行動畫和開發Ajax的操做。理念是：寫得少，作得多。

優勢

1.輕量級。UglifyJS壓縮後大小保持在30KB 2.選擇器強大。 3.DOM操做封裝。 4.可靠地事件處理機制。 5.完善的Ajax。

庫類型

jquery.js（開發版） 約229kb,用於學習和開發。 jquery.min.js（生產版） 約31kb，用於產品和項目。

簡單使用

1.頁面引入：<scrpit src="../js/jquery.js" type="text/javascript"></script> 2.編寫簡易代碼：$爲JQuery的簡寫形式

$(document).ready(function(){
    alert("Hello World!"); 
});

3.鏈式操做：

//當點擊level下的a時，添加current class，a後的元素顯示，它父輩的同輩元素下的子元素a移除current class，其後元素隱藏
$(".level1 > a").click(function(){
    $(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();
    return false;
}

4.DOM對象和jQuery對象 DOM(Documnet Object Model 文檔對象模型)，每一份DOM能夠表示爲一棵樹。能夠經過JavaScript的getElementsByTagName或者getElementsById來獲取元素節點。 jQuery對象:經過jQuery包裝DOM對象後產生的對象。jQuery對象可使用jQuery方法可是沒法使用DOM對象的任何方法。 兩者變量聲明：

var $variable = jQuery對象;

var variable = DOM對象;

選擇器

css選擇器

css選擇器分爲標籤選擇器(td)，ID選擇器(#td)，類選擇器(.td)，羣組選擇器（td,p,div.a），後代選擇器(#links a) 通配選擇器（*）。

jQuery選擇器

1.基本選擇器

jQuery選擇器繼承了css風格。jQuery行爲規則都必須在獲取元素後才能生效。

//經過id選擇元素示例
$("#td").css("color","red");

2.層次選擇器

經過DOM元素之間的層次關係獲取特定元素

//層次選擇器示例 
//div下的全部span後代元素(後代元素能夠是多級，子元素，子子元素等)
$("div span").css("background","$bbffaa");
//div下的全部span子元素
$("div>span").css("background","$bbffaa");
//class爲one的next<div>元素
$(".one+div")  等價於$(".one").next("div");
//id爲two的的元素後的全部<div>同輩元素
$("#two~div")  等價於$("#two").nextAll("div");

3.過濾選擇器

經過特定的過濾規則來篩選出所需的DOM元素。過濾規則與CSS中的僞類選擇器語法相同。即一個選擇器能夠以冒號(:)開頭。

//取第一個
$("div:first")
//取索引值爲3
$("div:eq(3)")
//當前獲取焦點的元素 (blur爲失去焦點
$(":focus").css("background",#bbffaa);

4.內容選擇器

//含有文本'我'的<div>元素
$("div:contains('我')")
//含有class爲mini元素的<div>元素
$("div:has('.mini')")
$("div:has(p)")

5.屬性過濾選擇器

//title值等於test的<div>
$("div[title=test]")
//title以st結尾的<div>
$("div[title$=st]")

jQuery中的DOM操做

1.查找元素節點：用選擇器完成

//<ul>裏第二個<li>
var $li = $("ul li:eq(1)");	
var li_txt= $li.text();
alert(li_txt);

2.查找屬性節點：用選擇器獲取元素後，能夠用 attr() 方法 獲取和設置 它的各類屬性值。用 removeAttr() 可刪除屬性值。

用 text() 方法能夠 獲取和設置 元素的text值；用 val() 方法能夠 獲取和設置 元素的值

var $para = $("p");
var p_txt=$para.attr("title");
$para.attr("title","test");
//若是是添加設置class屬性的話須要用addClass()方法，移除同理用removeClass()方法
$para.addClass("newclass");
//設置文本能夠用text()
$("p").text("text");
//獲取
$("p").text();

3.建立元素節點：建立新元素可以使用jQuery的工廠函數 $() 來完成，用法爲 $( html代碼 )

//以添加<li>元素節點爲例
var $li_1 = $("<li title='test'>test</li>");
//用append加入到<ul>中
$("ul").append($li_1);

tips:不管 $(html)中的html代碼多複雜，均可以使用一樣的方式建立。

4.插入節點：

append() 方法外，還有prepend() ，after() ，before()等

5.刪除節點:

經過選擇器選擇元素後，能夠經過 .remove() 方法，將節點刪除。

detach()方法，它刪除後從新追加元素會保留綁定的事件。

empty()方法，清空節點中的全部後代節點。

6.切換樣式：

toggle() 方法，可讓元素在兩個樣式間切換

$("p").togglelClass("another");

點擊<p>後，若是another已經在<p>的class裏了，就刪除它；不然就添加它。