十分鐘搞懂jquery對元素的基本操作

本篇文章為大家帶來了jquery常用功能總結，其中包括怎樣取得、移動、創造和修改元素，希望對大家有幫助。

jQuery簡介

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

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

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

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

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

jQuery如何取得元素

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

// CSS选择器
$(document) // 选择整个文档对象
$('#xxxID') // 选择ID为xxx的元素
$('div.xxxClass') // 选择Class为xxx的元素
$('input[name=first]') // 选择类名属性为first的元素

// jQuery特有表达式
$('a:first') // 选择网页中第一个a元素
$('tr:odd') // 选择表格的奇数行
$('#myForm:input') // 选择表单中的input元素
$('div:visible') // 选择可见的div元素
$('div:gt(2)') // 选择所有的div元素，除了前三个
$('div:animated') // 选择当前处于动画状态的div元素

jQuery如何創造元素

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

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

舉個例子：建立一對

標籤

$(function(){
let $h1 = $(&#39;<h1></h1>&#39;) // 创建元素h1
$(&#39;body&#39;).append($h1) // 将元素h1放入到body里（用append表示成为body的最后一个子元素）
}

用div舉個例子：

$('div').prepend('') // 给div添加一个大儿子（即添加到最前）
$('div').append(选择器/jQuery对象) // 给div添加一个小儿子（即添加到最后）
$(&#39;<h2>xxx</h2>&#39;).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');此行程式碼可以拆分如下

$('div') // 找到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對元素的基本操作的詳細內容。更多資訊請關注PHP中文網其他相關文章！