版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013101178/article/details/81612861
总结
- jQuery提供了丰富的选择器以获取DOM元素。
- jQuery中基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器。
- 使用jQuery的层次选择器可通过DOM元素之间的层次关系来获取元素,包括后代元素、子元素、相邻元素和同辈元素。
- 使用属性选择器可通过HTML元素的属性来选择元素。
- 使用过滤选择器可通过特定的过滤规则来筛选所需要的DOM元素,包括基本过滤选择器、可见性过滤选择器等。
- 编写选择器时要注意特殊符号和空格。
1.基本选择器
<html>
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<style type="text/css">
#box {
background-color: #FFF;
border: 1px solid #000;
padding: 5px;
}
</style>
<script type="text/javascript" src="../tool/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
/*
//获取并设置所有class为title的元素的背景颜色
$(".title").css("background", "red");
//获取并设置id为box的元素的背景颜色
$("#box").css("background-color", "blue");
//获取并设置所有h2,dt,class为title的元素的背景颜色
$("h2,dt,.title").css("background", "green");
//设置所有class为title的h2元素的背景色
$("h2.title").css("background", "black");
*/
//获取h2元素并为其添加click事件函数
$("h2").click(function () {
//获取h3元素并为其添加背景颜色
$("h3").css("background-color", "#09F");
});
});
</script>
</head>
<body>
<div id="box">
id为box的div
<h2 class="title">class为title的h2</h2>
<h3 class="title">class为title的h3</h3>
<h3>热门排行</h3>
<dl>
<dt><img src="" width="90" height="20" alt="哈哈"/></dt>
<dd class="title">斗地主</dd>
<dd>休闲游戏</dd>
<dd>QQ游戏,下象棋。。。。。</dd>
</dl>
</div>
</body>
</html>
2.层次选择器
<html>
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
line-height: 30px;
}
body {
margin: 10px;
}
#menu {
width: 50%;
border: 2px solid #03C;
padding: 10px;
}
a {
text-decoration: none;
margin-right: 5px;
}
span {
font-weight: bold;
padding: 3px;
}
h2 {
margin: 10px 0;
}
</style>
<script type="text/javascript" src="../tool/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(
function () {
//为#menu下的<span>元素添加背景色
$("h2").click(
function () {
$("#menu span").css("background-color", "#09F");
}
);
//为#menu下的子元素<span>添加背景色
$("#menu>span").css("background-color", "#09F");
//为紧邻h2元素后的<dl>元素添加背景色
//next()方法代替prev+next[相邻元素选择器]
$("h2+dl").css("background-color", "red");
//为跟h2元素后的所有同辈元素添加背景色
//nextAll()方法代替prev~siblings[同辈元素选择器]
//$("h2~dl").css("background-color", "green");
}
);
</script>
</head>
<body>
<div id="menu">
<h2>全部旅游产品分类</h2>
<dl>
<dt>北京周边旅游<span>特价</span></dt>
<dd>
<a href="#">按天数</a>
<a href="#">海边旅游</a>
<a href="#">草原</a>
</dd>
</dl>
<dl>
<dt>景点门票</dt>
<dd>
<a href="#">名胜</a>
<a href="#">暑期</a>
<a href="#">乐园</a>
</dd>
<dd>
<a href="#">国庆</a>
<a href="#">元旦</a>
</dd>
</dl>
<span>更多分类</span>
</div>
</body>
</html>
3.属性选择器
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
#box {
width: 50%;
background-color: #FFF;
border: 2px solid #000;
padding: 5px;
}
</style>
<script type="text/javascript" src="../tool/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(
function () {
$("h2").click(
function () {
//为包含属性名为title的h2元素添加背景色
$("h2[title]").css("background-color", "#09F");
}
);
$("[type=button]").click(
function () {
$("[name][type=text]").css("background-color", "red");
}
);
//改变class属性的值为odds的元素的背景颜色
//$("[class=odds]").css("background-color", "#09F");
//改变id属性值不为box的元素的背景颜色
//$("[id!=box]").css("background-color", "green");
//改变title属性值以h开头的元素的背景色
//$("[title^=h]").css("background-color", "#09F");
//改变title属性中的值以jp结尾的元素的背景颜色
//$("[title$=jp]").css("background-color", "red");
//改变title属性中含有s的元素的背景颜色
//$("[title*=s]").css("background-color", "blue");
//改变包含class属性,且title属性的值含有y的<li>元素的背景色
$("li[class][title*=y]").css("background-color", "yellow");
}
);
</script>
</head>
<body>
<div id="box">
<h2 class="odds" title="cartooninfo">动画列表</h2>
<ul>
<li class="odds" title="kn_ap">名侦探柯南</li>
<li class="evens" title="hy_jp">火影忍者</li>
<li class="oddt" title="ss_gp">死神</li>
<li class="enn" title="hs_jp">机器猫</li>
</ul>
</div>
</body>
</html>
4.基本过滤器
<html>
<head>
<meta charset="UTF-8">
<title>基本过滤器</title>
<style type="text/css">
</style>
<script type="text/javascript" src="../tool/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(
function () {
$("h2").click(
function () {
//改变第一个<li>元素的背景色
//$("li:first").css("background-color", "#09F");
//改变所有标题元素的背景色,如改变<h1>,<h2>,<h3>....元素的背景色
//$(":header").css("background-color", "#09F");
}
);
//改变最后一個<li>元素的背景色
//$("li:last").css("background-color", "#09F");
//改变class不为three的<li>元素的背景颜色
//$("li:not(.three)").css("background-color", "#09F");
//改变索引值为偶数的<li>元素的背景颜色
//$("li:even").css("background-color", "#09F");
//改变索引值为奇数的<li>元素的背景颜色
//$("li:odd").css("background-color", "#09F");
//改变索引值为1的<li>元素的背景色
//$("li:eq(1)").css("background-color", "#09F");
//改变索引值大于1的<li>元素的背景色
//$("li:gt(1)").css("background-color", "#09F");
//改变索引值小于1的<li>元素的背景色
//$("li:lt(1)").css("background-color", "#09F");
//改变当前获取焦点的元素的背景色
$(":focus").css("background-color", "#09F");
}
);
</script>
</head>
<body>
<h2>网络小说</h2>
<ul>
<li>小说1</li>
<li>小说2</li>
<li class="three">小说3</li>
<li>小说4</li>
<li>小说5</li>
<li>小说6</li>
<li>小说7</li>
<li>小说8</li>
</ul>
</body>
</html>
5.可见性过滤选择器,1
<html>
<head>
<meta charset="UTF-8">
<title>可见性过滤选择器</title>
<style type="text/css">
#txt_show {
display: block;
color: #00C;
}
#txt_hide {
display: none;
color: #F30;
}
</style>
<script type="text/javascript" src="../tool/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(
function () {
$("input[name='show']").click(
function () {
//show()方法的功能是将隐藏的元素显示出来
//$("#txt_hide").show();
$("p:hidden").show();
}
);
$("input[name='hide']").click(
function () {
//hide()方法的功能是将显示的元素隐藏起来
$("#txt_show").hide();
//$("p:visible").hide();
}
);
}
);
</script>
</head>
<body>
<p id="txt_hide">点击按钮,我会被隐藏。。</p>
<p id="txt_show">隐藏我,被显示了。。</p>
<input name="show" type="button" value="点击显示文字"/>
<input name="hide" type="button" value="点击隐藏文字"/>
</body>
</html>
5.可见性过滤选择器,2
<html>
<head>
<meta charset="UTF-8">
<title>可见性过滤选择器</title>
<style type="text/css">
.tips {
width: 170px;
padding: 9px;
background: #ddd;
border: 1px solid #000;
font-size: 17px;
font-family: Arial;
color: #0033FF;
display: none;
}
p {
color: #FF0033;
}
</style>
<script type="text/javascript" src="../tool/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(
function () {
$("p").click(
function () {
$(".tips:hidden").show();
}
);
}
);
</script>
</head>
<body>
<p>“逻辑”是什么意思?</p>
<div class="tips">
萝莉,是洛丽塔的缩写,愿指一部美国小说,后在日报引申发展的一种次文化。。。
</div>
</body>
</html>