摘要:作者心葉時間以下是快速使用的查閱手冊,沒有個人理解的地方還請原諒,畢竟初衷只是方便開發時忘了可以快速查閱。第六步以及以及,擁有回調函數。回調函數有兩個參數被選元素列表中當前元素的下標,以及原始舊的值。
作者:心葉
時間: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").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();
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/94495.html
摘要:只要符合,不管是兒子輩,孫子輩都可以與其他的樹遍歷方法不同,選擇器表達式對于是必需的參數。方法以選定的元素為中心,往內查找可以通過方法。要一個一個給合集中每一個設置顏色,這里方法就是方法就是一個循環的迭代器,它會迭代對象合集中的每一個元素。 children()方法 jQuery是一個合集對象,如果想快速查找合集里面的第一級子元素,此時可以用children()方法。這里需要注意:.c...
摘要:將匹配元素集合的父級元素刪除,保留自身和兄弟元素,如果存在在原來的位置。方法查找指定元素集合中每一個元素的同輩元素。每次回調函數執行時,會傳遞當前循環次數作為參數從開始計數。 DOM節點的創建 先介紹下需要用到的瀏覽器提供的一些原生的方法(這里不處理低版本的IE兼容問題)創建流程比較簡單,大體如下: 創建節點(常見的:元素、屬性和文本) 添加節點的一些屬性 加入到文檔中流程中涉及的一...
摘要:鏈式操作使用鏈式操作代替變量緩存和多次操作每當鏈長超過個鏈接或得到,因為活動任務的復雜,使用適當的換行和縮進使代碼的可讀性。對于較長的鏈式操作可以把對象緩存到一個變量里。 原文地址:http://lab.abhinayrathore.com/jquery-standards/ 第一次翻譯,有不對不妥的地方請拍磚。showImg(http://segmentfault.com/img/b...
摘要:目前插件已超過幾千種,由來自世界各地的開發者共同編寫驗證和完善。而對于開發者而言,直接使用這些插件將快速穩定架構系統,節約項目成本。也就是說,插件也是代碼,通過文件引入的方式植入即可。現在我們就完成了一個下拉菜單的插件。 插件(Plugin)也成為 jQuery 擴展(Extension),是一種遵循一定規范的應用程序接口編寫出來的程序。目前 jQuery 插件已超過幾千種,由來自世界...
摘要:專題系列共計篇,主要研究日常開發中一些功能點的實現,比如防抖節流去重類型判斷拷貝最值扁平柯里遞歸亂序排序等,特點是研究專題之函數組合專題系列第十六篇,講解函數組合,并且使用柯里化和函數組合實現模式需求我們需要寫一個函數,輸入,返回。 JavaScript 專題之從零實現 jQuery 的 extend JavaScritp 專題系列第七篇,講解如何從零實現一個 jQuery 的 ext...
閱讀 2631·2021-11-19 09:56
閱讀 879·2021-09-24 10:25
閱讀 1643·2021-09-09 09:34
閱讀 2203·2021-09-09 09:33
閱讀 1057·2019-08-30 15:54
閱讀 548·2019-08-29 18:33
閱讀 1272·2019-08-29 17:19
閱讀 511·2019-08-29 14:19