：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>元素

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title>JQuery</title>

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

         <script type="text/javascript">

             $(function () {$("#change").click(function(){

                 $("#table1 td:even").css("background", "red");

                 $("#table1 td:odd").css("background", "gray");

                 $("#table1 td:first").css("font-size", "50px").css("background","yellow");

                 $("#table1 td:gt(0):lt(3)").css("font-size","30px");

             })

             }

             )

         </script>

 </head>

 <body bgcolor="blue">

     <table id="table1">

         <tr>

             <td>firstline</td>

         </tr>

         <tr>

             <td>secondline</td>

         </tr>

         <tr>

             <td>thirdline</td>

         </tr>

         <tr>

             <td>fourthline</td>

         </tr>

         <tr>

             <td>fifthline</td>

         </tr>

         <tr>

             <td>sixthline</td>

         </tr>

         <tr>

             <td>seventhline</td>

         </tr>

         <tr>

             <td>eightthline</td>

         </tr>

         <tr>

             <td>ninthline</td>

         </tr>

         <tr>

             <td>tenthline</td>

         </tr>

     </table>

     <input value="changecolor"type="button"id="change" onclick=""/>

 </body>

 </html>

$("table").click(function(){$("td",$(this)).css("background","red")});用法

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title>JQuery</title>

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

         <script type="text/javascript">

             $(function(){($("table").click(

                 function () { $("tr", $(this)).css("background", "white"); }))

             })

             //this 传递的是相对自己的对象的意思。就是只在被点击的这个对象里的标签上改变颜色

         </script>

 </head>

 <body bgcolor="blue">

     <table id="table1">

         </tr>

         <tr>

             <td>sixthline</td>

         </tr>

         <tr>

             <td>seventhline</td>

         </tr>

         <tr>

             <td>eightthline</td>

         </tr>

         <tr>

             <td>ninthline</td>

         </tr>

         <tr>

             <td>tenthline</td>

         </tr>

     </table>

         <table id="table2">

             <tr>

                 <td>firstline</td>

             </tr>

             <tr>

                 <td>secondline</td>

             </tr>

             <tr>

                 <td>thirdline</td>

             </tr>

             <tr>

                 <td>fourthline</td>

             </tr>

             <tr>

                 <td>fifthline</td>

             </tr>

         </table>

         <input value="changecolor" type="button" id="change" onclick="" />

 </body>

 </html>

$("div[id]") 选取有id属性的div

