jQuery入門

摘要： 前言： 上次說到了JavaScript，對其有一定了解，本文就來說說jQuery。jQuery就是一個由JavaScript編寫的輕量庫，簡單的說就是封裝了一些JavaScript的操作，所以使用jQuery比使用原生的JavaScript可以達到用更少的程式碼做更多的事的效果。 一、...

前言：

上次說到了JavaScript，對其有一定了解，本文就來說說jQuery。jQuery就是一個由JavaScript編寫的輕量庫，簡單的說就是封裝了一些JavaScript的操作，所以使用jQuery比使用原生的JavaScript可以達到用更少的程式碼做更多的事的效果。

一、初識jQuery：

1、使用方法：

去官網 ofollow,noindex">http://jquery.com/download/ 下載jQuery的包，然後放到專案中存放js程式碼的目錄下，最後在需要用jQuery的HTML中用 <script type="text/javascript" src="js目錄/jquery.js"/> 引入即可。

2、jQuery物件與DOM物件：

jQuery物件與DOM物件是不一樣的，看下面例子：

需求：我們要獲取頁面上這個id為test的p元素，然後給這個文字節點增加一段文字：“hello world”，並且讓文字顏色變成紅色。

<p id="test"></p>
<!-- 用原生JavaScript的做法-->
var p = document.getElementById('test');
p.innerHTML = 'hello world';
p.style.color = 'red';
<!-- 通過jQuery操作-->
var $p = $('#test');
$p.html('hello world').css('color','red');

用JavaScript操作是過取到DOM物件，再進行操作，而jQuery獲取到的$p是jQuery物件。

jQuery物件與DOM物件的轉換：

<div>元素一</div>
<div>元素二</div>
<div>元素三</div>
var $div = $('div') //jQuery物件
var div = $div[0] //轉化成DOM物件
var div = $div.get(0) //通過get方法，轉化成DOM物件
var div = document.getElementsByTagName('div'); //dom物件
var $div = $(div); //jQuery物件
var $first = $div.first(); //找到第一個div元素

二、jQuery選擇器：

1、id選擇器 $( "#id" )：

所謂id選擇器，就是相當於JavaScript的getElementById()方法。語法： $( "#id" ) ，也就是說#號後面跟上要操作的標籤的id的值即可。

2、類選擇器 $( ".class" )：

就是通過標籤的class屬性來選擇標籤的選擇器。語法： $( ".class" ) ,也就是 . 後面跟上標籤的class的值即可。

3、元素選擇器 $( "element" )：

也就是直接通過標籤名選擇標籤，比如 $("p").css("border", "3px solid blue"); 就是通過jQuery的元素選擇器選擇到所有的p標籤，然後改變其樣式。

4、全選擇器 $( "*" )：

顧名思義，全選擇器就是選擇所有的標籤。

5、層級選擇器：

一個頁面就是由各種標籤構成的，各個標籤之間存在著不同的關係，父子關係、兄弟關係等，層級選擇器就可以處理這種關係。用法如下表：

選擇器	描述
$("parent > child")	子選擇器，選擇所有指定“parent” 元素中指定的“child”直接子元素
$("ancestor descendant")	後代選擇器，選擇給定的祖先元素“ancestor” 的所有descendant後代，包括兒子、孫子、曾孫等
$("prev + next")	相鄰兄弟選擇器，選擇緊 接在“prev”元素後的“next”元素
$("prev ~ siblings")	一般兄弟選擇器，與相鄰兄弟選擇器的區別是 ，相鄰的指揮選擇相鄰的，而這個是選所有。

6、基本篩選選擇器：

篩選選擇器的用法與CSS中的偽元素相似，選擇器用冒號“：”開頭，通過一個列表，看看基本篩選器的描述：

7、內容篩選選擇器：

基本篩選選擇器針對的都是元素DOM節點，如果我們要通過內容來過濾，jQuery也提供了一組內容篩選選擇器。其描述如下：

8、可見性篩選選擇器：

元素有顯示狀態與隱藏狀態，jQuery根據元素的狀態擴充套件了可見性篩選選擇器:visible與:hidden

選擇器	描述
$(":visible")	選擇所有顯示的元素
$(":hidden")	選擇所有隱藏元素

9、屬性篩選選擇器：

