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();
    原文作者:心恭弘=叶 恭弘
    原文地址: https://segmentfault.com/a/1190000014522257
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