个人感觉jq更加便捷,把js原生里面的长单词加以缩写,理解了字面意思基本上就知道代表什么了,而且的代表的是一个对象,返回的也是个对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
</title>
<style type="text/css">
*{margin: 0;padding: 0;}
</style>
</head>
<body>
<div id="wrap">
<div class="topdiv">
<ul id="list" class="test">
<li class="opition" id="li1" title="li">选项1</li>
<li class="opition" title="li">选项2</li>
<li class="opition">选项3</li>
</ul>
<p>duanluo</p>
</div>
<div class="bottomdiv">
<p class="test">hehe</p>
<p>haha</p>
<p></p>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
/*基本选择器*/
//1.id选择器
//设置单个样式
$('#wrap').css('width','300px');
$('#wrap').css('height','300px');
//如果想一次性设置多个样式
//原生css使用连字符-的地方,在jq使用驼峰命名法;
$('#wrap').css({
'background':'red',
'border':'1px solid green',
})
//2.class选择器
$('.topdiv').css({
'height':'148px',
'background':'green',
'border':'1px solid white'
})
$('.opition').css({
'width':'300px',
'listStyle':'none',
margin:'0',
padding:'0',
height:'28px',
border:'1px solid yellow'
})
//3.element选择器
//$('p').css('color','lawngreen');
//4.*选择器
//$('*').css('box-shadow');
//5.组合选择器'
//$('#list,.bottomdiv,p').css('box-shadow','0px 0px 20px yellow');
//6.后代选择器
//选择class名为bottomdiv下面的所有p标签
//$('.bottomdiv p').css('background','blue');
//7.$('parent>child')
//直接子元素,只找它的儿子元素,
//$('.topdiv>ul').css('background','pink');
//8.$('prev+next')选择紧接在prev元素后的next元素;
//选择id名为#li1的下一个class名为opition的同辈元素;
//$('#li1+.opition').css('border','1px solid black');
//选择class为test的标签的下一个同辈元素
//$('.test+p').css('border','2px solid red')
//9.$('prev-siblings')匹配所有元素选取prev元素之后的所有siblings元素
//同辈
//$('.topdiv~div').css('border','2px solid white');
//基本过滤选择器
//1.:first 选择第一个元素//选择所有div中第一个
//$('li:first').css('background','red');
//2.:last 选择最后一个元素//选择所有div中最后一个
//$('div:last').css('background','pink');
//3.:not(selector)
//$('.opition:not(#li1)').css('border','2px solid yellow');
//4.:even编号为偶数,编号从0开始,
//所有p标签编号为偶数的;
//$('p:even').css('border','3px solid white');
//5.:odd 奇数
//$('p:odd').css('border','2px solid white')
//6.:eq(index) 选取索引等于index的元素(index从0开始)
//拿到所有class名为opition的所有li标签,选择下标为1的li标签
//$('.opition:eq(1)').css('border','2px solid yellow');
//7.:gt(index) 选取索引值大于index的元素
//$('.opition:gt(0)').css('border','2px solid yellow');
//8.:lt(index) 选取索引值小于index的元素
//$('.opition:lt(3)').css('border','2px solid blue');
//9.next()选取紧邻的下一个同级元素;
//$('.topdiv').next().css('border','2px solid blue')
//10.prev()选取紧邻的下一个同级元素;
//$('li:eq(1)').prev().css('border','2px solid blue')
//11.:contains(text)选取含有文本内容为"text"的元素;
//$("div:contains('选项2')").css('border','2px solid blue')
//12.:empty选取不包含子元素或者文本的空元素,中间不包含任何文本和符号的空元素;
//console.log($('*:empty'));
//13.:has(selector)选取含有选择器所匹配的元素的元素;
//选取所有div标签中它的子元素有ul这个标签的所有div元素
//$('div:has(ul)').css('border','2px solid blue');
//14.:parent选取含有子元素或者文本的元素;
//$('p:parent').css('border','2px solid blue')
//属性 过滤选择器不需要加冒号 :
//1.$(“div[id]”)选取拥有属性id的元素
//$('*[id]').css('border','2px solid blue');
//2.[attr=value],选取属性的值为value的元素;
//$('.opition[title=li]').css('border','2px solid blue')
//3.[attr!=value],选取属性的值不等于value的元素;
//$('.opition[title!=li]').css('border','2px solid blue')
//4.[attr^=value]选取属性值以value为开始的元素;
//选取div属性title以l开始的元素
//$('li[title^=l]').css('border','2px solid blue')
//5.[attr$=value]选取属性值以value为结束的元素;
//选取div属性title以i结束的元素
//$('li[title$=i]').css('border','2px solid blue')
//6.[attr*=value]选取属性的值含有value的元素;
//选择class含有o的所有元素;
//$('*[class*=o]').css('border','2px solid blue');
//7.[attr1][attr2][attrN]属性可以组合
//$('div[class*=o][class$=v]').css('border','2px solid blue');
//子元素选择器
//1.:nth-child(index/even/odd)
//选取每个父元素下的第index个或者奇数或者偶数元素,index从1开始
//$('li:nth-child(1)').css('border','2px solid blue');
//2.:first-child选取每个父元素的第一个子元素
//$('div:first-child').css('border','2px solid blue');
//3.:last-child选取每个父元素的最后一个子元素
//$('p:last-child').css('border','2px solid blue');
//4.only-child如果某个元素是它父元素中唯一的子元素，那么将会被匹配。
//$('div:only-child').css('border','2px solid blue');
</script>