Jquery元素選取、常用方法
一:常用的選擇器:
基本選擇器$(”#myDiv”) //匹配唯一的具有此id值的元素$(”div”) //匹配指定名稱的所有元素$(”.myClass”) //匹配具有此class樣式值的所有元素$(”*”) //匹配所有元素$(this) //匹配自身$(”div,span,p.myClass”) //聯合所有匹配的選擇器層疊選擇器$(”form input”) //后代選擇器,選擇ancestor的所有子孫節點$(”#main > *”) //子選擇器,選擇parent的所有子節點$(”label + input”) //臨選擇器,選擇prev的下一個臨節點$(”#prev ~ div”) //同胞選擇器,選擇prev的所有同胞節點基本過濾選擇器$(”tr:first”) //匹配第一個選擇的元素$(”tr:last”) //匹配最后一個選擇的元素$(”tr:even”) //匹配集合中偶數位置的所有元素(從0開始)$(”tr:odd”) //匹配集合中奇數位置的所有元素(從0開始)$(”td:eq(2)”) //匹配集合中指定位置的元素(從0開始)$(”div:animated”) //匹配所有正在運行動畫的所有元素內容過濾選擇器$(”div:contains('John')”) //匹配含有指定文本的所有元素$(”td:empty”) //匹配所有空元素(只含有文本的元素不算空元素)$(”div:has(p)”) //從原元素集合中再次匹配所有至少含有一個selector的所有元素$(”div:hidden”) //匹配所有隱藏的元素,也包括表單的隱藏域$(”div:visible”) //匹配所有可見的元素屬性過濾選擇器$(”div[id]”) //匹配所有具有指定屬性的元素$(”input[name='aa']”) //匹配所有具有指定屬性值的元素素$(”input[name^='aa']”) //匹配所有指定屬性值以value開頭的元素$(”input[name$='aa']”) //匹配所有指定屬性值以value結尾的元素$(”input[name*='aa']”) //匹配所有指定屬性值含有value字符的元素子元素過濾選擇器$(”ul li:nth-child(n)”), //匹配父元素的第n個子元素$(”div span:first-child”) //匹配父元素的第1個子元素$(”div span:last-child”) //匹配父元素的最后1個子元素表單元素選擇器$(”:input”) //匹配所有的表單輸入元素,包括所有類型的input, textarea, select 和 button$(”:text”) //匹配所有類型為text的input元素$(”:password”) //匹配所有類型為password的input元素$(”:radio”) //匹配所有類型為radio的input元素$(”:checkbox”) //匹配所有類型為checkbox的input元素$(”:submit”) //匹配所有類型為submit的input元素$(”:image”) //匹配所有類型為image的input元素$(”:reset”) //匹配所有類型為reset的input元素$(”:button”) //匹配所有類型為button的input元素$(”:file”) //匹配所有類型為file的input元素$(”:hidden”) //匹配所有類型為hidden的input元素或表單的隱藏域表單元素過濾選擇器$(”:enabled”) //匹配所有可操作的表單元素$(”:disabled”) //匹配所有不可操作的表單元素$(”:checked”) //匹配所有已點選的元素二:常用方法
//常用操作.eq(i) //獲取第幾個元素.text() //獲取或設置元素文本內容.html() //獲取或設置元素html代碼內容.val() //獲取或設置表單元素值.attr() //獲取或設置屬性,適用于自定義屬性.removeAttr() //移除屬性.css() //獲取或設置樣式.addClass() //設置class.removeClass() //移除class.prop() //操作屬性,適用于固定屬性.trim() //去除空格//追加移除.after(); //在匹配元素后面添加內容.append(); //將content作為元素的內容插入到該元素的后面.appendTo(); //在content后接元素.before(); //與after方法相反.empty() //將該元素的內容設置為空.remove(); //刪除所有的指定元素//相關元素.filter( expr ) //返回與指定表達式匹配的元素集合.children() //找子級元素.parent() //找父級元素.next(expr) //后面同輩元素的元素。.prev(expr) //前面同輩元素的元素.find(expr) //搜索所有與指定表達式匹配的元素。.add(html) //追加元素//事件.unbind("blur") //移除事件.bind("blur",function(){}) //綁定事件.hover(function(){}) //鼠標移上//動畫.show( ) 顯示隱藏的匹配元素。.hide( ) 隱藏所有的匹配元素。.toggle( ) 切換元素的可見狀態。.slideDown( speed, [callback] ) 通過高度變化(向下增大)來動態地顯示所有匹配的元素,在顯示完成后可選地觸發一個回調函數。這個動畫效果只調整元素的高度,可以使匹配的元素以“滑動”的方式顯示出來。.slideUp( speed, [callback] ) 通過高度變化(向上減小)來動態地隱藏所有匹配的元素,在隱藏完成后可選地觸發一個回調函數。這個動畫效果只調整元素的高度,可以使匹配的元素以”滑動”的方式隱藏起來。.slideToggle( speed, [callback] ) 通過高度變化來切換所有匹配元素的可見性,并在切換完成后可選地觸發一個回調函數。 這個動畫效果只調整元素的高度,可以使匹配的元素以”滑動”的方式隱藏或顯示。.fadeIn( speed, [callback] ) 通過不透明度的變化來實現所有匹配元素的淡入效果,并在動畫完成后可選地觸發一個回調函數。 這個動畫只調整元素的不透明度,也就是說所有匹配的元素的高度和寬度不會發生變化。.fadeOut( speed, [callback] ) 通過不透明度的變化來實現所有匹配元素的淡出效果,并在動畫完成后可選地觸發一個回調函數。 這個動畫只調整元素的不透明度,也就是說所有匹配的元素的高度和寬度不會發生變化。.fadeTo( speed, opacity, [callback] ) 把所有匹配元素的不透明度以漸進方式調整到指定的不透明度,并在動畫完成后可選地觸發一個回調函數。 這個動畫只調整元素的不透明度,也就是說所有匹配的元素的高度和寬度不會發生變化。.stop( ) 停止所有匹配元素當前正在運行的動畫。如果有動畫處于隊列當中,他們就會立即開始。.queue( ) 取得第一個匹配元素的動畫序列的引用(返回一個內容為函數的數組).queue( callback ) 在每一個匹配元素的事件序列的末尾添加一個可執行函數,作為此元素的事件函數.queue( queue ) 以一個新的動畫序列代替所有匹配元素的原動畫序列.dequeue( ) 執行并移除動畫序列前端的動畫.animate( params, [duration], [easing], [callback] ) 用于創建自定義動畫的函數。.animate( params, options ) 創建自定義動畫的另一個方法感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
新聞熱點
疑難解答