屬性選擇器讓你可以基於屬性來定位一個元素。可以只指定該元素的某個屬性，這樣所有使用該屬性而不管它的值，這個元素都將被定位，也可以更加明確並定位在這些屬性上使用特定值的元素，這就是屬性選擇器展示它們的威力的地方。

10、子元素篩選選擇器：

這個不是很常用，用法如下：

11、表單元素選擇器：

顧名思義，表單元素選擇器就是方便操作表單的選擇器。

12、表單物件屬性篩選選擇器：

除了表單元素選擇器外，表單物件屬性篩選選擇器也是專門針對表單元素的選擇器，可以附加在其他選擇器的後面，主要功能是對所選擇的表單元素進行篩選。

13、特殊選擇器this:

this，表示當前的上下文物件是一個html物件，可以呼叫html物件所擁有的屬性和方法。

$(this),代表的上下文物件是一個jquery的上下文物件，可以呼叫jQuery的方法和屬性值。直接看案例程式碼：

$('p').click(function(){
//把p元素轉化成jQuery的物件
var $this= $(this) 
$this.css('color','red')
})

三、jQuery的屬性與樣式：

1、.attr()與.removeAttr()：

操作特性的DOM方法主要有3個，getAttribute方法、setAttribute方法和removeAttribute方法，就算如此在實際操作中還是會存在很多問題，這裡先不說。而在jQuery中用一個attr()與removeAttr()就可以全部搞定了，包括相容問題。直接看案例來體會其用法：

<form>
<input type="text" value="設定value" />
<input type="text" value="獲取value"/>
<input type="text" value="回撥拼接value" />
<input type="text" value="刪除value" />
</form>
<script type="text/javascript">
$("input:first").attr('value','測試')// 把“設定value”改成“測試”
$("input:eq(1)").attr('value')// 獲取第二個input的value屬性的值
//把新的值與現有的值聯絡在一起：
$("input:eq(2)").attr('value',function(i, val){// 拼接第三個input的value屬性的值
return '通過function設定' + val
})
$("input:eq(3)").removeAttr('value')// 刪除第四個input的value屬性的值
</script>

執行結果如下圖：

2、.html()、.text()和.val()：

讀取、修改元素的html結構或者元素的文字內容又或者操作表單欄位value值是常見的DOM操作，jQuery針對這樣的處理提供了3個便捷的方法.html()、.text()和.val()。

<div class="demo">
<p> <a href="#">baidu</a></p>
</div>
<script type="text/javascript">
//第一種用法(如果有多個p標籤，那麼只能獲取第一個p標籤的內容)
alert($(".demo p").html());//會彈出 “ <a href="#">baidu</a> ”

//第二種用法(如果有多個p標籤，那麼每一個p標籤都會加上 .html方法裡面的內容)
($(".demo p").html('<a href="#">taobao</a>'));
// 結果會把html方法裡面的a標籤新增到p標籤裡面，p標籤裡面就有兩個a標籤了

//第三種用法
$(".demo p").html(function(index,oldHtml){
return "我是第" + (index+1) + "個p標籤：" + oldHtml;
})
//結果就是(假設已經執行了第二種用法中的演示程式碼)：
/*
<p>我是第1個p標籤<a href="#">baidu</a></p>
<p>我是第2個p標籤<a href="#">taobao</a></p>
*/
</script>

<div class="demo">
<p> <a href="#">baidu</a></p>
</div>
<script type="text/javascript">
//第一種用法(如果有多個p標籤，那麼其他p標籤裡的文字內容也能獲取到)
alert($(".demo p").text());//會彈出 “baidu ”，所以該方法只能獲取純文字內容

//第二種用法(如果有多個p標籤，那麼每一個p標籤都會被替換成純文字內容)
($(".demo p").text('<a href="#">taobao</a>'));
// 結果會把class為demo的div下面的所有p標籤替換成text方法裡面的純文字內容

//第三種用法
$(".demo p").text(function(index,oldText){
return "我是第" + (index+1) + "個p標籤裡面的文字：" + oldText;
})
//結果就是：
/*
我是第1個p標籤裡面的文字：baidu
*/
</script>

