zoukankan      html  css  js  c++  java
  • jQuery的一些选择器

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

    jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。

    jQuery 中所有选择器都以美元符号开头:$()。

    一、元素选择器。

    例如:

    $("p").css("backgroundColor","red");

    //选取所有P标签的背景色为红色

    二、id选择器。

    例如:

    $(document).ready(function(){
      $("button").click(function(){
        $("#div1").hide();
      });
    });

    //选择id为div1的元素使其点击隐藏

    三、类选择器

    例如:

    $(document).ready(function(){
      $("button").click(function(){
        $(".div1").hide();
      });
    });

    //选择类为div1的元素使其点击隐藏

    四、全局选择器。

    例如:

    $(document).ready(function(){
      $("button").click(function(){
        $("*").hide();
      });
    });

    //点击后所有元素都会隐藏

    五、this选择器。

    例如:

    $(document).ready(function(){
      $("button").click(function(){
        $(this).hide();
      });
    });

    //点击后当前的元素会隐藏

    六、子类选择器。

    例如:

    $(document).ready(function(){
      $("button").click(function(){
        $("p.class1").hide();
      });
    });

    //点击一个按钮后.class1下的P标签会隐藏

    七、基本的筛选选择器

    :eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素,根据之前匹配的元素在进一步筛选,注意jQuery合集都是从0开始索引

    gt是一个段落筛选,从指定索引的下一个开始,gt(1) 实际从2开始

    例如:

    $(document).ready(function(){
      $("button").click(function(){
        $(".class:first").hide();

    //括号内:eq(), :lt(), :gt(), :even, :odd一样可以进行查找或者选取。
      });
    });

     //选择.class类下的第一个元素使其隐藏。

    八、内容筛选选择器。

    $(":contains(text)")。选择所有包含指定文本的元素。

    $(":parent")。选择所有含有子元素或者文本的元素。

    $(":empty")。选择所有没有子元素的元素(包含节点)。

    $(":has(selector)")。选择元素中至少包含指定选择器的元素。

    例如:

    $(".div:contains(':contains')").css("color", "#CD00CD");

    //查找所有class='div'中DOM元素中包含"contains"的元素节点,并添加颜色

    九、可见性筛选选择器。

    $(":visible")。选择所有显示的元素。

    $(":hidden")。选择所有隐藏的元素。

    不在文档中的元素是被认为是不可见的,如果当他们被插入到文档中,jQuery没有办法知道他们是否是可见的,因为元素可见性依赖于适用的样式.

    十、属性筛选选择器。

    $("[attribute|='value']")。选择指定属性值等于给字符串或以该字符串为前缀的元素。

    $("[attribute*='value']")。选择指定属性具有包含一个给定的子字符串的元素。

    $("[attribute~='value']")。选择指定属性用空格分隔的值中包含一个给定值的元素。

    $("[attribute='value']")。选择指定属性是给定值的元素。

    $("[attribute!='value']")。选择不存在指定属性,或者指定的属性值不等于给定值的元素。

    $("[attribute^='value']")。选择指定属性是以给定字符串开始的元素。

    $("[attribute$='value']")。选择指定属性是以给定值结尾的元素(区分大小写)。

    $("[attribute]")选择所有具有指定属性的元素(可以是任何值)。

    $("[attributeFilterL][attributeFilterN]")。选择匹配所有指定的属性筛选器的元素。

    十一、表单元素选择器。

    $(":input")。括号内基本可以填写表单元素的所有属性。

    例如:

    $(":input").css("border", "1px groove red");

    //查找表单内所有 input 元素

    十二、表单对象属性筛选选择器。

    除了表单元素选择器外,表单对象属性筛选选择器也是专门针对表单元素的选择器,可以附加在其他选择器的后面,主要功能是对所选择的表单元素进行筛选。

    $(":enabled")选择可用的表单元素。

    $(":disabled")选择不可用的表单元素。

    $(":checked")选取被选中的input元素。

    $(":selected")选取被选中的option元素。

    以上就是我总结出的一些jQuery基本选择器(部分转自慕课网),希望能对你有所帮助。

  • 相关阅读:
    IXmlSerializable With WCFData Transfer in Service Contracts
    Difference Between XmlSerialization and BinarySerialization
    Using XmlSerializer (using Attributes like XmlElement , XmlAttribute etc ) Data Transfer in Service Contracts
    Introducing XML Serialization
    Version Tolerant Serialization
    Which binding is bestWCF Bindings
    Data Transfer in Service Contracts
    DataContract KnownTypeData Transfer in Service Contracts
    Using the Message ClassData Transfer in Service Contracts
    DataContract POCO SupportData Transfer in Service Contracts
  • 原文地址:https://www.cnblogs.com/myself-clf/p/5869655.html
Copyright © 2011-2022 走看看