jq选择器

Posted 2020-08-17

<script type="text/javascript">

//基本选择器

//console.log($(‘#wrap‘));

 

//设置单个样式

//$(‘#wrap‘).css(‘background‘,‘red‘);

 

//设置多个样式

//原生css使用连字符-的地方 在JQ使用驼峰命名法

// $(‘#wrap‘).css({

// background:‘red‘,

// border:‘1px solid black‘,

// borderRadius:‘50%‘

// });

 

 

 

 

 

//class选择器

//根据给定的类名匹配元素

// $(‘.topDiv‘).css({

//

// border:‘1px solid green‘,

//

// });

// $(‘.opition‘).css({

// background:‘yellow‘,

// border:‘1px solid red‘,

// marginTop:‘20px‘

//

// });

 

 

 

//element选择器

// $(‘p‘).css({

// borderRadius:‘50%‘,

// border:‘1px solid blue‘

//

// });

 

 

 

 

//*选择器

//选择所有元素

//不举例子

 

 

 

 

//组合选择器

// $(‘p‘ ,.opition‘).css({

// borderRadius:‘50%‘,

// border:‘1px solid blue‘

//

// });

 

 

 

//后代选择器

// $(‘.bottomDiv p‘).css({

// border:‘1px solid #ccc‘

// })

 

 

 

 

//$(“parent>child”) 能够选择子代元素

//$(“parent>child”)//class名为parent下面的子代p标签 子级的子级标签不选  返回集合

 

 

 

//$(“prev+next”) 选择的是同辈元素

//$(‘#li1+.opition‘).css(‘border‘,‘1px solid black‘);

//$(‘.test+p‘).css(‘border‘,‘1px solid black‘);

 

 

 

 

 

//$(“prev~siblings”) 匹配所有元素选取prev元素之后的所有siblings元素

//$(‘.topDiv~div‘).css(‘border‘,‘1px solid black‘);//.topDiv之后所有的div元素

 

 

 

 

 

//基本过滤选择器

 

 

 

//1.:first 选取第一个元素

//$(‘li:first‘).css(‘border‘,‘1px solid black‘);

 

//2.:last 选取最后一个元素

//$(‘li:last‘).css(‘border‘,‘1px solid black‘);

 

//3.:not(selector) 取出selector之外的元素

//$(‘.opition:not(#li1)‘).css(‘border‘,‘1px solid black‘);

 

//4.:even 匹配所有元素选取编号是偶数的所有元素，编号从0开始

//$(‘.opition:even‘).css(‘border‘,‘1px solid black‘);

 

//5.:odd 匹配所有元素选取编号是奇数的所有元素，编号从0开始

//$(‘.opition:odd‘).css(‘border‘,‘1px solid black‘);

 

//6.:eq(index) 选取索引等于index的元素 index从0开始

//$(‘.opition:eq(2)‘).css(‘border‘,‘1px solid black‘);

 

//7.:gt(index) 选取索引大于index的元素 index从0开始

//$(‘.opition:gt(0)‘).css(‘border‘,‘1px solid black‘);

 

//8.:lt(index) 选取索引小于index的元素 index从0开始 没有负数

//$(‘.opition:gt(2)‘).css(‘border‘,‘1px solid black‘);

 

//9.next() 选取紧邻的下一个同级元素

//$(‘#li1‘).next().css(‘border‘,‘1px solid black‘);

 

//10.prev() 选取紧邻的下一个同级元素

//$(‘.opition:eq(1)‘).prev().css(‘border‘,‘1px solid black‘);

 

//11.contains(text) 选取含有文本内容为text的元素

//$(‘#wrap:contains(‘退出游戏‘)‘).css(‘border‘,‘1px solid black‘);

 

//12.:empty 选取不包含子元素或者文本的空元素

//$(‘#wrap:empty).css(‘border‘,‘1px solid black‘);

 

//13.:has(selector) 选取含有选择器所匹配的元素的元素

//$(‘div:has(ul)‘).css(‘border‘,‘1px solid black‘);

 

//14.:parent 选取含有选择器所匹配的元素的元素

//$(‘p:parent‘).css(‘border‘,‘1px solid black‘);

 

 

 

 

 

 

 

//属性过滤选择器

//1.$(“div[attr]”)选取拥有属性attr的元素

//$(‘*[class]‘).css(‘border‘,‘1px solid black‘);

 

//2.[attr=value]选取属性值为value的元素

//2.1[attr!=value]选取属性值不为value的元素

//$(‘*[a!=c]‘).css(‘border‘,‘1px solid black‘);

 

//3.[attr^=value]选取属性值以value开始的元素

//$(‘*[a^=b]‘).css(‘border‘,‘1px solid black‘);

 

//4.[attr$=value]选取属性值以value结尾的元素

//$(‘*[a$=b]‘).css(‘border‘,‘1px solid black‘);

 

//5.[attr*=value]选取属性值包含value的元素

//$(‘*[a*=a]‘).css(‘border‘,‘1px solid black‘);

 

//6.[][][] 属性可以组合(筛选条件增多) 满足所有属性选择器的元素

//$(‘*[a=b][id=li1][title=aaa]‘).css(‘border‘,‘1px solid black‘);

 

 

 

 

 

 

//子元素选择器

//1.:nth-child(index/even/odd) 选取每个父元素下的第index个或者奇偶元素。index从1开始

//$(‘#list:nth-child(odd)‘).css(‘border‘,‘1px solid black‘);

 

//2.:first-child 选取每个父元素下的第一个元素。

//$(‘#list:first-child‘).css(‘border‘,‘1px solid black‘);

 

//3.:last-child 选取每个父元素下的最后一个元素。

//$(‘#list:last-child‘).css(‘border‘,‘1px solid black‘);

 

//4.:only-child 选取每个父元素下的唯一一个元素(不是唯一一个子元素的不能匹配)。

//$(‘#list:last-child‘).css(‘border‘,‘1px solid black‘);

</script>