<div id="test">
<input type="radio" name="color" id ="rd1" value="red" />紅色
<input type="radio" name="color" id ="rd2" value="blue" />藍色
</div>
<script type="text/javascript">
// 第一種用法(只會獲取到第一個input的值，跟有沒有選中沒關係)
alert($("#test input:radio").val());// 彈出“紅色”
//第二種用法(獲取使用者選中的值，而不是返回第一個)
alert($("input:radio[name=color]:checked").val());// 彈出使用者選中的顏色
// 第三種用法
$("input").val("blank");// 會把所有input的value值替換成blank
//第四種用法(會依次獲取input的value值)
$("input:radio[name=color]").val(function(index,oldVal){
return "color-"+(index+1)+":"+oldVal;
})
</script>

3、.addClass():

過動態改變類名（class），可以讓其修改元素呈現出不同的效果。直接看案例：

<style>
.firstClass{
background: #bbffaa;
}
.secondClass{
background: red;
}
</style>
<div class="left">
<div class="aaron">
<p>測試1</p>
</div>
<div class="aaron">
<p>測試2</p>
</div>
</div>
<script type="text/javascript">
$('.left div').addClass('firstClass')
</script>

本來“測試1”和“測試2”都是沒有顏色的，下面的js程式碼執行後，就會給這兩個div新增“firstClass”，所以“測試1”和“測試2”背景就會變成紅色。還有刪除class的 removeClass() 方法和切換class的 toggleClass() 方法，用法類似。

4、.css()：

在jQuery中我們要動態的修改style屬性我們只要使用css()方法就可以實現了。看案例：

<div class="first">獲取顏色</div>
<p></p>
<script type="text/javascript">
$('p:eq(0)').text( $('.first').css("background-color","red") )
</script>

本來“獲取顏色”這四個字是沒有顏色的，運行了js程式碼後，就會有紅色的背景顏色。新增樣式還有 .addClass() 方法，它的優先順序低於 .css() 方法。

5、元素的資料儲存：

jQuery提供的儲存介面:

jQuery.data( element, key, value )//靜態介面,存資料
jQuery.data( element, key )//靜態介面,取資料
.data( key, value ) //例項介面,存資料
.data( key ) //例項介面,存資料

看到這些語法也是摸不著頭腦，直接看案例體會其用法：

<h2>jQuery.data()靜態方法</h2>
<div class="left">
<div class="aaron">
<p>點選看結果</p>
<p>jQuery.data</p>
</div>
<div><span></span></div>
</div>
<h2>.data()例項方法</h2>
<div class="right">
<div class="aaron">
<p>點選看結果</p>
<p>.data</p>
</div>
<div><span></span></div>
</div>
<script type="text/javascript">
$('.left').click(function() {
var ele = $(this);
//通過$.data方式設定資料
$.data(ele, "a", "data test")
$.data(ele, "b", {
name : "簡書"
})
//通過$.data方式取出資料
var reset = $.data(ele, "a") + "</br>" + $.data(ele, "b").name
ele.find('span').append(reset)
})
</script>
<script type="text/javascript">
$('.right').click(function() {
var ele = $(this);
//通過.data方式設定資料
ele.data("a", "data test")
ele.data("b", {
name: "簡書"
})
//通過.data方式取出資料
var reset = ele.data("a") + "</br>" + ele.data("b").name
ele.find('span').append(reset)
})
</script>

沒點選“點選看結果”的時候是這樣的：

點選了“點選看結果”後是這樣的：

也就是說，data可以用來暫時儲存資料，然後還可以取出來。

四、DOM操作：

1、jQuery建立節點：

var div = $("<div>我是文字節點</div>")
$body.append(div)

這段程式碼就會在html的body中新增一個div節點，並且內容是“我是文字節點”。

2、內部插入的append()和appendTo：

這兩個方法都是向頁面追加內容，不同的是append()前面是被插入的物件，後面是要在物件內插入的元素內容，而appendTo()前面是要插入的元素內容，而後面是被插入的物件。具體用法如下：

<div class="content"></div>
<script type="text/javascript">
//.append(), 內容在方法的後面，
//引數是將要插入的內容。
$(".content").append('<div class="append">通過append方法新增的元素</div>')
//.appendTo()剛好相反，內容在方法前面，
//無論是一個選擇器表示式 或建立作為標記上的標記
//它都將被插入到目標容器的末尾。
$('<div class="appendTo">通過appendTo方法新增的元素</div>').appendTo($(".content"))
</script>

