jquery选择器

 

简单选择器

  • id
  • 元素/标签
  • *
  • 复合(sel1,sel2)逗号隔开

层次选择器

  • s1 s2;后代选择器,空格隔开
  • p>c;子代选择器;不包括孙代及以下
  • p+next ;相邻选择器
  • p~sub;兄弟选择器,同一父级下并列子代

表单选择器,表单form下元素

  • :input;包括 input,textarea,select
  • :text;文本框
  • :password;密码框
  • :radio;单选按钮
  • :checkbox;复选框
  • :submit;提交按钮
  • :image;图像域
  • :reset;重置按钮
  • :button;按钮
  • :file;文件域
  • 例如:$("form:input").val();

***过滤选择器(重要)

    1. 表单对象属性过滤选择器

      • :enabled;属性为可用的标签元素
      • :disabled;属性为不可用的标签元素
      • :checked;属性为被选中的元素
      • :selected;被选择中option的元素;$("select option:selected")
    2. 子元素过滤选择器

      • :nth-child(eq(n)|even|odd|index);子元素,索引从1开始
      • :first-child;第一个子元素
      • :last-child;最后一个子元素
      • :only-child;获取父元素中仅有一个子元素的
    3. 属性过滤选择器

      • [ attr ];所有拥有该属性的元素
      • [ attr = val ];属性的值为val的元素
      • [ attr != val ];属性值不等于val的元素
      • [ attr ^=val ];以属性值为val开始的元素
      • [ attr $= val ];以属性值为val结束的元素
      • [ attr *= val ];含有val值的元素
      • [ attr1 ][ attr2 ];同时满足两个属性的元素;$("div[ id = 'eg1'][ title = 'eg2' ]").show();
    4. 可见性过滤选择器

      • :hidden;获取所有不可见,或者type=hidden的元素
      • :visible;获取所有可见元素
    5. 内容过滤选择器

      • :content(text);获取包含指定文本的元素
      • :empty;        不含或空文本的元素
      • :has(selector);含有某选择器的元素;$("div:has('span')").show();
      • :parent;含有子元素或文本的元素
    6. 简单过滤选择器

      • first()或:first;
      • last()或:last;
      • :not(seletor);
      • :even;索引为偶数,索引从0开始
      • :odd;索引为奇数,从0开始
      • :eq(index);给定索引,从0开始
      • :gt(index);大于索引,从0开始
      • :lt(index);小于索引,从0开始
      • :header;标题
      • :animatex;正在执行动画的
      • jQuery 选择器

        在前面的章节中,我们展示了一些有关如何选取 HTML 元素的实例。

        关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素。

        jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。

        选择器允许您对 HTML 元素组或单个元素进行操作。

        在 HTML DOM 术语中:

        选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。

        jQuery 元素选择器

        jQuery 使用 CSS 选择器来选取 HTML 元素。

        $("p") 选取 <p> 元素。

        $("p.intro") 选取所有 class="intro" 的 <p> 元素。

        $("p#demo") 选取所有 id="demo" 的 <p> 元素。

        jQuery 属性选择器

        jQuery 使用 XPath 表达式来选择带有给定属性的元素。

        $("[href]") 选取所有带有 href 属性的元素。

        $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

        $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

        $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

        jQuery CSS 选择器

        jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

        下面的例子把所有 p 元素的背景颜色更改为红色:

        实例

        $("p").css("background-color","red");

         

posted @ 2018-07-02 13:54  H丶  阅读(124)  评论(0编辑  收藏  举报