簡介

jQuery是的一個類庫，對JS中的某些功能進行封裝，讓DOM操作變得簡單，使程式碼簡潔，易於使用，且支援鏈式寫法，相容性好。

jQuery的設計思想和主要用法即：選擇某個元素，然後對其進行一些操作。

jQuery的特別之處在於：用jQuery獲取對應元素後，，它不返回這些對應的元素，返回的都是jQuery物件（jQuery構造出來的物件），而此物件可以操作這些對應的元素。

jQuery能實現的功能JS一定能實現，反之則不一定。

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

jQuery如何獲取元素

將一個選擇表示式放進建構函式$()裡即可，然後得到被選中的元素。選擇表示式可以是選擇器，也可以是jQuery特有的表示式。

// CSS選擇器
$(document) // 選擇整個文件物件
$('#xxxIGYcHMD') // 選擇ID為xxx的元素
$('div.xxxClass') // 選擇Class為xxx的元素
$('input[name=first]') // 選擇類名屬性為first的元素

// jQuery特有表示式
$('a:first') // 選擇網頁中http://www.cppcns.com第一個a元素
$('tr:odd') // 選擇表格的奇數行
$('#myForm:input') // 選擇表單中的input元素
$('div:visible') // 選擇可見的div元素
$('div:gt(2)') // 選擇所有的div元素，除了前三個
$('div:animated') // 選擇當前處於動畫狀態的div元素

jQuery如何創造元素

直接將新元素傳入jQuery建構函式即可。

建立的新元素不會自動插入到頁面中，我們還需要明確的指定其插入到頁面中的位置。

舉個例子：建立一對

標籤

$(function(){
let $h1 = $('
') // 建立元素h1
$('body').append($h1) // 將元素h1放入到body裡（用append表示成為body的最後一個子元素）
}

用div舉個例子：

$('div').prepend('') // 給div新增一個大兒子（即新增到最前）
$('div').append(選擇器/jQuery物件) // 給div新增一個小兒子（即新增到最後）
$('
xxx
').appendTo(選擇器/jQuery物件) // 在選擇器選中的元素的子元素裡，將“xxx”新增到最後

jQuery如何移動元素

方法一：直接移動該元素

$('div').insertAfter($('p')) // 將元素div移動到元素p後面

方法二：移動其他元素從而使目標函式到達我們想要的位置

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

這兩種方法的區別：返回的物件不同。方法一返回的物件是div，方法二返回的物件則是p。

元素不同的移動方式：

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

jQuery如何修改元素屬性

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

舉個例子：

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

使用方式：

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

補充：上述第三種使用方式的意思是：用函式的返回值給屬性賦屬性值，該函式可接收並使用選擇器的index值和當前屬性值。舉個例子：

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

jQuery的鏈式操作

在選擇網頁元素後，對其進行一系列操作，並且所有操作都可以連在一起並以鏈條的形式寫出來，這就是jQuery的鏈式操作。

舉個例子：$('div').find('h3').eq(2).html('Hello');此行程式碼可以拆分如下

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

jQuery還提供了後退操作.end()，使得操作結果可以後退一步。

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

到此這篇關於jquery對元素的基本操作例項分析的文章就介紹到這了,更多相關jquery對元素的基本操作內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！