JQuery快速使用之元素查找與操做

做者：心葉
時間：2018-04-22 00:41

如下是Jquery快速使用的查閱手冊，沒有我的理解的地方還請原諒，畢竟初衷只是方便開發時忘了能夠快速查閱。

第一步：sizzle選擇器

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

第二步：查詢祖先

parent()

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

parents()

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

parentsUntil()

返回介於兩個給定元素之間的全部祖先元素，下面是例子：

$(document).ready(function(){

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

第三步：查詢子孫

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() 方法返回元素的高度（包括內邊距和邊框）

第十三步：元素位置

1.獲取相對(父元素)位置

var X = $('選擇器').position().top;

var Y = $('選擇器').position().left;

2.滾動條滾動距離

var left=$('選擇器').scrollLeft();

var top=$('選擇器').scrollTop();