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