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. 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"):什么都关联不到