this相关问题及jQuery选择器
this的相关问题
this指代
- this指代当前操作的DOM对象。
- 在jQuery中,this可以用于单个对象,也可以用于多个对象。
1
2
3
4
5
6$('#btn').click(function(){
alert(this.innerHTML); // 单个对象,this指代当前id为btn的DOM对象
});
$('div').each(function(index){
alert(this.innerHTML); // 多个对象,this指代当前循环中索引为index的DOM对象
});
jQuery中的this和$(this)的区别
- jQuery中的this指代的是DOM对象,$(this)指代的是包装当前DOM对象的jQuery对象。
1
2
3
4$("div").each(function(index){
alert($(this)); // [object Object] jQuery对象
alert(this); // [object HTMLDivElement] DOM对象
});
jQuery选择器
- jQuery的最大贡献之一就是方便的获取DOM元素,并对DOM元素进行操作。
获取指定id的元素,对其进行操作:
1 | $('#info'); // 获取id为info的元素 |
获取指定class的元素,对其进行操作:
1 | $('.info'); // 获取class为info的元素 |
现有一系列具有相同className的元素,而这些元素之间没有办法互相区分彼此:
1 | <!DOCTYPE html> |
获取这一系列元素中的第一个元素:
1
$('.info:first').val(); // 获取class为info的一系列元素中的第一个元素的值,即0
获取这一系列元素中的最后一个元素:
1
$('.info:last').val(); // 获取class为info的一系列元素中的最后一个元素的值,即4
获取这一系列元素中的任意一个元素:
1
$('.info:eq(2)').val(); // 获取class为info的一系列元素中索引为2的元素的值,即2(索引从0开始)
选择符合某些条件的复数个元素:
1
2$('.info:gt(1)'); // 获取class为info的一系列元素中索引大于1的对象,即2,3,4
$('.info:lt(2)'); // 获取class为info的一系列元素中索引小于2的对象,即0,1选择系列元素中索引为奇数的元素:
1
2$('.info:odd'); // 获取class为info的一系列元素中索引为奇数(1,3)的对象,即1,3
$('.info:even'); // 获取class为info的一系列元素中索引为偶数(0,2,4)的对象,即0、2、4获取这一系列元素中的第一个:
1
$('.info:first').val(); // 获取class为info的一系列元素中的第一个元素的值,即0
获取这一系列元素中的第一个:
1
$('.info:first').val(); // 获取class为info的一系列元素中的第一个元素的值,即0
现有一系列链接元素,但是它们并没有唯一id标识,也没有className区分,各个元素之间仅有href是不一致的:
1 | <!DOCTYPE html> |
选择带有href属性的a标签元素:
1
$('a[href]'); // 选择带有href属性的a标签,即1,2,3
选择href属性值为info的a标签元素:
1
$('a[href="info"]'); // 选择href属性为info的a标签,即1
选择href属性值以info开头的a标签元素:
1
$('a[href^="info"]'); // 选择带有href属性值已info开头的a标签,即1,2
选择href属性值已tion结尾的a标签元素:
1
$('a[href$="tion"]'); // 选择带有href属性值已tion结尾的a标签,即2
选择href属性值中有fo字段的a标签元素:
1
$('a[href*="fo"]'); // 选择带有href属性值中包含fo的a标签,即1,2
也可以进行反选,选择href属性值中不包含info的a标签元素:
1
$('a[href!="info"]'); // 选择带有href属性值中不包含info的a标签,即3
根据DOM元素的内容来选择合适的元素:
1 | $('div:contains("info")'); // 选择div标签中内容包含info字段的元素 |
根据DOM元素之间的关系来确定元素:
- 同级元素:即当前元素处于同一层级。
- 父级元素:即当前元素的直属上层元素。
- 祖先元素:即当前元素的所有上层元素。
- 子级元素:即当前元素的直属子层元素。
后代元素:即当前元素的所有子层元素。
1
2
3
4<div>
<p>0</p> // 当前两个标签为p的元素处于同一层级,属于同级元素
<p>1</p>
</div>1
2
3
4
5
6<div id='ancestor'>
<div id='father'> // 标签为p的元素的父级元素是id为father的元素,祖先元素为id为father和ancestor的元素
<p><span>0</span></p> // id为father的元素的子级元素是标签为p的元素,后代元素为标签为p与标签为span的元素
<p>1</p>
</div>
</div>现在有如下代码:
1
2
3
4
5
6
7
8
9
10<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="firstletter" />
<input name="secondletter" />
</fieldset>
<input name="none" />
</form>选择标签为form的所有子级input元素:
1
$('form>input'); // 选择标签为from的元素下的所有标签为input的子级元素,即name=“name”,name=“none”的元素
选择标签为form的所有的后代input元素:
1
$('form input'); // 选择标签为from的元素下的所有标签为input的后代元素,即name=“name”,name=“none”,name=“firstletter”,name=“secondletter”的元素
选择符合条件的同级元素(同级元素中的第一个):
1
$('label+input'); // 选择标签为label的同级元素中,标签为input的元素中的第一个,即name=“name”,name=“firstletter”的元素
选择所有符合条件的同级元素:
1
$('label~input'); // 选择标签为label的同级元素中,所有标签为input的元素,即name=“name”,name=“firstletter”,name=“secondletter”,name=“none”的元素
选择后代元素中包含选定元素的元素:
1
$('div:has(span)') // 选择所有后代元素中包含span元素的div元素
选择器总结
基础选择器
1 | $('#info'); // 选择id为info的元素,id为document中是唯一的,因此可以通过该选择器获取唯一的指定元素 |
基本过滤器
- 基本选择器获取的元素集合,通过过滤器的筛选,使选择更加精确。
1 | $('.infoClass:first'); // 选择class为infoClass的所有元素集合,并筛选集合中的第一个元素 |
内容过滤器
- jQery准备了内容过滤器用于对选择的元素集合内容进行过滤。
- 统一名称:
- 空元素:不包含任何后代元素或文本内容的元素,如
- 非空元素:包含后代元素或者包含文本内容的元素
1 | $('div:contains("info")'); // 选择标签为div的所有元素集合,并筛选集合中文本内容包含info字段的元素 |
可视化过滤器
- 对于元素是否可见,jQuery也进行了处理。
1 | $('div:visible'); // 选择标签为div的所有元素集合,并筛选集合中可见的元素 |
属性过滤器
- 不同元素之间,拥有不同的属性参数,jQuery允许通过参数进行过滤。
1 | $('input[placeholder]'); // 选择所有标签为input的元素集合,并筛选包含placeholder属性的元素 |
子元素过滤器
- 这个比较容易混淆,进行对比总结。
1 | <ul> |
1 | $('ul li:first-child').css('background-color', 'red'); // 选择每一个ul标签下的li元素集合中的第一个 |
1 | $("p:nth-child(3)"); //选取属于其父元素的第三个子元素的每个<p> 元素 |
关系选择器
- 同级元素:即当前元素处于同一层级。
- 父级元素:即当前元素的直属上层元素。
- 祖先元素:即当前元素的所有上层元素。
- 子级元素:即当前元素的直属子层元素。
- 后代元素:即当前元素的所有子层元素。
1 | $('form input'); // 选择所有标签为form的元素中,后代元素标签为input的元素 |
表单选择器
- 方便表单元素的选择。
1 | $(':input'); // 选择所有表单输入元素,包括input,textarea,select |
- 表单元素过滤器
1 | $(':enabled'); // 选择所有的可操作的表单元素 |
对比总结
- 为了方便记忆,将功能相关的选择器进行总结:
$(‘#id’)与$(‘.calss’)
1
2$('#id'); // 根据id选择元素
$('.class'); // 根据class选择元素$(‘div:first’)与$(‘div:last’)
1
2$('div:first'); // 选择div元素集合中的第一个
$('div:last'); // 选择div元素集合中的最后一个$(‘div:odd’)与$(‘div:even’)
1
2$('div:odd'); // 选择div元素集合中的奇数个元素
$('div:even'); // 选择div元素集合中的偶数个元素$(‘div:gt(i)’)与$(‘div:lt(i)’)
1
2$('div:gt(i)'); // 选择div元素集合中索引大于i的元素
$('div:lt(i)'); // 选择div元素集合中索引小于i的元素$(‘div:empty’)与$(‘div:parent’)
1
2$('div:empty'); // 选择div元素集合中空元素
$('div:parent'); // 选择div元素集合中非空元素$(‘div:visible’)与$(‘div:hidden’)
1
2$('div:visible'); // 选择div元素集合中可见元素
$('div:hidden'); // 选择div元素集合中隐藏元素$(‘ul li:first’)与$(‘ul li:first-child’)
1
2$('ul li:first'); // 选择所有ul后代元素li元素集合中的第一个
$('ul li:first-child'); // 选择每个ul后代元素li元素集合中的第一个$(‘:disable’)与$(‘:enable’)
1
2$(':disable'); // 选择所有可以操作的表单元素
$(':enable'); // 选择所有不可以操作的表单元素