首页 > Web开发 > 详细

jquery第二节,各种选择器

时间:2016-06-01 02:06:43      阅读:173      评论:0      收藏:0      [点我收藏+]
	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<script src="E:\asiainfo\jQuery\lianxi\jq\jquery-2.2.4.min.js"></script>
		<script type="text/javascript" src="E:\asiainfo\jQuery\lianxi\js\app.js"></script>
		<style type="text/css" rel="stylesheet">
			p{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<p>哈哈哈</p>
		<p>哈哈哈</p>
		<p>哈哈哈</p>
		<p>哈哈哈</p>
	</body>
	</html>

?

$(document).ready(function() {
	$("p").click(function() {
		$(this).hide();
	});
});

?

?

?

二、选择器

? ? ? ?五种选择器

? ? ? ?1.全 ? ?2.class ? 3.id ? 4.标签 ? 5.多样选择器

?

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="E:\asiainfo\jQuery\lianxi\jq\jquery-2.2.4.min.js"></script>
	<script type="text/javascript" src="E:\asiainfo\jQuery\lianxi\js\selector.js"></script>
</head>
<body>
	<div>
		<span></span>
		<p id="pp"></p>
		<span class="span1"></span>
		<label>lable</label>
		<b>bbbb</b>
	</div>
</body>
</html>

?

/*$(document).ready(function() {
	$("div *").html("jquery基础教程2")
});*/
//all  selector 选择所有元素,浏览器加载慢,需要谨慎使用div下面的所有子元素
/*	$(".span1").html(".class选择器");
});*/
//.class选择器
/*$(document).ready(function() {
	$("p").html("根据html标签名进行设置");
});*/
//根据给定html标记名称选择所有元素
/*$(document).ready(function() {
	$("#pp").html("选择一个具有给定id属性的单个元素");
});*/
//id选择器   选择一个具有给定id属性的单个元素#id
$(document).ready(function() {
	$("#pp,lable").html("多样选择器");
});
//将每一个选择器匹配到的元素合并后一起返回

?

jquery第二节,各种选择器

原文:http://yuzhouxiner.iteye.com/blog/2301640

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!