Jquery學習筆記

時間 2019-11-17

標籤 jquery 學習筆記欄目 JQuery 简体版

原文原文鏈接

Jquery 學習筆記

jquery簡介：javascript

(1)jquery是幹什麼的呢？css

l 爲了簡化 JavaScript 的開發, 一些 JavsScript 庫誕生了. JavaScript 庫封裝了不少預約義的對象和實用函數。能幫助使用者創建有高難度交互的 Web2.0 特性的富客戶端頁面, 而且兼容各大瀏覽器html

l 當前流行的 JavaScript 庫有: jQuery, MooTools, Prototype, Dojo, YUI, EXT_JS DWRjava

l jQuery由美國人John Resig建立，至今已吸引了來自世界各地的衆多 javascript高手加入其team。node

l jQuery是繼prototype以後又一個優秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,寫更少的代碼,作更多的事情。jquery

l 它是輕量級的js庫(壓縮後只有21k) ，這是其它的js庫所不及的，它兼容CSS3，還兼容各類瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。程序員

l jQuery是一個快速的，簡潔的javaScript庫，使用戶能更方便地處理HTML documents、events、實現動畫效果，而且方便地爲網站提供AJAX交互。ajax

l jQuery還有一個比較大的優點是，它的文檔說明很全，並且各類應用也說得很詳細，同時還有許多成熟的插件可供選擇。數組

jQuery可以使用戶的html頁保持代碼和html內容分離，也就是說，不用再在html裏面插入一堆js來調用命令了，只需定義id便可。瀏覽器

1.jquery對象和dom 對象的轉化

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

</head>

window.onload = function()

{

//利用dom技術獲取頁面上的某一個對象

var domObj = document.getElementById("username");

//dom對象轉化成jquery對象 jquery對象是數組對象若是沒有對應的頁面的元素，則數組的長度爲0

var jquerObj = $(domObj);

//也是jQuery對象，可是數組的長度爲0

var jQueryObject1 = $("#usernam");

alert(jQueryObject1);

//jquery對象轉化成dom對象

var jQueryObj = $("#username");

jQueryObj.get(0)//jquery對象轉化成dom對象

jQueryObj[0] ;//jQuery對象轉化成dom對象

}

</script>

<body>

</body>

</html>

兩種轉換方式將一個jQuery對象轉換成DOM對象：[index]和.get(index);

1.jQuery對象是一個數組對象，能夠經過[index]的方法，來獲得相應的DOM對象

2. jQuery自己提供，經過.get(index)方法，獲得相應的DOM對象

2.選擇器

2.1基本選擇器

