jQuery用法小结

Posted 2020-07-31 筱qian

 

filtering过滤：

.not(‘‘ ) 在所选元素集合中，  排除特定的元素 $( "li" ).not( ":even" ).css( "background-color", "red" );

.filter(‘‘) 在所选集合中，选定特定的元素；与.not( )相反；

.eq(num )  num:0 1 2 3 4...

.has(“ul”)  $( "li" ).has( "ul" ).css( "background-color", "red" );

.first() .last()  $( "li" ).first().css( "background-color", "red" );

.is()检测匹配元素，若其中至少有一个元素符合给定的表达式 返回true;$( "input[type=‘checkbox‘]" ).parent().is( "form" )

.map() 操作一个数组中的每个元素 转换为另一个数组

$( "p" ).append( $( "input" ).map(function() {

return $( this ).val();

}).get().join( ", " ) );

.slice(0,2) 选取元素集合中 从0开始至2结束的前两个匹配元素；

traversing  遍历：

.end( ) 返回所选文本的上一级；

.add() 1添加一个新元素到一组匹配的元素中 $(“p”).add(“span”) 表示已选定p和span元素；

          2动态生成一个元素并添加至匹配的元素中

.children()只考虑子元素，而非所有的所有的后代元素；

.closest()从元素本身开始，逐级向上遍历，返回最先匹配的元素；

.parents()从父元素开始向上遍历，返回所有匹配元素，是一个集合。

.offsetParent()  返回第一个匹配的具有position的父元素；

 .prev( )取的所选元素的紧邻的前一个同辈元素；

.siblings( )找到所选元素的所有同辈元素；

核心函数

.each() 遍历一个函数集 1 $(‘li‘).each(function(index){ 2 console.log(index + ‘:‘+$(this).text()); 3 }) 

.index()索引

$(‘li‘).index(document.getElementById(‘bar‘))；
$(‘li‘).index($(‘#bar‘))；   //传递一个jquery对象
$(‘li‘).index($(‘li:gt(0)‘))； //传递一组，返回第一个元素的索引位置
$(‘#bar‘).index(‘li‘)；  //传递一个选择器，返回＃bar在所有li中的索引位置
$(‘#bar‘).index()；    //不传递参数，返回这个元素在同辈中的索引位置

.size()  相当于$(‘image‘).length

.get(0) 返回dom对象  $(this).get(0) 与$(this)[0]等价；.get()获得的是元素数组。

.data("blab","hello") 存储数据在blab上

$("form>input") 匹配表单中所有的直接子级input

$("lable + input") 匹配所有跟在lable后面的元素

$("form ~input") 匹配所有与表单同辈的元素

$("tr:eq(1)")   匹配一个给定索引值的元素

$("tr:gt(1)")  匹配所有大于给定索引值的元素

$("tr:lt(2)")   匹配所有小于索引值的元素

 $("div:contains(‘john‘)")  查找所有包含‘john’的元素