jQuery标签定位方法

cuisidong1997

于 2024-07-14 14:34:25 发布

阅读量68

点赞数 3

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/cuisidong1997/article/details/140416688

版权

jQuery
JQuery的作用:
$是
1. 写更少的代码,做更多的事情: write Less ,Do more
2. 将我们页面的JS代码和HTML页面代码进行分离

选择器
基本选择器：
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对象满足其中的一种条件就会，被定位到数组中
相当于MySQL中的or

层级选择器
1.定位条件：可以根据标签之间父子关系定位
可以根据标签之间兄弟关系定位
2.标签之间关系：
1 父子关系：就是包含关系

	<tr>
		<td>
			<input type="checkbox"
		</td>
	</tr>
	<!--
	td 是tr 的 直接子标签
	input是td 的直接子标签
	input是tr 的间接子标签
	-->

1
2
3
4
5
6
7
8
9
10
2 兄弟关系：两个标签拥有相同的父标签，并且彼此之间没有包含关系

<body>
	<div>1</div> 大哥
	<div>2</div> 二哥
	<p>段落</p>	  三弟
</body>

1
2
3
4
5
3.【使用】：

1） $(“定位父标签条件>定位子标签条件”)定位当前父标签下，所有满足条件的【直接子标签】

2） $(“定位父标签条件定位子标签条件”)定位当前父标签下，所有满足条件的【直接子标签】和【间接子标签】
3) $(“定位当前标签条件~定位兄弟标签条件”): 定位当前标签【后面】，所有满足条件的兄弟标签
4） $(“定位当前标签条件+定位兄弟标签条件”):定位当前标签【后面与之紧邻的】，并且满足条件的所有兄弟标签
5） $(“定位当前标签条件”).siblings(“定位兄弟标签条件”)定位当前标签[前面与后面]所有满足条件的兄弟标签

INPUT标签选择器:
1.INPUT标签组成:

1 2 3 4 5 6 7 8 2.INPUT标签作用：作为浏览器向网站发送请求是携带请求参数 3.[使用]: $(":type属性名字") 4.【例子】:

$(“:button”):定位页面中所有的button关联的DOM
$(“:checkbox”)：定位页面中所有的checkbox关联的DOM
$(“:table”):无法定位任何内容
JQUERY中过滤器

过滤器
1.对已经定位到jquery对象中DOM对象，进行二次过滤筛选的。
2.过滤器不能独立使用，必须声明在选择器后面
3.六种过滤器（三种常见过滤器）
4.将多个过滤器放到同一个jquery函数，进行层层过滤

基本过滤器:
1.[过滤器条件]: 根据已经定位的DOM对象在jquery对象中存储位置进行二次过滤筛选
2.[使用]:

$(“ 选择器 : f i rs t ”) ：留下满足条件中的第一个 D OM 对象例子：$ (“:button:first”):定位页面中第一个button
$(“ 选择器 : l a s t ”) ：留下满足条件中的最后一个 D OM 对象例子：$ (“:button:last”):定位页面中最后一个button
$(“ 选择器 : e q (下标值) ”) : 留下满足条件中的指定位置的 D OM 对象例子：$ (“div:eq(3)”) 定位页面中第三个DIV $(“选择器:lt(下标值)”)：留下满足条件中的指定位置之前的所有Dom 例子：
$(“:checkbox:lt(2)”):页面中前两个checkbox
$(“选择器:gt(下标值)”):留下满足条件中的指定位置之后的所有Dom 例子:
$(“:button:gt(3)”):位置在第四个butotn之后的所有的button

基本属性过滤器
1.[过滤条件]: 根据标签在声明时是否为指定属性进行手动赋值根据标签的属性内容与【指定内容】关系进行过滤器

2.[例子]:

问题1,哪一个DIV中没有name属性
所有DIV标签都有name属性
问题2：哪一个DIV中name属性的值是""
第一个DIV手动为name属性赋值，因此name属性值是默认值，就是""

