学习jquery

个人感觉jq更加便捷,把js原生里面的长单词加以缩写,理解了字面意思基本上就知道代表什么了,而且的代表的是一个对象,返回的也是个对象

<!DOCTYPE html>

<html>

<head>

<title>

</title>

*{margin: 0;padding: 0;}

</style>

</head>

<body>

</ul>

<p>duanluo</p>

</div>

<p></p>

</div>

</body>

</html>

/*基本选择器*/

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