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

jQuery选择器之基本选择器和层次选择器

2015-12-02 13:14 525 查看

1.什么是选择器？

jQuery模仿css选择器的语法提供的一种用来方便查找要操作的节点的语法规则。

2.基本选择器

#id

.class

element

selector,select2...selectn

*

代码示例：/jQuery01/WebRoot/selector/s1.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>基本选择器的使用</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
//id class 选择器
function f1(){
//jQuery选择器查找到了多个dom节点，仍然是封装成一个
//jQuery对象，调用jQuery对象的属性或者方法，默认情况
//下，会作用于底层所有的dom节点之上。
var $obj = $('p.s1');
$obj.css('font-size','60px');
}
//元素选择器
function f2(){
$('div').css('font-size','40px');
}
//同时选择多个
function f3(){
$('#d1,p').css('font-size','60px').css('color','red');
}
//
function f4(){
$('*').css('color','red');
}
</script>
</head>
<body style="font-size:30px;">
<div id="d1">hello jQuery</div>
<div class="s1">hello java</div>
<p class="s1">hello perl</p>
<input type="button" value="基本选择器的使用"
onclick="f4();"/>
</body>
</html>

3.层次选择器

select1 select2 : 考虑所有后代

select1>select2 : 只考虑子节点

select1+select2 : 下一个兄弟

select1~select2 : 下面所有的兄弟

代码示例：/jQuery01/WebRoot/selector/s2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>层次选择器的使用</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
//select1 select2 所有符合的节点
function f1(){
//length属性为当前jQuery对象封装的dom节点的个数
//alert($('#d1 div').length);  //4
$('#d1 div').css('font-size','60px');
}
//select1>select2 子节点
function f2(){
alert($('#d1>div').length);
$('#d1>div').css('background-color','green');
}
//select1+select2 下一个兄弟
function f3(){
alert($('#d3+div').length);
$('#d3+div').css('font-size','60px');
}
//select1~select2 下面所有的兄弟
function f4(){
//alert($('#d3~div').length);
$('#d2~div').css('background-color','yellow');
}
</script>
</head>
<body style="font-size:30px;">
<div id="d1">
<div>111</div>
<div id="d2">hello1</div>
<div id="d3" style="width:200px;height:200px;
background-color:red;">
<div id="d4" style="width:150px;height:50px;
background-color:#ccc;">hello2</div>
</div>
<div id="d5">hello3</div>
<div id="d6">hello4</div>
</div>
<input type="button" value="层次选择器的使用"
onclick="f4();"/>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航