1
2
3
4
5
6
7
8
9
10
11
还是在代码区中写好下面的例子都是上面代码块中的内容
3.[使用]:

$(“选择器[属性名]”):留下满足定位条件的并且在声明时为指定属性进行手动赋值的DOM对象
例子: $(“div[name]”)

1
2

(“ 选择器 [属性名 = ‘ 值 ’] ”) ：留下满足定位条件的并且指定属性内容【等于】指定内容 D OM 例子 :

(“div[name=‘two’]”):

$(“div[name=‘’]”):

$(“div[name!=‘four’]”):

1 2 3 4 5 6 3.$(“选择器[属性名^=‘值’]”):留下满足定位条件的并且指定属性内容以【指定内容为开头】所有DOM

    例子: $("div[name^='t']")   <div name="two">2</div>
		                                                          <div name="three">3</div>

1
2
4. $(“ 选择器 [属性名$ =‘值’]”)留下满足定位条件的并且指定属性内容以【指定内容为结尾】所有DOM

例子: $(" d i v [nam e$ =‘e’]")

1
5.$(“选择器[属性名*=‘值’]”)留下满足定位条件的并且指定属性内容【包含】指定内容的所有DOM

例子: $(“div[name*=‘o’]”)

1 2 6.$(“选择器[属性名1][属性名2*=‘值’][属性名3^=‘值’]”)

工作状态属性过滤器
1.html标签属性分类：
1）基本属性：绝大多数标签都拥有的属性，【id,name,title,rowspan】
2) 样式属性：背景，字体，边框
3) value属性：只存在【表单域标签中（input,select,textarea）】
4) 工作状态属性:只存在表单域标签[chekced，disabled，selected]
5) 监听事件属性： onclick ,onchange…

2.[使用]:
1)$(“选择器:enabled”)：留下满足条件的并且处于【可用状态】的DOM
例子: $(" : b u tt o n : e nab l e d ") ：定位所有处于可用的 b u tt o n 2)$ (“选择器:disabled”)：留下满足条件的并且处于【不可用状态】的DOM
例子: $(" : b u tt o n : d i s ab l e d ") ：定位所有处于不可用的 b u tt o n 3 ）$ (“选择器:checked”)：留下满足条件的并且处于【选中状态的】DOM
例子:$(“:checkbox:checked:first”):页面中第一个被选中的checkbox
4) $(“ 选择器 : se l ec t e d ”) ：留下满足条件的并且处于【选中状态的】 D OM 例子：$ (“select>option:selected”)：下拉列表中别选中的option

JQUERY对象中【功能函数】
一。show() & hide()：
show():负责让jquery对象包含的所有DOM对象关联的标签在浏览上显示 style=“display:block”
hide():负责让jquery对象包含的所有DOM对象关联的标签在浏览上隐藏 style=“display:none”

二。remove() & empty():
empty：将当前标签子标签进行清除处理
remove：将当前标签及其子标签一并删除
三. append() & appendTo()
1.共同点:都是操作标签中innerHTML，为当前标签添加子标签
2.append(): 父标签.append（子标签）；父亲给自己找了一个儿子
appendTo(): 子标签.appendTo(父标签); 儿子各自找了一个爹

cuisidong1997

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery标签定位方法

5） $(“定位当前标签条件”).siblings(“定位兄弟标签条件”)定位当前标签[前面与后面]所有满足条件的兄弟标签。4） $(“定位当前标签条件+定位兄弟标签条件”):定位当前标签【后面与之紧邻的】，并且满足条件的所有兄弟标签。2） $(“定位父标签条件定位子标签条件”)定位当前父标签下，所有满足条件的【直接子标签】和【间接子标签】3) $(“定位当前标签条件~定位兄弟标签条件”): 定位当前标签【后面】，所有满足条件的兄弟标签。
复制链接

扫一扫