：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. 简单的图片滑动效果插件 jQuery.iocnSlider.js

    近几日在制作一个客户引导页面,其中有一个图片展示而且带滑动的效果.好久没练手了,索性自己写一个插件吧. 依据设计原型,需要满足两套分辨率下图片不同的尺寸,所以在css中使用了media query的相 ...

  2. Memcache的客户端连接系列（一） Java

    声明:本文并非原创,转自华为云帮助中心的分布式缓存服务(Memcached)的用户指南. 关键词: Memcached  客户端 Java Java连接池 Java客户端示例 用户的弹性云服务器已安装 ...

  3. LeetCode - 463. Island Perimeter - O(MN)- (C++) - 解题报告

    原题 原题链接 You are given a map in form of a two-dimensional integer grid where 1 represents land and 0 ...

  4. opencv打开视频文件出错

    使用C#调用mingw的so文件,在C++端使用opencv打开视频.这样的项目完成过了一个,第二次做的时候,发现opencv打开视频文件出错. 首先怀疑是opencv的opencv_ffmpeg24 ...

  5. 如何在Python 2.X中也达到类似nonlocal关键字的效果

    nonlocal关键字时Python 3.X中引入的,目的是让内层函数可以修改外层函数的变量值,而该关键字在Python 2.X中是不存在的.那么,要在Python 2.X中达到类型达到类似nonlo ...

  6. NIO初探

    NIO的前世今生 NIO又叫NonBlockingI/O,即非阻塞I/O.以此对应的,有一个更常见的IO(BIO),又叫Blocking I/O,即阻塞IO,两种都为Java的IO实现方案. NIO/ ...

  7. dataTables工作总结

    近期在工作中用到了dataTables,现在总结一下在工作中遇到的问题以及解决方法,如有不妥之处希望多多指教,定会改进. 首先这里用的是coloradmin框架,在vs环境下开发. 这里写一个容器用于 ...

  8. 如何：调试 .NET Framework 源代码

    文章标题:如何:调试 .NET Framework 源代码 文章地址:https://technet.microsoft.com/zh-cn/cc667410.aspx

  9. IOS开发NSBundle使用

    bundle是一个目录,其中包含了程序会使用到的资源. 这些资源包含了如图像,声音,编译好的代码,nib文件(用户也会把bundle称为plug-in). 对应bundle,cocoa提供了类NSBu ...

  10. PagedDataSource数据绑定控件和AspNetPager分页控件结合使用列表分页

    1.引用AspNetPager.dll. 2.放置Repeater数据绑定控件. <asp:Repeater ID="Repeater1" runat="serve ...