• jQuery笔记2——jquery选择器


    jquery选择器语法


     

    一.什么是选择器语法:

    • 1.就是对DOM对象进行定位的条件,比如根据ID定位,根据标签类型名,根据标签采用样式选择器
    • 2.jQuery中只有三种选择器

     

     


     

    (一).基本选择器:

           1.【定位条件】:可以根据ID定位,根据标签类型名,根据标签采用样式选择器

           2.【使用】:

                      1).$("#id编号"):代替document.getElementById("id");

                                             根据ID编号定位对应的DOM对象。让DOM对象保存到一个数组中

                                             并返回,返回这个数组就是【jQuery对象】

                    2).$(".样式选择器名称"):代替document.getElementsByClassName("样式选择器名称");

                                                          将使用了指定的样式选择器的DOM对象保存到同一个数组中,并返回。返回的这个数组就是【jQuery对象】

                    3).$("标签类型名"):代替document.getElementsByTagName()

                                                  将所有指定的标签类型关联的dom对象保存到同一个数组中并返回,

                                                  返回的这个数组就是【jQuery对象】

                    4).$("*"):定位浏览器中所有的dom对象保存到同一个数组中并返回,

                                 返回的这个数组就是【jQuery对象】

                    5).$("条件1,条件2"):只要dom对象满足其中的一种条件,就会被定位到数组中

                          相当于或的关系(也叫组合选择器)

    (二).层级选择器:

    1.[定位条件]:

                    可以根据标签之间父子关系定位
                    可以根据标签之间兄弟关系定位
    2.[标签之间的关系]:

      • 1)父子关系:就是包含关系
    <tr>
         <td>
                <input type = "checkbox">
         </td>
    </tr>

     

    td 是 tr 的 【直接子标签】

    input 是 td 的 【直接子标签】
    input 是 td 的 【间接子标签】

      • 2)兄弟关系:两个标签拥有相同的父标签,并且彼此之间没有包含关系

     

    1 <body>
    2        <div>1</div> 大哥
    3        <div>2</div> 二哥
    4        <p>这是段落</p> 三弟
    5 </body>


    div与p是兄弟关系

    3.【使用】:

    1)$("定位父标签条件>定位子标签条件")

          定位当前父标签下,所有满足条件的【直接子标签】

    2)$("定位父标签条件 定位子标签条件")

          定位当前父标签下,所有满足条件的【直接子标签】和【间接子标签】

    3)$("定位当前标签条件~定位兄弟标签条件")

          定位当前标签后面,所有满足条件的兄弟标签

    4)$("定位当前标签条件+定位兄弟标签条件"):

          定位当前标签后面与之紧邻的,并且满足条件的所有兄弟标签

       (假如当前标签是div(大哥),与之紧邻且满足兄弟关系的是二哥)

    5)$("定位当前标签条件").siblings("定位兄弟条件")

                         定位当前标签【前面与后面】所有满足条件的兄弟标签

    (三).input标签选择器:

    1.input标签组成:

        1. <input type = "text">
        2. <input type = "passsword">
        3. <input type = "checkbox">
        4. <input type = "file">
        5. <input type = "button">
        6. <input type = "submit">
        7. <input type = "reset">

    2.input标签作用:
        作为浏览器向网站发送请求时所携带的请求参数


    3.【使用】:$(":type属性的名字")


    4.【例子】:

    $(":button"):定位页面中所有的button关联的dom

    $(":checkbox"):定位页面中所有的checkBox关联的dom

    $(":table"):什么都关联不到

  • 相关阅读:
    剑指Offer--反转链表
    剑指Offer--链表中倒数第k个结点
    面向对象的六原则一法则
    常见错误汇总
    记人生第一次CF体验
    Game of Credit Cards
    Shell Game (模拟)
    数列分块入门 1 LibreOJ
    范德蒙恒等式
    C. Vasya and String (尺取法)
  • 原文地址:https://www.cnblogs.com/wwww2/p/12129776.html
Copyright © 2020-2023  润新知