zoukankan      html  css  js  c++  java
  • 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"):什么都关联不到

  • 相关阅读:
    tcp的三次握手和四次挥手
    前端文档规范
    阻止事件冒泡
    研发纠纷解决方案
    ui-router 中views的配置
    JXL操作Excel部分详解(java)
    utf-8与utf-16的区别
    把字符串转换为Double 类型
    spring MVC
    Android项目目录结构
  • 原文地址:https://www.cnblogs.com/wwww2/p/12129776.html
Copyright © 2011-2022 走看看