Jquery选择器总结二

来源：互联网发布：js点击加载更多的例子编辑：程序博客网时间：2024/05/23 12:44

简单选择器

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" onclick="testfirst();"/><input type="button" value="简单选择器:last" onclick="testlast();"/><input type="button" value="简单选择器:eq" onclick="testeq();"/><input type="button" value="简单选择器:lt" onclick="testlt();"/><input type="button" value="简单选择器:gt" onclick="testgt();"/><input type="button" value="简单选择器:even" onclick="testeven();"/><input type="button" value="简单选择器:odd" onclick="testodd();"/></body><script src="js/jquery.1.9.2.min.js" type="text/javascript"></script><script type="text/javascript">//简单选择器:firstfunction testfirst(){var fir_li = $("li:first");alert(fir_li.text());}//简单选择器:lastfunction testlast(){var last_li = $("li:last");alert(last_li.text());}//简单选择器:eqfunction testeq(){var eq_li = $("li:eq(2)");alert(eq_li.text());}//简单选择器:ltfunction testlt(){var lt_li = $("li:lt(3)");alert(lt_li.length);}//简单选择器:gtfunction testgt(){var gt_li = $("li:gt(3)");alert(gt_li.length);}//简单选择器:evenfunction testeven(){var eventd = $("tr:even");eventd.each(function(){$(this).css("color","red");});}//简单选择器:oddfunction 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="获取选中复选框" onclick="testcheck();"/><input type="button" value="获取选中单选框" onclick="testradio();"/><input type="button" value="获取选中下拉框" onclick="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>

谢谢！

阅读全文

1 0