jquery基本語法使用、總結筆記

初識jQuery

jQuery簡介

什麼是jQuery？
jQuery是一個優秀的JavaScript庫，是一個憑藉簡潔的語法和跨平臺的兼容性，極大地簡化了JavaScript開發人員遍歷HTML文檔，操作DOM，執行動畫和開發Ajax的操作。jQuery封裝了很多預定義的對象和函數。其理念：write less,do more.

常見的javascript庫?

Prototype:是最早成型的JS庫之一，對於JS的內置對象做了大量的擴展。
Do jo：提供了很多奇特JS庫沒有提供的功能。例如：離線存儲的API，生成圖標的組件等等。
YUI：是由Yahoo公司開發的一套完備的，擴展性良好的富交互網頁程序工作集。
Ext JS：原本是對YUI的一個擴展，主要用於創建前端用戶界面。
Moo Tools：是一套輕量、簡潔、模擬化和麪向對象的JS框架。
jQuery：同樣是一個輕量級的庫，擁有強大的選擇器等更多優點，吸引了更多開發者去學習使用它。

jQuery的特性

jQuery能做以下事情：

HTML元素選取
HTML元素操作
CSS操作
HTML事件函數
JavaScript特效和動畫
HTML DOM遍歷和修改
AJAX
Utilities

jQuery的使用方式
1、下載後引入

<script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>

2、編寫簡單的 HelloWorld

<html>
       <head>
       <meta charset="UTF-8">
       <title>dom操作</title>
       <script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
       <script>
          $(function(){
             alert('Hello World');
          });
       </script>
       </head>
</html>

jQuery函數
jQuery庫只提供了一個叫jQuery的函數，該函數中以及該元素的原型中定義了大量的方法。jQuery函數具有四種參數：

（1）選擇器（字符串）
	jQuery函數通過該選擇器獲取對應的DOM，然後將這些DOM封裝到一個人jQuery對象中並返回。
（2）DOM對象（即Node實例）
	jQuery函數將該DOM封裝成jQuery對象並返回。
（3）HTML文本字符串
	jQuery函數根據傳入的文本創建好HTML元素並封裝成jQuery對象並返回。
	$("<div class="one">one</div>");
（4）一個匿名函數
	$(function(){});
	當文當加載完畢之後jQuery函數調用匿名函數。

jQuery對象

jQuery對象是jQuery函數的一個實例，是一個類數組對象，數組中存放的是DOM對象，而DOM對象是Node的實例。

對jQuery對象的操作實際上是對jQuery數組中的DOM對象的批量操作。jQuery對象和DOM對象可以相互轉化。

jQuery對象的獲取通常是使用選擇器來獲取的。比如，獲取所有clss爲one元素:$(".one");

1、基本選擇器

$("#testId")     //id選擇器

$(".className")   //類選擇器

$("p")   //元素選擇器

$("*")  //全選擇器（匹配所有元素）

$("div,span,p")  //組合選擇器   多個選擇器使用都好分隔，取並集

2、層次選擇器

$("div p")  //後代選擇器
			//兩個選擇器使用空格隔開，表示可以獲取當前元素的子代以及孫子代等等後代元素。
$("div>p")  //子代選擇器
			//兩個選擇器使用>隔開，表示只能獲取當前選中元素的子代元素。
$("div + p")  //相鄰選擇器（一個）（同級）
			 //兩個選擇器使用+隔開，表示可以獲取當前元素的下一個兄弟元素，下一個兄弟元素要能符合.two。
$("div~p")   //兄弟選擇器（多個）（同級）
			//兩個選擇器使用~隔開，表示可以獲取當前元素之後的所有兄弟元素，只有所有兄弟元素要能符合.two。

jQuery過濾選擇器
jQuery的過濾器必須用在jQuery選擇器後，表示對通過前面的jQuery選擇器選擇到的內容的過濾。是建立在前面選擇器已經選擇到的元素的基礎之上。語法：selector:過濾器

$("li:first")    //第一個li

$("li:last")     //最後一個li

$("li:even")     //匹配索引值爲偶數的元素（索引值從0開始計數）

$("li:odd")      //匹配索引值爲奇數的元素（索引值從0開始計數）

$("li:eq(4)")    //匹配索引值爲4的元素（索引值從0開始計數）也就是第五個元素

$("li:gt(2)")    //匹配索引值大於 2 的li

$("li:lt(2)")    //匹配索引值小於 2 的li

$("li:not(#test)") //匹配除 id="test" 以外的所有li

$("div:animated") //匹配正在執行動畫的div元素

$("div:focus") //匹配當前獲得焦點的div元素

可見性過濾選擇器

$("li:hidden")       //匹配所有不可見元素，或type爲hidden的元素

$("li:visible")      //匹配所有可見元素

屬性過濾選擇器

$("input[name]")          //匹配所有含有name屬性的input元素

$("div[id]")              //匹配所有含有 id 屬性的 div 元素

$("div[id='123']")        // 匹配id屬性值爲123的div 元素

$("div[id!='123']")        // id屬性值不等於123的div 元素

$("div[id^='qq']")        // id屬性值以qq開頭的div 元素

$("div[id$='zz']")        // id屬性值以zz結尾的div 元素

$("div[id*='bb']")        // id屬性值包含bb的div 元素

$("input[id][name$='man']")  //選擇含有id屬性且name屬性以man結尾的input元素

表單選擇器

$(":input")      //匹配所有 input, textarea, select 和 button 元素

$(":text")   //匹配所有的單行文本框，推薦使用$("input:text")效率更高，下同

$("input:password")   //所有密碼框

$("input:radio")      //所有單選按鈕

$("input:checkbox")   //所有複選框

$("input:submit")     //所有提交按鈕

$("input:reset")      //所有重置按鈕

$(":button")     //所有button按鈕（<input type=”button”>&&<button></button>）

$("input:file")       //所有文件域

$("input:hidden")   //匹配所有type=“hidden”的元素

狀態過濾選擇器（針對表單）

$("input:enabled")    // 匹配可用的 input

$("input:disabled")   // 匹配不可用的 input

$("input:checked")    // 匹配選中的 input

$("option:selected")  // 匹配選中的 option

	:checked    選取所有被選中的元素，用於複選框、單選框、下拉框
   :selected   選取所有被選中的元素，該選擇器只適用於<option>
   :focus   選取當前獲取焦點的元素
   :text    選取所有的單行文本框(<input type="text">)
   :password  選取所有的密碼框
   :input     選取所有的<input>,<textarea>,<select>,<button>元素。
       *注意，$(":input")是選中可以讓用戶輸入的標籤元素；而$("input")是選擇名字爲input的標籤元素。*
   :enable   選取所有可用元素，該選擇器僅可用於支持disable屬性的html元素。(<button>,<input>,<optgruop>,<option>,<select>,<textarea>)
   :disable   選取所有不可用元素，該選擇器也僅可用於支持disable屬性的html元素。
   :radio      選取所有的單選框
   :checkbox   選取所有的多選框
   :submit     選取所有的提交按鈕
   :image      選取所有的input類型爲image的表單元素
   :reset   選取所有的input類型爲reset的表單元素
   :button  選取所有的input類型爲button的表單元素
   :file    選取所有的input類型爲file的表單元素