jQuery入門專題

本人博客特點：最高重要等級為*****（五紅星），依次減少代表重要性相對較低！

一、jQuery簡介

jQuery 是一個 JavaScript的一個庫，也就是說jQuery是基于JavaScript框架開發出來的。其目的是為了最大化的簡化了JavaScript書寫方式。

jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種更為簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。 jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能接口；具有高效靈活的css選擇器，并且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。———本段來自網絡

?

二、jQuery內容

1.??查找標簽（選擇器）

2.??篩選器

3.??操作標簽

　　3.1.??樣式操作

　　3.2.??位置操作

　　3.3.? 文本操作

　　3.4.??屬性操作

　　3.5.??文檔操作

4.? 事件

5.? 動畫

6.? 插件

三、jQuery對象

　　?jQuery對象是通過jQuery包裝DOM對象后產生的對象。按平時的使用來說，只能是jQuery對象，才能使用jQuery里面的方法【因為，平時在寫一個js腳本的時候，里面可能有js原生的東西，也可能會有jQuery的一些語法一起使用（這里涉及的到JavaScript和jQuery之間的相互轉換，下面內容會提到）?】。jQuery的方法是用例子如：$( "#nav" ).html()。

　　“ $( "#nav" ).html() ; ”這一句的代碼分析：在這里的 $( "#nav" )就是jQuery對象（也就是點的左邊），而點的右邊html()就是jQuery對象的方法。這句話的意思是：獲取id值為nav的標簽（元素）的html代碼。

　　注意：如果html里面有內容，例如: $( "#nav" ).html("<p>555</p>")的意思就不是獲取nav標簽的html代碼了，而是變成了，將nav標簽里面的所有html全部被替換成<p>555</p>，這個是涉及到操作方法，下面會有細講，這里只是做個對比，抱磚引玉而且。

　　與原生JavaScript對比：?“$( "#nav" ).html() ;? ? 相當于原生js的? ? ?document.getElementById("nav").innerHTML;

　　雖然jQuery對象是通過包裝DOM對象后生成的，但是jQuery對象的是無法直接使用DOM對象的任何方法，同樣DOM對象也無法直接使用jQuery對象的任何方法。（這里也涉及的到JavaScript和jQuery之間的相互轉換，下面內容會提到）?

　　大家的約定：當我們要聲明一個jQuery對象的變量的時候要在變量的前面加入$符號：例如

　　　　var? $run = jQuery對象? ? ??

　　　　var run = DOM對象

　　JavaScript和jQuery之間的相互轉換：

　　　　拿上面的例子來說：

　　　　　　jQuery對象：$( "#nav" )

　　　　　　DOM對象：document.getElementById("nav")

　　　　　　1.? jQuery對象轉換成DOM對象：$( "#nav" )[0] ***********************************************************在jQuery對象添加一個索引，即可變成了DOM對象（因為jQuery對象獲取到的標簽是一個數組）

　　　　　　2.? DOM對象轉換成jQuery對象：$(document.getElementById("nav"))或者 $($( "#nav" )[0]??)? ******在DOM對象的外面添加? ?$()?就可以jQuery對象

四、jQuery基礎語法

?jQuery語法是通過選取（查找）HTML元素，并隨之對已選取到的元素執行某些操作。

基礎語法：$(selector).action()

?

• selector：選擇符。”查詢“和”查找”HTML文檔里面的元素。

?

• action：Query對元素的操作。

實例：

• $("p.test").hide() - 隱藏所有 class="test" 的 <p> 元素

• $("#test").hide() - 隱藏所有 id="test" 的元素

五、jQuery查找標簽（選擇器）

5.1? 基本選擇器?

5.1.1? id選擇器：

$("#main_id")

5.1.2? 標簽選擇器：

$("div")$("p")$("img")

5.1.3? class（樣式類）選擇器：

$(".main_class")

5.1.4? 配合使用：

$("div.main_class")
或者 $("div#main_class")

?

5.1.5? 通用選擇器：

$("*")

?

5.1.6? 組合選擇器：

$("#main_id,.nav_class,div.main_class")

?

5.2? 層級選擇器

x, y可以為任意選擇器，x，可以調換。

$("x y") //x的所有后代y $("x>y") //x的所有兒子y $("x+y") //所有緊挨在x后臺的y $("x~y") //x的所有兄弟y

?

5.3? 基本篩選器

5.3.1? 常用的篩選器：

//div表示選擇器，這里可以是任意選擇器。例如;div、#main ul li、x~y等等
$("div:first") //第一個
$("div:last")　　//最后一個
$("div:eq(index)") //索引等于index的那個元素
$("div:even")　　　　　　　//比配所有索引值為偶數的元素，從0開始計數
$("div:odd")　　　　　　　　//比配所有索引值為奇數的元素，從0開始計數
$("div:gt(index)") 　　　　//比配所有大于給定索引值的元素
$("div:lt(index)")　　　　　　//比配所有小于給定索引值的元素
$("div:not(元素選擇器)") 　　//移除所有滿足not條件的標簽
$("div:has(元素選擇器)")　　　　//選取所有包含一個或多個標簽在其內的標簽(指的是從后代元素找)