3、外部插入的after()和before()：

上面的append和appendTo是插入到匹配元素的內部，而這兩個是插入到匹配元素的外部。看下面程式碼：

<div class="aaron">
<p class="test1">測試before</p>
</div>
<div class="aaron">
<p class="test2">測試after</p>
</div>
<script type="text/javascript">
//在匹配test1元素集合中的每個元素前面插入p元素
$(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', 
'<p style="color:red">多引數</p>')
//在匹配test1元素集合中的每個元素後面插入p元素
$(".test2").after('<p style="color:blue">after,在匹配元素之後增加</p>',
'<p style="color:blue">多引數</p>')
</script>

看執行結果：

通過上面的程式碼和執行結果就很容易理解什麼是外部插入了。類似的還有prepend()、prependTo()、insertBefore()、insertAfter()方法。

4、empty()和remove()：

通過下面的程式碼理解empty()用法：

<div class="hello">
<p>百度</p>
</div>
//通過empty處理
$('.hello').empty()
//結果：<p>百度</p>被移除
<div class="hello"></div>

可以發現empty會清空選中的元素的內部結構。

通過下面的程式碼理解remove()用法：

<div class="hello">
<p>百度</p>
</div>
//通過remove處理
$('.hello').remove()

結果是整個div都被移除了，且如果這個div繫結有事件，使用remove方法會自動銷燬這個事件。remove還可以根據條件移除，如下：

div class="test2">
<p>p元素3</p>
<p>p元素4</p>
</div>
//找到所有p元素中，包含了3的元素
$("p").remove(":contains('3')")

這樣就只會移除“p元素3”，“p元素4”不會被移除。detach()也是移除元素，但是這個刪除只是頁面中不可見，這個節點還是儲存在記憶體中。

5、克隆節點clone()：

克隆可以理解為複製，用法如下：

//clone處理一
$("div").clone()//只克隆了div結構，事件丟失
//clone處理二
$("div").clone(true) //div結構、div繫結的事件與資料都克隆

6、替換節點之replaceWith()和replaceAll():

這兩個方法作用類似，主要是語法不一樣。看下面的例子：

<div>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
</div>
<script>
//replaceWith操作：
$("p:eq(1)").replaceWith('<a style="color:red">替換第二段的內容</a>')
//replaceAll操作：
$('<a style="color:red">替換第二段的內容</a>').replaceAll('p:eq(1)')
</script>

結果就是“第二段”被替換成了“替換第二段的內容”，並且文字為紅色。

7、wrap()、unwrap()、wrapAll()和wrapInner()方法：

如果要將元素用其他元素包裹起來，也就是給它增加一個父元素，針對這樣的處理，JQuery提供了一個wrap方法。看案例：

<p>哈哈</p>
<script>
// 給p增加一個div
$('p').wrap('<div></div>')
//或者這樣寫
$('p').wrap(function() {
return '<div></div>';//與第一種類似，只是寫法不一樣
})
</script>

結果就是給p增加了一個div包裹，如下：

<div>
<p>哈哈</p>
</div>

unwrap()方法就是刪除一個元素的父元素，作用與wrap()剛好相反。wrap()方法只能包裹一個元素，比如說如果有多個p元素，需要用div來包裹，那麼就得用wrapAll()方法。看下面程式碼：

<p>哈哈</p>
<p>嘻嘻</p>
<script>
//給所有p元素增加一個div包裹
//方式一
$('p').wrapAll('<div></div>')
//方式二
$('p').wrapAll(function() {
return '<div><div/>'; 
})
</script>

不過這兩種方式處理的結果有差別，結果如下：

<!-- 方式一處理結果-->
<div>
<p>哈哈</p>
<p>嘻嘻</p>
</div>
<!-- 方式二處理結果-->
<div>
<p>哈哈</p>
</div>
<div>
<p>嘻嘻</p>
</div>

wrapInner()方法的作用說起來就感覺很繞，直接看程式碼感受一下：

<div>哈哈</div>
<div>嘻嘻</div>
<script>
//給所有元素增加一個p包裹
//方式一：
$('div').wrapInner('<p></p>')
//方式二：
$('div').wrapInner(function() {
return '<p></p>'; 
})
</script>

