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 获取的下拉菜单中的项

  • 相关阅读:
    课堂作业04 2017.10.27
    课程作业 03 动手动脑 2017.10.20
    课程作业 03 2017.10.20
    HDU 3974 Assign the task
    POJ 2155 Matrix
    POJ 2481 Cows
    HDU 3038 How Many Answers Are Wrong
    CS Academy Array Removal
    POJ_1330 Nearest Common Ancestors LCA
    CF Round 427 D. Palindromic characteristics
  • 原文地址:https://www.cnblogs.com/feitan/p/5150533.html
Copyright © 2011-2022 走看看