第三天，jquery學習總結
jQuery的特點："選擇某個網頁元素，然後對其進行某種操作"。Jquery的使用方法：將一個選擇表達式放到構造函數jQuery()（簡寫爲$）中，然後獲得該元素的對象。
![]()
|
Jquery常用選擇表達式
|
|
CSS選擇器
|
jQuery元素表達式
|
|
$(document)//選擇整個文檔對象
$('#myId')//選擇ID爲myId的網頁元素
$('div.myClass')//選擇class爲myClass的div元素
$('input[name=first]')//選擇name屬性等於first的input元素
|
$('a:first')//選擇網頁中第一個a元素
$('tr:odd')//選擇表格的奇數行
$('#myForm :input')//選擇表單中的input元素
$('div:visible') //選擇可見的div元素
$('div:gt(2)')//選擇所有的div元素，除了前三個
$('div:animated')//選擇當前處於動畫狀態的div元素
|
|
Jquery遍歷，過濾器
|
|
Jquery過濾元素
|
Jquery遍歷（Jquery在DOM樹上的移動）
|
|
$('div').has('p'); //選擇包含p元素的div元素
$('div').not('.myClass'); //選擇class不等於myClass的div元素
$('div').filter('.myClass'); //選擇class等於myClass的div元素
$('div').first(); //選擇第1個div元素
$('div').eq(5); //選擇第6個div元素
|
$('div').next('p'); //選擇div元素後面的第一個p元素
$('div').parent(); //選擇div元素的父元素
$('div').closest('form'); //選擇離div最近的那個form父元素
$('div').children(); //選擇div的所有子元素
$('div').siblings(); //選擇div的同級元素
|
|
Jquery的鏈式操作
|
|
jQuery允許將所有操作連接在一起，以鏈條的形式寫出來，比如： $('div').find('h3').eq(2).html('Hello');
1. $('div') //找到div元素
2. .find('h3') //選擇其中的h3元素
3. .eq(2) //選擇第3個h3元素
4. .html('Hello'); //將它的內容改爲Hello
|
|
|
|
Jquery對元素進行：取值和賦值
需要特別注意的是，如果結果集包含多個元素，那麼賦值的時候，將對其中所有的元素賦值；取值的時候，則是隻取出第一個元素的值（.text()例外，它取出所有元素的text內容）。
|
|
$('h1').html(); //html()沒有參數，表示取出h1的值
$('h1').html('Hello'); //html()有參數Hello，表示對h1進行賦值
常見的取值和賦值函數如下：
1. .html() 返回或設置被選元素的內容 (inner HTML)
2. .text() 取出或設置text內容
3. .attr() 取出或設置某個屬性的值
4. .width() 取出或設置某個元素的寬度
5. .height() 取出或設置某個元素的高度
6. .val() 取出或設置html內容 取出某個表單元素的值
|
|
Jquery元素插入，移動操作
|
|
.insertAfter()，把div元素移動p元素後面：
$('div').insertAfter('p');
.after()，把p元素加到div元素前面：
$('p').after('div');
使用這種模式的操作方法，一共有四對
.insertAfter()和.after()：在現存元素的外部，從後面插入元素
2. .insertBefore()和.before()：在現存元素的外部，從前面插入元素
3. .appendTo()和.append()：在現存元素的內部，從後面插入元素
4. .prependTo()和.prepend() ：在現存元素的內部，從前面插入元素
|
|
Jquery對元素進行複製、刪除和創建
|
|
複製元素使用.clone()
刪除元素使用.remove()和.detach()。兩者的區別在於，前者不保留被刪除元素的事件，後者保留，有利於重新插入文檔時使用。
清空元素內容（但是不刪除該元素）使用.empty()。
創建新元素的方法非常簡單，只要把新元素直接傳入jQuery的構造函數就行了：
* $('<p>Hello</p>');
* $('<li class="new">new list item</li>');
* $('ul').append('<li>list item</li>');
|
|
Jquery其他的常用工具方法
|
|
$.trim() 去除字符串兩端的空格。
$.each() 遍歷一個數組或對象。
$.inArray() 返回一個值在數組中的索引位置。如果該值不在數組中，則返回-1。
$.grep() 返回數組中符合某種標準的元素。
$.extend() 將多個對象，合併到第一個對象。
$.makeArray() 將對象轉化爲數組。
$.type() 判斷對象的類別（函數對象、日期對象、數組對象、正則對象等等）。
$.isArray() 判斷某個參數是否爲數組。
$.isEmptyObject() 判斷某個對象是否爲空（不含有任何屬性）。
$.isFunction() 判斷某個參數是否爲函數。
$.isPlainObject() 判斷某個參數是否爲用"{}"或"new Object"建立的對象。
$.support() 判斷瀏覽器是否支持某個特性。
|
|
Jquery主要的事件操作
jQuery可以對網頁元素綁定事件。根據不同的事件，運行相應的函數。
$('p').click(function(){
alert('Hello');
});
|
|
.blur() 表單元素失去焦點。
.change() 表單元素的值發生變化
.click() 鼠標單擊
.dblclick() 鼠標雙擊
.focus() 表單元素獲得焦點
.focusin() 子元素獲得焦點
.focusout() 子元素失去焦點
.hover() 同時爲mouseenter和mouseleave事件指定處理函數
.keydown() 按下鍵盤（長時間按鍵，只返回一個事件）
.keypress() 按下鍵盤（長時間按鍵，將返回多個事件）
.keyup() 鬆開鍵盤
.load() 元素加載完畢
.mousedown() 按下鼠標
.mouseenter() 鼠標進入（進入子元素不觸發）
.mouseleave() 鼠標離開（離開子元素不觸發）
.mousemove() 鼠標在元素內部移動
.mouseout() 鼠標離開（離開子元素也觸發）
.mouseover() 鼠標進入（進入子元素也觸發）
.mouseup() 鬆開鼠標
.ready() DOM加載完成
.resize() 瀏覽器窗口的大小發生改變
.scroll() 滾動條的位置發生變化
.select() 用戶選中文本框中的內容
.submit() 用戶遞交表單
.toggle() 根據鼠標點擊的次數，依次運行多個函數
.unload()
|
