jQuery选择器

在页面上获得各种元素节点对象而使用的条件就是选择器。
document.getElementById()
document.getElementsByTagName();
document.getElementsByName();
1.基本选择器
$(‘#id属性值’) ----------->document.getElementById()
$(‘tag标签名称’)----------->document.getElementsByTagName();
$(‘.class属性值’) class属性值选择器
$(‘*’) 通配符选择器
$(‘s1,s2,s3’)联合选择器
在这里插入图片描述
在这里插入图片描述
2. 层次选择器
2.1 $(s1 s2) [父子]
派生选择器:在s1内部获得全部的s2节点(不考虑层次)

$(“div  span”):
<div>
	<span></span> 1
	<p>
		<span></span> 1
	</p>
</div>
<span></span>

2.2 $(s1 > s2) [父子]
直接子元素选择器: 在s1内部获得子元素节点s2

$(“div > span”):
<div>
	<span></span> 1
	<p>
		<span></span>
	</p>
	<span></span> 1
</div>
<span></span>

2.3 $(s1 + s2) [兄弟]
直接兄弟选择器:在s1后边获得紧紧挨着的第一个兄弟关系的s2节点

$(“div + span”):
<div>
	<span></span>
	<p>
		<span></span>
	</p>
	<span></span>
</div>
<span></span> 1
<p></p>
<span></span>

2.4 $(s1 ~ s2) [兄弟]
后续全部兄弟关系节点选择器:在s1后边获得全部兄弟关系的s2节点

$(“div ~ span”):
<div>
	<span></span>
	<p>
		<span></span>
	</p>
	<span></span>
</div>
<span></span> 1
<p></p>
<span></span> 1

在这里插入图片描述
在这里插入图片描述
3.并且(过滤)选择器
在这里插入图片描述
3.1 基本用法
在这里插入图片描述
在这里插入图片描述
3.2 复杂用法
注意:
① 并且选择器可以单独使用
② 各种选择器都可以构成“并且”关系
③ 并且关系的选择器可以使用多个,每个选择器使用前,已经获得节点的下标要“归位”(归零)处理
④ 多个并且关系的选择器,没有前后顺序要求,但是要避免产生“歧义”
在这里插入图片描述
在这里插入图片描述
4. 内容过滤选择器
4.1 :contains(内容)
包含内容选择器,获得的节点内部必须包含指定的内容

$(“div:contains(beijing)”)
<div>xiaoming like <span>beijing</span></div> 1
<div>mary like newyork</div>

4.2 :empty
获得空元素(内部没有任何元素节点/文本(空) 节点)节点对象

$(“div:empty”)
<div>xiaoming like beijing</div>
<div>mary like newyork</div>
<div><p></p></div>
<div>     </div>
<div></div> 1

4.3 :has(选择器)
节点内部必须包含指定选择器对应的元素

$(‘div:has(.apple)’)
<div><p></p></div>
<div><span class=”apple”></span></div> 1

4.4 :parent
寻找的节点必须作为父元素节点存在

$(‘div:parent’)
<div>xiaoming like beijing</div> 1
<div>mary like newyork</div> 1
<div><p></p></div> 1
<div>     </div> 1
<div></div>

在这里插入图片描述
5.表单域选中选择器
复选框、单选按钮、下拉列表
$(:checked)复选框、单选按钮 选中选择器
$(:selected) 下拉列表 选中选择器
在这里插入图片描述
在这里插入图片描述
总结:
1.选择器使用
a)基本
#id .class tag标签 * s1,s2,s3(联合选择器)
b)层次
$(s1 s2)
$(s1 > s2)
$(s1 + s2)
$(s1 ~ s2)
c)并且
:first :last
:eq() :gt() :lt()
:odd :even
$(s1s2s3) 【并且选择器】 获得的节点必须满足s1/s2/s3全部条件
$(s1,s2,s3) 【联合选择器】 获得的节点满足s1/s2/s3其中的一个条件即可
d)内容过滤
:contains(text) :empty :has(选择器) :parent
e)表单域选中
:checked 复选框、单选按钮
:selected 下拉列表
四. 属性操作

<input  type=”text”  class=”apple”  id=”username”  name=”username” value=”tom” 
	address=”beijing”  />

