jQuery选择器

基本选择器

$("div") -- 选中所有的div元素

$("span") -- 选中所有的span元素

 

$(".mini") -- 选中所有class值为mini的元素(class值为mini的元素可能是任何元素)

$("span.mini") -- 选中所有class值为mini的span元素

 

$("#one") -- 选中id为one的元素

 

$("div,span,.mini,#one") -- 选中所有的div元素，以及所有的span元素，以及所有class值为mini的元素，以及id为one元素

层级选择器

$("div span") -- 选中所有div元素内部的所有span元素

$("#one div") -- 选中id为one的元素内部的所有div元素

 

 

$("#two").next("div") -- 选中id为two的元素后面紧邻的div兄弟元素

$("#two").prev("div") -- 选中id为two的元素前面紧邻的div兄弟元素

 

$("#two").nextAll() -- 选中id为two的元素后面所有的兄弟元素

$("#two").nextAll("span") -- 选中id为two的元素后面所有的span兄弟元素

$("#two").prevAll() -- 选中id为two的元素前面所有的兄弟元素

$("#two").prevAll("span") -- 选中id为two的元素前面所有的span兄弟元素

 

$("#two").siblings() -- 选中id为two的元素前、后所有的兄弟元素

$("#two").siblings("div") -- 选中id为two的元素前、后所有的div兄弟元素

基本过滤选择器
(1)选中第一个div元素

$("div:first")

$("div:eq(0)")

$("div").eq(0)

(2)选中最后一个div元素

$("div:last")

$("div:eq(-1)")

$("div").eq(-1)

(3)选中第n+1个div元素(n从零开始)

$("div:eq(n)")

$("div").eq(n)

综合案例一

<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
	/** 练习1：创建单行单列的表格 */
	function createTable1(){
		//创建table元素
		var $table = $("<table></table>");
		//创建tr元素
		var $tr = $("<tr></tr>");
		//创建td元素并为td添加内容
		var $td = $("<td>Hello,我是td</td>");
		//将td添加到tr上
		$tr.append($td);	
		//将tr添加到table上
		$table.append($tr);
		//将创建的整个table添加到body内部
		$("body").append($table);
		$("body").append("<hr/>");
	}

	/** 练习2：创建5行6列的表格 */
	function createTable2(){
		//创建table元素
		var $table = $("<table></table>");
		for(var r=0;r<5;r++){//循环5次,table中添加5个tr
			//创建tr元素
			var $tr = $("<tr></tr>");
			for(var c=0;c<6;c++){//循环6次,tr中添加6个td
				//创建td元素并为td添加内容
				var $td = $("<td>Hello,我是td</td>");
				//将td添加到tr上
				$tr.append($td);	
			}
			//将tr添加到table上
			$table.append($tr);
		}
		//将创建的整个table添加到body内部
		$("body").append($table);
		$("body").append("<hr/>");
	}

	/** 练习3：创建指定行和列的表格 */
	function createTable3(){
		var rows = $("#rows").val();//获取指定的行数
		var cols = $("#cols").val();//获取指定的列数
		//创建table元素
		var $table = $("<table></table>");
		for(var r=0;r<rows;r++){//循环5次,table中添加5个tr
			//创建tr元素
			var $tr = $("<tr></tr>");
			for(var c=0;c<cols;c++){//循环6次,tr中添加6个td
				//创建td元素并为td添加内容
				var $td = $("<td>Hello,我是td</td>");
				//将td添加到tr上
				$tr.append($td);	
			}
			//将tr添加到table上
			$table.append($tr);
		}
		//将创建的整个table添加到body内部
		$("body").append($table);
		$("body").append("<hr/>");
	}
</script>