1. 使用基础选择器
使用Id选择器选取HTML元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ID选择器的示例</title>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<input type="text" id="testInput" name="test" value=""/>
<input type="button" value="输入的值为"/>
<script type="text/javascript">
$(document).ready(function(){
$("input[type=button]").click(function(){ //为按钮绑定单击事件
var inputValue = $("#testInput").val(); //获取文本输入框的值
alert(inputValue);
});
});
</script>
</body>
</html>
使用标签名选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>元素选择器的示例</title>
<style type="text/css">
img{
border:1px solid #777;
}
div{
padding:5px;
font-size:12px;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<div><img src="img/strawberry.jpg"/>这里种植了一棵草莓</div>
<div><img src="img/fish.jpg"/>这里养殖了一条鱼</div>
<input type="button" id="button" value="若干年后" />
<script type="text/javascript">
$(document).ready(function(){
//1、为button绑定点击事件,click方法。
$("#button").click(function(){
//2、将两个DIV标记的html内容进行替换,html()方法,innerHTML。注意双引号要变为单引号。
$("div").eq(0).html("<img src='img/strawberry1.jpg'>这里长出了一片草莓");
$("div").get(1).innerHTML= "<img src='img/fish1.jpg'>这里的鱼没有了";
});
});
</script>
</body>
</html>
根据元素的css类选择HTML元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>类名选择器的示例</title>
<style type="text/css">
div{
border:1px solid #003a75;
background-color:#cef;
margin:5px;
height:35px;
width:75px;
float:left;
font-size:12px;
padding:5px;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<div class="myClass">注意观察我的样式</div>
<div>我的样式是默认的</div>
<script type="text/javascript">
$(document).ready(function() {
//根据注释补全此处代码
//选取Dom元素:myClass,用变量承接。
var $myClass = $(".myClass");
//为选取的Dom元素设置背景颜色:#C50210
$myClass.css("background-color","#C50210");
//为选取的Dom元素设置文字颜色:#FFF
$myClass.css("color","#FFFF00");
});
</script>
</body>
</html>
选择所有的HTML元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>复合选择器的示例</title>
<style type="text/css">
.default{
border:1px solid #003a75;
background-color:yellow;
margin:5px;
width:90px;
float:left;
font-size:12px;
padding:5px;
}
.change{
background-color:#C50210;
color:#FFF;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<p class="default">p元素</p>
<div class="default">div元素</div>
<span class="default" id="span">ID为span的元素</span>
<input type="button" value="为div元素和ID为span的元素换肤" />
<script type="text/javascript">
$(document).ready(function() {
//绑定按钮的单击事件,click方法。因为没有任何标志,故使用input[type=button]属性选择器。
$("input[type=button]").click(function(){
//添加所使用的CSS类,change。
$("div,#span").addClass("change");
});
});
</script>
</body>
</html>
同时选择多个HTML元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ancestor descendant选择器的示例</title>
<style type="text/css">
body{
margin:0px;
}
#bottom{
background-image:url(img/bg_bottom.jpg); /*设置背景*/
width:800px; /*设置宽度*/
height:58px; /*设置高度*/
clear: both; /*设置左右两侧无浮动内容*/
text-align:center; /*设置居中对齐*/
padding-top:10px; /*设置顶边距*/
font-size:9pt; /*设置字体大小*/
}
.copyright{
color:#FFFFFF; /*设置文字颜色*/
list-style:none; /*不显示项目符号*/
line-height:20px; /*设置行高*/
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<div id="bottom">
<ul>
<li>技术服务热线:400-675-1066 传真:0431-84972266 企业邮箱:mingrisoft@mingrisoft.com</li>
<li>Copyright © www.mrbccd.com All Rights Reserved! </li>
</ul>
</div>
<ul>
<li>技术服务热线:400-675-1066 传真:0431-84972266 企业邮箱:mingrisoft@mingrisoft.com</li>
<li>Copyright © www.mrbccd.com All Rights Reserved! </li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
//为div元素的子元素ul添加样式
$("div ul").addClass("copyright");
});
</script>
</body>
</html>
2. 使用层次选择器
使用parent>child选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>parent>child选择器的示例</title>
<style type="text/css">
input{
margin:5px; /*设置input元素的外边距为5像素*/
}
.input {
font-size: 12pt; /*设置文字大小*/
color: #333333; /*设置文字颜色*/
background-color:#cef; /*设置背景颜色*/
border: 1px solid #000000; /*设置边框*/
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
姓 名:<input type="text" name="name" id="name" />
<br />
籍 贯:<input name="native" type="text" id="native" />
<br />
生 日:<input type="text" name="birthday" id="birthday" />
<br />
E-mail:<input type="text" name="email" id="email" />
<br />
<span>
<input type="button" name="change" id="change" value="换肤"/>
</span>
<input type="button" name="default" id="default" value="恢复默认"/>
<br />
</form>
<script type="text/javascript">
$(document).ready(function(){
//绑定"换肤"按钮的单击事件,#change click方法
$("#change").click(function(){
//为表单元素的直接子元素input添加样式,form>input, .input样式
$("form>input").addClass("input");
});
//绑定“恢复默认”按钮的单击事件,#default click方法
$("#default").click(function(){
//移除为表单元素的直接子元素input添加的样式, form>input, .input样式
$("form>input").removeClass("input");
});
});
</script>
</body>
</html>
使用pre+next选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>prev + next选择器的示例</title>
<style type="text/css">
.background{background:#cef}
body{font-size:12px;}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<div>
<label>第一个label</label>
<p>第一个p</p>
<fieldset>
<label>第二个label</label>
<p>第二个p</p>
</fieldset>
</div>
<p>div外面的p</p>
<script type="text/javascript">
$(document).ready(function() {
//为lable后面的一个同辈p标记添加样式:background.
$("label+p").addClass("background");
});
</script>
</body>
</html>
使用pre~siblings选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>prev ~ siblings选择器的示例</title>
<style type="text/css">
.background{background:#cef}
body{font-size:12px;}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<div>
<p>第一个p</p>
<p>第二个p</p>
</div>
<p>div外面的p</p>
<p>div外面的p2</p>
<script type="text/javascript">
$(document).ready(function() {
//为div后面的所有同辈p标记添加样式:background.
$("div~p").addClass("background");
});
</script>
</body>
</html>