精华内容
下载资源
问答
  • 选择器
    千次阅读 多人点赞
    2021-01-21 21:33:10

    一.jQuery 选择器

    1.基本选择器

    • #ID 选择器:根据 id 查找标签对象

    • .class 选择器:根据 class 查找标签对象

    • element 选择器:根据标签名查找标签对象

    • * 选择器:表示任意的,所有的元素

    • selector1,selector2 组合选择器:合并选择器 1,选择器 2 的结果并返回

    • 还有一种是没有逗号的,如$("div.one")表示选取class="one"的<div>,而$("div,.one")表示的是选取所有<div>和所有class="one"的元素

    示例:

    $("#lastname")  //选取id="lastname" 的元素
    $(".intro") //选取class="intro" 的所有元素
    $("p") //选取所有 <p> 元素
    $("*") //选取所有元素
    $("h1,div,p") //选取所有 <h1>、<div> 和<p> 元素
    $("div.one") //选取class="one"的<div>
    $("div,.one") //选取所有<div>和所有class="one"的元素
    

    2.层级选择器

    • ancestor descendant 后代选择器 :在给定的祖先元素下匹配所有的后代元素,即包括儿子元素,也包括孙子等其他元素
    • parent > child 子元素选择器:在给定的父元素下匹配所有的子元素,只包括儿子元素,不包括孙子等其他元素
    • prev + next 相邻元素选择器:匹配紧接在 prev 元素后的 next 元素 ,如果prev后面紧接者的不是next,则查找失败,如果是next,则只匹配一个紧接在 prev 元素后的 next 元素,而且prev与next之间是兄弟关系。
    • prev ~ sibings prev之后的兄弟元素选择器:匹配 prev 元素之后的所有 siblings 元素 ,而且只匹配prev 元素与 siblings 元素之间是兄弟关系的元素

    示例:

    $("body div") //选择 body 内的所有 div 元素
    $("body > div") //在 body 内, 选择为div的子元素
    $("#one+div") //选择 id 为 one 的下一个 div 元素
    $("#one~div") //选择 id 为 one 的元素后面的所有 div 兄弟元素
    

    3.过滤选择器

    3.1基本过滤选择器

    • :first 获取第一个元素
    • :last 获取最后个元素
    • :not(selector) 去除所有与给定选择器匹配的元素
    • :even 从 0 开始计数,匹配所有索引值为偶数的元素
    • :odd 从 0 开始计数 匹配所有索引值为奇数的元素
    • :eq(index) 匹配一个给定索引值的元素
    • :gt(index) 匹配所有大于给定索引值的元素
    • :lt(index) 匹配所有小于给定索引值的元素
    • :header 匹配如 h1, h2, h3 之类的标题元素
    • :animated 匹配所有正在执行动画效果的元素

    示例:

    $("li:first")    //第一个li
    $("li:last")     //最后一个li
    $("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li
    $("li:even")     //挑选下标为偶数的li
    $("li:odd")      //挑选下标为奇数的li
    $("li:eq(4)")    //下标等于 4 的li(第五个 li 元素)
    $("li:gt(2)")    //下标大于 2 的li
    $("li:lt(2)")    //下标小于 2 的li
    $(":header")     //选择所有的标题元素
    $(":animated")   //选择当前正在执行动画的所有元素
    

    3.2内容过滤选择器

    • :contains(text) 匹配包含给定文本的元素
    • :empty 匹配所有不包含子元素或者文本的空元素
    • :parent 匹配含有子元素或者文本的元素
    • :has(selector) 匹配含有选择器所匹配的元素

    示例:

    $("div:contains('Runob')")    // 包含 Runob文本的div元素
    $("td:empty")                 //不包含子元素或者文本 的空td元素
    $("td:parent")                //选择含有子元素或者文本 的td元素
    $("div:has(.one)")        //选择含有 class 为 one 元素的 div 元素
    

    3.3属性过滤选择器

    • [attribute] 匹配包含给定属性的元素。
    • [attribute=value] 匹配给定的属性是某个特定值的元素
    • [attribute!=value] 匹配所有属性不等于特定值的元素,或者不含有该属性的元素(没有属性attribute的也将被选中)。
    • [attribute^=value] 匹配给定的属性是以某些值开始的元素
    • [attribute$=value] 匹配给定的属性是以某些值结尾的元素
    • [attribute*=value] 匹配给定的属性是以包含某些值的元素
    • [attrSel1][attrSel2][attrSelN] 复合属性选择器,需要同时满足多个条件时使用

    示例:

    $("div[id]")        //所有含有 id 属性的 div 元素
    $("div[id='123']")        // id属性值为123的div 元素
    $("div[id!='123']")        // id属性值不等于123的div元素,或者不含有id属性的div元素
    $("div[id^='aa']")        // id属性值以aa开头的div 元素
    $("div[id$='zz']")        // id属性值以zz结尾的div 元素
    $("div[id*='bb']")        // id属性值包含bb的div 元素
    $("div[id][title*='es']") //首先选取有属性id的div元素,然后在结果中 选取属性title值 含有'es'的 div 元素
    

    3.4可见性过滤选择器

    • :hidden 匹配所有不可见元素
    • :visible 匹配所有可见元素

    示例:

    $("li:hidden")       //匹配所有不可见的li
    $("li:visible")      //匹配所有可见的li
    

    3.5状态过滤选择器

    • :enabled 匹配所有可用元素
    • :disabled 匹配所有不可用元素
    • :checked 匹配所有选中的单选,复选,和下拉列表中选中的 option 标签对象
    • :selected 匹配所有选中的 option

    示例:

    $("input:enabled")    // 匹配可用的 input
    $("input:disabled")   // 匹配不可用的 input
    $("input:checked")    // 匹配选中的 input
    $("option:selected")  // 匹配选中的 option
    

    4.表单选择器

    • :input 匹配所有 input标签元素
    • :text 匹配所有 文本输入框
    • :password 匹配所有的密码输入框
    • :radio 匹配所有的单选框
    • :checkbox 匹配所有的复选框
    • :submit 匹配所有提交按钮
    • :image 匹配所有 img 标签
    • :reset 匹配所有重置按钮
    • :button 匹配所有 input type=button <button>按钮
    • :file 匹配所有 input type=file 文件上传

    示例:

    $(":input")      //匹配所有 input, textarea, select 和 button 元素
    $(":text")       //所有的单行文本框,$(":text") 等价于$("[type=text]"),推荐使用$("input:text")效率更高,下同
    $(":password")   //所有密码框
    $(":radio")      //所有单选按钮
    $(":checkbox")   //所有复选框
    $(":submit")     //所有提交按钮
    $(":image") 	 //所有带有 type="image" 的 input 元素
    $(":reset")      //所有重置按钮
    $(":button")     //所有button按钮
    $(":file")       //所有文件域
    
    

    二.jQuery元素筛选所用的一些方法

    • eq() 获取给定索引的元素 ;功能跟 :eq() 一样
    • first() 获取第一个元素 ;功能跟 :first 一样
    • last() 获取最后一个元素 ; 功能跟 :last 一样
    • filter(exp) 留下匹配的元素
    • is(exp) 判断是否匹配给定的选择器,只要有一个匹配就返回true
    • has(exp) 返回包含有匹配选择器的元素的元素 ;功能跟 :has 一样
    • not(exp) 删除匹配选择器的元素;功能跟 :not 一样
    • children(exp) 返回匹配给定选择器的子元素 ;功能跟 parent>child 一样
    • find(exp) 返回匹配给定选择器的后代元素 ;功能跟 ancestor descendant 一样
    • next() 返回当前元素的下一个兄弟元素 ;功能跟 prev + next 功能一样
    • nextAll() 返回当前元素后面所有的兄弟元素 ;功能跟 prev ~ siblings 功能一样
    • nextUntil() 返回当前元素到指定匹配的元素为止的后面元素
    • parent() 返回父元素
    • prev(exp) 返回当前元素的上一个兄弟元素
    • prevAll() 返回当前元素前面所有的兄弟元素
    • prevUnit(exp) 返回当前元素到指定匹配的元素为止的前面元素
    • siblings(exp) 返回所有兄弟元素
    • add() 把 add 匹配的选择器的元素添加到当前 jquery 对象中

    示例:

    $("div").eq(3) //选择索引值为等于 3 的 div 元素
    $("div").first() //选择第一个 div 元素
    $("div").last() //选择最后一个 div 元素
    $("div").filter(":even") //在div中选择索引为偶数的
    $("#one").is(":empty") //判断#one是否为:empty或:paren
    $("div").has(".one") //选择div中包含.one的
    $("div").not('.one') //选择div中class不为one的
    $("body").children("div.one") //在body中选择所有class为one的div子元素
    $("body").find("div.mini") //在body中选择所有class为mini的div元素
    $("#one").next("div") //#one的下一个div
    $("#one").nextAll("span") //#one后面所有的span元素
    $("#one").nextUntil("span") //#one和span之间的元素 
    $(".one").parent() //.one的父元素
    $("#two").prev("div") //#two的上一个div
    $("span").prevAll("div") //span前面所有的div
    $("span").prevUntil("#one") //span向前直到#one的元素
    $("#two").siblings() //#two的所有兄弟元素
    $("span").add("#two").add("#one") //选择所有的 span 元素和id为two的元素
    
    更多相关内容
  • Android全国地名选择 城市选择器 地名选择器 省市区选择
  • 微信小程序 城市选择器 城市切换

    千次下载 热门讨论 2017-01-14 15:18:20
    微信小程序 城市选择器 城市切换
  • 基于wheelView的自定义日期选择器

    千次下载 热门讨论 2015-06-26 17:16:52
    基于wheelView的自定义日期选择器,支持拓展,样式可以多样
  • 微信小程序开发之城市选择器 城市切换
  • Js日期时间选择器

    热门讨论 2014-08-06 16:06:30
    一个js日期和时间选择器,支持精确到毫秒的时间选择 http://blog.csdn.net/yanwushu/article/details/38401749 效果预览 http://www.helloweba.com/demo/timepicker/
  • 前言:我们在码代码的时候,经常会遇到需要给第一个或者最后一个元素添加或删除样式,还有一些比较特殊的是选取第几个元素添加或删除样式,下面记录css选择器中常见的选择器:相邻兄弟选择器(+)、子选择器(>...

    前言:我们在码代码的时候,经常会遇到需要给第一个或者最后一个元素添加或删除样式,还有一些比较特殊的是选取第几个元素添加或删除样式,下面记录css选择器中常见的选择器:相邻兄弟选择器(+)、子选择器(>)、兄弟选择器(~)、first-child、:last-child、:nth-child()、:nth-last-child()的用法。

    相邻兄弟选择器(+)

    相邻兄弟选择器可选择紧接在另一个元素后的元素,且二者具有相同的父亲元素。注释:与子结合符一样,相邻兄弟结合符旁边可以有空白符。
    器。

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>相邻兄弟选择器</title>
        <style type="text/css">
            h1+p{
                color:red;
            }
        </style>
    </head>
     
    <body>
        <p>Hello word!</p>
        <p>Hello word!</p>
        <h1>Hello word!</h1>
        <p>Hello word!</p>
        <p>Hello word!</p>
        <p>Hello word!</p>
        <p>Hello word!</p>
    </body>
    </html>
    
    

    效果图如下:

    在这里插入图片描述

    相邻兄弟只会影响下面的p标签的样式,不影响上面兄弟的样式。

    注意这里的’+’的意义跟’and’意义不一样,兄弟选择器的样式是应用在兄弟元素上,跟参照的元素样式无关,如上例只影响p元素的样式,而不影响h1标签的样式。

    当然这个也会循环查找,即当两个兄弟元素相同时,会再一次循环查找:

    示例:

    <style type="text/css">
        li + li {
            color:red;
        }
    </style>
    
    <div>
      <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
      </ul>
    </div>
    
    

    ![图片描述][1]

    可以看出第一个li字体颜色没有变红,第二个和第三个元素字体变红,这就是因为第三个li是第二个li的兄弟元素,所以也会应用样式。

    兄弟选择器(~)

    作用是查找某一个指定元素的后面的所有兄弟结点
    示例代码:

    <style type="text/css">
        h1 ~ p{
            color:red;
        }
    </style>
    </head>
    <body>
        <p>1</p>
        <h1>2</h1>
        <p>3</p>
        <p>4</p>
        <p>5</p>
    </body>
    
    

    效果展示:
    ![图片描述][2]

    后代选择器(包含选择器)

    可以选择某元素后代的元素(子子孙孙元素)

    子选择器(>)

    只能选择作为某元素儿子元素的元素,不包括孙元素、曾孙元素等等等。

    后代选择器,子选择器和相邻兄弟选择器结合使用示例:

    请看下面这个选择器:

    html > body table + ul {margin-top:20px;}
    

    这个选择器解释为:选择紧接在 table 元素后出现的第一个相邻兄弟 ul 元素,该 table 元素包含在一个 body 元素中,body 元素本身是 html 元素的子元素。

    :first-child 选择器

    li:first-child
    {
    background:yellow;
    }
    
    <ul>
      <li>咖啡</li>
      <li></li>
      <li>可口可乐</li>
    </ul>
    
    <ol>
      <li>咖啡</li>
      <li></li>
      <li>可口可乐</li>
    </ol>
    

    效果图
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LraweVjq-1597820882615)(/img/bVbhEOE)]

    值得注意的是,如果其父元素的第一个元素(p)不是该指定类型元素(li),则第一个元素不会有样式

    li:first-child
    {
    background:yellow;
    }
    
    <ol>
      <p>测试</p>
      <li>咖啡</li>
      <li></li>
      <li>可口可乐</li>
    </ol>
    

    效果图
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i0WfhykI-1597820882618)(/img/bVbhESX)]

    :last-child选择器

    :last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。

    提示:p:last-child 等同于 p:nth-last-child(1)。

    eg:指定属于其父元素的最后一个子元素的 p 元素的背景色:

    p:last-child
    { 
    background:#ff0000;
    }
    
    <body>
    	<h1>这是标题</h1>
    	<p>第一个段落。</p>
    	<p>第二个段落。</p>
    	<p>第三个段落。</p>
    	<p>第四个段落。</p>
    	<p>第五个段落。</p>
    </body>
    

    效果:

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I1Nly7iw-1597820882628)(/img/bVbhEUp)]

    说明:p标签的父元素是body,body标签中最后一个p元素是第五个段落

    :nth-child()

    :nth-child() 选择器,该选择器选取父元素的第 N 个子元素,与类型无关

    p:nth-child(2)
    {
    background:#ff0000;
    }
    
    <body>
    
    <h1>这是标题</h1>
    <p>第一个段落。</p>
    <p>第二个段落。</p>
    <p>第三个段落。</p>
    <p>第四个段落。</p>
    
    <p><b>注释:</b>Internet Explorer 不支持 :nth-child() 选择器。</p>
    
    </body>
    

    :nth-child()的详细用法

    nth-child(3) 表示选择列表中的第三个元素。

    nth-child(2n)表示列表中的偶数标签,即选择第2、第4、第6……标签

    nth-child(2n-1) 表示选择列表中的奇数标签,即选择 第1、第3、第5、第7……标签

    nth-child(n+3) 表示选择列表中的标签从第3个开始到最后(>=3)

    nth-child(-n+3) 表示选择列表中的标签从0到3,即小于3的标签(<=3)

    nth-last-child(3) 表示选择列表中的倒数第3个标签

    :nth-of-type(n)

    :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.

    n 可以是数字、关键词或公式。

    p:nth-of-type(2)
    {
    background:#ff0000;
    }
    
    <body>
    
    <h1>这是标题</h1>
    <p>第一个段落。</p>
    <div>测试</div>
    <p>第二个段落。</p>
    <p>第三个段落。</p>
    <p>第四个段落。</p>
    <p>第五个段落。</p>
    
    </body>
    

    效果图:

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KCl1bOki-1597820882636)(/img/bVbhEYD)]

    :nth-last-child() 选择器

    :nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。

    n 可以是数字、关键词或公式。

    提示:请参阅 :nth-last-of-type() 选择器,该选择器选取父元素的第 N 个指定类型的子元素,从最后一个子元素开始计数。

    CSS3 :not 选择器

    :not(selector) 选择器匹配非指定元素/选择器的每个元素。

    更多css选择器请参考:CSS 选择器参考手册
    http://www.w3school.com.cn/cssref/css_selectors.asp

    csss属性选择器

    选择器示例示例说明
    [attribute][target]选择所有带有target属性元素
    [attribute=value][target=-blank]选择所有使用target="-blank"的元素
    [attribute~=value][title~=flower]选择标题属性包含独立单词"flower"的所有元素
    [attribute ^= language][lang ^= en][lang ^= en] 选择一个lang属性的起始值="EN"的所有元素
    [attribute $= language][lang $= en]选择一个lang属性的结尾值="EN"的所有元素
    [attribute *= language][lang *= en]选择一个lang属性的包含"EN"的所有元素

    关于CSS属性选择器中“~=”和“*=”的区别

    “value是完整单词” 类型的比较符号: ~= , |=

    “value是拼接字符串” 类型的比较符号: *= , ^= , $=

    [attribute~=value] 属性中包含独立的单词为value
    
    [title~=flower]  
    <img src="/i/eg_tulip.jpg" title="tulip flower" />
    
    [attribute*=value] 属性中做字符串拆分,只要能拆出来value这个词就行
    
    [title~=flower]  
    <img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />
    

    伪类选择器

    在这里插入图片描述

    伪元素选择器

    在这里插入图片描述

    伪类和伪元素的区别

    • 伪元素和伪类都是为了给一些特殊需求加样式,定义上基本一致。
    • 伪类像类选择器一样给已存在某个元素添加额外的样式;伪元素则是给自己虚拟的元素添加样式。

    参考:https://segmentfault.com/a/1190000013737796

    扩展:导航列多种实现方式

    ![图片描述][3]

    菜单栏右边框的实现方法有多种,结合上面介绍的选择器,实现方法分别如下:

    一、常规方法:

    .nav li{
        border-right:1px solid #fff;
    }
    .nav li:last-child{
        border-right-width:0px;
    }
    

    二:结合相邻兄弟选择器(+)

    .nav li + li{
        border-left:1px solid #fff;
    }
    

    三、结合兄弟选择器(~)

    .nav li:first-child ~ li{
        border-left:1px solid #fff;
    }
    

    四、结合:not()选择器

    .nav li:not(:last-child){
        border-right:1px solid #fff;
    }
    

    权重

    总结排序:!important > 行内样式(style)>ID选择器 > 类选择器=伪类 > 元素=伪元素 > 通配符 > 继承 > 浏览器默认属性

    展开全文
  • JQuery选择器超级详细

    万次阅读 多人点赞 2020-08-06 17:54:47
    基本选择器 id选择器:$("#id的属性值") 获取与指定id属性值匹配的元素 单击按钮,将id为myid的元素背景为绿色 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html>...

    基本选择器

    id选择器:$("#id的属性值")

    类选择器:$(".class的属性值")

    标签选择器:$("标签名")

    并集选择器:$("选择器1,选择器2")

    层级选择器

    后代选择器:$("选择器1   选择器2")

    子选择器:$("选择器1 > 选择器2")

    属性选择器

    属性名称选择器:$("选择器[属性名]")

    属性选择器:

    $("选择器[属性名='值']")

    $("选择器[属性名!='值']")

    $("选择器[属性名^='值']") 

    $("选择器[属性名$='值']")

    $("选择器[属性名*='值']")

    复合属性选择器:$("选择器[属性名='值'][]...")

    过滤选择器

    首元素选择器:${选择器:first}

    尾元素选择器:${选择器:last}

    非元素选择器:${选择器1:not(选择器2)}

    偶数选择器:${选择器:even}

    奇数选择器:${选择器:odd}

    等于索引选择器:${选择器:eq(index)}

    大于索引选择器:${选择器:gt(index)}

    小于索引选择器:${选择器:lt(index)}

    标题选择器:${:header}

    表单过滤选择器

    可用元素选择器:${:enabled}

    不可用元素选择器:${:disabled}

    选中选择器

    单复选框:${:checked}

    下拉框:${:selected}


     

    基本选择器

    id选择器:$("#id的属性值")

     获取与指定id属性值匹配的元素

    单击按钮,将id为myid的元素背景为绿色

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 50px;
            }
            span{
                background-color:pink ;
                width: 100%;
                height: 20px;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $("#mydivid").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
        <input id="id1" type="button" value="改变id为mydivid的元素为绿色">
        <hr><hr>
        <div id="mydivid">
            这是div,id为mydivid
        </div>
        <span id="myspanid">
            这是span,id为myspanid
        </span>
    </body>
    </html>
    

    单击前

    单击后

    类选择器:$(".class的属性值")

     获取与指定的class属性值匹配的元素

    单击按钮,将类名为myClassName的元素背景变为绿色

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 50px;
            }
            span{
                background-color:pink ;
                width: 100%;
                height: 20px;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $(".myClassName").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
        <input id="id1" type="button" value="改变class为myClassName的元素为绿色">
        <hr><hr>
        <div id="mydivid" class="myClassName">
            这是div,id为mydivid,calss为myClassName
            <span >
            这是span
            </span>
        </div>
        <br>
        <div  class="myClassName">
            这是div,calss为myClassName
        </div>
        <br>
        <span id="myspanid" class="myClassName">
            这是span,id为myspanid,calss为myClassName
        </span>
    </body>
    </html>
    

    单击前

    单击后

    标签选择器:$("标签名")

     获取所有匹配标签名称的元素

    单击按钮,将标签为div的元素背景变为绿色

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 50px;
            }
            span{
                background-color:pink ;
                width: 100%;
                height: 20px;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $("div").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
        <input id="id1" type="button" value="改变标签为div的元素为绿色">
        <hr><hr>
        <div id="mydivid" class="myClassName">
            这是div,id为mydivid,calss为myClassName
            <span >
            这是span
            </span>
        </div>
        <br>
        <div  class="myClassName">
            这是div,calss为myClassName
        </div>
        <br>
        <span id="myspanid" class="myClassName">
            这是span,id为myspanid,calss为myClassName
        </span>
    </body>
    </html>
    

    单击前

    单击后

     

    并集选择器:$("选择器1,选择器2")

    获取多个选择器选中的所有元素 

    单击按钮,将标签为span的元素,或者id为myDivId的元素背景变为绿色

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 50px;
            }
            span{
                background-color:pink ;
                width: 100%;
                height: 20px;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $("span,#myDivId").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
        <input id="id1" type="button" value="改变标签为span的元素,或者id为myDivId的元素背景变为绿色">
        <hr><hr>
        <div >
            这是div
            <span >
            这是span
            </span>
        </div>
        <br>
        <div id="myDivId">
            这是div,id为myDivId
        </div>
        <br>
        <span id="myspanid">
            这是span,id为myspanid
        </span>
    </body>
    </html>
    

    单击前

    单击后

    层级选择器

    后代选择器:$("选择器1   选择器2")

    选择选择器1内部的所有选择器2

    改变id为myDivId的元素下的,所有span元素背景变为绿色

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width: 100px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $("#myDivId   span").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
        <input id="id1" type="button" value="改变id为myDivId的元素下的,所有span元素背景变为绿色">
        <hr><hr>
        <div id="myDivId">
            这是div,id为myDivId
            <br>
            <span >
                这是span
            </span>
            <br>
            <span  style="background-color: pink">
                这是span
                <br>
                <br>
                <span style="background-color: deeppink;height: 20px">
                    这是span
                </span>
                <br>
            </span>
        </div>
        <br>
        <div >
            这是div
            <br>
            <span >
                这是span
            </span>
        </div>
        <br>
        <span id="myspanid">
            这是span,id为myspanid
        </span>
    </body>
    </html>
    

    单击前

    单击后

    子选择器:$("选择器1 > 选择器2")

    选择选择器1内部的所有子选择器2

    改变div元素下的,所有子span元素背景变为绿色

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width: 100px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $("div  > span").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
        <input id="id1" type="button" value="改变div元素下的,所有子span元素背景变为绿色">
        <hr><hr>
        <div id="myDivId">
            这是div,id为myDivId
            <br>
            <span >
                这是span
            </span>
            <br>
            <span  style="background-color: pink">
                这是span
                <br>
                <br>
                <span style="background-color: deeppink;height: 20px">
                    这是span
                </span>
                <br>
            </span>
        </div>
        <br>
        <div >
            这是div
            <br>
            <span >
                这是span
            </span>
        </div>
        <br>
        <span id="myspanid">
            这是span,id为myspanid
        </span>
    </body>
    </html>
    

    单击前

    单击后

    属性选择器

    属性名称选择器:$("选择器[属性名]")

    包含指定属性的选择器

    改变类名为myCalss并且含有id属性的元素背景变为绿色 

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width:400px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $(".myClass[id]").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
        <input id="id1" type="button" value="改变类名为myCalss并且含有id属性的元素背景变为绿色">
        <hr><hr>
        <div class="myClass" id="divId1">
            这是div,calss为myClass,id为divId1
        </div>
        <br>
        <div class="myClass">
            这是div,calss为myClass
        </div>
        <br>
        <span class="myClass" id="myspanid">
            这是span,calss为myClass,id为myspanid
        </span>
    </body>
    </html>
    

    单击前

    单击后

    属性选择器:

    $("选择器[属性名='值']")

    包含指定属性等于指定值的选择器

    改变类名为myCalss并且含id属性为myDivId1的元素背景变为绿色 

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width:400px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $(".myClass[id='myDivId1']").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="改变类名为myCalss并且含id属性为myDivId1的元素背景变为绿色 ">
    <hr><hr>
    <div class="myClass" id="myDivId1">
        这是div,calss为myClass,id为myDivId1
    </div>
    <br>
    <div class="myClass" id="myDivId2">
        这是div,calss为myClass,id为myDivId2
    </div>
    <br>
    <div class="myClass">
        这是div,calss为myClass
    </div>
    <br>
    <span class="myClass" id="mySpanId1">
            这是span,calss为myClass,mySpanId1
        </span>
    </body>
    </html>
    

    单击前

    单击后

    $("选择器[属性名!='值']")

    包含指定属性不等于指定值的选择器

    改变类名为myCalss并且含id属性不等于myDivId1的元素背景变为绿色 

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width:400px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $(".myClass[id!='myDivId1']").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="改变类名为myCalss并且含id属性不等于myDivId1的元素背景变为绿色">
    <hr><hr>
    <div class="myClass" id="myDivId1">
        这是div,calss为myClass,id为myDivId1
    </div>
    <br>
    <div class="myClass" id="myDivId2">
        这是div,calss为myClass,id为myDivId2
    </div>
    <br>
    <div class="myClass">
        这是div,calss为myClass
    </div>
    <br>
    <span class="myClass" id="mySpanId1">
            这是span,calss为myClass,mySpanId1
        </span>
    </body>
    </html>
    

    单击前

    单击后

    $("选择器[属性名^='值']") 

    包含指定属性以指定值开头的选择器 

    改变类名为myCalss并且id属性以my开头的元素背景变为绿色 

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width:400px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $(".myClass[id^='my']").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="改变类名为myCalss并且id属性以my开头的元素背景变为绿色">
    <hr><hr>
    <div class="myClass" id="myDivId1">
        这是div,calss为myClass,id为myDivId1
    </div>
    <br>
    <div class="myClass" id="myDivId2">
        这是div,calss为myClass,id为myDivId2
    </div>
    <br>
    <div class="myClass">
        这是div,calss为myClass
    </div>
    <br>
    <span class="myClass" id="mySpanId1">
            这是span,calss为myClass,mySpanId1
        </span>
    </body>
    </html>
    

    单击前

    单击后

    $("选择器[属性名$='值']")

    包含指定属性以指定值结尾的选择器 

    改变类名为myCalss并且id属性以Id1的元素背景变为绿色 

     

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width:400px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $(".myClass[id$='Id1']").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="改变类名为myCalss并且id属性以Id1的元素背景变为绿色">
    <hr><hr>
    <div class="myClass" id="myDivId1">
        这是div,calss为myClass,id为myDivId1
    </div>
    <br>
    <div class="myClass" id="myDivId2">
        这是div,calss为myClass,id为myDivId2
    </div>
    <br>
    <div class="myClass">
        这是div,calss为myClass
    </div>
    <br>
    <span class="myClass" id="mySpanId1">
            这是span,calss为myClass,mySpanId1
        </span>
    </body>
    </html>
    

    单击前

    单击后

    $("选择器[属性名*='值']")

    包含指定属性含有指定值的选择器 

    改变类名为myCalss并且id属性值含有Div的元素背景变为绿色 

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width:400px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $(".myClass[id*='Div']").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="改变类名为myCalss并且id属性值含有Div的元素背景变为绿色">
    <hr><hr>
    <div class="myClass" id="myDivId1">
        这是div,calss为myClass,id为myDivId1
    </div>
    <br>
    <div class="myClass" id="myDivId2">
        这是div,calss为myClass,id为myDivId2
    </div>
    <br>
    <div class="myClass">
        这是div,calss为myClass
    </div>
    <br>
    <span class="myClass" id="mySpanId1">
            这是span,calss为myClass,mySpanId1
        </span>
    </body>
    </html>
    

    单击前

    单击后

    复合属性选择器:$("选择器[属性名='值'][]...")

    包含多个属性条件的选择器

    改变calss为myClas并且存在属性id的div元素背景变为绿色 

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width:400px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $("div[class='myClass'][id]").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
        <input id="id1" type="button" value="改变calss为myClas并且存在属性id的div元素背景变为绿色">
        <hr><hr>
        <div class="myClass" id="divId1">
            这是div,calss为myClass,id为divId1
        </div>
        <br>
        <div class="myClass" id="divId2">
            这是div,calss为myClass,id为divId2
        </div>
        <br>
        <span class="myClass" id="myspanid">
            这是span,calss为myClass,id为myspanid
        </span>
    </body>
    </html>
    

    单击前

    单击后

    过滤选择器

    首元素选择器:${选择器:first}

    获得指定选择器的元素中的第一个元素

    改变类名为myClass的第一个元素的背景颜色为绿色

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width:400px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $(".myClass:first").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="改变类名为myClass的第一个元素的背景颜色为绿色">
    <hr><hr>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass">
        这是div,calss为myClass
    </div>
    <br>
    <span class="myClass" >
            这是span,calss为myClass
        </span>
    </body>
    </html>
    

    单击前

    单击后

    尾元素选择器:${选择器:last}

    获得指定选择器的元素中的最后一个元素

    改变类名为myClass的最后一个元素的背景颜色为绿色

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width:400px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $(".myClass:last").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="改变类名为myClass的最后一个元素的背景颜色为绿色">
    <hr><hr>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass">
        这是div,calss为myClass
    </div>
    <br>
    <span class="myClass" >
            这是span,calss为myClass
        </span>
    </body>
    </html>
    

    单击前

    单击后

    非元素选择器:${选择器1:not(选择器2)}

    获得指定选择器1的元素中不包含选择器2的元素

    改变类名为myClass的元素中不包含span元素的背景颜色为绿色

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width:400px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $(".myClass:not(span)").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="改变类名为myClass的元素中不包含span元素的背景颜色为绿色">
    <hr><hr>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass">
        这是div,calss为myClass
    </div>
    <br>
    <span class="myClass" >
            这是span,calss为myClass
        </span>
    </body>
    </html>
    

    单击前

    单击后

    偶数选择器:${选择器:even}

    获得指定选择器的元素中索引为偶数的元素,索引从0开始计数

    改变类名为myClass的元素中索引为偶数的元素的背景颜色为绿色

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width:400px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $(".myClass:even").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="改变类名为myClass的元素中索引为偶数的元素的背景颜色为绿色">
    <hr><hr>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass">
        这是div,calss为myClass
    </div>
    <br>
    <span class="myClass" >
            这是span,calss为myClass
        </span>
    </body>
    </html>
    

    单击前

    单击后

    奇数选择器:${选择器:odd}

    获得指定选择器的元素中索引为奇数的元素,索引从0开始计数

    改变类名为myClass的元素中索引为奇数的元素的背景颜色为绿色

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width:400px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $(".myClass:odd").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="改变类名为myClass的元素中索引为奇数的元素的背景颜色为绿色">
    <hr><hr>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass">
        这是div,calss为myClass
    </div>
    <br>
    <span class="myClass" >
            这是span,calss为myClass
        </span>
    </body>
    </html>
    

    单击前

    单击后

    等于索引选择器:${选择器:eq(index)}

    获得指定选择器的元素中等于指定索引的元素,索引从0开始计数

    改变类名为myClass的元素中索引为2的元素的背景颜色为绿色

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width:400px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $(".myClass:eq(2)").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="改变类名为myClass的元素中索引为2的元素的背景颜色为绿色">
    <hr><hr>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass">
        这是div,calss为myClass
    </div>
    <br>
    <span class="myClass" >
            这是span,calss为myClass
        </span>
    </body>
    </html>
    

    单击前

    单击后

    大于索引选择器:${选择器:gt(index)}

    获得指定选择器的元素中大于指定索引的元素,索引从0开始计数

    改变类名为myClass的元素中索引大于2的元素的背景颜色为绿色

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width:400px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $(".myClass:gt(2)").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="改变类名为myClass的元素中索引大于2的元素的背景颜色为绿色">
    <hr><hr>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass">
        这是div,calss为myClass
    </div>
    <br>
    <span class="myClass" >
            这是span,calss为myClass
        </span>
    </body>
    </html>
    

    单击前

    单击后

    小于索引选择器:${选择器:lt(index)}

    获得指定选择器的元素中小于指定索引的元素,索引从0开始计数

    改变类名为myClass的元素中索引小于2的元素的背景颜色为绿色

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width:400px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $(".myClass:lt(2)").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="改变类名为myClass的元素中索引小于2的元素的背景颜色为绿色">
    <hr><hr>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass">
        这是div,calss为myClass
    </div>
    <br>
    <span class="myClass" >
            这是span,calss为myClass
        </span>
    </body>
    </html>
    

    单击前

    单击后

    标题选择器:${:header}

    获得标题元素,固定写法

    改变所有标题的背景颜色为绿色

     

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width:400px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $(":header").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="改变所有标题的背景颜色为绿色">
    <hr><hr>
    <h1>标题1</h1>
    <h3>标题3</h3>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass" >
        <h2>标题2</h2>
        这是div,calss为myClass
        <h4>标题4</h4>
    </div>
    <br>
    <div class="myClass">
        这是div,calss为myClass
    </div>
    <br>
    <span class="myClass" >
        <h6>标题6</h6>
        这是span,calss为myClass
    </span>
    </body>
    </html>
    

    单击前

    单击后

    改变类名为myClass的元素下所有标题的背景颜色为绿色

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width:400px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $(".myClass :header").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="改变类名为myClass的元素下所有标题的背景颜色为绿色">
    <hr><hr>
    <h1>标题1</h1>
    <h3>标题3</h3>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass" >
        <h2>标题2</h2>
        这是div,calss为myClass
        <h4>标题4</h4>
    </div>
    <br>
    <div class="myClass">
        这是div,calss为myClass
    </div>
    <br>
    <span class="myClass" >
        <h6>标题6</h6>
        这是span,calss为myClass
    </span>
    </body>
    </html>
    

    单击前

    单击后

    表单过滤选择器

    可用元素选择器:${:enabled}

    获得满足选择器中可用的元素

    单击改变from表单内可用的input背景颜色为绿色

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            input{
                background-color:dodgerblue ;
                width: 700px;
                height: 50px;
                font-size: 30px;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $("form input:enabled").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="单击改变from表单内可用的input背景颜色为绿色" style="background-color: burlywood"><br><br><br>
    <input value="这是表单外的input,disabled=disabled" type="text" name="oName1" disabled="disabled" width="100px"><br>
    <form>
        <input value="这是表单内的input,disabled=disabled" type="text" name="iName1" disabled="disabled"><br>
        <input value="这是表单内的input" type="text" name="iName2" ><br>
        <input value="这是表单内的input,disabled=disabled" type="text" name="iName3" disabled="disabled"><br>
        <input value="这是表单内的input" type="text" name="iName4" ><br>
    </form>
    </body>
    </html>
    

    单击前

     单击后

    不可用元素选择器:${:disabled}

    获得满足选择器不可用的元素

    单击改变from表单内不可用的input背景颜色为绿色

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            input{
                background-color:dodgerblue ;
                width: 700px;
                height: 50px;
                font-size: 30px;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $("form input:disabled").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="单击改变from表单不可用的input背景颜色为绿色" style="background-color: burlywood"><br><br><br>
    <input value="这是表单外的input,disabled=disabled" type="text" name="oName1" disabled="disabled" width="100px"><br>
    <form>
        <input value="这是表单内的input,disabled=disabled" type="text" name="iName1" disabled="disabled"><br>
        <input value="这是表单内的input" type="text" name="iName2" ><br>
        <input value="这是表单内的input,disabled=disabled" type="text" name="iName3" disabled="disabled"><br>
        <input value="这是表单内的input" type="text" name="iName4" ><br>
    </form>
    </body>
    </html>
    

    单击前

    单击后

    选中选择器

    单复选框:${:checked}

    获得单选/复选框选中的元素

    单击选中复选框选中的值

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            #id1{
                background-color:dodgerblue ;
                width: 700px;
                height: 50px;
                font-size: 30px;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    var $input = $("input[type='checkbox']:checked");;
                    for(i=0;i<$input.length;i++){
                        console.log($input[i].value)
                    }
    
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="单击输出复选框选中的值" style="background-color: burlywood"><br><br><br>
    
        <form>
            选择性质,单选<br>
            <input type="radio" name="nature" value="渣男">渣男<br>
            <input type="radio" name="nature" value="极品">极品<br><br><br>
            选择爱好,多选<br>
            <input type="checkbox" name="like" value="编程">编程<br>
            <input type="checkbox" name="like" value="打游戏">打游戏<br>
            <input type="checkbox" name="like" value="学习">学习<br>
            <input type="checkbox" name="like" value="游泳">游泳<br>
        </form>
    </body>
    </html>
    

    单击前

     勾选

    单击后,打印了复选框勾选的值

     

    下拉框:${:selected}

    获得下拉框选中的元素

    单击输出复选选择框的选中的值

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            #id1{
                width: 700px;
                height: 50px;
                font-size: 30px;
            }
            select{
                width: 300px;
                height: 500px;
                font-size: 30px;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    var $select = $("select > option:selected");
                    for(i=0;i<$select.length;i++){
                       console.log($select[i].value)
                    }
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="单击输出复选选择框的选中的值" style="background-color: burlywood"><br><br><br>
        <form>
            <select name="like" multiple="multiple">
                <option >编程</option>
                <option >打游戏</option>
                <option >学习</option>
                <option >游泳</option>
            </select>
        </form>
    </body>
    </html>
    

    单击前

    复选选择框选中值

     单击后

    展开全文
  • Android 城市列表选择器
  • CSS伪类选择器

    万次阅读 多人点赞 2021-11-01 13:35:22
    CSS的选择器有很多种,有一种选择器,与其他选择器完全不同,我们来讲一讲这个选择器——伪类选择器 伪类选择器 我们伪类选择器有几种,我们来看看第一种 静态伪类: 只能用于超链接的样式 :link超链接点击之前 ...

    CSS的选择器有很多种,有一种选择器,与其他选择器完全不同,我们来讲一讲这个选择器——伪类选择器

    伪类选择器

    伪类选择器:用来描述一个元素的特殊状态!比如第一个元素、某个元素的子元素、鼠标点击的元素

    我们伪类选择器有几种,我们来看看第一种

    静态伪类: 只能用于超链接的样式

    • :link 超链接点击之前
    • :visited 链接被访问过之后

    以上两种样式,只能用于超链接

    实际用法还得实际分析,我们来看看这一张图:

    这里我写了两个超链接,看我箭头指的文章,你会发现这两个超链接颜色不一样

    为什么会不一样呢?

    因为第一个链接,是我访问过的网站链接

    而第二个链接,我的浏览器没有访问过,系统会默认给访问过与没访问过的超链接显示不同的颜色

    我们访问一下试试,看看他会不会变色

     访问过后,第二个超链接的颜色也变成了第一个一样了

    那么我们想让没访问过的链接显示其他颜色呢?

    这时候就需要我们的伪类选择器上场了,我们在style标签里面用css伪类选择一下

    我们使用link来选择没有访问过的超链接

    <style>
            a:link{color: aqua;}
    </style>

    注意,我们的伪类选择器是使用“:”来连接

    我们在添加一个超链接,也是没有访问过的网址

    我们看看效果

     这里,我们通过伪类选择器的link对没有访问过的网址进行颜色改变

    而访问过的链接颜色没有变化

    当我们访问之后,他也就不会被link选中了,所以访问过后,是这样的

     到这,有人就问了,访问之前可以被选择,那我想要访问后的链接也变色可不可以呢?

    当然可以,事物都有对立一面,编程也一样,可以选择访问之前的超链接,那就肯定可以选择访问之后的超链接

    我们写个访问之后的选择,让它变成其他颜色

    <style>
            a:link{color: aqua;}
            a:visited{color: chartreuse;}
    </style>

    下面那个a:visited就是另一个选择属性了,他会选择被访问过的超链接

    我们看看被访问过的超链接有没有变色

    最后,再补充一点,看看这张图!

     我这里使用一个字体属性,将:visited选择中的字体变大,可是字体并没有改变,这是为什么呢???

    因为为了保护隐私,我们的:visited只能改变颜色属性,其他都都不能改变,但是如果我改变:link选择的字体,将会是这样的

     不管是访问过还是没有访问过的链接,他都改变了字体!这个区别记住就可以,我这里给个测试代码,大家运行对比一下效果

    <!DOCTYPE html>
    <html lang="Zh-cn">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>伪类选择器</title>
    
        <style>
            a:link{color: aqua;font-size: 10px;}
            a:visited{color: chartreuse;font-size: 50px;}
        </style>
    </head>
    <body>
        <h1>伪类选择器</h1>
        <h2>静态伪类</h2>
        <p>什么是静态伪类?</p>
        <a href="https://blog.janyork.com/">我的博客</a>
        <a href="https://hao.360.com/">360导航</a>
        <a href="https://qq.com/">腾讯网</a>
        <a href="https://google.com">GooGle</a>
    </body>
    </html>

     这是,两个静态的伪类选择,我们还有一些其他状态的伪类选择

    我们继续讲几个

    动态伪类:针对所有标签都适用的样式

    • :hover “悬停”:鼠标放到标签上的时候
    • :active “激活”: 鼠标点击标签,但是不松手时。
    • :focus 是某个标签获得焦点时的样式(比如某个输入框获得焦点)

    我们经常看到一些网页,可以让鼠标的样式在其中发生改变,也就是说,我们这种标签,是对于鼠标产生效果

    比如,我要写一个鼠标悬停变色,我就得用伪类选择器的:hover来选择,我们来写一个

    <!DOCTYPE html>
    <html lang="Zh-cn">
    <head>
        <title>伪类选择器</title>
        <style>
            h3:hover{color: cyan;font-size: 25px;}
        </style>
    </head>
    <body>
        <h2>伪类选择器</h2>
        <h3>静态伪类选择</h3>
        <h3>动态伪类选择</h3>
        <h3>其他伪类选择</h3>
    </body>
    </html>

    这里有三个h3标签,我们使用hover对他进行选择

        <style>
            h3:hover{color: cyan;font-size: 25px;}
        </style>

    当我们鼠标移动到标题时,标题会变成天蓝色,字体变成25个像素大小

    比如这样

     然后我们还可以看看第二个属性

    :active可以让你鼠标点击但是不松开时显示你的CSS效果

    我们也来写一下,直接加在上面的代码里面

        <style>
            h3:hover{color: cyan;font-size: 25px;}
            h3:active{color:darkmagenta;font-size: 10px;}
        </style>

    这时,只要我在标题上按住左键,他就变成紫红色,字体缩小到10个像素大小

    是不是觉得很好玩呢?

     那么我们现在就玩一玩剩下的:focus选择

    这个可没什么意思了,他是针对于输入框等其他内容的,这里我演示不了,大家可以去W3里面试试这个效果:

    CSS :focus 伪类 (w3school.com.cn)icon-default.png?t=L9C2https://www.w3school.com.cn/cssref/pr_pseudo_focus.asp#:~:text=%3Afocus%20%E4%BC%AA%E7%B1%BB%E5%9C%A8%E5%85%83%E7%B4%A0%E8%8E%B7%E5%BE%97%E7%84%A6%E7%82%B9%E6%97%B6%E5%90%91%E5%85%83%E7%B4%A0%E6%B7%BB%E5%8A%A0%E7%89%B9%E6%AE%8A%E7%9A%84%E6%A0%B7%E5%BC%8F%E3%80%82%20%E6%B3%A8%E9%87%8A%EF%BC%9A%20IE%20%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%8D%E6%94%AF%E6%8C%81%E6%AD%A4%E5%B1%9E%E6%80%A7%E3%80%82%20%E8%BF%99%E4%B8%AA%E4%BC%AA%E7%B1%BB%E5%BA%94%E7%94%A8%E4%BA%8E%E6%9C%89%E7%84%A6%E7%82%B9%E7%9A%84%E5%85%83%E7%B4%A0%E3%80%82,%E4%BE%8B%E5%A6%82%20HTML%20%E4%B8%AD%E4%B8%80%E4%B8%AA%E6%9C%89%E6%96%87%E6%9C%AC%E8%BE%93%E5%85%A5%E7%84%A6%E7%82%B9%E7%9A%84%E8%BE%93%E5%85%A5%E6%A1%86%EF%BC%8C%E5%85%B6%E4%B8%AD%E5%87%BA%E7%8E%B0%E4%BA%86%E6%96%87%E6%9C%AC%E8%BE%93%E5%85%A5%E5%85%89%E6%A0%87%EF%BC%9B%E4%B9%9F%E5%B0%B1%E6%98%AF%E8%AF%B4%EF%BC%8C%E5%9C%A8%E7%94%A8%E6%88%B7%E5%BC%80%E5%A7%8B%E9%94%AE%E5%85%A5%E6%97%B6%EF%BC%8C%E6%96%87%E6%9C%AC%E4%BC%9A%E8%BE%93%E5%85%A5%E5%88%B0%E8%BF%99%E4%B8%AA%E8%BE%93%E5%85%A5%E6%A1%86%E3%80%82%20%E5%85%B6%E4%BB%96%E5%85%83%E7%B4%A0%EF%BC%88%E5%A6%82%E8%B6%85%E9%93%BE%E6%8E%A5%EF%BC%89%E4%B9%9F%E5%8F%AF%E4%BB%A5%E6%9C%89%E7%84%A6%E7%82%B9%EF%BC%8C%E4%B8%8D%E8%BF%87%20CSS%20%E6%B2%A1%E6%9C%89%E5%AE%9A%E4%B9%89%E5%93%AA%E4%BA%9B%E5%85%83%E7%B4%A0%E5%8F%AF%E4%BB%A5%E6%9C%89%E7%84%A6%E7%82%B9%E3%80%82大家可以试试上面两个效果,不想亲自写可以复制我的,打开就可以观察属性变化了

    <!DOCTYPE html>
    <html lang="Zh-cn">
    <head>
        <title>伪类选择器</title>
        <style>
            h3:hover{color: cyan;font-size: 25px;}
            h3:active{color:darkmagenta;font-size: 10px;}
            h3:focus{color: green;font-size: 30;}
        </style>
    </head>
    <body>
        <h2>伪类选择器</h2>
        <h3>静态伪类选择</h3>
        <h3>动态伪类选择</h3>
        <h3>其他伪类选择</h3>
    </body>
    </html>

    其他伪类选择

    我们有时候会用到一些像列表一样的结构,比如这样

    <ui>
            <li>one</li>
            <li>two</li>
            <li>three</li>
            <li>four</li>
            <li>five</li>
        </ui>

    如果我们想让它的第一个标签变色呢?该怎么选择?

    有人说,那多简单啊,加个class或者id都可以

    但是,当我将第一行删去,第二行就变成第一行,那此时第二行没有id,也没有class,那就不会变色,但是我要求第一行始终是我要的效果啊!

    那,这个时候,就可以用我们的伪类选择器来写了,这次我们用一些平常不怎么用的选择属性

    我们可以这样写,先看代码再分析

    <!DOCTYPE html>
    <html lang="Zh-cn">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>其他伪类选择</title>
        <style>
            li:first-child{color: green;}
        </style>
    </head>
    <body>
        <ui>
            <li>one</li>
            <li>two</li>
            <li>three</li>
            <li>four</li>
            <li>five</li>
        </ui>
    </body>
    </html>

    这里我们使用:first-child选择li标签第一个元素,让他变成绿色,注意了,他是始终选择第一行

    我们看看效果:

     这个时候,我们删掉第一行,此时第二行变成了第一行

     此时,这个第一行仍然是绿色

    那么有人就问了,可不可以让最后一个标签也始终有CSS的效果?当然可以!

    我们使用:last-child可以达到这个效果,我这里就不做演示了,自己尝试

    那既然这样也可以,又有人问了,我想让他其他行数保持属性呢?或者说我想让他单数行或者双数行改变属性呢?

    当然,也可以实现,我们还要一个选择器——:nth-child()

    这个选择器有一个(),这个括号是干嘛的?当然是填你要改变的行数的,比如,改变所有行数样式可以这样:nth-child(n)

    改变第2行的颜色就是这样写:

    li:nth-child(2){color: mediumvioletred;}

    当然,既然括号里面可以指的数字,那我岂不是可以玩玩算法,我可以这样li:nth-child(2n)

    还真没错,真可以,效果是这样的

     那么,既然可以怎么玩,那么剩下的就自己研究吧!不过,其实选择单数双数有更简单的,不需要2n

    Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词(第一个子元素的下标是 1)

    所以,这样就可以:

    :nth-child(odd)
    :nth-child(even)

    不多说,大家自己去多试试吧!

    嘿嘿嘿!别以为就这样完了,我再说个让伪类选择更简单的选择

    我们上面的选择都是直接选择,但是我们还有一种伪类选择,可以反选,什么是反选?就是除了我选中的,其余都执行CSS效果

    这个选择器就是 li:not(),这个括号里面填需要排除的元素,比如我需要让除第一个元素,其他元素都变红色,我可以这样写

    <!DOCTYPE html>
    <html lang="Zh-cn">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>其他伪类选择</title>
        <style>
            li:not(li:first-child){color: orangered;}
        </style>
    </head>
    <body>
        <ui>
            <!-- <li>one</li> -->
            <li>two</li>
            <li>three</li>
            <li>four</li>
            <li>five</li>
            <li>two</li>
            <li>three</li>
            <li>four</li>
            <li>five</li>
        </ui>
    </body>
    </html>

    这样就选择了li标签中除了li:first-child的所有元素,效果是这样的:

     最后,你有没有发现,我这个ui、标签里面全都是li标签,所以我每次都是选择li标签,但是我要是再里面加入其他标签,他也还是只改变li标签,比如这样:

     这个CSS效果没有让第一个元素变色,也没有让第一个li标签变色,像这样的情况,我们就应该用另一个选择方式——:first-of-type

    这个是直接选择父元素标签内指定标签的第一个元素,这样这个CSS效果就不会像上面那个一样失效

    所以,有时候写代码,发现CSS失效,可以看看是不是这个原因

    好了,伪类的选择器就讲到这,下次再说一说伪元素

    展开全文
  • CSS选择器详解

    万次阅读 多人点赞 2020-08-29 19:06:55
    CSS所有选择器列表 CSS选择器用于选择你想要的元素的样式的模式。下面是css所有的选择器 选择器 示例 示例说明 css版本 .class .intro 选择所有class="intro"的元素 1 #id #firstname 选择所有id=...
  • Android 仿IOS3D时间选择器城市选择器

    千次下载 热门讨论 2016-01-27 16:47:56
    Android 仿IOS3D时间选择器城市选择器 城市数据从数据库读取,可自由添加数据。 详情可见 http://blog.csdn.net/u014061684/article/details/50595237
  • Android自定义日期选择器源码

    万次下载 热门讨论 2014-08-23 15:42:54
    配套博客地址:http://blog.csdn.net/wwj_748/article/details/38778631
  • CSS选择器

    千次阅读 2022-01-28 22:13:42
    CSS选择器一、id和class二、选择器2.1元素选择器2.2 id选择器 一、id和class id和class都是用来选择元素,以便进行CSS操作或者JavaScript操作的。 id属性具有唯一性,也就是说在一个页面中相同的id只能出现一次。 ...
  • 仿iphone日期选择器,项目需要一个能选择开始时间和结束时间,用别人demo多封装了一次。
  • 1.标签选择器 语法格式: <style> 标签名{ 属性:属性值; 属性:属性值; } </style> 标签选择器主要针对的是页面中某个标签中的样式设置,它的作用范围是这个页面内所有写在该标签内的内容,标签...
  • 选择器和ID选择器的区别

    千次阅读 多人点赞 2020-12-24 18:01:18
    与类不同,在一个 HTML 文档中,ID 选择器会使用一次,而且仅一次。 下面代码是正确的: <p> 三年级时,我还是一个 <span class="stress">胆小如鼠</span> 的小女孩,上课从来不敢回答老师提出的...
  • 选择器之id选择器

    千次阅读 2022-01-29 08:56:26
    id选择器可以为标有特定id的HTML元素指定特定的样式。 HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义 (1)代码: <!DOCTYPE html> <html lang="en"> <head> <meta ...
  • 文章目录jQuery基本选择器js选择器(原生选择器) jQuery基本选择器 1. ID选择器 ID选择器#id就是利用DOM元素的id属性值来筛选匹配的元素,并以iQuery包装集的形式返回给对象。 使用公式:$("#id") 示例:$("#box")...
  • CSS常用选择器 CSS选择器的作用是从HTML页面中找出特定的某类元素,而常用的CSS选择器有如下几类,一起来看看吧! 一、通配符选择器 通配符选择器常用 ‘*’ 号表示,它是所有选择器里作用范围最广的,能匹配页面中...
  • css选择器有哪些?

    千次阅读 2022-04-04 17:50:37
    css选择器有很多,但是常用到的也就几个,今天总结一下。 二、具体选择器 2.1、id选择器 #myId {} 2.2、类选择器 .myClass {} 2.3、标签选择器 p,h1 {} 2.4、后代选择器 div h1 {} 2.5、子选择器 div>h1 {} ...
  • 【JQuery框架】五大选择器“全家桶”详解!!!

    千次阅读 多人点赞 2021-01-30 12:16:29
    选择器基本操作 1、事件绑定 2、入口函数 3、样式控制 一、基本选择器 1、标签选择器 2、id选择器 3、类选择器 4、并集选择器 二、层级选择器 1、后代选择器 2、子选择器 三、属性选择器 1、属性名称...
  • CSS的四种基本选择器和四种高级选择器

    万次阅读 多人点赞 2018-07-11 13:48:38
    CSS选择器:就是指定CSS要作用的标签,那个标签的名称就是选择器。意为:选择哪个容器。 CSS的选择器分为两大类:基本选择题和扩展选择器。 基本选择器: 标签选择器:针对一类标签 ID选择器:针对某一个特定的...
  • html的几种选择器

    千次阅读 2021-08-23 23:23:24
    一、并集选择器 就是把两个选择器写在一起,用逗号隔开。例如:.pp1,.pp2{} <DOCTYPE! html> <html> <head> <title>第九题</title> <meta charset="utf-8"> <style...
  • 信号选择器功能为从两路信号中二选一作为输出信号,信号选择器功信号输出控制方式有自动高选、自动低选、通过外部开关量/电平信号控制选择一路输入信号输出四种方式,然后将选出的信号与输入信号、...
  • iOS城市选择器

    千次下载 热门讨论 2014-11-26 16:48:01
    读取本地的国家城市的json数据,显示到三列的pickerview上,用于选择国家和城市
  • 复合选择器是通过基本选择器进行组合后构成的,常用的复合选择器有:交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器和属性选择器等。 1. 交集选择器 交集选择器由两个选择器直接构成,其中...
  • JQuery 选择器重点内容

    万次阅读 多人点赞 2021-02-22 22:45:34
    JQuery 选择器重点内容: 1. 基本选择器 (*重点) 标签选择器(元素选择器) * 语法: $(“标签名”) 获得 所有匹配标签名称的元素 id选择器 * 语法: $("#id的属性值") 获得与指定id属性值匹配的元素 类选择器 * ...
  • css标签选择器、类名选择器、多类名选择器 标签选择器:顾名思义,标签选择器就是在css样式中通过标签名字来对标签的样式来进行修改。 代码如下: <!DOCTYPE html> <html lang="en"> <head>...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,416,393
精华内容 1,366,557
关键字:

选择器