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

    千次阅读 2018-09-22 23:26:29
    jQuery中常用选择器,有   $('标签名') 标签选择器 $('#id名') id选择器 $('.class名') 类选择器 层次选择器; $('A B') 获得A元素内部的所有子元素B $('A > B') 获得A元素内部的第一层所有子...

    jQuery中常用的选择器,有

     


    $('标签名')       标签选择器

    $('#id名')        id选择器

    $('.class名')     类选择器


    层次选择器;

    $('A B') 获得A元素内部的所有子元素B

    $('A > B') 获得A元素内部的第一层所有子元素B

    $('A + B') 获得A元素同级下一个B元素

    $('A ~ B') 获得A元素后面的所有同级B元素


    属性选择器;

    $('A[属性名]') 获得有属性名的A元素‘;

    $('A[属性名=值]') 获得属性名 等于 值的A元素;

    $('A[属性名!=值]') 获得属性名 不等于 值的A元素;


    过滤选择器;

    $('A:first') 过滤出第一个;

    $('A:last') 过滤出最后一个;

    $('A:not(选择器)') 排除指定的元素;


    第一排使用 层级选择器,第二排按钮 使用过滤选择器,来实现需求; 

    (1)创建视图;

    (2)使用选择器完成需求;

     (1)head部分;

    <head>
        <meta charset="UTF-8">
        <title>选择器</title>
        <script src="../../../config/jquery-3.3.1.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $("#b1").click(function () {
                    $("div").css("background", "red");
                });
                $("#b2").click(function () {//
                    $("body>div").css("background", "red");
                });
                var inputs = $("input");
                inputs.eq(2).click(function () {
                    $("#one+div").css("background", "red")
                });
                inputs.eq(3).click(function () {
                    $("#two~div").css("background", "red")
                });
            });
        </script>
        <!--属性选择器-->
        <script type="text/javascript">
    
        </script>
        <!--过滤选择器  "A:first" ,"A:not(选择器)"-->
        <script type="text/javascript">
            $(function () {
                var inputs=$("input");
                inputs.eq(4).click(function () {//这是下标为4的input标签
                    $("div:first").css("background","blue");
                });
                inputs.eq(5).click(function () {//这是下标为5的input标签
                    $("div:last").css("background","blue");
                });
                inputs.eq(6).click(function () {//这是下标为6的input标签
                    $("div:not(.one)").css("background","blue");
                });
            });
    
        </script>
    
        <style type="text/css">
            span, div {
                width: 150px;
                height: 150px;
                float: left;
                border: black solid 1px;
                margin: 10px;
                background-color: lightskyblue;
            }
    
            .mini {
                width: 50px;
                height: 50px;
                float: left;
                border: black solid 1px;
                background-color: pink;
            }
        </style>
    </head>

    (2)body部分;

    <body>
    <input type="button" value="改变所有 <div>bgcolor红色" id="b1">
    <input type="button" value="改变第一个子 <div>bgcolor红色" id="b2">
    <input type="button" value="改变 id=one 的下一个 <div>bgcolor红色" id="b3">
    <input type="button" value="改变 id=two后面的所有兄弟<div>bgcolor红色" id="b4">
    <hr/>
    
    <input type="button" value=" 改变第一个 div 元素的背景色为 蓝色" id="bt1">
    <input type="button" value=" 改变最后一个 div 元素的背景色为 蓝色" id="bt2">
    <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 蓝色" id="bt3">
    <hr/>
    <div id="one">
        <div class="mini">1-1</div>
    </div>
    <div id="two">
        <div class="mini">2-1</div>
        <div class="mini">2-2</div>
    </div>
    <div class="one">
        <div class="mini">3-1</div>
        <div class="mini">3-2</div>
    </div>
    <div class="one">
        <div class="mini">4-1</div>
        <div class="mini">4-2</div>
        <div class="mini">4-3</div>
    </div>
    <span class="spanone">span</span>
    </body>

    筛选选择器;

     

    jq对象.parent() 当前元素的亲生父级元素

    jq对象.parents() 当前元素的所有父级元素

    jq对象.siblings() 选出除了自己以外的所有同级元素,兄弟姐妹选择器

    jq对象.children() 当前元素的第一层子元素

    jq对象.find() 当前元素的指定子级元素

     


    表单属性选择器;

    $(':enabled') 选择可用的input标签

    $(':disabled') 选择不可用的input标签

    $(':checked') 选择选中的radio或者checkbox

    $(':selected') 选择选中的<select>


    案例,全选全不选; 

    使用 prop() 的形式来获取,比如表单元素的checked属性。

    使用隔行换色 ,$("  tr:gt(1):even  ")来跳过前两行;

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../../../config/jquery-3.3.1.js" type="text/javascript"></script>
        <!--全选,全不选-->
        <script type="text/javascript">
            $(function () {
                $("#selectAll").click(function () {
                    $(".itemSelect").prop("checked",this.checked);
                });
    
                $("tr:gt(1):even").css("background","yellow");
                $("tr:gt(1):odd").css("background","skyblue");
            });
        </script>
    
    </head>
    <body>
    <table id="tab1" border="1" width="800" align="center">
        <tr>
            <td colspan="5"><input type="button" value="添加" /> <input type="button" value="删除"></td>
        </tr>
        <tr>
            <th>全选<input type="checkbox" id="selectAll" ></th>
            <th>分类ID</th>
            <th>分类名称</th>
            <th>分类描述</th>
            <th>操作</th>
        </tr>
        <tr>
            <td><input type="checkbox" class="itemSelect"></td>
            <td>1</td>
            <td>手机数码</td>
            <td>手机数码类商品</td>
            <td>
                <a href="">修改</a>|
                <a href="">删除</a>
            </td>
        </tr>
        <tr>
            <td><input type="checkbox" class="itemSelect"></td>
            <td>2</td>
            <td>电脑办公</td>
            <td>电脑办公类商品</td>
            <td>
                <a href="">修改</a>|
                <a href="">删除</a>
            </td>
        </tr>
        <tr>
            <td><input type="checkbox" class="itemSelect"></td>
            <td>3</td>
            <td>鞋靴箱包</td>
            <td>鞋靴箱包类商品</td>
            <td>
                <a href="">修改</a>|
                <a href="">删除</a>
            </td>
        </tr>
        <tr>
            <td><input type="checkbox" class="itemSelect"></td>
            <td>4</td>
            <td>家居饰品</td>
            <td>家居饰品类商品</td>
            <td>
                <a href="">修改</a>|
                <a href="">删除</a>
            </td>
        </tr>
    </table>
    </body>
    </html>

     

    展开全文
  • jQuery常用选择器

    千次阅读 2019-09-01 01:44:22
    2.jQuery选择器基于:ID、类、属性等"寻找",或"选择"HTML元素,除了已经存在的CSS选择器,还有一些自定义选择器! 3.jQuery中,所有选择器都以:$ 符号开头,例如: $(); jQuery元素选择器 元素选择器:基于...

    1.jQuery是可以对HTML元素,或者单个HTML元素的操作!

    2.jQuery选择器基于:ID、类、属性等"寻找",或"选择"HTML元素,除了已经存在的CSS选择器,还有一些自定义选择器!

    3.jQuery中,所有选择器都以:$ 符号开头,例如:

    $();

    jQuery元素选择器

    元素选择器:基于元素名选取,实例:

    //选择元素
    $("P")
    
    //实例:
    function(){
        $("P").hide();
    }
    

    jQuery ID选择器

    jquery ID选择器基于HTML中元素的ID值来选取元素,实例:

    //选择ID名为:p的元素
    $("#p")
    
    //实例:
    function(){
        $("#p").hide();
    }

    jQuery 类选择器

    jquery 类选择器通过元素指定的class属性来选取元素,实例:

    //类选择器:选取类名为:p的元素
    $(".p")
    
    //实例:
    function(){
        $(".p").hide();
    }
    

    当然,jQuery远不止这些选择器,本文只是列举的常用的几个选择器,jQuery还有像:后代选择器,子选择器,等等,大家可以查询相关关于jQuery选择器的手册!

     

     

    展开全文
  • css选择器& 选择器的优先级

    万次阅读 2018-06-08 08:40:28
    一、选择器1.元素选择器 语法,作用给元素名为你设置的那个元素的元素名设置样式 元素名 { 样式列表 } 2.id选择器。通过元素的 id 属性给id赋值, #开始加上id名称。id名称在整个页面里是唯一的 id选择器语法 #...

    一、选择器

    1.元素选择器 语法,作用给元素名为你设置的那个元素的元素名设置样式

            元素名 {     

                        样式列表  

                        }    

    2.id选择器。通过元素的 id 属性给id赋值, #开始加上id名称。id名称在整个页面里是唯一的

        id选择器语法    #id{

                            样式列表  

                        }  

    3.类选择器  。通过元素的class 属性 选择。 一个页面的class属性可以相同。

    语法 .class名{

                            样式列表

                        }

    4.全部选择器。 给整个页面的属性设置样式

        语法 *{

                    样式列表            

    }

    5.并集选择器 只要满足下面任意一种选择器,就给元素设置样式,选择器之间用逗号隔开

    例如  p,  #a1,.p3{

            样式列表

                }    

      上面的选择器的作用就是 给 元素选择器p ,id选择器 a1,类选择器p3.设置样式

    6.交集选择器 满足下面所有选择器才设置样式,中间什么都不用隔开 选择器之间直接粘在一起

    p.p3 {

    } 这个的意思是 给既是 p元素,并且他的类名称要等于 p3的p元素设置样式


    二、选择器的优先级

        例如 同时两个选择器给同一个元素设置相同的属性,那么最终设置为哪个呢?这就要按照优先级来了

        内连样式 优先级 1000

        id 选择器 优先级 100

        类选择器 优先级 10

        元素选择器 优先级 1

        统配选择器 优先级 0

        继承的样式优先级没有

     以上的优先级先满足高的。

    注意:

                1.如果是两种相同优先级 为同一个元素 同一个属性设置 的话,是哪个写在代码靠后 最终就按那个的样式

                2.交集选择器的优先级 所有优先级 加起来 运算 然后比较

                3.并集的话 就是各算各的。

         

    展开全文
  • 作为一个Web开发者,掌握...严格来讲,选择器的种类可以分为三种:标签名选择器、类选择器和ID选择器。而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用。而在标签内写入style=的方式,应该是CSS的一种
  • CSS的选择器分类可以分为三大类:id选择器,类选择器,标签选择器。 CSS选择器优先级如下...

    本文章转载于:https://www.cnblogs.com/AIonTheRoad/p/11283100.html

    CSS选择器分类:

    CSS的选择器分类可以分为三大类:id选择器,类选择器,标签选择器。

    用法如下:

    选择器e.g.说明
    id选择器#id#header选择id="header"的所有元素
    类选择器.class.message选择class="message"的所有元素
    标签选择器eldiv选择所有的div元素

    其中他们又可以以不同的方式进行组合,如下:

    选择器e.g.说明
    后代选择器el eldiv p选择div元素内部的所有p元素
    子代选择器el>eldiv>p选择div元素的第一子代的所有p元素
    相邻兄弟选择器el+el.msg+p选择与class为"msg"的元素同级且紧跟其后的第一个p元素
    通用兄弟选择器el~el.msg~p选择class为"msg"的元素后面的所有p元素
    群组选择器el,elp, span, .blue,#box选择所有的p元素、span元素、class为"blue"的元素以及id为"box"的元素
    伪类选择器:link,:visited, :hover, :active, :focusa:hover选择鼠标指针位于a标签之上的链接
    伪元素选择器:before, :afterp:before在每个p元素内容之前插入内容
    属性选择器[attribute][target]选择带有target属性的所有元素
    通用选择器**选择所有的元素

    优先级:!important > 内联样式 > id选择器 > 类、伪类、属性选择器 > 标签、伪元素选择器

    权 重: !important:10000

    内联: 1000

    id选择器:100

    类、伪类、属性选择器:10

    标签、伪元素选择器:1

    通用选择器(*)、子选择器(>)、相邻兄弟选择器(+)、通用兄弟选择器(~)权重值为0

    展开全文
  • jquery选择器大全

    千次阅读 2015-08-20 17:33:26
    选择器是jQuery最基础的东西,本文中列举选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写jQuery代码的效率。...
  • CSS3 被划分为模块。 其中最重要的 CSS3 模块包括:1、选择器派生选择器(后代选择器) li a { ... 目前非常常用的css选择器,用于选取X元素下子元素Y,这里有个要留意的点是,这种方式的选择器将选取其下所有匹
  • CSS基础学习十一:选择器的优先级

    千次阅读 2015-11-15 14:49:30
    在CSS基础学习的篇章中,从第四篇博客开始说选择器,到昨天基本已经说完了。今天我们总结一下,选择器作 ... 简单的选择器包括我们在第四篇,第五篇,第六篇博客的元素选择器(标签选择器),类选择器和id选择器
  • 基本过滤选择器

    千次阅读 2017-06-01 16:52:48
    1、jQuery中有四种层次选择器,它们分别是后代选择器、子选择器、相邻...其中最常用的过滤选择器是基本过滤选择器、可见性过滤选择器、属性选择器和表单对象属性过滤选择器。 3、基本过滤选择器的详细说明: 》语法:
  • 本文给大家汇总介绍了jQuery的四种选择器的使用方法以及示例,非常的简单实用,希望对大家学习jquery能够有所帮助。
  • CSS选择器

    千次阅读 2013-03-01 01:48:29
     CSS选择器分为:文档选择器、并列选择器、ID选择器、类别选择器、父子选择器、相邻兄弟选择器、属性选择器等。  下面就对每种选择器列举一些实际的样例,不用过多解释,根据例子,很快就能明白使用语法和
  • 一、简述在上一篇Qt 之 样式表的使用——样式选择器(上篇) 文章中讲述了前四种样式选择器,今天完成剩下的几种选择器的介绍。二、样式选择器样式表的样式规则今天开头先简单讲解一下样式表的样式规则。 Qt文档给...
  • JQ 选择器

    千次阅读 2019-08-19 17:35:17
    基本选择器就是jQuery中最常用选择器,也是最简单的选择器,它通过元素标签名,元素Id,Class来查找DOM元素。基本选择器共有五种,总结如下: 选择器 返回 示例 元素标签...
  • JQuery_九大选择器

    万次阅读 多人点赞 2017-07-25 18:19:07
    JQuery中九大选择器
  • 微信小程序---wxss常用属性

    千次阅读 多人点赞 2018-09-11 13:48:10
    以上就是个人在实习期间入坑小程序经手的项目训练中总结出来的,CSS属性非常非常非常多,列举的17条属性是项目编写过程中出场率90%以上的,不同属性之间的联合就可以变幻出非常华丽的页面,不过这就需要对CSS有一定...
  • CSS常用-----选择器及样式

    千次阅读 2017-09-18 21:55:04
    本章仅仅只是对CSS的一个汇总,方便查询使用1. 什么是CSS? CSS 指层叠样式表 (Cascading Style Sheets),他的作用是为了... CSS的使用格式是选择器+声明 Selector{Declaration;Declaration} P{ font-family:"楷体";
  • CSS五大选择器

    千次阅读 2019-02-21 14:53:40
    选择器:用.+名称定义的css样式类型,叫类选择器在class中引用   如: .comment{  background-color: #0bbb15;  color: white;  margin: 20px;  padding: 20px; } &lt;div class=“comment&...
  • 微信小程序——WXSS常用属性

    千次阅读 2019-03-05 16:04:45
    我这里列举一些UI比较常用属性,不一一例举了,后面附带些自己对属性的了解,如果你想了解更多关于CSS的属性的话, 推荐使用以下网站: http://www.runoob.com/cssref/css-reference.html 好了,不说废话了,...
  • CSS选择器的权重计算

    千次阅读 2017-02-28 16:42:55
    刚好是在做面试题的时候,发现有一个题目时关于CSS选择器的权重计算,当时脑海中只知道:id>class>元素选择器,外联样式优先级低于内联样式,内联样式优先级低于行间样式,至于权重的计算其实没有多大的印象,所以...
  • css选择器在css的学习中无疑是十分重要的,所以,什么是css选择器?css选择器有哪些类型?这是我们必须要掌握的,本篇文章将给大家来介绍关于css选择器的基本定义,以及css选择器有哪些类型。 我们话不多说,直接...
  • CSS选择器及其优先级排序

    千次阅读 2018-10-12 14:20:37
    id选择器: #id名 { 属性名:属性值; } class选择器 :.class名 { 属性名:属性值; } 标签选择器: 标签名 { 属性名:属性值; } 其中,他们之间又可以以不同的方式进行组合,如下: 后代选择器: 父代名 后代名 { ...
  • 【jquery】jquery选择器有哪些

    千次阅读 2020-03-25 16:05:06
    4大类:基本选择器、层次选择器、过滤选择器、表单选择器 ...基本选择器是JQuery最常用选择器,也是最简单的选择器,它通过元素id、class和标签名来查找DOM元素。 $("#myELement") 选择id值等于...
  • CSS选择器-优先级-性能

    千次阅读 2016-10-11 20:24:48
    从开始用css选择器到现在这么久了,自以为对它的理解已经差不多了,够用了,知道之前面试一家公司后,瞬间把我问懵逼了,今把最近研究的css选择器和大家分享哈,虽然文字稍微有点多,能耐心看完我相信你多少还是有点...
  • css知多少(5)——选择器

    千次阅读 2015-02-10 08:29:43
     第一部分讲css样式的加载和层叠,第二部分讲选择器以及选择器的等级,第三部分讲呈现的各种样式(背景、字体、定位、浮动等)。这样一个思路,也正式浏览器使用css的流程,是最有效的学习思路
  • 前端面试拾遗——CSS选择器、Flex布局、position前言 在某公司的前端面试中,被问到了关于CSS选择器跟flex布局相关的问题,在这篇文章中整理一下相关知识...属性选择器 组合选择器 相邻兄弟选择器 普通兄弟选择器 子
  • jQuery UI -- 日历选择器

    千次阅读 2016-11-21 22:27:31
    用jQuery UI实现的日期选择器  在这之前,我们先来了解一下jQuery UI。jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视空间。我们可以直接用...
  • JQuery 选择器

    千次阅读 2017-08-16 19:23:19
    JQuery 选择器 选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的元素 .class $(".intro") class="intro" 的所有元素 ....
  • jQuery 选择器语法

    千次阅读 2019-06-24 16:32:58
    1.基础选择器Basics 名称 说明 举例 #id 根据元素Id选择 $("divId")选择ID为divId的元素 element 根据元素的名称选择, $("a")选择所有&l...
  • 前端html+css+js面试题整理,附常用标签属性手册。

    千次阅读 多人点赞 2019-12-17 21:26:36
    一、什么是选择器选择器包括哪几种? 选择器选择器就是找到你要渲染的那个HTML标签。 选择器类型: HTML标签选择器:直接作用于某个HTML标签 类选择器:可在页面中被多次使用 ID选择器:作用于同一ID的某个资源...
  • jQuery选择器和选取方法

    千次阅读 2016-07-19 15:02:51
    我们已经使用了带有简单Css选择器的jQuery选取函数:$()。现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了。  一、jQuery选择器 在CSS3选择器标淮草案定义的选择器语法中,jQuery...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 56,449
精华内容 22,579
关键字:

列举常用的属性选择器