你的位置:首页 > Java教程

[Java教程]深入学习jQuery选择器系列第一篇——基础选择器和层级选择器


×
目录
[1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器

前面的话

  选择器是jQuery的根基,在jQuery中,对事件处理、遍历DOM以及ajax操作都依赖于选择器。jQuery选择器完全继承了CSS的风格,两者的写法十分相似,只不过两者的作用效果不同。CSS选择器找到元素后添加样式,而jQuery选择器找到元素后添加行为。jQuery选择器可以分为基础选择器、层级选择器、过滤选择器和表单选择器四类。对于每类选择器,除了给出jQuery选择器的写法,也会给出相应的CSS选择器和DOM选择器的写法。有所比较,才能理解得更深。本文是jQuery选择器系列第一篇——基础选择器和层级选择器

 

基础选择器

  基础选择器是jQuery中最常用选择器,也是最简单的选择器,它通过元素id、class和标签名等来查找DOM元素

 

【1】id选择器

  id选择器$('#id')通过给定的id匹配一个元素,返回单个元素

<div id="test">测试元素</div><script>//选择id为test的元素并设置其字体颜色为红色$('#test').css('color','red');</script>

  对应CSS的id选择器

#test{color:red}

  对应DOM的getElementById()方法,而jQuery内部也使用该方法来处理ID的获取

document.getElementById('test').style.color = 'red';

 

【2】元素选择器

  元素选择器$('element')根据给定的元素名匹配元素,并返回符合条件的集合元素

<div>1</div><div>2</div><script>//选择标签名为div的元素并设置其字体颜色为红色$('div').css('color','red');</script>

  对应CSS的元素选择器

div{color:red}

  对应DOM的getElementsByTagName()方法,而jQuery内部也使用该方法来处理元素名的获取

Array.prototype.forEach.call(document.getElementsByTagName('div'),function(item,index,arr){  item.style.color = 'red';});

 

【3】类选择器

  类选择器$('.class')根据给定的类名匹配元素,并返回符合条件的集合元素

<div class="test">1</div><div class="test">2</div><script>//选择class为test的元素并设置其字体颜色为红色$('.test').css('color','red');</script>

  对应CSS的类选择器

.test{color:red}

  对应DOM的getElementsByClassName()方法,而jQuery内部也使用该方法来处理类名的获取

Array.prototype.forEach.call(document.getElementsByClassName('test'),function(item,index,arr){  item.style.color = 'red';});

 

【4】通配选择器

  通配选择器$('*')匹配文档中所有的元素,并返回集合元素

$('*').css('margin','0');

  对应CSS的通配选择器

* {margin:0}

  对应DOM的document.all集合

Array.prototype.forEach.call(document.all,function(item,index,arr){  item.style.margin = 0;});

  或者参数为通配符*的getElementsByTagName()方法

Array.prototype.forEach.call(document.getElementsByTagName('*'),function(item,index,arr){  item.style.margin = 0;});

 

【5】群组选择器

  群组选择器$('selector1,selector2,...')将每一个选择器匹配到的元素合并后一起,并返回集合元素

<div class="a">1</div><span id="b">2</span><a href="#">3</a><script>//选择符合条件的元素并设置其字体颜色为红色$('.a,#b,a').css('color','red');</script>

  对应CSS的群组选择器

.a,#b,a{color:red}

  对应DOM的querySelectorAll()选择器

Array.prototype.forEach.call(document.querySelectorAll('.a,#b,a'),function(item,index,arr){  item.style.color = 'red';});

 

层级选择器

  如果想通过DOM元素之间的层级关系来获取特定元素,层级选择器是一个非常好的选择。层级共包括后代元素、子元素、相邻元素和同级元素四种

 

【6】后代选择器

  后代选择器$('ancestor descendant')选择给定的祖先元素的所有后代元素,并返回集合元素

<div id="test">  <div>    <div>1</div>    <div>2</div>  </div></div><script>$('#test div').css('margin','10px');console.log($('#test div').length);//3</script>

  对应CSS的后代选择器

#test div{margin: 10px}

  对应DOM的getElement类方法

Array.prototype.forEach.call(document.getElementById('test').getElementsByTagName('div'),function(item,index,arr){  item.style.margin = '10px';});

  或者使用querySelectorAll()方法

Array.prototype.forEach.call(document.querySelectorAll('#test div'),function(item,index,arr){  item.style.margin = '10px';});

【6.1】子元素选择器

  子元素选择器$('parent > child')选择所有指定'parent'元素中指定的'child'的直接子元素,并返回集合元素

<div id="test">  <div>    <div>1</div>    <div>2</div>  </div></div><script>$('#test > div').css('margin','10px');console.log($('#test > div').length);//1</script>

  对应CSS的子元素选择器

#test > div{margin: 10px}

  对应DOM的querySelectorAll()方法

Array.prototype.forEach.call(document.querySelectorAll('#test > div'),function(item,index,arr){  item.style.margin = '10px';});

 

【7】一般兄弟选择器

  一般兄弟选择器$('prev ~ siblings')选择'prev'元素之后的所有同级的'siblings'元素,并返回集合元素

<ul>  <li id="test">1</li>  <li>2</li>  <li>3</li></ul><script>$('#test ~ li').css('color','red');console.log($('#test ~ li').length);//2</script>

  对应CSS的一般兄弟选择器

#test ~ li{color:red;}

  对应DOM的querySelectorAll()方法

Array.prototype.forEach.call(document.querySelectorAll('#test ~ li'),function(item,index,arr){  item.style.color = 'red';});

【7.1】相邻兄弟选择器

  相邻兄弟选择器$('prev + next')选择所有紧跟在'prev'元素后的'next'元素,并返回集合元素

<ul>  <li id="test">1</li>  <li>2</li>  <li>3</li></ul><script>$('#test + li').css('color','red');console.log($('#test + li').length);//1</script>

  对应CSS的相邻兄弟选择器

#test + li{color:red;}

  对应DOM的querySelectorAll()方法

Array.prototype.forEach.call(document.querySelectorAll('#test + li'),function(item,index,arr){  item.style.color = 'red';});