jquery知識點總結

時間：2022-10-05 18:24:27 學習方法

jquery知識點總結

　　jquery應該怎么系統的學習?下面是小編整理總結的一些jquery知識點，希望對你有幫助。

jquery知識點總結

　　$(this) 當前 HTML 元素

　　$("p") 所有

　　元素

　　$("p.intro") 所有 class="intro" 的

　　元素

　　$(".intro") 所有 class="intro" 的元素

　　$("#intro") id="intro" 的元素

　　$("ul li:first") 每個

　　的第一個

　　元素

　　$("[href$='.jpg']") 所有帶有以 ".jpg" 結尾的屬性值的 href 屬性

　　$("div#intro .head") id="intro" 的

　　元素中的所有 class="head" 的元素

　　$(document).ready(function) 將函數綁定到文檔的就緒事件(當文檔完成加載時)

　　$(selector).click(function) 觸發或將函數綁定到被選元素的點擊事件

　　$(selector).dblclick(function) 觸發或將函數綁定到被選元素的雙擊事件

　　$(selector).focus(function) 觸發或將函數綁定到被選元素的獲得焦點事件

　　$(selector).mouseover(function) 觸發或將函數綁定到被選元素的鼠標懸停事件

　　$(selector).hide(speed,callback);

　　$(selector).show(speed,callback);

　　可選的 speed 參數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。

　　可選的 callback 參數是隱藏或顯示完成后所執行的函數名稱。除非設置了 speed 參數，否則不能設置該參數。

　　下面的例子演示了帶有 speed 參數的 hide() 方法：

　　toggle() $(selector).toggle(speed,callback,switch)如果被選元素可見，則隱藏這些元素，如果被選元素隱藏，則顯示這些元素。

　　fadeIn() $(selector).fadeIn(speed,callback)方法使用淡入效果來顯示被選元素，假如該元素是隱藏的。

　　fadeOut() $(selector).fadeOut(speed,callback)方法使用淡出效果來隱藏被選元素，假如該元素是隱藏的。

　　fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換

　　fadeTo() 方法允許漸變為給定的不透明度(值介于 0 與 1 之間)

　　slideDown() $(selector).slideDown(speed,callback)方法通過使用滑動效果，顯示隱藏的被選元素。

　　slideUp() $(selector).slideUp(speed,callback)通過使用滑動效果，隱藏被選元素，如果元素已顯示出來的話。

　　slideToggle() $(selector).slideToggle(speed,callback)方法通過使用滑動效果(高度變化)來切換元素的可見狀態。

　　如果被選元素是可見的，則隱藏這些元素，如果被選元素是隱藏的，則顯示這些元素。

　　animate({})

　　$(selector).animate({params},speed,callback);

　　必需的 params 參數定義形成動畫的 CSS 屬性。

　　可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。

　　可選的 callback 參數是動畫完成后所執行的函數名稱。

　　css("color","red")

　　css({"background-color":"yellow","font-size":"200%"})

　　text() - 設置或返回所選元素的文本內容

　　html() - 設置或返回所選元素的內容(包括 HTML 標記)

　　val() - 設置或返回表單字段的值

　　attr()

　　attr({

　　"href" : "http://www.knowbyoo.com",

　　"title" : "PHP教程"

　　})

　　addClass()被選元素添加一個或多個類。$(selector).addClass(class)

　　removeClass()方法從被選元素移除一個或多個類(如果沒有規定參數，則該方法將從被選元素中刪除所有類)$(selector).removeClass(class)

　　toggleClass() 對設置或移除被選元素的一個或多個類進行切換。 $(selector).toggleClass(class,switch) class

　　必需。規定添加或移除 class 的指定元素。

　　如需規定若干 class，請使用空格來分隔類名。

　　switch 可選。布爾值。規定是否添加或移除 class。

　　parent() 方法返回被選元素的直接父元素

　　parents() 方法返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 ()

　　parentsUntil() 方法返回介于兩個給定元素之間的所有祖先元素。

　　children()找到類是class的所有元素的子元素.children(selector)注意：.children() 不返回文本節點;如果需要獲得包含文本和注釋節點在內的所有子節點，請使用 .contents()。

　　find().find(selector)方法獲得當前元素集合中每個元素的后代，通過選擇器、jQuery 對象或元素來篩選。

　　siblings()方法返回被選元素的所有同胞元素

　　next()方法返回被選元素的下一個同胞元素

　　nextAll()方法返回被選元素的所有跟隨的同胞元素。

　　nextUntil()方法返回介于兩個給定參數之間的所有跟隨的同胞元素。

　　prev()

　　prevAll()

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

　　first() 方法返回被選元素的首個元素。

　　last() 方法返回被選元素的最后一個元素。

　　eq() 方法返回被選元素中帶有指定索引號的元素。

　　filter() 方法允許您規定一個標準。不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回。$(document).ready(function(){

　　$("p").filter(".intro").css("background-color","yellow");

　　});

　　not() 方法返回不匹配標準的所有元素。

　　提示：not() 方法與 filter() 相反。

　　on() 方法

　　多個事件綁定同一個函數

　　$(document).ready(function(){

　　$("p").on("mouseover mouseout",function(){

　　$("p").toggleClass("intro");

　　});

　　多個事件綁定不同函數

　　$(document).ready(function(){

　　$("p").on({

　　mouseover:function(){$("body").css("background-color","lightgray");},

　　mouseout:function(){$("body").css("background-color","lightblue");},

　　click:function(){$("body").css("background-color","yellow");}

　　});

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

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

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

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

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

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

【jquery知識點總結】相關文章：