Jquery的过滤选择器

于 2011-11-10 20:29:40 发布
阅读量1.3k 收藏 2
点赞数
分类专栏： JQuery 文章标签： jquery input query class button image
首先HTML代码
HTML Code 
   
   

    
    <
    
    html
    
    >
    
    

    
    <
    
    head
    
    >
    
    

    
    <
    
    script 
    
    type
    
    ="text/javascript"
    
     src
    
    ="JQuery/jquery-1.5.1.js"
    
    ></
    
    script
    
    >
    
    

    
    </
    
    head
    
    >
    
    

    
    <
    
    body
    
    >
    
    

    
    <
    
    form 
    
    name
    
    ="form1"
    
     id
    
    ="form1"
    
     class
    
    ="form1"
    
     action
    
    =""
    
     method
    
    ="post"
    
    >
    
    

  
    
    <
    
    table 
    
    name
    
    ="table1"
    
     id
    
    ="table1"
    
     class
    
    ="table1"
    
    >
    
    
    
    
    <
    
    tr 
    
    name
    
    ="tr1"
    
     id
    
    ="tr1"
    
     class
    
    ="tr1"
    
    >
    
    
      
    
    <
    
    td 
    
    name
    
    ="td11"
    
     id
    
    ="td11"
    
     class
    
    ="td11"
    
     nowrap
    
    >
    
    
      
    
    <
    
    input 
    
    type
    
    ="text"
    
     name
    
    ="text11"
    
     id
    
    ="text11"
    
     class
    
    ="text11"
    
     value
    
    ="text11"
    
    />
    
    
      
    
    <
    
    input 
    
    type
    
    ="button"
    
     name
    
    ="button11"
    
     id
    
    ="button11"
    
     class
    
    ="button11"
    
     value
    
    ="button11"
    
    />
    
    
      
    
    </
    
    td
    
    >
    
    
      
    
    <
    
    td 
    
    name
    
    ="td12"
    
     id
    
    ="td12"
    
     class
    
    ="td12"
    
    >
    
    
      
    
    <
    
    input 
    
    type
    
    ="text"
    
     name
    
    ="text12"
    
     id
    
    ="text12"
    
     class
    
    ="text12"
    
     value
    
    ="text12"
    
    />
    
    
      
    
    <
    
    input 
    
    type
    
    ="hidden"
    
     name
    
    ="hidden12"
    
     id
    
    ="hidden12"
    
     class
    
    ="hidden12"
    
     value
    
    ="hidden12"
    
    />
    
    
      
    
    </
    
    td
    
    >
    
    
      
    
    <
    
    td 
    
    name
    
    ="td13"
    
     id
    
    ="td13"
    
     class
    
    ="td13"
    
    >
    
    
      
    
    <
    
    input 
    
    type
    
    ="text"
    
     name
    
    ="text13"
    
     id
    
    ="text13"
    
     class
    
    ="text13"
    
     value
    
    ="text13"
    
    />
    
    
      
    
    </
    
    td
    
    >
    
    
    
    
    </
    
    tr
    
    >
    
    
    
    
    <
    
    tr 
    
    name
    
    ="tr2"
    
     id
    
    ="tr2"
    
     class
    
    ="tr2"
    
    >
    
    
      
    
    <
    
    td 
    
    name
    
    ="td21"
    
     id
    
    ="td21"
    
     class
    
    ="td21"
    
    >
    
    
      
    
    <
    
    input 
    
    type
    
    ="password"
    
     name
    
    ="password21"
    
     id
    
    ="password21"
    
     class
    
    ="password21"
    
     value
    
    ="password21"
    
    />
    
    
      
    
    <
    
    input 
    
    type
    
    ="radio"
    
     name
    
    ="radio21"
    
     id
    
    ="radio21"
    
     class
    
    ="radio21"
    
     value
    
    ="radio21"
    
     checked
    
    />
    
    
      
    
    <
    
    input 
    
    type
    
    ="checkbox"
    
     name
    
    ="checkbox21"
    
     id
    
    ="checkbox21"
    
     class
    
    ="checkbox21"
    
     value
    
    ="checkbox21"
    
     checked
    
    />
    
    
      
    
    </
    
    td
    
    >
    
    
      
    
    <
    
    td 
    
    name
    
    ="td22"
    
     id
    
    ="td22"
    
     class
    
    ="td22"
    
     nowrap
    
    >
    
    
      
    
    <
    
    input 
    
    type
    
    ="submit"
    
     name
    
    ="submit22"
    
     id
    
    ="submit22"
    
     class
    
    ="submit22"
    
     value
    
    ="submit22"
    
    />
    
    
      
    
    <
    
    input 
    
    type
    
    ="image"
    
     name
    
    ="image22"
    
     id
    
    ="image22"
    
     class
    
    ="image22"
    
     value
    
    ="image22"
    
    />
    
    
      
    
    <
    
    input 
    
    type
    
    ="reset"
    
     name
    
    ="reset22"
    
     id
    
    ="reset22"
    
     class
    
    ="reset22"
    
     value
    
    ="reset22"
    
    />
    
    
      
    
    </
    
    td
    
    >
    
    
      
    
    <
    
    td 
    
    name
    
    ="td23"
    
     id
    
    ="td23"
    
     class
    
    ="td23"
    
    >
    
    
      
    
    <
    
    input 
    
    type
    
    ="file"
    
     name
    
    ="file23"
    
     id
    
    ="file23"
    
     class
    
    ="file23"
    
     value
    
    ="file23"
    
    />
    
    
      
    
    </
    
    td
    
    >
    
    
    
    
    </
    
    tr
    
    >
    
    
    
    
    <
    
    tr 
    
    name
    
    ="tr3"
    
     id
    
    ="tr3"
    
     class
    
    ="tr3"
    
    >
    
    
      
    
    <
    
    td 
    
    name
    
    ="td31"
    
     id
    
    ="td31"
    
     class
    
    ="td31"
    
    >
    
    

  
    
    <
    
    select 
    
    name
    
    ="select31"
    
     size
    
    ="1"
    
    >
    
    
    
    
    <
    
    option 
    
    value
    
    ="select311"
    
    >
    
    option1
    
    </
    
    option
    
    >
    
    
    
    
    <
    
    option 
    
    value
    
    ="select312"
    
     selected
    
    >
    
    option2
    
    </
    
    option
    
    >
    
    
    
    
    <
    
    option 
    
    value
    
    ="select313"
    
    >
    
    option3
    
    </
    
    option
    
    >
    
    
  
    
    </
    
    select
    
    >
    
    

      
    
    </
    
    td
    
    >
    
    
      
    
    <
    
    td 
    
    name
    
    ="td32"
    
     id
    
    ="td32"
    
     class
    
    ="td32"
    
    ></
    
    td
    
    >
    
    
      
    
    <
    
    td 
    
    name
    
    ="td33"
    
     id
    
    ="td33"
    
     class
    
    ="td33"
    
    ></
    
    td
    
    >
    
    
    
    
    </
    
    tr
    
    >
    
    
  
    
    </
    
    table
    
    >
    
    

    
    </
    
    form
    
    >
    
    

    
    <
    
    h1
    
    >
    
    你好世界！
    
    </
    
    h1
    
    >
    
    

    
    </
    
    body
    
    >
    
    

    
    </
    
    html
    
    >

 

