jquery 基础选择器

回复

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

.jQuery的选择器

* 基本内容

* jQuery中的选择器源于CSS中的选择器，并进行扩展

* 学习中注意与CSS中的选择器不一样的用法

* jQuery中的选择器是jQuery的根基

* 选择器分类 :

1.基本选择器

* ID选择器 - #id值

* 元素选择器 - element

* class选择器 - .className

* 通配符选择器 - *匹配当前HTML页面的所有元素

* 组合选择器 - seletor1,selector2,...:匹配并集结果

例如:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery选择器</title>
<script src="jquery-1.11.3.js"></script>
<style>
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
#data {
width: 600px;
}
#data, td, th {
border-collapse: collapse;
border: 1px solid #aaaaaa;
}
th, td {
height: 28px;
}
#data thead {
background-color: #333399;
color: #ffffff;
}
</style>
</head>
<body>
<div class="one" id="one" >
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test" >
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span>
<br /><br /><br /><br /><br /><br /><br /><br />
<h3>基本选择器.</h3>
<input type="button" value="选择 id为 one 的元素." id="btn11"/>
<input type="button" value="选择 class 为 mini 的所有元素." id="btn12"/>
<input type="button" value="选择元素名是 div 的所有元素." id="btn13"/>
<input type="button" value="选择所有的元素." id="btn14"/>
<input type="button" value="选择所有的span元素和id为two的元素." id="btn15"/>
</body>
<script>
/*
改变背景颜色 - backgroundColor:pink
* 需要操作CSS的属性
* jQuery中提供css(name,value)
* name - CSS中的属性名称
* value - CSS中的属性值
*/
/* 基本选择器 */
//选择 id为 one 的元素.
$("#btn11").click(function(){
$("#one").css("background","pink");
});
//选择 class 为 mini 的所有元素.
$("#btn12").click(function(){
// 批处理
$(".mini").css("background","pink");
});
//选择元素名是 div 的所有元素.
$("#btn13").click(function(){
$("div").css("background","pink");
});
//选择所有的元素.
$("#btn14").click(function(){
$("*").css("background","pink");
});
//选择所有的span元素和id为two的div元素.
$("#btn15").click(function(){
// 多个选择器并列使用 - 并集
$("span,#two").css("background","pink");
});
</script>
</body>
</html>

复制代码

页面效果:

点击第一个按钮:

点击第二个按钮:

点击第三个按钮:

点击第四个按钮：

点击第五个按钮:

2.层级选择器

* 祖先空格后代

* 父元素 > 子元素

* 目标元素 + 下一个兄弟元素

* 目标元素 ~ 后面所有兄弟元素

例如:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery选择器</title>
<script src="jquery-1.11.3.js"></script>
<style>/*样式同上*/</style>
</head>
<body>
<div class="one" id="one" >
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test" >
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span>
<br /><br /><br /><br /><br /><br /><br /><br />
<h3>层次选择器.</h3>
<input type="button" value="选择 body内的所有div元素." id="btn21"/>
<input type="button" value="在body内,选择子元素是div的。" id="btn22"/>
<input type="button" value="选择所有class为one 的下一个div元素." id="btn23"/>
<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn24"/>
</body>
<script>
/*
改变背景颜色 - backgroundColor:pink
* 需要操作CSS的属性
* jQuery中提供css(name,value)
* name - CSS中的属性名称
* value - CSS中的属性值
*/
/* 层次选择器 */
//选择 body内的所有div元素.
$("#btn21").click(function(){
// 祖先元素与后代元素
$("body div").css("background","pink");
});
//在body内的选择元素名是div 的子元素.
$("#btn22").click(function(){
// 父子元素关系
$("body>div").css("background","pink");
});
//选择所有class为one 的下一个兄弟div元素.
$("#btn23").click(function(){
$(".one+div").css("background","pink");
});
//选择 id为two的元素后面的所有div兄弟元素.
$("#btn24").click(function(){
$("#two~div").css("background","pink");
});
</script>
</body>
</html>

复制代码

效果如下:

点击第一个按钮:

点击第二个按钮：

点击第三个按钮：

点击第四个按钮：

[代码片段] jquery 基础选择器

[代码片段] jquery 基础选择器

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

阅读推荐

浏览过的版块

用微信扫一扫