[北京|结业弟子]JS-王野|2017年04月29日的日报-技能树.IT修真院

发表于： 2017-04-29 22:39:17

0 893

小课堂：ID和CLASS的区别是什么

一、背景介绍

在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。

要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。

HTML页面中的元素就是通过CSS选择器进行控制的。

二、知识剖析

css中的选择选择器有很多种，包括元素选择器、类选择器、id选择器。在细分还有很多类型的选择器，有兴趣的同学可以自己学习一下。这里主要讨论下类选择器和ID选择器。

类选择器用在对文档要应用样式而不考虑具体涉及的元素时，首先对文档进行标记，输入class属性并且指定一个值，在使用的时候只要在值的前面加上（.）级可以使用这个类选择器。

id选择器与类选择器相似，只不过要在值的前面加上（#）号。

三、常见问题：

1、id选择器与类选择器的优先级、

2、id选择器的唯一性

四、解决方案

1、正常的对css进行样式修改使用类选择器，需要对某个标签进行js操作时使用id选择器；

2、在一个文本文档内ID选择器不能出现相同的两个，会出错；

五、编码实战

可以看到，在一个标签同时存在ID和CLASS选择器的情况下，ID选择器是优先的。

当出现ID相同的选择器是，文档会报错。

六、扩展思考

JS获取的DOM与JQurey获取的有什么区别

jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型，一般情况下，如S(’#id’)得到的是jquery对象，它不能使用js中的dom方法。所以，如果jquery对象要使用标准的dom方法，就需要进行对象转换。

两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);

(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。

如：var $v =$("#v") ; //jQuery对象

var v=$v[0]; //DOM对象

alert(v.checked) //检测这个checkbox是否被选中

(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象

如：var $v=$("#v"); //jQuery对象

var v=$v.get(0); //DOM对象

alert(v.checked) //检测这个checkbox是否被选中

DOM对象转成jQuery对象:

对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)

如：var v=document.getElementById("v"); //DOM对象