JS代码

1.DOM对象与JQuery包装集

1.通过document.getElementById()，document.getElementsByName()等取的就是DOM对象或DOM对象集，前者取的是对象，后者取得DOM对象集

  
  

   
   var
   
    text11_dom
   
   =
   
   document.getElementById(
   
   "
   
   text11
   
   "
   
   );

   
   var
   
    text11_dom
   
   =
   
   document.getElementsByName(
   
   "
   
   text11
   
   "
   
   )[
   
   0
   
   ];

   
   var
   
    text11_dom
   
   =
   
   document.all.text11;
   
   //
   
   此处text11即可以是name值也可以是id值
   
   

   
   var
   
    text11_dom
   
   =
   
   document.all[
   
   10
   
   ];
2.如果要使用JQuery提供的函数首先要构造JQuery包装集，通过$()返回的即是JQuery包装集。 
  
  

   
   var
   
    text11_jquery
   
   =
   
   $(
   
   "
   
   #text11
   
   "
   
   );

2.JQuery包装集与DOM对象互相转换
1.DOM对象不能使用JQuery属性方法，但DOM对象可以通过$()转换成JQuery包装集

  
  

   
   var
   
    text11_dom
   
   =
   
   document.getElementById(
   
   "
   
   text11
   
   "
   
   );

   
   var
   
    text11_jquery
   
   =
   
   $(text11_dom);
