zoukankan      html  css  js  c++  java
  • jQuery之基础选择器

    这一系列是我系统学习jQuery的笔记,有助于当前学习理解和日后回忆。内容来自慕课网陶老师的jQuery基础教程,先谢过。

     1.基础选择器

    • id选择器:$("#elementId")
    • 元素选择器:$("elementTag")
    • 类选择器:$(".className")
    • 通配选择器:$("*") 页面所有元素,包括<head> <body> <script>这些
    • 或选择器:$("selector1,selector2,selectorN") 逗号隔开几个参数,取它们的
         <body>
            <div class="red">会被选上</div>
            <div class="green">会被选上</div>
            <div class="blue">我被落下</div>
            
            <script type="text/javascript">
                $(".red,.green").html("hi,我们的样子很美哦!");
            </script>
        </body>
    • 父子孙选择器:$("ance desc") 空格隔开参数,取父元素中的子孙元素

      如$("div span")表示取div中所有的span元素。

    • 父子选择器:$(parent > child) >隔开参数,取父元素中的子元素

         如$("div > span")表示取div(下图黑色框)中子一级(下图红色框)span元素,孙辈(下图蓝色框)之后的就不取了。

    • 邻居选择器:$("elementTag + ") +表示同级下一个元素,两个+自然就指下下个元素(如果有的话)。邻居选择器后还可以继续过滤选择。

         如下图灰色框表示div,$("div +")指红色框,$("div + +")指褐色框。如果红色框是一个label,则$("div+label")指红色框,否则无所指。

      

    • 邻居选择器2:$("elementTag ~")  ~表示同级后面的所有元素,同样后面还可以继续过滤选择。

         如下图灰色框代表div,则$("div~")表示两个红色框,$("div~label")表示这些红色框中的label。

     

    2.过滤选择器

    • :first   $("li:first")  获取第一个li
    • :first-child   $("li:first-child") 获取每组li中的第一个,得到集合
    • :last   $("li:last")   获取最后一个li
    • :last-child   $("li:last-child") 获取每组li中的最后一个,得到集合
    • :eq(index)     $(li:eq(2))取li的第三个,索引从0开始
    • :lt(index)   $(li:lt(2))取li的前2个
    • :gt(index)   $(li:gt(2))从第3个li取到最后
    • :contains(text)     $(li:contains('jQuery'))获取页面文本中包含'jQuery'的li
    • :has(elementTag)   $(li:has('p'))获取含有p标签的li
    • :hidden   $(input:hidden)获取隐藏的input元素
    • :visible   $(li:visible) 获取可见的li元素
    • [attribute=value]   $("li[title='like']") 获取title等于like的li元素
    • [attribute!=value]  $("li[title='like']") 获取title不等于like的li元素
    • [attribute*=value]   $("li[title*='果']")获取title属性值包含'果'的所有li元素

    3.表单选择器

    :input   获取<input>、<textarea>、<select>、<button>全部表单元素

    :text    获取单行输入元素

    :password 获取密码输入元素

    :radio  获取单选按钮

    :checkbox 获取多选按钮

    :image  当input的type=image时,元素显示为图像,但此时$("img")获取不到,需用:image

    :button 获取button按钮

    :checked 获取选中元素

    :selected 获取的下拉菜单中的项

  • 相关阅读:
    python基础33——进程池&线程池/协程
    python基础32——线程
    pycharm2020
    python基础31——进程
    python基础31——操作系统史&多道
    jmeter如何保持JSESSIONID
    Jmeter中自动重定向与跟随重定向的区别
    Jmeter之HTTP Cookie 管理器
    Kubernetes简述
    docker集群部署
  • 原文地址:https://www.cnblogs.com/feitan/p/5150533.html
Copyright © 2011-2022 走看看