前面的话

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

基础选择器

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

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';

元素选择器

  元素选择器$('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';
});

类选择器

  类选择器$('.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';
});

通配选择器

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

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

  对应CSS的通配选择器

* {margin:}

  对应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;
});

群组选择器

  群组选择器$('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元素之间的层级关系来获取特定元素,层级选择器是一个非常好的选择。层级共包括后代元素、子元素、相邻元素和同级元素四种

后代选择器

  后代选择器$('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);//
</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';
});

子元素选择器

  子元素选择器$('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';
});

一般兄弟选择器

  一般兄弟选择器$('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';
});

相邻兄弟选择器

  相邻兄弟选择器$('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);//
</script>

  对应CSS的相邻兄弟选择器

#test + li{color:red;}

  对应DOM的querySelectorAll()方法

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

深入学习jQuery选择器系列第一篇——基础选择器和层级选择器的更多相关文章

  1. 任务驱动,Winform VS WEB对比式学习.NET开发系列第一篇------身份证解析(不断更新的WEB版本及Winform版本源码)

    一 本系列培训随笔适用人群 1. 软件开发初学者 2. 有志于转向Web开发的Winform程序员 3. 想了解桌面应用开发的Web程序员 二 高效学习编程的办法 1 任务驱动方式学习软件开发 大部分 ...

  2. Webpack系列-第一篇基础杂记

    前言 公司的前端项目基本都是用Webpack来做工程化的,而Webpack虽然只是一个工具,但内部涉及到非常多的知识,之前一直靠CV来解决问题,之知其然不知其所以然,希望这次能整理一下相关的知识点. ...

  3. Entity Framework 6.0 入门系列 第一篇

    Entity Framework 6.0 入门系列 第一篇 好几年前接触过一些ef感觉不是很好用,废弃.但是 Entity Framework 6.0是经过几个版本优化过的产物,性能和功能不断完善,开 ...

  4. 深入理解javascript函数系列第一篇——函数概述

    × 目录 [1]定义 [2]返回值 [3]调用 前面的话 函数对任何一门语言来说都是一个核心的概念.通过函数可以封装任意多条语句,而且可以在任何地方.任何时候调用执行.在javascript里,函数即 ...

  5. [译]PrestaShop开发者指南 第一篇 基础

    # 第一篇 基础 PS(PrestaShop简称)一开始就设定了能够在它的基础上很简单的构建第三方模块的机制,让它成为一款具有极高定制性的电子商务软件. PS的可以在三个方面进行定制: * 主题 * ...

  6. 深入理解javascript函数系列第一篇

    前面的话 函数对任何一门语言来说都是核心的概念.通过函数可以封装任意多条语句,而且可以在任何地方.任何时候调用执行.在javascript里,函数即对象,程序可以随意操控它们.函数可以嵌套在其他函数中 ...

  7. 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...

  8. 从零开始学习jQuery (一) 开天辟地入门篇

    一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章是入门第一篇, 主要是简单介绍jQuer ...

  9. 深入理解javascript对象系列第一篇——初识对象

    × 目录 [1]定义 [2]创建 [3]组成[4]引用[5]方法 前面的话 javascript中的难点是函数.对象和继承,前面已经介绍过函数系列.从本系列开始介绍对象部分,本文是该系列的第一篇——初 ...

随机推荐

  1. ubuntu14 安装及卸载vmware

    原帖http://blog.sina.com.cn/s/blog_73dac6b50101gp4f.html 适用于ubuntu14和vmware player 12.5

  2. 微软“.Net社区虚拟大会”dotnetConf2015:关键词:.NET 创新、开源、跨平台

    去年 11 月的时候,微软开源了 .NET CoreFX,然后是今年 2 月份的 .NET CoreCLR.自那时以来,已经有大约 3500 人在 GitHub 上进行了提交,而且贡献者的人数还在持续 ...

  3. 如何快速开发SPA应用

    前言 web早已经进入了2.0时代了,如今的网页大有往系统应用级别的方向发展的趋势,再也不是以前的简单展示信息的界面了.如今很多webapp已经做到了原生应用的功能,并且运用自身的优势逐步取代之.HT ...

  4. 浅谈跨域以及WebService对跨域的支持

    跨域问题来源于JavaScript的同源策略,即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问.也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源. 在 ...

  5. [译]ZooKeeper recipes-引言

    ZooKeeper高级应用 本系列将指导使用ZooKeeper来实现高级功能,所有功能都在客户端完成,不需要ZooKeeper的特殊支持.希望可以得到社区的支持将这些加入到一个标准的客户端类库中(Cu ...

  6. form表单 ----在路上(15)

    form 表单就是将用户的信息提交到服务器,服务器会将信息存储活着根据信息查询数据进行增删改查,再将其返回给用户. 基本格式: <form action="" method ...

  7. angular2

    1 class两种写法 (1).直接写 class="{{}}"; (2).数组 arr[a,b,c] ng-class = "arr" 2.class和sty ...

  8. 解析大型.NET ERP系统 多国语言实现

    实现多国语言有许多种实现方案,无外乎是一种字符串替换技术,将界面控件的文本标签替换成相应语言的文字..NET Windows Forms实现多国语言的方法有以下几种: 1 .NET的方案,使用资源文件 ...

  9. HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)

    1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息.   但是c ...

  10. ASP.NET MVC5+EF6+EasyUI 后台管理系统--工作流演示截图