jq 必用选择器的使用示例 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{margin:0; padding:0;}
	.outer{width:800px; height:400px; overflow:hidden; margin:0 auto;}
	.inner{width:3200px; height:400px; position:relative;}
	.inner ul{ position:absolute; left:0; top: 0;}
	.inner ul li{ float:left;}
	.inner ul li img{ width:800px; height:400px;}
	</style>

	<script src="jquery-2.2.2.min.js"></script>
	<script>
	$(function(){

	//选择器：
		// console.log($(".outer + div"))//获取紧邻后的第一个兄弟 div
		
		// console.log($(".outer>.inner").find("li").eq(0));//找到第一个li
		// console.log($(".inner>ul>li")[0])//找到li元素

	//筛选：
		// console.log($("li:first "))//找到li中第一个
		// console.log($("li:even").eq(0));//找到li中第一个  
		// console.log($("li:odd").eq(1));
		// console.log($("li:lt(1)"));//从0开始 匹配所有小于给定索引值的元素 gt大于
		// console.log($(".inner> ul > li:first-child"));//匹配第一个子元素
		// console.log($(".inner> ul > li:nth-child(1)"));//从1开始 匹配其父元素下的第N个子或奇偶元素



		// console.log($("li:even"));//获取偶数元素 从0开始 查找 0 2 4行
		// console.log($("li:odd"));//获取奇数元素 从0开始 查找 1 3 5
	})
		
	</script>
</head>
<body>
	<div class="outer">
		<div class="inner">
			<ul>
				<li><img src="img/292321.jpg" height="768" width="1366" alt=""></li>
				<li><img src="img/292323.jpg" height="768" width="1366" alt=""></li>
				<li><img src="img/292325.jpg" height="768" width="1366" alt=""></li>
				<li><img src="img/292326.jpg" height="768" width="1366" alt=""></li>
			</ul>
		</div>
	</div>
	<div class="lll"></div>
</body>
</html>

　　

posted @ 2016-03-19 00:01  mingjixiaohui  阅读(364)  评论(0)    收藏  举报