首頁 >web前端 >js教程 >JQuery元素操作詳解

JQuery元素操作詳解

php中世界最好的语言原創: 2018-04-27 13:47:571518瀏覽

這次帶給大家JQuery元素操作詳解，JQuery元素操作的注意事項有哪些，下面就是實戰案例，一起來看一下。

第一步：sizzle選擇器

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

第二步：查詢祖先

parent()

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

parents()

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

parentsUntil()

傳回介於兩個給定元素之間的所有祖先元素，以下是範例：

$(document).ready(function(){
  //会返回span开始到p为止的祖先元素
  $("span").parentsUntil("p");
});

第三個步驟：查詢子孫

children()

可以使用可選參數來過濾子元素的搜尋

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

find()

可以使用可選參數來過濾對元素的搜尋

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

第四步：查詢同胞

siblings()

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

next()

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

nextAll()

傳回被選元素的之後的全部同胞元素

nextUntil()

傳回介於兩個給定參數之間的所有跟隨的同胞元素

$(document).ready(function(){
  //返回介于 <h2>与<h6>元素之间的所有同胞元素
  $("h2").nextUntil("h6");
});

prev()、prevAll() 和prevUntil()

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

第五步：查詢時新增篩選

first()

傳回選取的元素中的首個元素

last()

傳回選取的元素中的最後一個元素

eq()

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

filter()

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

not()

返回所有不符合標準的元素

$(document).ready(function(){
  //返回不带有类名"target"的所有p元素
  $("p").not(".target");
});

元素找到以後，接著我們需要根據需求來對查找到的結點進行運算。

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

text()、html()、val()以及attr ()，擁有回呼函數。回調函數有兩個參數：被選元素清單中目前元素的下標，以及原始（舊的）值。然後以函數新值傳回您希望使用的字串

1.text() - 設定或傳回所選元素的文字內容

2.html() - 設定或傳回所選元素的內容（包括HTML 標記）

3.val() - 設定或傳回表單欄位的值

4.attr() - 設定或傳回屬性值

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

第七步：新增元素

append() - 在被選元素的內部結尾插入內容

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

after() - 在被選元素之後插入內容

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

第八步：刪除元素

remove()可接受一个参数，允许你对被删元素进行过滤，empty()不可以

remove() - 删除被选元素（及其子元素）

empty() - 从被选元素中删除子元素

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

第九步：替换元素

replaceAll()和replaceWith()功能类似，但是目标和源相反

replaceWith() - 用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合

replaceAll() - 用集合的匹配元素替换每个目标元素

第十步：class操作

addClass() - 向被选元素添加一个或多个类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换操作

hasClass() - 判断一个元素是否存在该class

第十一步：css()方法

设置或返回被选元素的一个或多个样式属性

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

css("propertyname","value"); - 设置propertyname属性的值

css({"propertyname":"value","propertyname":"value",...}); - 设置多个值

第十二步：元素尺寸

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）

innerWidth() 方法返回元素的宽度（包括内边距）

innerHeight() 方法返回元素的高度（包括内边距）

outerWidth() 方法返回元素的宽度（包括内边距和边框）

outerHeight() 方法返回元素的高度（包括内边距和边框）

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

JQuery元素操作詳解

相關文章