$(div[title=test") 选取title==test的<div>

$("div[title!=test]")选取title属性不为test的<div>

$("#form1:disabled")//获得表单中所有未启用的控件

$("#form2:enabled")获得表单中所有启用的控件

#("input:checked")input中所有被选中的属性

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title>JQuery</title>

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

         <script type="text/javascript">

             $(function () {

                 $("#selectall").click(function () {

                     var elements = $("input[type=checkbox]");

                     for (var i = 0; i < elements.length; i++)

                         elements[i].checked = true;

                 })

             })

             $(function () {

                 $("#reverse").click(

                     function () {

                         var elements = $("input[type=checkbox]");

                         for (var i = 0; i < elements.length; i++) {

                             if (elements[i].checked ==false)

                                 elements[i].checked = true;

                             else elements[i].checked = false;

                         }

                     });

             })

         </script>

 </head>

 <body bgcolor="blue">

     <input type="checkbox">a<br/>

     <input type="checkbox">b<br />

     <input type="checkbox">c<br />

     <input type="checkbox">d<br />

     <input type="checkbox">e<br />

     <input type="checkbox">f<br />

     <input type="checkbox">g<br />

     <input type="button"id="selectall" value="全选"/>

     <input type="button"id="reverse"  value="反选" />

 </body>

 </html>
 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title>JQuery</title>

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

         <script type="text/javascript">

             $(function () {

                 $('input').change(function () {

                     var names=new Array();

                     $("input:checked").each(function(key,value){names[key]=$(value).val();});

                     $('#msgname').text("一共选中了"+names.length+"项,"+names.join("."));

                 });

             })

             $(function () {

                 var link = $("<a href='http//:www.qq.com'>百度</a>");

                 $("div:first").append(link);

             })

             $(function () {

                 var data = {"新浪":"http://www.xinlang.com",

                     "腾讯":"http://www.qq.com","网易":"http://www.163.com"

                 ,"淘宝":"http://www.taobao.com"};

                 $.each(data,function(key,value){

                     var tr = $("<td><a href='" + value + "'>" + key + "</a></td>");

                     $("#tablesite").append(tr);

                 });

             })

         </script>

 </head>

 <body bgcolor="blue">

     <input type="checkbox"value="a">a<br/>

     <input type="checkbox"value="b">b<br />

     <input type="checkbox"value="c">c<br />

     <input type="checkbox"value="d">d<br />

     <input type="checkbox"value="e">e<br />

     <input type="checkbox"value="f">f<br />

     <input type="checkbox"value="g">g<br />

     <p id="msgname"></p>

     <div></div>

     <table id="tablesite">

     </table>

 </body>

 </html>

JQuery学习四（过滤选择器）的更多相关文章

  1. jQuery学习之过滤选择器

    基本过滤选择器 :first 选取第一个元素:$("div:first") :last 选取最后一个元素:$("div:last") :not(selector ...

  2. JQuery学习笔记——层级选择器

    JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...

  3. Jquery | 基础 | 使用 jQuery 表单过滤选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jQuery事件篇---过滤选择器 & 表单选择器

    内容提纲: 过滤选择器 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 表单选择器 6.常规选择器 7.表单选择器 8.表单过滤器 发文不易,转载请注明出处! 过滤选 ...

  5. jQuery学习笔记(2)-选择器的使用

    一.选择器是什么 有了jQuery的选择器,我们几乎可以获取页面上任意一个或一组对象 二.Dom对象和jQuery包装集 1.Dom对象 JavaScript中获取Dom对象的方式 <div i ...

  6. jQuery之属性过滤选择器

    转自:http://blog.csdn.net/woshisap/article/details/7341136 在HTML文档中,元素的开始标记中通常包含有多个属性(attribute), 在jQu ...

  7. JQuery学习笔记——基础选择器

    第一篇博客,现在原生安卓需求不大了.招聘的Android工程师都需要附带更多的其他技术.这也是开启我学习前端之路的开端.前端时间看了HTML.CSS等,在界面渲染这一块,就不多记录博客了.现在学习着J ...

  8. 黑马day16 jquery&amp;属性过滤选择器

    属性过滤选择器的过滤规则是通过元素的属性来获取对应的元素 .[attribute] 使用方法: $("div[id]") ;  返回值  集合元素 说明:匹配包括给定属性的元素.样 ...

  9. 黑马day16 jquery&amp;内容过滤选择器&amp;可见度选择器

    内容过滤选择器的过滤规则主要体如今它所包括的子元素和文本内容上 .:contains(text) 使用方法: $("div:contains('John')")    返回值  集 ...

  10. Jquery | 基础 | 属性过滤选择器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Reject Inference: Your Data is Deceiving You

    Keyword: Reject Inference Suppose there is a dataset of several attributes, including working condit ...

  2. 《机器学习实战》笔记——决策树（ID3）

    现在要介绍的是ID3决策树算法,只适用于标称型数据,不适用于数值型数据. 决策树学习算法最大的优点是,他可以自学习,在学习过程中,不需要使用者了解过多的背景知识.领域知识,只需要对训练实例进行较好的标 ...

  3. 各类4G手机进入工参模式查看手机信息

    随着移动4G正式商用,LTE网络建设日益完善,LTE用户日趋增多,通过进入其工程模式读取服务小区电平RSRP.物理小区标识PCI和频点号等基本信息的方式来判断测试点信号质量的优劣.由于市场上商用终端品 ...

  4. hadoop参数(未完).md

    我X,有违禁词.麻烦提醒一下哪个词好吗?

  5. /etc/fstab 文件如何填写(转)

    转载自 http://hi.baidu.com/jingzhongchen/blog/item/8e6f552dcead7ce98b139952.html 看你对/etc/fstab文件了解多少?   ...

  6. 《安装ubuntu及VMware以及相关问题汇总》

    一.VMware Ubuntu安装详细过程 http://blog.csdn.net/u013142781/article/details/50529030 二.VMware Tools (ubunt ...

  7. 第一章 Windows编程基础（1~4课）

    第一课:从main到WinMain 第二课:窗口和消息 第三课:MFC编程 第四课:MFC应用程序框架 概括: Win32的两种编程框架:SDK方式.MFC方式 1. SDK方式:使用WinMain入 ...

  8. PHPCMS v9表单向导中怎么加入验证码

    表单想到比较简单,所以没有加入验证码的功能.网上的类似教程又大多数不准确.所以亲自测试了一下,发现下面的方法是可用的.希望对有需求的朋友们有所帮助. 1.首先是调用表单的页面加入验证码.表单js调用模 ...

  9. Java学习个人备忘录之关键字final

    final关键字final可以修饰类,方法,变量.final修饰的类不可以被继承final修饰的方法不可以被覆盖final修饰的变量是一个常量.只能被赋值一次.内部类只能访问被final修饰的局部变量 ...

  10. return语句的用法

    1.return语句的作用:a.返回一个值,这个值可以是任意类型.b.使程序返回到操作系统(即终止程序)2.java中对于一个函数,不论有没有返回值类型,都可以带有return 语句.但是区别在于,r ...