<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>