JQuery元素快速查找與操作

首先，我們來看看jquery中如何查找到想要的結(jié)點。

十余年的湖南網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。網(wǎng)絡(luò)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整湖南建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。成都創(chuàng)新互聯(lián)公司從事“湖南網(wǎng)站設(shè)計”,“湖南網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。

第一步：sizzle選擇器

基于元素的id、類、類型、屬性、屬性值等"查找"（或選擇）HTML元素，簡單的說是基于css選擇器，除此之外還有一些特定的選擇器。

第二步：查詢祖先

parent()

返回被選元素的直接父元素，該方法只會向上一級對 DOM 樹進行遍歷

parents()

可以使用可選參數(shù)來過濾對父元素的搜索
返回被選元素的所有祖先元素，它一路向上直到文檔的根元素

parentsUntil()

返回介于兩個給定元素之間的所有祖先元素，下面是例子：

$(document).ready(function(){

  //會返回span開始到div為止的祖先元素
  
  $("span").parentsUntil("div");
  
});

第三步：查詢子孫

children()

可以使用可選參數(shù)來過濾對子元素的搜索

返回被選元素的所有直接子元素，該方法只會向下一級對 DOM 樹進行遍歷

find()

可以使用可選參數(shù)來過濾對元素的搜索

返回被選元素的后代元素，一路向下直到最后一個后代

第四步：查詢同胞

siblings()

返回被選元素的所有同胞元素

next()

返回被選元素的下一個同胞元素

nextAll()

返回被選元素的之后的全部同胞元素

nextUntil()

返回介于兩個給定參數(shù)之間的所有跟隨的同胞元素

$(document).ready(function(){

  //返回介于 <h3>與<h7>元素之間的所有同胞元素
  
  $("h3").nextUntil("h7");
  
});

prev()、prevAll() 和 prevUntil()

prev()、prevAll()以及prevUntil()方法的工作方式與上面的方法類似，只不過方向相反而已：它們返回的是前面的同胞元素（在 DOM 樹中沿著同胞之前元素遍歷，而不是之后元素遍歷）。

第五步：查詢時添加過濾

first()

返回選擇的元素中的首個元素

last()

返回選擇的元素中的最后一個元素

eq()

返回被選元素中帶有指定索引號的元素，這個很容易理解，舉例就是：$(element[flag])和element.eq(flag)結(jié)果一樣

filter()

對查詢結(jié)果進行過濾，和下面not()類似，作用相反

not()

返回不匹配標準的所有元素

$(document).ready(function(){

  //返回不帶有類名"target"的所有p元素
  
  $("p").not(".target");
  
});

元素找到以后，接著我們需要根據(jù)需求來對查找到的結(jié)點進行操作。

第六步：text()、html()、val()以及attr()

text()、html()、val()以及attr()，擁有回調(diào)函數(shù)?；卣{(diào)函數(shù)有兩個參數(shù)：被選元素列表中當前元素的下標，以及原始（舊的）值。然后以函數(shù)新值返回您希望使用的字符串

1.text() - 設(shè)置或返回所選元素的文本內(nèi)容

2.html() - 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標記）

3.val() - 設(shè)置或返回表單字段的值

4.attr() - 設(shè)置或返回屬性值

$("#btn1").click(function(){

  $("#test1").text(function(i,origText){
  
    return "舊文本: " + origText + " 新文本: index: " + i;
    
  });
  
});

第七步：添加元素

append() - 在被選元素的內(nèi)部結(jié)尾插入內(nèi)容

prepend() - 在被選元素的內(nèi)部開頭插入內(nèi)容

after() - 在被選元素之后插入內(nèi)容

before() - 在被選元素之前插入內(nèi)容

第八步：刪除元素

remove()可接受一個參數(shù)，允許你對被刪元素進行過濾，empty()不可以

remove() - 刪除被選元素（及其子元素）

empty() - 從被選元素中刪除子元素

//等同于$("p.target").remove();
$("p").remove(".target");

第九步：替換元素

replaceAll()和replaceWith()功能類似，但是目標和源相反

replaceWith() - 用提供的內(nèi)容替換集合中所有匹配的元素并且返回被刪除元素的集合

replaceAll() - 用集合的匹配元素替換每個目標元素

第十步：class操作

addClass() - 向被選元素添加一個或多個類

removeClass() - 從被選元素刪除一個或多個類

toggleClass() - 對被選元素進行添加/刪除類的切換操作

hasClass() - 判斷一個元素是否存在該class

第十一步：css()方法

設(shè)置或返回被選元素的一個或多個樣式屬性

css("propertyname"); - 返回propertyname屬性的值

css("propertyname","value"); - 設(shè)置propertyname屬性的值

css({"propertyname":"value","propertyname":"value",...}); - 設(shè)置多個值

第十二步：元素尺寸

width() 方法設(shè)置或返回元素的寬度（不包括內(nèi)邊距、邊框或外邊距）

height() 方法設(shè)置或返回元素的高度（不包括內(nèi)邊距、邊框或外邊距）

innerWidth() 方法返回元素的寬度（包括內(nèi)邊距）

innerHeight() 方法返回元素的高度（包括內(nèi)邊距）

outerWidth() 方法返回元素的寬度（包括內(nèi)邊距和邊框）

outerHeight() 方法返回元素的高度（包括內(nèi)邊距和邊框）

新聞名稱：JQuery元素快速查找與操作
網(wǎng)站地址：http://muchs.cn/article16/pdjggg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、外貿(mào)建站、云服務(wù)器、App設(shè)計、定制開發(fā)、企業(yè)網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容