Jquery选择器总结二

简单选择器

1、:firstè选出匹配的元素中的第一个

2、:lastè选出匹配的元素中的最后一个

3、:eq(index)è选出匹配的元素中的指定索引位置的jquery对象（注：index从0开始）

4、:lt(index)è选出匹配元素中索引小于指定索引的对象

5、:gt(index) è选出匹配元素中的索引大于指定索引的对象

6、:evenè选出匹配元素中的索引为偶数的对象，即第奇数个

7、:oddè选出匹配元素中的索引为奇数的对象，即第偶数个

表单选择器

1、:inputè匹配所有input、textare、select和button元素

2、:textè匹配所有的单行文本框

3、:passwordè匹配所有的密码框

4、:submitè匹配所有的提交按钮

5、:checkboxè匹配所有的复选框

6、:radioè匹配所有的单选按钮

7、:resetè匹配所有的重置按钮

8、:hiddenè匹配所有不可见元素

9、:fileè匹配所有文本域（文本标签）

10、:buttonè匹配所有的button按钮

表单属性选择器

1、:checkedè选取选中的复选框或单选按钮

2、:selectedè匹配选中的option元素

代码演示：

一.简单选择器

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

	</head>

	<body>

		<ul>

		    <li>list item 1</li>

		    <li>list item 2</li>

		    <li>list item 3</li>

		    <li>list item 4</li>

		    <li>list item 5</li>

		</ul>

		<table border="1px" bordercolor="blue" cellspacing="0">

		  <tr><td>编号</td><td>姓名</td></tr>

		  <tr><td>1</td><td>张三</td></tr>

		  <tr><td>2</td><td>李四</td></tr>

		  <tr><td>3</td><td>王五</td></tr>

		  <tr><td>4</td><td>赵六</td></tr>

		</table>

		<div style="height: 50px;"></div>

		<input type="button" value="简单选择器:first" οnclick="testfirst();"/>

		<input type="button" value="简单选择器:last" οnclick="testlast();"/>

		<input type="button" value="简单选择器:eq" οnclick="testeq();"/>

		<input type="button" value="简单选择器:lt" οnclick="testlt();"/>

		<input type="button" value="简单选择器:gt" οnclick="testgt();"/>

		<input type="button" value="简单选择器:even" οnclick="testeven();"/>

		<input type="button" value="简单选择器:odd" οnclick="testodd();"/>

	</body>

	<script src="js/jquery.1.9.2.min.js" type="text/javascript">

	</script>

	<script type="text/javascript">

		//简单选择器:first

			function testfirst(){

				var fir_li = $("li:first");

				alert(fir_li.text());

			}

			//简单选择器:last

			function testlast(){

				var last_li = $("li:last");

				alert(last_li.text());

			}

			//简单选择器:eq

			function testeq(){

				var eq_li = $("li:eq(2)");

				alert(eq_li.text());

			}

			//简单选择器:lt

			function testlt(){

				var lt_li = $("li:lt(3)");

				alert(lt_li.length);

			}

			//简单选择器:gt

			function testgt(){

				var gt_li = $("li:gt(3)");

				alert(gt_li.length);

			}

			//简单选择器:even

			function testeven(){

				var eventd = $("tr:even");

				eventd.each(function(){

					$(this).css("color","red");

				});

			}

			//简单选择器:odd

			function testodd(){

				var eventd = $("tr:odd");

				eventd.each(function(){

					$(this).css("color","yellow");

				});

			}

	</script>

</html>

二.表单选择器

代码演示：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

	</head>

	<body>

		<input type="checkbox" name="hobbies" value="踢足球" />踢足球

  		<input type="checkbox" name="hobbies" value="打篮球" />打篮球

  		<input type="checkbox" name="hobbies" value="羽毛球" />羽毛球

  		<br></br>

  		<input type="radio" name="sex" value="男" />男

  		<input type="radio" name="sex" value="女" />女

  		<br></br>

  		<select id="city">

  			<option value=" ">请选择城市</option>

  			<option value="北京">北京</option>

  			<option value="上海">上海</option>

  			<option value="深圳">深圳</option>

  		</select>

		<div style="height: 50px;"></div>

		<input type="button" value="获取选中复选框" οnclick="testcheck();"/>

		<input type="button" value="获取选中单选框" οnclick="testradio();"/>

		<input type="button" value="获取选中下拉框" οnclick="testselect();"/>

	</body>

	<script src="js/jquery.1.9.2.min.js" type="text/javascript">

	</script>

	<script type="text/javascript">

		//获取选中复选框

		function testcheck(){

			var checks = $(":checkbox:checked");

			checks.each(function (){

				alert($(this).val());

		});

		}

		//获取选中单选框

		function testradio(){

			var sex = $(":radio:checked");

			alert(sex.val());

			}

		//获取选中下拉框

		function testselect(){

			var city = $("#city option:selected");

			alert(city.val());

			}

	</script>

</html>

谢谢！

巴特西

Jquery选择器总结二

简单选择器

表单选择器

表单属性选择器

最新文章

热门文章