2.JQuery包装集可以使用部分DOM对象的属性方法如.length，但也有个别属性方法不能使用如.value，可以通过在JQuery包装集后面加中括号及索引值获取对应DOM对象 
  
  

   
   var
   
    text11_dom
   
   =
   
   $(
   
   "
   
   #text11
   
   "
   
   )[
   
   0
   
   ];
3.在each循环时或触发事件时的this也是DOM对象 
  
  

   
   $(
   
   "
   
   #text11
   
   "
   
   ).click(
   
   function
   
   (){
    
   
   var
   
    text11_dom_value
   
   =
   
   this
   
   .value;
    alert(text11_dom_value);
});

3.$符号在JQuery中代表对JQuery对象的引用，JQuery的核心方法有四个
1.jQuery(html[,ownerDocument]):根据HTML原始字符串动态创建Dom元素 

  
  

   
   $(
   
   "
   
   <div><p>Hello!</p></div>
   
   "
   
   ).appendTo(
   
   "
   
   body
   
   "
   
   );
2.jQuery( elements ):将一个或多个Dom对象封装为jQuery包装集，就是上面的DOM对象与JQuery包装集转换
3.jQuery( callback ):$(document).ready()的简写方式 
  
  

   
   $(
   
   function
   
   (){
    alert(
   
   "
   
   Hello!
   
   "
   
   );
});
  4.JQuery(selector[,context]):在指定范围内查找符合条件的JQuery包装集，context为查找范围，context可以是DOM对象集也可以是JQuery包装集
在所有tr标签中查找id为text11元素的JQuery包装集 
  
  

   
   var
   
    text11_query
   
   =
   
   $(
   
   "
   
   #text11
   
   "
   
   ,
   
   "
   
   tr
   
   "
   
   );

===================jQuery选择器===================

1. 基础选择器 Basics
1.根据标签名进行选择

  
  

   
   var
   
    input_query
   
   =
   
   $(
   
   "
   
   input
   
   "
   
   );
2.根据id值选取 
  
  

   
   var
   
    text11_query
   
   =
   
   $(
   
   "
   
   #text11
   
   "
   
   );
 3.根据class值进行选取 
  
  

   
   var
   
    text11_query
   
   =
   
   $(
   
   "
   
   .text11
   
   "
   
   );
  4.同时选择多个符合条件的JQuery包装集用,号分隔条件 
  
  

   
   var
   
    text_query
   
   =
   
   $(
   
   "
   
   #text11,.text12
   
   "
   
   );
 5.选择所有DOM元素 
  
  

   
   var
   
    all_query
   
   =
   
   $(
   
   "
   
   *
   
   "
   
   );

