首页 > 代码库 > JQuery学习四（过滤选择器）
JQuery学习四（过滤选择器）
：first选择第一个元素。$（“div:first”）进行选择第一个<div>
:last 选择最后一个最后一个元素 $（"div:last"）选取最后一个<div>
[:not(选择器）] 选择不满足“选择器”条件的元素
$("input:not(.myclass)")选取样式名不是Myclass的<input>
:even :odd 选取的索引数是奇数和偶数的元素。(把第零行看作第一行开始计算)
$("input:even")选择索引是奇数的<input>
:eq(索引序号)。 ：gt(索引序号) :lt(索引序号) 选取索引等于。
大于。小于索引序号的元素。比如 $("input:lt(1)")选取索引小于1的<input>
$(":header")选择所有的h1------h6的元素
$("div:animated")选择正在执行动画的<div>元素
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>JQuery</title> 5 <script src="http://www.mamicode.com/js/jquery-1.11.1.min.js"type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(function () {$("#change").click(function(){ 8 $("#table1 td:even").css("background", "red"); 9 $("#table1 td:odd").css("background", "gray");10 $("#table1 td:first").css("font-size", "50px").css("background","yellow");11 $("#table1 td:gt(0):lt(3)").css("font-size","30px");12 })13 }14 )15 </script>16 </head>17 <body bgcolor="blue">18 <table id="table1">19 <tr>20 <td>firstline</td>21 </tr>22 <tr>23 <td>secondline</td>24 </tr>25 <tr>26 <td>thirdline</td>27 </tr>28 <tr>29 <td>fourthline</td>30 </tr>31 <tr>32 <td>fifthline</td>33 </tr>34 <tr>35 <td>sixthline</td>36 </tr>37 <tr>38 <td>seventhline</td>39 </tr>40 <tr>41 <td>eightthline</td>42 </tr>43 <tr>44 <td>ninthline</td>45 </tr>46 <tr>47 <td>tenthline</td>48 </tr>49 </table>50 <input value="http://www.mamicode.com/changecolor"type="button"id="change" onclick=""/>51 </body>52 </html>
$("table").click(function(){$("td",$(this)).css("background","red")});用法
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>JQuery</title> 5 <script src="http://www.mamicode.com/js/jquery-1.11.1.min.js"type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(function(){($("table").click( 8 function () { $("tr", $(this)).css("background", "white"); })) 9 })10 //this 传递的是相对自己的对象的意思。就是只在被点击的这个对象里的标签上改变颜色11 </script>12 </head>13 <body bgcolor="blue">14 <table id="table1">15 16 </tr>17 <tr>18 <td>sixthline</td>19 </tr>20 <tr>21 <td>seventhline</td>22 </tr>23 <tr>24 <td>eightthline</td>25 </tr>26 <tr>27 <td>ninthline</td>28 </tr>29 <tr>30 <td>tenthline</td>31 </tr>32 </table>33 <table id="table2">34 <tr>35 <td>firstline</td>36 </tr>37 <tr>38 <td>secondline</td>39 </tr>40 <tr>41 <td>thirdline</td>42 </tr>43 <tr>44 <td>fourthline</td>45 </tr>46 <tr>47 <td>fifthline</td>48 </tr>49 50 </table>51 <input value="http://www.mamicode.com/changecolor" type="button" id="change" onclick="" />52 </body>53 </html>
$("div[id]") 选取有id属性的div
$(div[title=test") 选取title==test的<div>
$("div[title!=test]")选取title属性不为test的<div>
$("#form1:disabled")//获得表单中所有未启用的控件
$("#form2:enabled")获得表单中所有启用的控件
#("input:checked")input中所有被选中的属性
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>JQuery</title> 5 <script src="http://www.mamicode.com/js/jquery-1.11.1.min.js"type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(function () { 8 $("#selectall").click(function () { 9 var elements = $("input[type=checkbox]");10 for (var i = 0; i < elements.length; i++)11 elements[i].checked = true;12 })13 })14 $(function () {15 $("#reverse").click(16 function () {17 var elements = $("input[type=checkbox]");18 for (var i = 0; i < elements.length; i++) {19 if (elements[i].checked ==false)20 elements[i].checked = true;21 else elements[i].checked = false;22 }23 24 });25 })26 </script>27 </head>28 <body bgcolor="blue">29 <input type="checkbox">a<br/>30 <input type="checkbox">b<br />31 <input type="checkbox">c<br />32 <input type="checkbox">d<br />33 <input type="checkbox">e<br />34 <input type="checkbox">f<br />35 <input type="checkbox">g<br />36 <input type="button"id="selectall" value="http://www.mamicode.com/全选"/>37 <input type="button"id="reverse" value="http://www.mamicode.com/反选" />38 39 </body>40 </html>
JQuery学习四（过滤选择器）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。