?

例子：

$("div:has(h1)")// 找到所有后代中有h1標簽的div標簽 $("div:has(.c1)")// 找到所有后代中有c1樣式類的div標簽 $("li:not(.c1)")// 找到所有不包含c1樣式類的li標簽 $("li:not(:has(a))")// 找到所有后代中不含a標簽的li標簽

練習：

未更新

??

5.4? 屬性選擇器

attribute：”屬性“的意思。
[attribute] [attribute=value]// 屬性等于 [attribute!=value]// 屬性不等于

例子：

<input type="text">; <input type="password">; <input type="button">; //應用 $("input[type='text']");$("input[type='password']"); // 取到password類型的input標簽 $("input[type!='button']");// 取到類型不是button的input標簽

?

?

5.5? 表單選擇器

?分為兩組來記，第一組（五個），第二組（三個，都是按鈕）

:text //例子：$(":text ") 找到表單中的所有text :password //例子：$(":password") 找到表單中的所有password :checkbox //例子：$(":checkbox") 找到表單中的所有checkbox :radio //例子：$(":radio") :file //例子：$(":file") :submit //例子：$(":submit") :reset //例子：$(":reset") :button // 例子：$(":button ")?

?

通過屬性找到對應的標簽(4個)：

:enabled //標簽可用屬性 :disabled　　　　//標簽可用屬性
:checked
:selected

例子：

1.找到可用的input標簽

<form><input name="username" disabled="disabled"><input name="id" /> </form> $("input:enabled") // 找到可用的input標簽

2.找到被選中的option：

<select id="s1"><option value="beijing">北京市</option><option value="shanghai">上海市</option><option selected value="guangzhou">廣州市</option><option value="shenzhen">深圳市</option> </select> $(":selected") // 找到所有被選中的option

六? jQuery篩選器

6.1? 找下一個元素：

$("#nav").next(); $("#nav").nextAll(); $("#nav").nextUntil("#id");

6.2??找上一個元素：

$ ("#nav").prev();
$("#nav").prevAll(); $("#nav").prevUntil("#id");

?

6.3??找父親元素：

$("#nav").parent(); $("#nav").parents(); //查找當前元素的所有父輩 $("#nav").parentsUntil("#id"); //查找當前標簽的所有父輩，直到找到ID值為id的父輩元素

?

6.4??找兒子和兄弟元素：

$("#nav").children(); //查找當前元素下面的所有兒子們 $("#nav").siblings(); //查找與當前元素是兄弟（同級）們

?

6.5??查找方法（? ?.find()? ?）：

搜索當前元素的指定后代元素的方法。這個方法是找出正在處理的元素的后代的好方法。

$("div").find("p"); //這句話等價于 $("div p");

?

6.6??篩選方法（? ?.filter()? ）：

篩選出與filter方法括號內表達式匹配的元素集合。這個方法可以很好的縮小匹配范圍，filter方法括號內的選擇器表達式可以是多個，逗號分隔即可。跟組合選擇器一樣。

$("div").filter(".c1") // 從div結果集中過濾出有c1樣式類 這句話等價于 $("div.c1")

?

6.7??幾個篩選器和篩選方法的對比：

.first() // 獲取匹配的第一個元素 　　　　　　 篩選器:　　:first .last() // 獲取匹配的最后一個元素　　　　　　　　　　　　　　　　　　　　篩選器:　　:last .not() // 從匹配元素的集合中刪除與指定表達式匹配的元素　　　　　　　　　 篩選器:　　:not(元素選擇器) .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。　　 　　篩選器:　　:has(元素選擇器) .eq() // 索引值等于指定值的元素　　　　　　　　　　　　　　　　　　　　　篩選器:　　 :eq(index)

　　兩個不同點：

　　　　1.篩選方法前面是點“.“，篩選器是冒號”:”

　　　　2.篩選方法后面有小括號，篩選器則是沒有

?

例子：

待更新………………

七、jQuery操作標簽

7.1? 樣式類名操作

addClass(“類名”); // 添加括號里指定的類名 removeClass(“類名”); //移除括號里的css類名 hasClass("類名")； //判斷樣式是否存在 toggleClass("類名"); //切換css類名，如果有類名就移除，反子就添加

示例：

正則更新中………………

?

7.2??位置操作

offset() //獲取匹配元素在當前窗口(window)的相對位置或設置元素的位置 position() //獲取匹配元素相對父元素的偏移 scrollTop() //獲取匹配元素相對滾動條頂部的偏移 scrollLeft() //獲取匹配元素相對滾動條左側的偏移

.offset()方法允許我們檢索一個元素相對于文檔（document）的當前位置。

和?.position()的差別在于：?.position()是相對于相對于父級元素的位移。

?

示例：

正則更新中………………

?

7.3??文本操作

7.3.1? HTML代碼：