2.层次选择器 Hierarchy
1.从所有tr标签中获取其下面的所有id值为text11的元素

  
  

   
   var
   
    text11_query
   
   =
   
   $(
   
   "
   
   tr #text11
   
   "
   
   );
 2.获取所有td标签下的所有直接input子元素 
  
  

   
   var
   
    input_query
   
   =
   
   $(
   
   "
   
   td>input
   
   "
   
   );
 3.获取id为text11元素后面的class为button11元素，只获取一个符合条件的元素。text11与button11在地位上属于同级关系 
  
  

   
   var
   
    button11_query
   
   =
   
   $(
   
   "
   
   #text11+.button11
   
   "
   
   );
  4.获取id为text11元素后面的所有class为button11的元素 
  
  

   
   var
   
    button11_query
   
   =
   
   $(
   
   "
   
   #text11~.button11
   
   "
   
   );

3.基本过滤器 Basic Filters
1.获取第一个input元素

  
  

   
   var
   
    input_query
   
   =
   
   $(
   
   "
   
   input:first
   
   "
   
   );
 2.获取最后一个input元素 
  
  

   
   var
   
    input_query
   
   =
   
   $(
   
   "
   
   input:last
   
   "
   
   );
  3.获取所有未被选中的input元素 
  
  

   
   var
   
    input_query
   
   =
   
   $(
   
   "
   
   input:not(:checked)
   
   "
   
   );
  4.第一个input元素算一，查找所有第奇数个的input元素 
  
  

   
   var
   
    input_query
   
   =
   
   $(
   
   "
   
   input:even
   
   "
   
   );
  5.从第二个input算起，查找所有第偶数个的input元素 
  
  

   
   var
   
    input_query
   
   =
   
   $(
   
   "
   
   input:odd
   
   "
   
   );
  6.查找索引为1的input元素，索引值从0算起 
  
  

   
   var
   
    input_query
   
   =
   
   $(
   
   "
   
   input:eq(1)
   
   "
   
   );
  7.查找索引大于0的所有input元素 
  
  

   
   var
   
    input_query
   
   =
   
   $(
   
   "
   
   input:gt(0)
   
   "
   
   );
  8.查找索引小于2的所有input元素 
  
  

   
   var
   
    input_query
   
   =
   
   $(
   
   "
   
   input:lt(2)
   
   "
   
   );
  9.获取页面所有<h>标题元素 
  
  

   
   var
   
    h_query
   
   =
   
   $(
   
   "
   
   :header
   
   "
   
   );
  10.获取所有正在执行动画效果的元素 
  
  

   
   var
   
    animated_query
   
   =
   
   $(
   
   "
   
   :animated
   
   "
   
   );

4. 内容过滤器 Content Filters
1.查找所有html内容含有"你好世界！"的h1元素

  
  

   
   var
   
    h1_query
   
   =
   
   $(
   
   "
   
   h1:contains('你好世界！')
   
   "
   
   );
  2.获取所有不含子标签或html内容为空的td元素 
  
  

   
   var
   
    td_query
   
   =
   
   $(
   
   "
   
   td:empty
   
   "
   
   );
  3.查找所有含有input子元素的td元素 
  
  

   
   var
   
    td_query
   
   =
   
   $(
   
   "
   
   td:has(input)
   
   "
   
   );
  4.查找所有含有子标签或有html内容的td元素 
  
  

   
   var
   
    td_query
   
   =
   
   $(
   
   "
   
   td:parent
   
   "
   
   );

5.可见性过滤器  Visibility Filters
1.查找所有隐藏的input元素

  
  

   
   var
   
    input_query
   
   =
   
   $(
   
   "
   
   input:hidden
   
   "
   
   );
  2.查找所有可见的input元素 
  
  

   
   var
   
    input_query
   
   =
   
   $(
   
   "
   
   input:visible
   
   "
   
   );

