jQuery基础知识2--jQuery选择器

jQuery选择器是其核心功能,按照选择的元素类别可以分为4种:

  • 基本选择器:基于元素的id、CSS样式类、元素名称等使用基于css的选择器机制查找页面元素。

id选择器             根据元素id选择     $('#divid')选择id为divid的元素

标签选择器         根据元素的名称选择   $('a')选择所得<a>元素

css样式类选择器   根据应用到DOM元素的CSS类进行选择    $('.beg')选择所有css类为beg的元素

*通配符选择器       选择所有元素,使用通配符*   $('*')选择页面所有元素

selector1,selector2,selector3    可以将几个选择器用“,”分隔开,会同时选择这个选择器匹配的内容  $('#divId,a,.beg')

  • 层次选择器:通过DOM元素间的层次关系获取页面元素。

ancestor descendant(后代选择器)      $('.beg div')选择css类为beg的元素中的所有<div>元素

parent>child(父子选择器)                    $('.myList>li')选择css类为myList元素中的直接子节点<li>对象

prev+next(相邻选择器)    prev和next是两个同级别的元素,选中在prev元素后面的next元素    $('#hid+img')选择img元素

prev~siblings(平级选择器)  选择prev后面的根据siblings过滤的元素   $('#som~[title]')选择id为som后面所有带属性title的元素

  • 过滤选择器:根据某类过滤规则进行元素的匹配。

        基本过滤选择器

:first   匹配找到的第一个元素   $('tr:first')查找表格第一行

:last   匹配找到的最后一个元素   $('tr:last')查找表格的最后一行

:not(selector)  去除所有与给定选择器匹配的元素   $('input:not(:checked)')查找所有未选中的input元素

:odd  匹配所有牵引值为奇数的元素,从0开始。    $('input:odd')查找表格的1、3、5...行

:even 匹配所有牵引值为偶数的元素,从0开始。 $('tr:even')查找表格的2、4、6...行

:eq(index) 匹配一个给定索引值的元素   $('tr:eq(1)')查找第二行

:gt(index) 匹配所有大于给定索引值的元素,从0开始   $('tr:gt(0)')查找第二行、第三行......

:lt(index) 匹配结果集中索引小于N的元素   $('tr;lt(2)')查找第一行、第二行

:header  选择所有的h1/h2/h3一类的header标签  $(':header'),css('background','red')给页面内所有标题加上背景色

:animated  匹配所有正在执行动画效果的标签   $('#run').click(function(){$('div:not(:animated)').animate({left:'+=20'},1000);});针对不在执行动画效果的元素执行一个动画效果。

       内容过滤选择器

:contains(text)   匹配包含给定文本的元素  $("div:contains('John')")查找所有包含‘John’的div元素。

:empty  匹配所有不包含子元素或者文本的空元素   $('td:empty')查找所有不包含子元素或者文本为空的td元素。

:has(selector) 匹配含有选择器所匹配的元素的元素 $('div:has(p)').addClass('test')给所有包含p元素的div元素添加一个test类。

:parent  匹配含有子元素或者文本的元素   $('td:parent')查找所有含有子元素或者文本的td元素

       可见性过滤选择器

:hidden   匹配所有的不可见元素     $('tr:hidden')查找所有不可见的tr元素

会匹配如下几种格式的元素:

  • 具有css属性display属性值为none的元素
  • HTML表单元素中的隐藏域即type='hidden'的元素
  • 宽度和高度被显示设置为0的元素
  • 由于祖先元素为隐藏而导致无法在页面上的元素

:visible    匹配所有的可见元素        $('tr:visible')查找所有可见的tr元素

指在屏幕上占用布局空间的元素,可见性元素的宽度和高度大于0时显示。

           css属性visibility:hidden或者是opacity:0被认为可见,因为他们仍然占用布局空间。

        属性过滤选择器

 [attribute]  匹配包含给定属性的元素    $('div[id]')查找所有含有id属性的div元素

 [attribute=value]  匹配给定的属性是某个特定值的元素  $("input[name='newsletter']").attr('checked',true);

[attribute!=value]  匹配给定的属性不包含某个特定值的元素  $("input[name!='newsletter']").attr('checked',true);

[attribute^=value] 匹配给定的属性是以某些值开始的元素    $("input[name^='new']")

[attribute$=value] 匹配给定的属性是以某些值结尾的元素    $("input[name$='letter']")

[attribute*=value] 匹配给定的属性是以包含某些值的元素    $("input[name*='man']")

[attribute1][...][attributeN] 复合属性选择器,需要同时满足多个条件  $("input[id][name$='nam']")找到所有含有id属性,并且它的name属性是以man结尾的。

       子元素过滤选择器

:nth-child(index/even/odd/equation)  匹配其父元素下的第N个子元素或奇偶元素,从1开始。  $("ul li:nth-child(3n+1)")

:first-child  匹配第一个子元素   $("ul li:first-chlid")  在每个ul中查找第一个li

:last-child  匹配最后一个子元素  $("ul li:last-chlid")

:only-child  如果某个元素值父元素中惟一的子元素,那将会被匹配。如果父元素中含有其他元素,那将不会被匹配。$("ul li:only-chlid") 在ul中查找是唯一子元素的li 

     表单对象属性性过滤器

:enabled  匹配所有可用元素   $('input:enabled')查找所有可用的input元素

:disabled  匹配所有不可用元素  $('input:disabled')查找所有不可用的input元素

:checked  匹配所有被选中元素(复选框、单选框等,不包括select中的option)  $('input:checked')查找所有选中的复选框、单选按钮

:selected  匹配所有选中的option元素  $('select option:selected')查找所有选中的选项元素

  • 表单选择器:可以在页面上快速定位某类表单对象。

:input   匹配所有input、textarea、select和button元素     $(':input')查找所有的input元素

:text     匹配所有的文本框   $(':text')查找所有文本框

:password  匹配所有的密码框  $(':password')查找所有密码框

:radio   匹配所有单选按钮     $(':radio')查找所有单选按钮

:checkbox   匹配所有复选框  $(':checked')查找所有复选框

:submit   匹配所有提交按钮  $(':submit')查找所有提交按钮

:image  匹配所有图像域  $(':image')匹配所有图像域

:reset   匹配所有重置按钮 $(':reset')匹配所有重置按钮

:button  匹配所有按钮  $(':button')匹配所有按钮

:file    匹配所有文档域  $(':file')查找所有文件域

 

 

 

猜你喜欢

转载自blog.csdn.net/weixin_42210229/article/details/81230730
今日推荐