jquery的學習

jQuery 元素選擇器和屬性選擇器容許您經過標籤名、屬性名對 HTML 元素進行選擇。

選擇器容許你對 HTML 元素或單個元素進行操做：

<button class="test">點擊</button>

$(".test").click(function(){        //選取class屬性爲test的標籤
    alert(111);
});

$()                                 //這就是jQuery選擇器

點擊按鈕以後會跳出一個彈窗，輸出111。

 

css();    訪問匹配元素的樣式屬性。

//取得p標籤的color樣式屬性的值
$("p").css("color");


//將全部段落的字體顏色設爲紅色而且背景爲藍色
$("p").css({ "color": "#ff0011", "background": "blue" });

html();   取得第一個匹配元素的html內容。

//返回p元素的內容
$("p").html();

//設置全部p元素的內容
$("p").html("Hello <b>world</b>!");

find();   搜索全部與指定表達式匹配的元素。

<p><span>Hello</span>,how are you</p>
<p>Me? I'm<span>good</span>.</p>

//搜索全部段落中的後代 span 元素，並將其顏色設置爲紅色：
$("p").find("span").css('color', 'red');

//輸出結果是Hello和good的字體顏色是紅色

eq(x);   選取索引爲x的元素，x從0開始。

<p>This is just a test.</p>
<p>So is this</p>

//將HTML代碼中全部p標籤中索引爲1的代碼中的字體設置爲紅色
$("p").eq(1).css("color", "red");

hide();   隱藏顯示的元素。

<p> This is just a test.</p>
	<p> So is this</p>

//將全部p標籤都隱藏掉
$("p").hide();

頁面上不顯示p標籤中的內容

show();   將display屬性爲none的標籤顯示在頁面上。

<p style="display:none;"> This is just a test.</p>
<p> So is this</p>

$("p").show();

//未執行本段代碼以前不顯示第一段p標籤中的內容，執行本段代碼以後，第一段p標籤中的內容顯示在頁面上

$.ajax();   經過 HTTP 請求加載遠程數據。

var url = "xxx";                           //url地址
var data = {};                             //建立一個空數組
data.xx = XX;                              //須要傳遞的內容
$.ajax({
   type: "POST",                           //傳值方式，有POST和GET
   url: url,                               //一個用來包含發送請求的URL字符串，接收到請求的地址
   data: data,                             //須要傳遞的值
   dataType: "xxxx",                       //返回內容的格式，最經常使用的有json,xml...
   success: function(msg){                 //回調函數
     alert( "Data Saved: " + msg );        //在傳值成功後執行的代碼
   }
});

$.get();   經過遠程HTTP GET請求載入信息。

$.get(url,data,func,type);
//url:待載入頁面的url地址
//data:待發送的key/value參數
//func:載入成功後執行的回調函數
//type:返回內容的格式，最經常使用的有json，xml...

$.post();   經過遠程 HTTP POST 請求載入信息。

$.post(url,data,func,type);
//url:發送請求的地址
//data:待發送的key/value參數
//func:發送成功後執行的回調函數
//type:返回內容的格式，最經常使用的有json,xml...

jquery節點和javascript節點的差異以及如何互相轉換：

1）建立：

//jQuery方式
var $h1 = $("<h1>title='建立節點' class='head'>jQuery與JavaScript建立節點比較</h1>");
$("div").apend($h1);

//向div標籤中添加h1標籤，以及h1標籤內的內容

var div = document.getElementById("div1");
var h1 = document.createElement("h1");
h1.setAttribute("title","建立節點");
h1.setAttribute("class","head");
var txt = document.createTextNode("jQuery與JavaScript建立節點比較");
h1.appendChild(txt);
div.appendChild(h1);

上面兩種代碼都是建立一個h1標籤，而後把它當作div標籤的子節點添加到DOM節點樹中。

差異：jQuery建立節點比較簡潔，JavaScript原生代碼建立節點比較繁瑣，須要寫的代碼比較多；可是JavaScript執行的速度比jQuery要快上很多

jquery節點和javascript節點如何互相轉換:

//在jQuery對象與JavaScript對象相互轉換以前，須要先肯定好定義變量的風格。
//若是獲取的是jQuery對象。則要在變量前加上$符號：
var $i = jQuery對象;

//若是獲取的是DOM對象，則不須要：
var u = DOM對象

jQuery對象轉換成DOM對象：

//jQuery代碼
var $cr = $("#cr");               //獲取到jQuery對象
var cr = $cr[0];                  //轉換到DOM對象
alert(cr.checked);                //檢測這個checked是否被選中

DOM對象轉換成jQuery對象：

var cr = doxument.getElementById("cr");            //獲取到DOM對象
var $cr = $(cr);                                   //轉換爲jQuery對象

使用上面兩種方法，能夠隨意的轉換jQuery對象和DOM對象