精华内容
下载资源
问答
  • Jquery常用选择器

    2018-12-06 23:51:00
    什么是Jquery常用选择器?  jQuery选择器完全继承了CSS风格.利用JQuery选择器,可以非常便捷快速地找出特定的DOM元素,然后为它们添加响应的行为,而无需担心浏览器是否支持这一选择器 JQuery选择器的优势  简洁的...

    什么是Jquery常用选择器?

      jQuery选择器完全继承了CSS风格.利用JQuery选择器,可以非常便捷快速地找出特定的DOM元素,然后为它们添加响应的行为,而无需担心浏览器是否支持这一选择器

    JQuery选择器的优势

      简洁的写法

      支持CSS1到CSS3

      完善的处理机制

    常用放入基本选择器

    #id 选择器

    jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

    $("#test")

    .class 选择器

    jQuery 类选择器可以通过指定的 class 查找元素

    $(".test") 

    classname

      根据给定的元素名匹配元素

    *:

      匹配所有的元素

    select1,select2......

      将每一个匹配到的元素合并后一起返回

    常用的层次选择器

      ancestor descendant:选取ancestor元素里的所有descendant元素

      parent>child:获取parent元素下的child元素

      prev+next:选取紧接在prev元素后的next元素

      prev~siblings:选取prev元素之后的所有siblings元素

     

    更多实例

    常用的基本过滤选择器

     

     

     

    转载于:https://www.cnblogs.com/tanlei-sxs/p/10080507.html

    展开全文
  • JQuery常用选择器

    2020-12-07 22:23:33
    JQuery常用选择器 语法 选择器类型 备注 $("#id", “.class”) 复合选择器 – $(div p span) 层级选择器 div下的p元素中的span元素 $(div>p) 父子选择器 div下的所有p元素 $(div+p) 相邻元素选择器...
    语法 选择器类型 备注
    $("#id", “.class”) 复合选择器
    $(div p span) 层级选择器 div下的p元素中的span元素
    $(div>p) 父子选择器 div下的所有p元素
    $(div+p) 相邻元素选择器 div后面的p元素(仅一个p)
    $(div~p) 兄弟选择器 div后面的所有p元素(同级别)
    $(.p:last) 类选择器+过滤选择器 第一个和最后一个(first 或者 last)
    $("#mytable td:odd") 层级选择+过滤选择器 奇偶(odd 或者 even)
    $(“div p:eq(2)”) 索引选择器 div下的第三个p元素(索引是从0开始)
    $(“a[href=‘www.baidu.com’]”) 属性选择器
    $(“p:contains(test)”) 内容过滤选择器 包含text内容的p元素
    $(":emtyp") 内容过滤选择器 所有空标签(不包含子标签和内容的标签)parent 相反
    $(":hidden") 所有隐藏元素 visible
    $(“input:enabled”) 选取所有启用的表单元素
    $(":disabled") 所有不可用的元素
    $(“input:checked”) 获取所有选中的复选框单选按钮等
    $(“select option:selected”) 获取选中的选项元素
    展开全文
  • jQuery常用选择器

    2019-06-11 20:02:01
    jQuery常用选择器(jQuery兼容css选择器,因此处也可以当做css常用选择器) 1、id选择器 $("#id") 2、类选择器 $(".class") 3、子代选择器(子) $("#id>xx") 4、后代选择器(子子孙孙) $("#id xx") 5...

    jQuery常用选择器(jQuery兼容css选择器,因此处也可以当做css常用选择器)

    1、id选择器

    $("#id")

    2、类选择器

    $(".class")

    3、子代选择器(子)

    $("#id>xx")

    4、后代选择器(子子孙孙)

    $("#id xx")

    5、并集选择器(选择多个元素)

    $("#id,.class,xx")

    6、交集选择器(同时满足选择条件)

    $("#id.classxxx")

    7、标签选择器

    $("div")

    展开全文
  • jquery常用选择器

    2019-10-17 16:51:48
    jquery常用选择器 基本选择器: <script> $(function(){ //<"改变id为one元素的背景颜色为粉色"> $("#b1").click(function(){ $("#one").css("backgroundColor","pink"); ...

    jquery常用选择器

    基本选择器:

    <script>
            $(function(){
                //<"改变id为one元素的背景颜色为粉色">
                $("#b1").click(function(){
                    $("#one").css("backgroundColor","pink");
                });
                //<"改变所有元素为div元素的背景颜色为粉色">
                $("#b2").click(function(){
                    $("div").css("backgroundColor","pink");
                });
                //<"改变class为two元素的背景颜色为粉色">
                $("#b3").click(function(){
                    $(".two").css("backgroundColor","pink");
                });
                //<"改变所有元素为<span>元素和id为two的背景颜色为粉色">
                $("#b4").click(function () {
                    $("span,#two").css("backgroundColor","pink");
                });
                //<"改变所有元素为<body>内所有的div的背景颜色为粉色">
                $("#b5").click(function () {
                    $("body div").css("backgroundColor","pink");
                });
                //<"改变所有元素为<body>内子div的背景颜色为粉色">
                $("#b6").click(function () {
                    $("body > div").css("backgroundColor","pink");
                });
            });
        </script>
    

    属性选择器:

    <script>
        $(function () {
            //<"改变含有属性title的div元素的背景颜色为粉色">
            $("#b1").click(function () {
                $("div[title]").css("backgroundColor","pink");
            });
            //<"改变title属性值等于test的div的背景颜色为粉色">
            $("#b2").click(function () {
                $("div[title='test']").css("backgroundColor","pink");
            });
            //<"改变title值不等于test的div的背景颜色为粉色">
            $("#b3").click(function () {
                $("div[title!='test']").css("backgroundColor","pink");
            });
            //<"改变title值以ti开头的div的背景颜色为粉色">
            $("#b4").click(function () {
                $("div[title^='ti']").css("backgroundColor","pink");
            });
            //<"改变title值以st结束的div的背景颜色为粉色">
            $("#b5").click(function () {
                $("div[title$='st']").css("backgroundColor","pink");
            });
            //<"改变title值含有es的div的背景颜色为粉色">
            $("#b6").click(function () {
                $("div[title*='es']").css("backgroundColor","pink");
            });
            //<"改变属性有id的div并且title值含有es的div的背景颜色为粉色">
            $("#b7").click(function () {
                $("div[id][title*='es']").css("backgroundColor","pink");
            });
        });
    </script>
    

    过滤选择器:

    <script>
        $(function () {
            //<"改变第一个div的背景颜色为粉色">
            $("#b1").click(function () {
               $("div:first").css("backgroundColor","pink");
            });
            //<"改变最后一个div的背景颜色为粉色">
            $("#b2").click(function () {
                $("div:last").css("backgroundColor","pink");
            });
            //<"改变class不为one的所有div的背景颜色为粉色">
            $("#b3").click(function () {
                $("div:not(.one)").css("backgroundColor","pink");
            });
            //<"改变索引值为偶数的div的背景颜色为粉色"> (索引从0开始)
            $("#b4").click(function () {
                $("div:even").css("backgroundColor","pink");
            });
            //<"改变索引值为奇数的div的背景颜色为粉色">
            $("#b5").click(function () {
                $("div:odd").css("backgroundColor","pink");
            });
            //<"改变索引值大于3的div的背景颜色为粉色">
            $("#b6").click(function () {
                $("div:gt(3)").css("backgroundColor","pink");
            });
            //<"改变索引值等于3的背景颜色为粉色">
            $("#b7").click(function () {
                $("div:eq(3)").css("backgroundColor","pink");
            });
            //<"改变索引值小于3的背景颜色为粉色">
            $("#b8").click(function () {
                $("div:lt(3)").css("backgroundColor","pink");
            });
            //<"改变所有标题元素的背景颜色为粉色" (标题元素指的是H1-H6)>
            $("#b9").click(function () {
                $(":header").css("backgroundColor","pink");
            });
        });
    </script>
    

    表单选择器:

    <script>
        $(function () {
            //<"利用jQuery对象的val()方法改变表单内容,可用input的值"> enabled
            $("#b1").click(function () {
                $("input[type='text']:enabled").val("aaa");
            });
            //<"利用jQuery对象的val()方法改变表单内容,不可用input的值"> disabled
            $("#b2").click(function () {
                $("input[type='text']:disabled").val("bbb");
            });
            //<"利用jQuery对象的length属性获取复选框选中的个数,可用input的值"> checked length
            $("#b3").click(function () {
                alert($("input[type='checkbox']:checked").length);
            });
            //<"利用jQuery对象的length属性获取下拉框选中的个数,可用input的值">
            $("#b4").click(function () {
                alert($("select > option:selected").length);
            });
        });
    </script>
    

    在这里插入图片描述

    展开全文
  • jQuery 常用选择器

    2021-03-16 17:52:30
    文章目录jQuery 选择器基础选择器层级选择器属性选择器伪类选择器内容和可见性选择器表单元素选择器表单对象选择器jQuery 筛选器基础筛选器筛选器方法 jQuery 选择器jQuery 中选择元素,就是暴露在全局的两个...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,890
精华内容 1,156
关键字:

jquery常用选择器