jquery选择器使用场景
标签选择器
选择所有的段落(P)标签,并且往其中加入hello world
<pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
<title>#id选择器</title>
<script src="../jquery-1.11.3.js" type="text/javascript"></script>
</head>
<body>
<div>
<p>Hello world!</p>
</div>
<script type="text/javascript">
var i = 0;
function test()
{
$("p").html("Hello iMooc!" + (i++)); //填写相应代码
}
</script>
<input type="button" value="点击我" οnclick="test()"/>
</body>
</html>
效果如下:
ID选择器
把id为divtest的DOM中的内容放入到id为default的元素中
<!DOCTYPE html>
<html>
<head>
<title>#id选择器</title>
<script src="../jquery-1.11.3.js" type="text/javascript"></script>
</head>
<body>
<div id="divtest">div的内容</div>
<div id="default"></div>
<script type="text/javascript">
$("#default").html($("#divtest").html()); //把divtest里面的内容放入到default的内容中
</script>
</body>
</html>
其中,html方法的作用是,获取节点中的数据(当入参为空的时候),或者往节点中插入数据(当入参有数据的时候),结果如下
*选择器
把form元素下的所有元素都设置为不可用
<!DOCTYPE html>
<html>
<head>
<title>*选择器</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>
<body>
<form action="#">
<input id="Button1" type="button" value="button" />
<input id="Text1" type="text" />
<input id="Radio1" type="radio" />
<input id="Checkbox1" type="checkbox" />
</form>
<script type="text/javascript">
<span style="color:#ff0000;"> $("form *").attr("disabled", "true");</span>
</script>
</body>
</html>
组合选择器
把之前的很多种选择器组合器来是使用,中间使用逗号隔开。
被选择的元素之间是平等的关系
如下,吧 class 是green和red的内容全部变为“hi,我们的样子很美哦!”
<!DOCTYPE html>
<html>
<head>
<title>sele1,sele2,seleN选择器</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="red">选我吧!我是red</div>
<div class="green">选我吧!我是green</div>
<div class="blue">选我吧!我是blue</div>
<script type="text/javascript">
$(".red,.green").html("hi,我们的样子很美哦!");
</script>
</body>
</html>