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标签组成:
- <input type = "text">
- <input type = "passsword">
- <input type = "checkbox">
- <input type = "file">
- <input type = "button">
- <input type = "submit">
- <input type = "reset">
2.input标签作用:
作为浏览器向网站发送请求时所携带的请求参数
3.【使用】：$(":type属性的名字")
4.【例子】：
$(":button"):定位页面中所有的button关联的dom
$(":checkbox"):定位页面中所有的checkBox关联的dom
$(":table"):什么都关联不到
