码迷,mamicode.com
首页 > Web开发 > 详细

JQuery选择器

时间:2016-09-13 22:12:29      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:

  我们在使用JavaScript操作html元素时,必须要选中该元素,在原生JS中经常用一下几种方式:

  document.getElementById(id)

  getElementsByTagName(name)

  getElementsByName()

  上述的方式过于简单,而JQuery库最大的特点就是提供得心应手的html元素检索方式。

  JQuery的强大检索功能是基于以下核心函数提供的:

  JQuery(expression,[context]);

参数expression,我们称为选择器表达式。JQuery的选择器表达式是基于CSS选择器规则定义的,实现了CSS1~CSS3中绝大部分的选择器规则。所以,只要熟悉CSS选择器,使用JQuery检索元素就没有学习负担。

  下面列出一些JQuery的选择器

    一、基础选择器

      1.*(通用元素选择器,可匹配任何元素)

      2.E(标签选择器,匹配所有使用E标签的元素)

      3..class(class选择器,匹配所有class属性中包含info的元素)

      4.#id(id选择器,匹配所有id属性等于footer的元素)

    二、选择器过滤

      1.:first(找到的第一个元素)

      2.:last(找到的最后一个元素)

      3.not(selector)(去除所有与给定选择器匹配的元素)

      4.:even(所有索引值为偶数的元素,从0开始)

      5.:odd(所有索引为技术的元素,从0开始)

      6.eq(index)(匹配一个给定索引值的元素)

      7.gt(index)(匹配所有大于给定索引值的元素)

      8.lt(index)(匹配所有小于给定索引值的元素)

      9.:header(选择所有h1,h2,h3一类的header标签)

    三、可见性选择器:

      1.:hidden(查找所有不可见的元素)

      2.:visible(查找所有课件的元素)

    四、属性选择器:

      1.[attr](匹配包含给定属性的元素)

      2.[attr=value](匹配给定的属性是某个特定值的元素)

      3.[attr!=value](匹配给定的属性是不包含某个特定值的元素)

      4.[attr^=value](给定的属性事以某些值开始的元素)

      5.[attr$=value](给定的属性是以某些值结尾的元素)

      6.[attr*=value](给定的属性是包含某些值的元素)

      7.[attrCon1]

       [attrCon1]

       [attrConN](符合属性选择器,需要同时满足多个条件时使用)

    五、子元素选择器

      1.:nth-child(匹配其父元素下的第N个子或奇或偶元素)

      2.:first-child(第一个子元素)

      3.:last-child(最后一个子元素)

      4.:only-child(如果某个元素是父元素中唯一的子元素,那将会被匹配)

    六、表单选择器

      1.:input(所有input,textarea,select,button元素)

      2.:text(所有文本框)

      3.password(所有密码框)

      4.:radio(所有单选按钮)

      5.:checkbox(所有复选框)

      6.:submit(所有提交按钮)

      7.:image(所有图像域)

      8.:reset(所有重置按钮)

      9.:button(所有按钮)

      10.:file(所有文件域)

    七、表单属性选择器

      1.:enabled(所有可用元素)

      2.:disabled(所有不可用元素)

      3.:checked(所有被选中元素)

      4.:selected(所有被选中的option元素)

JQuery选择器

标签:

原文地址:http://www.cnblogs.com/nomercy/p/5869705.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!