1.jQuery簡介

①.jQuery是一個兼容多瀏覽器的、輕量級的JavaScript庫
②.jQuery是繼prototype之后又一個優秀的JavaScript庫，如今，jQuery已經成為最流行的JavaScript庫

③.jQuery，顧名思義，也就是JavaScript和查詢（Query），其宗旨是
???? ——WRITE LESS,DO MORE（少寫，多做）

2.jQuery的使用

①.jQuery庫實際上就是一個js文件，只需要在網頁中直接引入這個文件就可以了。

②.將jQuery的庫文件加入

?在開發測試時, 用的是未壓縮的版本:

???? jquery-1.7.2.js

?在上線項目中, 會使用壓縮后的版本:

???? jquery-1.7.2.min.js

?

3.jQuery核心函數

> $是jQuery中的核心函數
> 核心函數是jQuery中非常重要的內容，jQuery的大部分功能都需要使用核心函數實現。
> 核心函數根據實參的不同，有四種不同的用法。
?? ? ①傳一個函數作為參數
?? ??? ??? 例如:$(function(){})
?? ??? ???? 作用：和window.onload = function(){}類似，它會在文檔加載完成之后運行。
?? ? ②傳一個選擇器的字符串
?? ??? ???? 例如：$("#id") $(".class")
?? ??? ???? 作用：可以從頁面中獲取指定元素的對象
?? ?? ③傳一段HTML代碼
?? ??? ???? 例如: $("<li>廣州</li>")
?? ??? ??? ? 作用：它可以根據html代碼創建對象
?? ?? ④傳一個DOM對象
?? ??? ??? ? 例如: $(dom對象)
?? ??? ??? ? 作用：可以將DOM對象轉換為一個jQuery對象

4.jQuery對象

①DOM對象
??? > 通過原生JS獲取的對象是DOM對象???
②jQuery對象
?? ? > 通過jQuery包裝DOM對象后產生的對象，叫做jQuery對象

???? >jQuery對象命名時習慣加上$作為前綴
③比較
??? > 兩種對象之間不能互相調用對方的方法
??? > 命名上的區別：
?? ? jQuery對象命名時習慣加上$,加以區分。
④jQuery對象與DOM對象之間的轉換

>DOM對象轉jQuery對象

　　使用jQuery核心函數包裝DOM對象

　　例如：var $btnEle = $(btnEle)

　　聲明一個變量指向jQuery對象，那么這個變量習慣上要以$開頭

>jQuery對象轉DOM對象 jQuery對象[索引]

?? 　使用數組下標：$btnEle[0]

? 　使用get(index)方法：$btnEle.get(0)
?? 　jQuery對象的本質就是DOM對象的數組，所以可以通過給對象加下標的形式獲取數組中的DOM對象

5.jQuery的選擇器

> jQuery的最厲害的地方就是它擁有眾多的選擇器。

> jQuery的選擇器主要是集合CSS和xPath部分語法。
> 選擇器可以很方便的獲取到頁面中元素。???
? ①基本選擇器
?? ???? $("#id") id選擇器:? 根據id獲取指定元素
?? ???? $(".class") 類選擇器:? 根據類名獲取指定元素
?? ???? $("tagName") 元素選擇器:? 根據標簽名獲取指定元素
?? ???? $("*") 選擇所有元素
?? ???? 選擇器分組 $("選擇器1 , 選擇器2 , 選擇器N")

?

<div>div</div>

<p class="myClass">p class="myClass"</p>

<span>span</span>

<p class="notMyClass">p class="notMyClass"</p>

jQuery 代碼:

$("div,span,p.myClass")

結果:

[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]
②層級選擇器

• ancestor descendant： ?? 在給定的祖先元素下匹配所有的后代元素，中間用空格隔開
• parent > child：在給定的父元素下匹配所有的子元素
• prev + next：匹配所有緊接在 prev 元素后的 next 元素
• prev ~ siblings：匹配 prev 元素之后的所有 siblings 元素（siblings元素與prev元素同輩）

pre~siblings實例如下：

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" /> ]
③可見性選擇器

• :hidden：匹配所有不可見元素，或者type為hidden的元素
• :visible：匹配所有的可見元素

代碼實例：

網頁顯示：

當點擊“顯示不可見文本框時”：

隱藏的文本框顯示出來。

jQuery :hidden 選擇器：
顯示隱藏的元素：
$(":hidden").show();
定義和用法：
:hidden 選擇器選取隱藏的元素。

以下幾種情況的元素是隱藏元素：
?? ① 設置為 display:none
?? ②帶有 type="hidden" 的表單元素
?? ③width 和 height 設置為 0
?? ④隱藏的父元素（這也會隱藏子元素）
注意：show()選擇器對 visibility:hidden 和 opacity: 0 的元素不起作用。
?

?

轉載于:https://www.cnblogs.com/double-s/p/7820368.html

總結

以上是生活随笔為你收集整理的jQuery知识简介的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。