【代码片-1】 jQuery学习笔记1——基础部分

浏览: 123 发布日期: 2016-12-01 分类: jquery
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本选择器2014年5月24日 星期六</title>
<style type="text/css">
			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;
			}			
		</style>
<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript">
$(function(){
	//1.使用id选择器选择id=btn1的元素$("#btn1")
	//2.为选中的jQuery对象添加onclick相应函数$("#btn1").click(function(){})代码写在中括号中
	$("#btn1").click(function(){
		//alert("btn1 click...")
		$("#one").css("background","#ffbbaa");
	});
	$("#btn2").click(function(){
		$(".mini").css("background","#ffffbb");
	});
	$("#btn3").click(function(){
		$("div").css("background","#ffbbaa");
	});
	$("#btn4").click(function(){
		$("*").css("background","#ffbbdd");
	});
	$("#btn5").click(function(){
		$("span,#two").css("background","#ffbbaa");
	});
})

</script>
</head>
<body>
<input type="button" value="选择id为one的元素" id="btn1">
<input type="button" value="选择class为mimi的所有元素" id="btn2">
<input type="button" value="选择元素名是div的所有元素" id="btn3">
<input type="button" value="选择所有元素" id="btn4">
<input type="button" value="选择所有的span元素和id为two的元素" id="btn5">
<br><br>
		<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="span">^^span元素^^</span>
</body>
</html>
返回顶部