兩種方法處理結果相同，結果就是：

<div>
<p>哈哈</p>
</div>
<div>
<p>嘻嘻</p>
</div>

五、jQuery的遍歷：

jQuery的遍歷有很多種方式，下面來看一下都如何使用。

1、children()和find()方法：

快速查詢合集裡面的第一級子元素，此時可以用children()方法。比如：

<div class="div">
<ul class="son">
<li class="grandson">1</li>
</ul>
</div>
<script>
//找到所有class=div的元素
//找到其對應的子元素ul，然後篩選出最後一個，給邊寬加上顏色
$('.div').children(':last').css('border', '3px solid blue')
</script>

注意， $('.div').children()只能找到ul，因為div與ul是父子關係，li與div是祖輩關係，因此無法找到。如果想連li也找到，那就得用find()方法:

$("div").find("li")

2、parent()和parents()方法：

parent方法，和children方法相反，就是查詢上一級元素，這裡就不再舉例說明。parents方法和parent方法的不同之處在於parent只查詢父級一級的元素，而parents則會一直往上查詢。

3、closest()方法：

以選定的元素為中心，往內查詢可以通過find、children方法。如果往上查詢，也就是查詢當前元素的父輩祖輩元素，jQuery提供了closest()方法，這個方法類似parents但是又有一些細微的區別，屬於使用頻率很高的方法。區別有以下3點：

• 起始位置不同：.closest開始於當前元素 .parents開始於父元素
• 遍歷的目標不同：.closest要找到指定的目標，.parents遍歷到文件根元素，closest向上查詢，直到找到一個匹配的就停止查詢，parents一直查詢到根元素，並將匹配的元素加入集合
• 結果不同：.closest返回的是包含零個或一個元素的jquery物件，parents返回的是包含零個或一個或多個元素的jquery物件

4、next()、prev()和siblings()方法：

用於快速查詢指定元素集合中每一個元素緊鄰的後面同輩元素的元素集合。

<div class="div">
<ul class="level-1">
<li class="item-1">哈哈</li>
<li class="item-2">嘿嘿</li>
<li class="item-3">嘻嘻</li>
</ul>
</div>
<div class="div">
<ul class="level-1">
<li class="item-1">哈哈</li>
<li class="item-2">嘿嘿</li>
<li class="item-3">嘻嘻</li>
</ul>
</div>
<script>
$('.item-1').next().css('border', '1px solid red');
</script>

執行js後，那麼這兩個class="item-2"的元素就會被選中，然後這兩個“嘿嘿”都會添上紅色邊框。prev方法和next()相反，next是找下一個，prev是找前一個。 $('.item-1').next() 是item-2， $('.item-2').prev() 就是item-1。siblings方法就不管前後，反正就是找同輩的元素， $('.item-2').siblings() 就是item-2的同輩元素，那麼item-1和item-3都會被選到。

5、add()方法：

<ul>
<li>list item 1</li>
<li>list item 3</li>
</ul>
<p>新的p元素</p>
<script>
$('li').add('p');
</script>

p元素和ul元素本來是同一級別的，如果 $('li').add('p') 執行後，那麼就會把p與li歸結到一組。這就是add的作用。還有一種方式，就是動態建立P標籤加入到合集，然後插入到指定的位置，但是這樣就改變元素的本身的排列了，語法如下：

$('li').add('<p>新的p元素</p>').appendTo(目標位置)

6、each()方法：

each是一個for迴圈的包裝迭代器，each通過回撥的方式處理，並且會有2個固定的實參，索引與元素each回撥方法中的this指向當前迭代的dom元素。看案例：

<ul>
<li>哈哈</li>
<li>嘻嘻</li>
</ul>
<script>
$("li").each(function(index, element) {
//index 索引 0,1
//element是對應的li節點 li,li
//this 指向的是li
$(this).css('color','red');
})
</script>

這樣就會把“哈哈”和“嘻嘻”的顏色設定為紅色。

總結：

以上便是《jQuery入門》的全部內容，包含了jQuery選擇器、屬性與樣式和對DOM的操作等相關內容。接下來在《jQuery進階》中講學習jQuery事件和Ajax，敬請關注！