html() 　　　　 //取得第一個元素的html內容 html(val)　　　　設置所有匹配的惠特米勒內容

7.3.2??文本代碼：

text()　　　　　　// 設置所有匹配元素的內容 text(val)　　　　　　// 設置所有匹配元素的內容

?

7.3.3??設置值：

$("[name = ''hobby]").val(['basketable','foontball'])$("#s1").val (["1", "2"])

例子：

獲取被選中的checkbox或者radio。

<label for="c1">女</label> <input name="gender" id="c1" type="radio" value="0"> <label for="c2">男</label> <input name="gender" id="c2" type="radio" value="1">

使用示例：

$("input[name='gender']:checked").val()

?

7.3.4??值：

val()// 取得第一個匹配元素的當前值 val(val)// 設置所有匹配元素的值 val([val1, val2])// 設置多選的checkbox、多選select的值

?

示例：

正則更新中………………

7.3.5??屬性操作

用ID等標簽，自定義屬性：

attr(attrName) 　　　　　　//返回第一個匹配元素的屬性 attr(attrName,attrValue) 　　//為所有匹配元素設置一個屬性值 attr({k1:v1, k2:v2}) 　　// 為所有匹配元素設置多個屬性值 removeAttr() // 從每一個匹配的元素中刪除一個屬性

?

用于checkbox和radio

prop() // 獲取屬性 removeProp() // 移除屬性

?

值得注意：

在1.X和2.X版本的jQuery中使用attr對checkbox進行賦值操作的時候會有bug出現，但是在3.X版本的jQuery中則沒有這個問題。為了解決這個問題，我們在除了checkbox和radio的時候最好使用prop()，不要使用attr("checked","checked").

<input type="checkbox" value="checkbox"> <input type="radio" value="radio"> <script> $(":checkbox").prop("checked",true); $(":radio").prop("checked",true); </script>

prop()和attr()的區別：

attr的全稱為attribute：屬性。

prop的全稱為property：也是屬性。

雖然都是屬性，但他們所指的屬性并不相同，attr所指的屬性是HTML標簽屬性，而prop所指的是DOM對象屬性，可以認為attr是顯式的，而prop是隱式的。

舉個例子：

<input type="checkbox" id="i1" value="1">

針對上面的代碼，

$("#i1").attr("checked") // undefined $("#i1").prop("checked") // false

可以看到attr獲取一個標簽內沒有的東西會得到undefined，而prop獲取的是這個DOM對象的屬性，因此checked為false。

如果換成下面的代碼：

<input type="checkbox" checked id="i1" value="1">

再執行：

$("#i1").attr("checked") // checked $("#i1").prop("checked") // true

這已經可以證明attr的局限性，它的作用范圍只限于HTML標簽內的屬性，而prop獲取的是這個DOM對象的屬性，選中返回true，沒選中返回false。

接下來再看一下針對自定義屬性，attr和prop又有什么區別：

<input type="checkbox" checked id="i1" value="1" me="自定義屬性">

執行以下代碼：

$("#i1").attr("me") // "自定義屬性" $("#i1").prop("me") // undefined

可以看到prop不支持獲取標簽的自定義屬性。

總結一下：

對于標簽上有的能看到的屬性和自定義屬性都用attr

對于返回布爾值的比如checkbox、radio和option的是否被選中都用prop。

?

7.3.6??文檔處理

添加到指定元素內部的后面

$(A).append(B)// 把B追加到A $(A).appendTo(B)// 把A追加到B

添加到指定元素內部的前面

$(A).prepend(B)// 把B前置到A $(A).prependTo(B)// 把A前置到B

添加到指定元素外部的后面

$(A).after(B)// 把B放到A的后面 $(A).insertAfter(B)// 把A放到B的后面

添加到指定元素外部的前面

$(A).before(B)// 把B放到A的前面 $(A).insertBefore(B)// 把A放到B的前面

移除和清空元素

$(A).remove()// 從DOM中刪除所有匹配的元素。 empty()// 刪除匹配的元素集合中所有的子節點。

?

替換

replaceWith() replaceAll()

克隆

clone()// 參數

示例正在更新^………………

?

7.3.7??尺寸

height() width() innerHeight() innerWidth() outerHeight() outerWidth()

?

?

八、jQuery事件

?常用事件

?

click(function(){………………}) //點擊事情 hover(function(){………………})　　　　// focus(function(){…………………})　　　　//獲得光標事件，當點擊搜索框時，改變搜索框背景色 blur(function(){………………})　　　　　　//失去光標事件，在輸入域外面點擊，使其失去焦點 change(function(){………………}) 　　　　　　//在某個標簽或者控件被使用或改變時，可以改變屬性
keyup(function(){…………………})　　　　　　//當按下按鍵時，改變文本域的顏色：

?

?

?

?

?

九、jQuery動畫

?

十、jQuery插件

?

轉載于:https://www.cnblogs.com/mashangsir/p/11277547.html

總結

以上是生活随笔為你收集整理的jQuery快速入门专题的全部內容，希望文章能夠幫你解決所遇到的問題。

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