基本選擇器（基本選擇器是jquery中最簡單，也是最經常使用的選擇器。它經過元素id,class和標籤名來查找DOM元素）
$(#id)	返回值：單個元素組成的集合
$(element標籤)	返回值：元素集合
$(.class)	這個標籤是直接選擇html代碼中class=」myClass」的元素或元素組(由於在同一html頁面中class是能夠存在多個一樣值的).
$(*)	匹配全部的元素
select1,select2…	用法: $(」div,span,p.myClass」) 返回值集合元素說明: 將每個選擇器匹配到的元素合併後一塊兒返回.你能夠指定任意多個選擇器, 並將匹配到的元素合併到一個結果內.

2.2層析選擇器

層次選擇器若是想經過DOM元素之間的層次關係來獲取特定元素。例如子元素、兄弟元素等。則須要經過層次選擇器。

$(「form input」)

返回值集合元素說明: 在給定的祖先元素下匹配全部後代元素.

$(「form>input」)

說明: 在給定的父元素下匹配全部子元素.注意:要區分好後代元素與子元素

$(「form+input」)

說明: 匹配全部緊接在 prev 元素後的 next 元素、

$("form ~ input")

找到全部與表單同輩的 input 元素

示例：

HTML 代碼:

<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset></form><input name="none" />

jQuery 代碼:

$("form ~ input")

結果:

[ <input name="none" /> ]

2.3過濾選擇器

過濾選擇器主要是經過特定的過濾規則來篩選出所需的 DOM 元素, 該選擇器都以「:」開頭
按照不一樣的過濾規則, 過濾選擇器能夠分爲基本過濾, 內容過濾, 可見性過濾, 屬性過濾, 子元素過濾和表單對象屬性過濾選擇器.
基本過濾選擇器
$(「tr:first」)	匹配找到的第一個元素
$(「tr:last」)	匹配找到的最後一個元素.與 :first 相對應
$(」input:not(:checked)」	去除全部與給定選擇器匹配的元素.有點相似於」非」,意思是沒有被選中的input(當input的type=」checkbox」)
$(「tr:even」)	匹配全部索引值爲偶數的元素，從 0 開始計數.js的數組都是從0開始計數的
$(「tr:odd」)	說明: 匹配全部索引值爲奇數的元素,和:even對應,從 0 開始計數.
$(」tr:eq(0)」)	匹配一個給定索引值的元素.eq(0)就是獲取第一個tr元素.括號裏面的是索引值,不是元素排列數.
$(」tr:gt(0)」)	返回值集合元素說明: 匹配全部大於給定索引值的元素.
$(」tr:lt(2)」	說明: 匹配全部小於給定索引值的元素.
$(」:header」)	說明: 匹配如 h1, h2, h3之類的標題元素.這個是專門用來獲取h1,h2這樣的標題元素
內容過濾選擇器	內容過濾選擇器的過濾規則主要體如今它所包含的子元素和文本內容上
$(」div:contains(’John’)	返回值集合元素
$(」td:empty」)	匹配全部不包含子元素或者文本的空元素
$(」div:has(p)」)	給全部包含p元素的div標籤加上class=」test」.
$(」td:parent」)	說明: 匹配含有子元素或者文本的元素
可見過濾選擇器	根據元素的可見和不可見狀態來選擇相應的元素
$(」tr:hidden」)	匹配全部的不可見元素，
$(」tr:visible」)	匹配全部的可見元素.
屬性過濾器	屬性過濾選擇器的過濾規則是經過元素的屬性來獲取相應的元素
$(」div[id]「)	匹配包含給定屬性的元素
$(「input[name=’newleter’)	匹配給定的屬性是某個特定值的元素
$(」input[name!=newleter「)	匹配全部不含有指定的屬性，或者屬性不等於特定值的元素.
$(」input[name^=‘news’]「)	匹配給定的屬性是以某些值開始的元素
$(」input[name$=‘letter’]「)	說明: 匹配給定的屬性是以某些值結尾的元素.
$(」input[name*=‘man’「)	說明: 匹配給定的屬性是以包含某些值的元素.
$(」input[id][name$=‘man’]「)	複合屬性選擇器,須要同時知足多個條件時使用.又是一個組合,這種狀況咱們實際使用的時候很經常使用.這個例子中選擇的是全部含有 id 屬性,而且它的 name 屬性是以 man 結尾的元素.幾種組合的交集。
子元素過濾選擇器	nth-child(index/even/odd/equation) 匹配其父元素下的第N個子或奇偶元素.這個選擇器和以前說的基礎過濾(Basic Filters)中的 eq() 有些相似,不一樣的地方就是前者是從0開始,後者是從1開始.
$(」ul li:first-child」)	匹配第一個子元素.’:first’ 只匹配一個元素,而此選擇符將爲每一個父元素匹配一個子元素.這裏須要特別點的記憶區別
$(」ul li:last-child」)	匹配最後一個子元素.’:last’只匹配一個元素,而此選擇符將爲每一個父元素匹配一個子元素.
$(」ul li:only-child」)	說明: 若是某個元素是父元素中惟一的子元素,那將會被匹配.若是父元素中含有其餘元素,那將不會被匹配.意思就是:只有一個子元素的纔會被匹配!
表單對象屬性過濾選擇器	此選擇器主要對所選擇的表單元素進行過濾
$(」input:enabled」)	匹配全部可用元素.意思是查找全部input中不帶有disabled=」disabled」的input.不爲disabled,固然就爲enabled啦
$(」input:disabled」)	匹配全部不可用元素.與上面的那個是相對應的.
$(」input:checked」)	匹配全部選中的被選中元素(複選框、單選框等，不包括select中的option).這話提及來有些繞口
$(」select option:selected」)	匹配全部選中的option元素.

2.4.表單選擇器

$(」:input」)	說明:匹配全部 input, textarea, select 和 button 元素
$(」:text」)	說明: 匹配全部的單行文本框
$(」:password」)	匹配全部密碼框.
$(」:radio」) ;	說明: 匹配全部單選按鈕
$(」:checkbox」)	說明: 匹配全部複選框
$(」:submit」)	說明: 匹配全部提交按鈕
$(」:image」)	說明: 匹配全部圖像域
$(」:reset」)	說明: 匹配全部重置按鈕
$(」:button」) ;	說明: 匹配全部按鈕.這個包括直接寫的元素button.
$(」input:hidden」) ;	匹配全部不可見元素，或者type爲hidden的元素.這個選擇器就不只限於表單了,除了匹配input中的hidden外,那些style爲hidden的也會被匹配.