获取dom对象(5)

<html>
<head>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
	<title>获取dom对象</title>
	<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
<body>
	<input id="btn1" class="btn1" type="button" value="mybtn1" />
	<input name="btn1" class="btn1" type="button" value="mybtn2" />
	<img src="" alt="img1" />
	<img src="" alt="img2" />
	<div id="mydiv">
		<input class="btn2" type="button" data="test" value="mybtn3" />
		<input class="btn2" type="button" value="mybtn4" />
	</div>
	<button class="btn2" type="button" data="test" value="mybtn5" />
	<button class="btn2" type="button" value="mybtn6" />
</body>
</html>

<script type="text/javascript">
	/*
	jquery的选择器.
	*/

	/*
	基础的用法
	*/

	//根据id获取
	var btn = $("#btn1");
	console.log(btn.val());//mybtn1

	//根据class获取
	var btn = $(".btn1");
	for(var i = 0,len = btn.length; i < len; i++){
		console.log(btn[i].value);//mybtn1,mybtn2
	}

	//根据tag获取
	var btn = $("input");
	for(var i = 0,len = btn.length; i < len; i++){
		console.log(btn[i].value);//mybtn1,mybtn2,mybtn3,mybtn4
	}

	//匹配某id下class相同的元素
	var btn = $("#mydiv .btn2");
	for(var i = 0,len = btn.length; i < len; i++){
		console.log(btn[i].value);//mybtn3,mybtn4
	}

	//匹配某id下tag相同的元素,注意中间是空格
	var btn = $("#mydiv input");
	for(var i = 0,len = btn.length; i < len; i++){
		console.log(btn[i].value);//mybtn3,mybtn4
	}

	//匹配某tag中包含class的元素,中间没有空格
	var btn = $("input.btn2");
	for(var i = 0,len = btn.length; i < len; i++){
		console.log(btn[i].value);//mybtn3,mybtn4
	}

	//匹配多个元素,采用,分割
	var btn = $("#btn1,.btn1,img");
	for(var i = 0,len = btn.length; i < len; i++){
		console.log(btn[i].value || btn[i].tagName);//mybtn1,mybtn2,IMG,IMG
	}
</script>

 

你可能感兴趣的:(DOM对象)