jQuery有什么选择器-创新互联

小编给大家分享一下jQuery有什么选择器,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

彝良网站建设公司成都创新互联,彝良网站设计制作,有大型网站制作公司丰富经验。已为彝良数千家提供企业网站建设服务。企业网站搭建\外贸营销网站建设要多少钱,请找那个售后服务好的彝良做网站的公司定做!

1、jQuery介绍
  (1)jQuery是什么?
    是一个js框架,其主要思想是利用jQuery提供的选择器查找要操作的节点,然后将找到的节点封装成一个jQuery对象。封装成jQuery对象的目的有两个:
  一是为了兼容不同的浏览器,另外,也简化了代码。
  (2)编程的基本步骤  first.html
    step1, 利用选择器查找节点。选择器类似与css选择器。
    step2, 调用jQuery对象的方法或者属性。
  (3) jQuery对象与dom对象之间的相互转换 first.html。
    a,  dom对象 ---> jQuery对象
      $(dom对象)
    b, jQuery对象 ---> dom对象
        方式一:    $obj.get(0)
        方式二:    $obj.get()[0]   

2、选择器
  1)基本选择器  selector/s1.html
    ID选择器:$('#id)
    类选择器:$('.class')
    标签选择器:$('element) 如:$('div')
    群组选择器:$('selector1,selector2..selectorn')
    通用选择器:$('*')
  2)层次选择器  selector/s2.html
    (1)子元素选择器
      $("parent > child");
      查找父元素下面的所有子元素,不包括孙元素等。
    (2)后代元素选择器
      $("ancestor descedant");
      查找 ancestor 元素的所有子元素、孙元素、重孙元素等。
    (3)紧邻同辈元素选择器
      $("prev+next");
      同辈,且紧跟在 prev 元素后面的元素 next 元素
    (4)相邻同辈元素选择器
    $("prev~siblings");
    跟在 prev 后且同辈的所有 siblings 元素
    注:siblings是过滤器
        这里要说下,由于最后2个用的比较少,一般会用其他选择器替代,请看下面:
      $("prev + next")等价于next()
      $("prev ~ siblings")等价于nextAll()

  3)过滤选择器
    (1)基本过滤选择器 selector / s3.html
      :first --> $('p:first')第一个p元素
      :last --> $('p:last')最后一个p元素
      :not(selector) --> $("input:not(:checked)")  过滤掉checked的选择器的所有的input元素
      :even --> $("tr:even")选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始)
      :odd --> $("tr:odd")选择所有的tr元素的第1,3,5... ...个元素
      :eq(index) --> $("td:eq(2)")选择所有的td元素中序号为2的那个td元素
      :gt(index) --> $("td:gt(4)")选择td元素中序号大于4的所有td元素
      :lt(index) --> $("td:ll(4)")选择td元素中序号小于4的所有的td元素
    (2)内容过滤选择器 selector / s4.html
      :contains(text) 匹配包含给定文本的元素
      :empty 匹配所有不包含子元素或者文本的空元素
      :has(selector) 匹配含有选择器所匹配的元素的元素
      :parent 匹配含有子元素或者文本的元素
      例:
      $("div:contains('John')") 选择所有div中含有John文本的元素
      $("td:empty")  选择所有的为空(也不包括文本节点)的td元素的数组
      $("div:has(p)")  选择所有含有p标签的div元素
      $("td:parent")  选择所有的以td为父节点的元素数组       
    (3)可视化过滤选择器 selector /s5.html
      :hidden 匹配所有不可见元素,或者type为hidden的元素
      :visible 匹配所有的可见元素
      例:
      $("div:hidden")     选择所有的被hidden的div元素
      $("div:visible")     选择所有的可视化的div元素
    (4)属性过滤选择器  selector /s6.html
      [attribute]  
      [attribute=value]
      [attribute!=value]
      例:
      $("div[id]") 选择所有含有id属性的div元素
      $("input[name='newsletter']") 选择所有的name属性等于'newsletter'的input元素
      $("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素
      $("input[name^='news']")  选择所有的name属性以'news'开头的input元素
      $("input[name$='news']")  选择所有的name属性以'news'结尾的input元素
      $("input[name*='man']")  选择所有的name属性包含'news'的input元素
      $("input[id][name$='man']")  可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素
    (5)子元素过滤选择器 selector /s7.html
      :nth-child(index/even/odd):$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")
      $("div span:first-child")      返回所有的div元素的第一个子节点的数组
      $("div span:last-child")      返回所有的div元素的最后一个节点的数组
      $("div button:only-child")    返回所有的div中只有唯一一个子节点的所有子节点的数组       
    (6)表单对象属性过滤选择器(表单元素过滤选择器) selector /s8.html
      $(":enabled") 选择所有的可操作的表单元素
      $(":disabled") 选择所有的不可操作的表单元素
      $(":checked") 选择所有的被checked的表单元素
      $("select option:selected") 选择所有的select 的子元素中被selected的元素
  4)表单选择器
    $(":input") 选择所有的表单输入元素,包括input, textarea, select 和 button
    $(":text") 选择所有的text input元素
    $(":password") 选择所有的password input元素
    $(":radio") 选择所有的radio input元素
    $(":checkbox") 选择所有的checkbox input元素
    $(":submit") 选择所有的submit input元素
    $(":p_w_picpath") 选择所有的p_w_picpath input元素
    $(":reset") 选择所有的reset input元素
    $(":button") 选择所有的button input元素
    $(":file") 选择所有的file input元素
    $(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域


以上是“jQuery有什么选择器”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网页题目:jQuery有什么选择器-创新互联
URL网址:http://bzwzjz.com/article/dssosj.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 营销型网站建设 盐亭网站设计 手机网站建设 网站建设方案 定制级高端网站建设 营销型网站建设 高端网站设计 做网站设计 网站设计公司 成都网站制作 手机网站制作 企业网站设计 成都网站设计公司 成都网站建设 梓潼网站设计 温江网站设计 网站建设 攀枝花网站设计 网站建设方案 成都网站建设 成都商城网站建设 网站建设方案