dom方式操作属性值:
获取:
itnode.属性名称
itnode.getAttribute(属性名称);
修改:
itnode.属性名称= 值;
itnode.setAttribute(属性名称,值);

jquery方式操作属性(attribute):
$().attr(属性名称); //获得属性信息值
$().attr(属性名称,值); //设置(修改)属性的信息
$().removeAttr(属性名称); //删除属性
$().attr(json对象); //同时为多个属性设置信息值,json对象的键值对就是名称和值
$().attr(属性名称,fn); //通过fn函数执行的return返回值对属性进行赋值

获取属性信息:
在这里插入图片描述
三种方式修改属性:
在这里插入图片描述
删除属性:
在这里插入图片描述
五. 快捷操作
1.class属性值操作
$().attr(‘class’,值); //修改class属性
$().attr(‘class’); //获取class属性
$().removeAttr(‘class属性’); //删除class的属性

class具体快捷操作方法:
$().addClass(class属性值); //给class属性追加信息值
$().removeClass(class属性值); //删除class属性中的某个信息值
$().toggleClass(class属性值); //开关效果,信息值有就删除,没有就添加
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
class属性值的删除和开关效果:
在这里插入图片描述
2. 标签包含内容操作
<div>hello<span>world</span></div>
javascript操作:
dvnode.innerHTML; 获得div包含的信息
dvnode.innerHTML = XXX; 设置div包含的内容
(innerHTML不是w3c标准技术,许多浏览器对其有支持而已)

jquery操作:
$().html(); //获得节点包含的信息
$().html(信息); //设置节点包含的内容
$().text(); //获得节点包含的“文本字符串信息”内容
$().text(信息); //设置节点包含的内容(有html标签就把“><”符号变为符号实体)
在这里插入图片描述
在这里插入图片描述
2.1 html() 和 text()方法的区别:
①获取内容
前者可以获取html标签 和 普通字符串内容
后者只获取普通字符串内容 (会自动过滤html标签)
②设置内容
前者可以设置html标签 和 普通字符串内容
后者只设置普通字符串内容,如果内容里边有tag标签内容,就把其中的”<”“>”符号转变为符号实体 <-----&lt; >----&gt; 空格------&nbsp;
以上两种操作(获取/设置)如果针对的操作内容是纯字符串内容,则使用效果一致。
3. css样式操作
$().css(name,value); //设置
$().css(name); //获取
$().css(json对象); //同时修改多个css样式
3.1 css()样式操作特点:
① 样式获取,jquery可以获取 行内、内部、外部的样式。
dom方式只能获得行内样式
② 获取复合属性样式 需要拆分为"具体样式"才可以操作
(有的浏览器是可以获得复合属性信息的,例如chrome)
例如: background 需要拆分为 background-color background-image 等进行操作
border: border-left-style border-left-width border-left-color 等
margin: margin-left margin-top 等
③ 样式的设置,会被设置为“行内样式”
有则修改,无则添加
(复合属性样式可以直接进行设置操作,无需拆分为具体样式)

div样式获取操作:
在这里插入图片描述
样式设置:
在这里插入图片描述
4. value属性值快捷操作
$().attr(‘value’); //获取value值
$().attr(‘value’,信息值);//设置value值

快捷操作:
$().val(); //获得value属性值
$().val(信息值); //设置value属性的值
该val()方法在 复选框、单选按钮、下拉列表 的使用有卓越表现。
4.1 复选框操作
① 获得被选中复选框的value属性值
② 设置默认情况下哪个复选框被选中
获取选中复选框的value属性值:
在这里插入图片描述
设置复选框默认选中项目:
在这里插入图片描述
4.2 下拉列表操作
① 获取选中项目的value值
② 设置默认选中项目

下拉列表的获取和设置操作:
在这里插入图片描述
在这里插入图片描述
4.3 单选按钮操作
单选按钮获取和设置操作:
在这里插入图片描述
5. 复选框操作
全选、反选、全不选
$().attr(‘checked’,true); //设置复选框选中
$().attr(‘checked’,false); //取消复选框选中
$().attr(‘checked’); //判断复选框选中情况,返回布尔值
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值