• 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基本选择器(部分转自慕课网),希望能对你有所帮助。

  • 相关阅读:
    linux | 管道符、输出重定向
    php 升级php5.5 、php7
    mysql 启动失败
    centos7.2安装phpmyadmin
    php file_get_contents失败[function.file-get-contents]: failed to open stream: HTTP request failed!解决
    go println与printf区别
    前端 head 中mate 详解
    centos 7 安装mysql
    iOS数据持久化—数据库SQLite模糊查询
    C 语言字符串和格式化输入与输出
  • 原文地址:https://www.cnblogs.com/myself-clf/p/5869655.html
Copyright © 2020-2023  润新知