6.属性过滤器 Attribute Filters
1.查找所有含有id属性的input元素

  
  

   
   var
   
    input_query
   
   =
   
   $(
   
   "
   
   input[id]
   
   "
   
   );
  2.查找name值为text11的input元素 
  
  

   
   var
   
    input_query
   
   =
   
   $(
   
   "
   
   input[name='text11']
   
   "
   
   );
  3.查找name值不等于text11的所有input元素 
  
  

   
   var
   
    input_query
   
   =
   
   $(
   
   "
   
   input[name!='text11']
   
   "
   
   );
  4.查找name值以text开头的input元素 
  
  

   
   var
   
    input_query
   
   =
   
   $(
   
   "
   
   input[name^='text']
   
   "
   
   );
  5.查找name值以11结尾的所有input元素 
  
  

   
   var
   
    input_query
   
   =
   
   $(
   
   "
   
   input[name$='11']
   
   "
   
   );
  6.查找name值中含有ext的所有input元素 
  
  

   
   var
   
    input_query
   
   =
   
   $(
   
   "
   
   input[name*='ext']
   
   "
   
   );
  7.查找所有含有id属性并且name值中含有ext的input元素 
  
  

   
   var
   
    input_query
   
   =
   
   $(
   
   "
   
   input[id][name*='ext']
   
   "
   
   );

7.子元素过滤器 Child Filters
1.查找所有在父元素中的所有子元素中排第2的input元素
nth-child()里参数可选even在这里算偶数，odd在这里算奇数，n任意数即选取所有有父元素的input元素，数字是直接选排在第几个的input元素，第一个input元素算一

  
  

   
   var
   
    input_query
   
   =
   
   $(
   
   "
   
   input:nth-child(2)
   
   "
   
   );
2.查找所有在父元素中的所有子元素中排第一的input元素 
  
  

   
   var
   
    input_query
   
   =
   
   $(
   
   "
   
   input:first-child
   
   "
   
   );
  3.查找所有在父元素中所有子元素中排最后一个的input元素 
  
  

   
   var
   
    input_query
   
   =
   
   $(
   
   "
   
   input:last-child
   
   "
   
   );
  4.查找所有在父元素中是唯一子元素的input元素 
  
  

   
   var
   
    input_query
   
   =
   
   $(
   
   "
   
   input:only-child
   
   "
   
   );

8.表单选择器 Forms
1.查找所有input元素

  
  

   
   var
   
    input_query
   
   =
   
   $(
   
   "
   
   :input
   
   "
   
   );
 2.查找所有文本框元素 
  
  

   
   var
   
    text_query
   
   =
   
   $(
   
   "
   
   :text
   
   "
   
   );
  3.查找所有密码框元素 
  
  

   
   var
   
    password_query
   
   =
   
   $(
   
   "
   
   :password
   
   "
   
   );
  4.查找所有复选框 
  
  

   
   var
   
    checkbox_query
   
   =
   
   $(
   
   "
   
   :checkbox
   
   "
   
   );
  5.查找所有提交按钮元素 
  
  

   
   var
   
    submit_query
   
   =
   
   $(
   
   "
   
   :submit");
  6.查找所有图像域元素 
  
  

   
   var
   
    image_query
   
   =
   
   $(
   
   "
   
   :image
   
   "
   
   );
  7.查找所有重置按钮元素 
  
  

   
   var
   
    reset_query
   
   =
   
   $(
   
   "
   
   :reset
   
   "
   
   );
  8.查找所有按钮元素 
  
  

   
   var
   
    button_query
   
   =
   
   $(
   
   "
   
   :button
   
   "
   
   );
 9.查找所有文件域元素 
  
  

   
   var
   
    file_query
   
   =
   
   $(
   
   "
   
   :file
   
   "
   
   );

9.表单过滤器 Form Filters
1.查找所有可用的input元素

  
  

   
   var
   
    input_query
   
   =
   
   $(
   
   "
   
   input:enabled
   
   "
   
   );
  2.查找所有不可用的input元素 
  
  

   
   var
   
    input_query
   
   =
   
   $(
   
   "
   
   input:disabled
   
   "
   
   );
 3.查找所有选中的单选复选框 
  
  

   
   var
   
    input_query
   
   =
   
   $(
   
   "
   
   input:checked
   
   "
   
   );
 4.查找所有选中的下拉框 
  
  

   
   var
   
    option_query
   
   =
   
   $(
   
   "
   
   option:selected
   
   "
   
   );
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值