【jQuery】3.jquery选择器
jquery选择器
1.什么是jquery选择器
jquery中的选择器完全继承了css1.0~2.0的风格，实现少部分css3选择器
，如果对于CSS选择器非常了解，那么学习jquery选择器会非常简单。
利用jquery选择器可以非常快速的找出你想要的DOM元素，然后为这些
DOM元素添加你想要的效果，无需担心浏览器的兼容。
实例：演示选择器浏览器的兼容性(子选择器)
小结：jquery选择器的写法与css非常相近，但是作用不同。css选择的元
素只能对基添加样式(CSS表达式除外，项目中基本不允许有css表达式，
而且IE8标准模式已经取消对css表达式的支持)，jquery选择器找到的元
素可以为其添加行为。
例子:
这里，所有的a标签都会变成红色。那么如果我们不想让p标签的a标签中的文字变成红色该怎么办？我们在样式的a前面加一个“>”号即可:
但是这个“>”号在某些版本的浏览器中是不能显示的，所以下面我们使用Jquery的选择器来配置这个样式:
结果效果和之前一样，而且这个是可以跨浏览器支持的，解决了兼容性问题，这也就是Jquery的一大优势之一。
2.jquery选择器的优势
(1)完全支持CSS1.0~2.0的选择器，支持部分
CSS3选择器，学习曲线平缓，可以快速上手
(2)完美的容错机制
即使页面上没有该元素，jquery也不会报错
例子:
如果把‘p1’改为‘p2’(不存在)，这个:
3.jquery选择器的种类
(1)基本选择器
①#id，选择ID的元素
javascript:
②.class，类名选择器
javascript:
③element，标签选择器
jquery:
④*，选择所有元素
⑤E1，E2，E3，... En，多重选择器
javaScript:
(2)层次选择器
① E F ，选择E元素所有的后代元素
② E>F，选择E元素的子元素，子选择器
③ E+next，选择E元素后的紧临的兄弟元素，等价于.next()
例子:
将紧邻div的兄弟元素文字变红
④ E~siblings，选择E元素后的所有兄弟元素，等价于.nextAll()
例子:
1.什么是jquery选择器
jquery中的选择器完全继承了css1.0~2.0的风格，实现少部分css3选择器
，如果对于CSS选择器非常了解，那么学习jquery选择器会非常简单。
利用jquery选择器可以非常快速的找出你想要的DOM元素，然后为这些
DOM元素添加你想要的效果，无需担心浏览器的兼容。
实例：演示选择器浏览器的兼容性(子选择器)
小结：jquery选择器的写法与css非常相近，但是作用不同。css选择的元
素只能对基添加样式(CSS表达式除外，项目中基本不允许有css表达式，
而且IE8标准模式已经取消对css表达式的支持)，jquery选择器找到的元
素可以为其添加行为。
例子:
<!doctype html>
<html lang="en">
<head>
<meta charset="GBK">
<title>demo1</title>
<style>
div a{color:red}
</style>
</head>
<body>
<div>
<a href="####">abcdefg</a>
<p><a href="####">1234567890</a></p>
</div>
</body>
</html>
这里，所有的a标签都会变成红色。那么如果我们不想让p标签的a标签中的文字变成红色该怎么办？我们在样式的a前面加一个“>”号即可:
<style>
div>a{color:red}
</style>这里样式只对div的第一层子标签中的a标签有用。
但是这个“>”号在某些版本的浏览器中是不能显示的，所以下面我们使用Jquery的选择器来配置这个样式:
<!doctype html>
<html lang="en">
<head>
<meta charset="GBK">
<title>demo1</title>
<script src="jquery-1.8.0.min.js"></script>
<script>
$(function(){
$('div>a').css('color','red');
});
</script>
</head>
<body>
<div>
<a href="####">abcdefg</a>
<p><a href="####">1234567890</a></p>
</div>
</body>
</html>
结果效果和之前一样，而且这个是可以跨浏览器支持的，解决了兼容性问题，这也就是Jquery的一大优势之一。
2.jquery选择器的优势
(1)完全支持CSS1.0~2.0的选择器，支持部分
CSS3选择器，学习曲线平缓，可以快速上手
(2)完美的容错机制
即使页面上没有该元素，jquery也不会报错
例子:
<!doctype html>
<html lang="en">
<head>
<meta charset="GBK">
<title>demo2</title>
<script src="jquery-1.8.0.min.js"></script>
<script>
window.onload=function(){
var p1=document.getElementById('p1');
p1.style.color="red";
}
$(function(){
$('#p1').css('color','red');
})
</script>
</head>
<body>
<div>
<p id="p1">abcdefg</p>
</div>
</body>
</html>
如果把‘p1’改为‘p2’(不存在)，这个:
window.onload=function(){
var p1=document.getElementById('p12');
p1.style.color="red";
}会报错，但是
$(function(){
$('#p1').css('color','red');
})不报错
3.jquery选择器的种类
(1)基本选择器
①#id，选择ID的元素
javascript:
<style>
#p1{color:red;}
</style>jquery:
<script>
$(function(){
$('#p1').css('color','red');
})
</script>
②.class，类名选择器
javascript:
<style>
#p1{color:red;}
</style>jquery:
<script>
$(function(){
$('#p1').css('color','red');
})
</script>
③element，标签选择器
jquery:
<script>
$(function(){
$('p').css('color','red');
})
</script>
④*，选择所有元素
<script>
$(function(){
$('*').css('border','10px solid green');
})
</script>不推荐使用“*”号，控制的元素太多，会影响其他元素
⑤E1，E2，E3，... En，多重选择器
javaScript:
<style>
p,div{color:red;}
</style>jquery:
<script>
$(function(){
$('p,div').css('border','10px solid green');
})
</script>
(2)层次选择器
① E F ，选择E元素所有的后代元素
② E>F，选择E元素的子元素，子选择器
③ E+next，选择E元素后的紧临的兄弟元素，等价于.next()
例子:
<!doctype html>
<html lang="en">
<head>
<meta charset="GBK">
<title>demo2</title>
<script src="jquery-1.8.0.min.js"></script>
<style>
/*div+p{color:red;}*/
</style>
<script>
$(function(){
//$('div+p').css('color','red');
$('div').next().css('color','red');
})
</script>
</head>
<body>
<div>这个是div标签</div>
<p>这个是p标签</p>
<span>这个是span标签</span>
</body>
</html>
将紧邻div的兄弟元素文字变红
④ E~siblings，选择E元素后的所有兄弟元素，等价于.nextAll()
例子:
<!doctype html>
<html lang="en">
<head>
<meta charset="GBK">
<title>demo2</title>
<script src="jquery-1.8.0.min.js"></script>
<style>
/*div~p{color:red;}*/
</style>
<script>
$(function(){
//$('div').nextAll('p').css('color','red');
$('div~p').css('color','red');
})
</script>
</head>
<body>
<div>这个是div标签</div>
<p>这个是p标签</p>
<span>这个是span标签</span>
<p>这个是p标签</p>
</body>
</html>
将紧邻div的下所有p兄弟标签元素文字变红
转载请注明出处：http://blog.csdn.net/acmman/article/details/49173847