您的位置：首页 > Web前端 > JQuery

【jQuery】3.jquery选择器

2015-10-16 08:31 639 查看

jquery选择器

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航