【jQuery】jQuery小結
前言
jQuery是個什麼啊？是個框架。利用css選擇器查詢DOM物件,對其操作，操作樣式或者增刪方法等等。擁有強大的外掛機制，可以使我們write less, do more。
細數家珍
（一）框架認識
示例：
//找到button按鈕，註冊事件
$("#verifyButton").click(function(){
//1.獲取文字框的內容
var userName = $("#userName").val();
//2.將這個內容傳送給伺服器端
if(userName == ""){
alert("使用者名稱不能為空");
}else 1.$(.class).click(function(){})
給節點註冊事件，選擇節點用的是css選擇器。
2.$(“.class”).val()
獲取節點的屬性。
3.$get(url,data,callback)
前臺和伺服器互動，前臺把要調的後臺地址和引數傳過去，callback返回結果，返回結果是一個動作，要用function。$在這用做方法上。
4.$(.class).html(response)
給節點返回值的時候用html。
（二）表格
1.表格的html語法
<html>
<table>
<thead>
<tr>
<th>標題</th>
</tr>
</thead>
<tbody 2.表格的css語法
css
table td{
border:1px solid black;
//修正單元格之間的邊框不能合併
border-collapse:collapse;
}3.頁面載入的時候表格奇數行的背景色變化，往當前選中的單元格中新增文字框
//$(function(){})相當於 $(document).ready(function(){});
$(function(){
//奇數行顏色變化
$("tbody tr:even").css("background-color","#ECE9D8");
//找到所有學號的單元格
var numTd = $("tbody td:even");
//給這些單元格註冊滑鼠點選事件
numTd.click(function(){
//建立一個文字框
var inputObj = $("<input type = 'text'>");
//去掉文字框的邊框
inputObj.css("border-width","0");
//找到當前滑鼠點選的td，this對應的就是響應了click的那個td
var tdObj = $(this);
//講文字框插入到td中
inputObj.appendTo(tdObj);
//文字框插入之後就被選中
inputObj.trigger("focus").trigger("select");
})
})appendTo方法是把一個節點新增到另一個節點的子節點的最後。
trigger方法出發JavaScript的某個事件發生。
4.阻止事件傳遞
numId.click(function(){
//找到當前滑鼠單擊的td,this 對應的就是響應了click的那個ID
var tdobj = $(this);
if (tdobj.children("input").length > 0){
//當前td中有input，不執行click處理
return false;
}
}); 如果td中有文字框就不響應td的click事件。
5.$的作用
（1）$(function(){}) document裝載完成之後觸發。裡面直接放方法。
（2）裡面放css選擇器，找到css節點，包裝成jQuery物件。
（3）裡面放dom物件直接轉換成jQuery物件。
（4）裡面直接放html文字，會建立dom節點，幷包裝成jQuery物件。
（三）選單
1.選單語法
<ul>
<li class = "main">
<a>選單項1</a>
<ul>
<li>選單項11</li>
<li>選單項12</li>
</ul>
</li>
</ul>2.屬性
css
.main{
//取消下劃線
text-decoration:none;
//背景圖片
background-image:url(../images/title.gif);
background-repeat:repeat-x;
background-position:3px center;
//清除預設的小圓點
list-style:none;
} 3. .main a 和 .main > a 的區別
前者選擇了.main這個class元素下的所有a節點；後者只選擇了.main的子節點中的a節點。
4.toggle 讓顯示的不顯示，不顯示的顯示
//節點顯示或隱藏可以設定速度
ulNode.show("slow");//fast normal
ulNode.hide();
//ulNode.slideToggle();toggle的方法很強大，可以省去我們判斷元素是顯示還是隱藏狀態，直接讓顯示的元素隱藏起來，隱藏的元素顯示出來。使得實現動畫效果更加方便快捷，也是do more, write less的體現。
小結
對jQuery的感覺就是html是難看的而且還是死的，jQuery使它變美了，並且動起來了。主要是對錶格，選單，標籤頁，下拉框還有彈出框等樣式，彈出或消失的動畫的設計。是一個很棒的框架，省了很多事，它封裝了好多方法。