本篇文章給大家?guī)砹薺query常用功能總結(jié)，其中包括怎樣獲取、移動(dòng)、創(chuàng)造和修改元素，希望對(duì)大家有幫助。

jQuery簡介

jQuery是JS的一個(gè)類庫，對(duì)JS中的某些功能進(jìn)行封裝，讓DOM操作變得簡單，使代碼簡潔，易于使用，且支持鏈?zhǔn)綄懛?，兼容性好?/p>

jQuery的設(shè)計(jì)思想和主要用法即：選擇某個(gè)網(wǎng)頁元素，然后對(duì)其進(jìn)行一些操作。

jQuery的特別之處在于：用jQuery獲取對(duì)應(yīng)元素后，，它不返回這些對(duì)應(yīng)的元素，返回的都是jQuery對(duì)象（jQuery構(gòu)造出來的對(duì)象），而此對(duì)象可以操作這些對(duì)應(yīng)的元素。

jQuery能實(shí)現(xiàn)的功能JS一定能實(shí)現(xiàn)，反之則不一定。

令window.jQuery = window.$ ，將jQuery簡寫為$。

jQuery如何獲取元素

將一個(gè)選擇表達(dá)式放進(jìn)構(gòu)造函數(shù)$()里即可，然后得到被選中的元素。選擇表達(dá)式可以是CSS選擇器，也可以是jQuery特有的表達(dá)式。

// CSS選擇器 $(document) // 選擇整個(gè)文檔對(duì)象 $('#xxxID') // 選擇ID為xxx的元素 $('div.xxxClass') // 選擇Class為xxx的元素 $('input[name=first]') // 選擇類名屬性為first的元素

// jQuery特有表達(dá)式 $('a:first') // 選擇網(wǎng)頁中第一個(gè)a元素 $('tr:odd') // 選擇表格的奇數(shù)行 $('#myForm:input') // 選擇表單中的input元素 $('div:visible') // 選擇可見的div元素 $('div:gt(2)') // 選擇所有的div元素，除了前三個(gè) $('div:animated') // 選擇當(dāng)前處于動(dòng)畫狀態(tài)的div元素

jQuery如何創(chuàng)造元素

直接將新元素傳入jQuery構(gòu)造函數(shù)即可。

創(chuàng)建的新元素不會(huì)自動(dòng)插入到頁面中，我們還需要明確的指定其插入到頁面中的位置。

舉個(gè)例子：創(chuàng)建一對(duì)<h1></h1>標(biāo)簽

$(function(){ let $h1 = $('<h1></h1>') // 創(chuàng)建元素h1 $('body').append($h1) // 將元素h1放入到body里（用append表示成為body的最后一個(gè)子元素） }

用div舉個(gè)例子：

$('div').prepend('') // 給div添加一個(gè)大兒子（即添加到最前） $('div').append(選擇器/jQuery對(duì)象) // 給div添加一個(gè)小兒子（即添加到最后） $('<h2>xxx</h2>').appendTo(選擇器/jQuery對(duì)象) // 在選擇器選中的元素的子元素里，將“xxx”添加到最后

jQuery如何移動(dòng)元素

方法一：直接移動(dòng)該元素

$('div').insertAfter($('p')) // 將元素div移動(dòng)到元素p后面

方法二：移動(dòng)其他元素從而使目標(biāo)函數(shù)到達(dá)我們想要的位置

$('p').after($('div')) // 把元素p放到元素div前

這兩種方法的區(qū)別：返回的對(duì)象不同。方法一返回的對(duì)象是div，方法二返回的對(duì)象則是p。

元素不同的移動(dòng)方式：

.insertAfter()和.after() // 在現(xiàn)存元素的外部，從后面插入元素 .insertBefore()和.before() // 在現(xiàn)存元素的外部，從前面插入元素 .appendTo()和.append() // 在現(xiàn)存元素的內(nèi)部，從后面插入元素 .prependTo()和.prepend() // 在現(xiàn)存元素的內(nèi)部，從前面插入元素

jQuery如何修改元素屬性

使用attr()來修改元素屬性及其內(nèi)容，attr為attribute的縮寫，是JS中setAttribute&getAttribute的簡寫。attr是取值還是賦值，由函數(shù)的參數(shù)來決定。

舉個(gè)例子：

$('img').attr('width','100px') // 為屬性'width'賦值'100px'

使用方式：

$(selector).attr(attribute) // 返回被選元素的屬性值 $(selector).attr(attribute.value) // 返回被選元素的屬性&值 $(selector).attr(attribute,function(index,oldvalue)) // 用函數(shù)返回值設(shè)置被選元素的屬性&值 $(selector).attr({attribute1:value,attribute2:value...}) // 為被選一個(gè)及以上的元素設(shè)置屬性&值，可一次修改多個(gè)屬性的屬性值

補(bǔ)充：上述第三種使用方式的意思是：用函數(shù)的返回值給屬性賦屬性值，該函數(shù)可接收并使用選擇器的index值和當(dāng)前屬性值。舉個(gè)例子：

$('button').click(function(){     $('img').attr('width',function(n,v){      return v-50;  // 點(diǎn)擊按鈕圖片寬度減少50     }) })

jQuery的鏈?zhǔn)讲僮?/strong>

$('div') // 找到div元素   .find('h3') // 選擇其中的h3元素   .eq(2) // 選擇第3個(gè)h3元素   .html('Hello'); // 將它的內(nèi)容改為Hello

$('div') 　.find('h3') 　.eq(2) 　.html('Hello') 　.end() // 退回到選中所有的h3元素的那一步 　.eq(0) // 選中第一個(gè)h3元素 　.html('World') // 將它的內(nèi)容改為World