实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery选择器函数使用方法</title>
</head>
<body>
<div>
<p>经典语录<a href="">梅雨季节</a></p>
<p>经典语录<a href="">梅雨季节</a></p>
<p>经典语录<a href="">梅雨季节</a></p>
<p>经典语录<a href="">梅雨季节</a></p>
<p>经典语录<a href="">梅雨季节</a></p>
<p>经典语录<a href="">梅雨季节</a></p>
<p>经典语录<a href="">梅雨季节</a></p>
<p>经典语录<a href="">梅雨季节</a>
<p>经典语录<a href="">梅雨季节</a></p>
<p>经典语录<a href="">梅雨季节</a></p>
</div>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$('p').eq(2).css('color','red')
$('p').eq(2).css('font-size','55px')
//$('p').removeAttr('style')
// 2.get()将jquery对象转为DOM对象
$('p').get(1).style.color = '#0000ff'
//$('p').removeAttr('style')
//3.选取第一个和最后一个p
$('p').first().css('color','blue')
$('p').last().css('color','blue')
//$('p').removeAttr('style')
//4.toArray(),返回DOM数组
var p = $('p').toArray()
for(var i=0;i<p.length;i++){
p[i].style.color = 'green'
}
//$('p').removeAttr('style')
//5.find()返回所有后代元素
$('div').find('p').css('color','red')
//$('p').removeAttr('style')
//6.返回所有的子元素，children()
$('div').children('p').css('color','red')
//$('p').removeAttr('style')
//7.对每个元素执行回调函数,each()
$('p').each(function(){
$(this).css('color','green')
})
//$('p').removeAttr('style')
//8.元素遍历
//next()下一个同级元素
$('p').eq(3).next().css('color','green')
$('p').eq(5).nextAll().css('color','red')
//siblings():返回所选元素的所有同级元素,除它自己
$('p').eq(4).siblings().css('background-color','yellow')
//$('*').removeAttr('style')
//prev():前一个同级元素
$('p').eq(6).prev().css('color','red')
//前面的所有同级元素
$('p').eq(4).prevAll().css('color','red')
//$('*').removeAttr('style')
//9.add()
$('p').add('a').css('color','red')
//$('*').removeAttr('style')
//10.slice(1,3)表示选取索引[1,3)的元素
$('p').slice(1,3).css('color','red')
$('p').slice(6).css('color','red')
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
