ID和Class的区别？

大家好，我是 IT 修真院的一枚正直纯洁善良的WEB程序员。

今天我给大家分享的是：ID和Class的区别？

一，背景介绍

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

元素就是通过CSS选择器进行控制的。本次讲的id和Class就是id选择器和类选择器。

二.知识剖析

Class 在程序中称“类”，同时在CSS中书面语也叫“类”。他表示的是具有共同特点的东西，比如苹果香蕉梨可以归为水果一类。

在CSS样式中以小写的“点”及“.”来命名如： .css_demo{属性：属性值;} ,而在html页面里则以class="css_demo" 来选择调用,命名好的CSS又叫css选择器。

而且class(类)在同一个html网页页面中可以无数次的调用相同的class类，这也说明class一般是用来调用css中的预配制属性的，

比如说有一个预配制属性为如这里的“.css_demo{属性：属性值;} ”，这样就可以像调用函数一样不用再一个网页页面里重复的配置一个“类”属性，

而只需要写上一个class类选择，就可以在同一个页面里任何位置调用选择具有相同的CLASS类。

ID是表示着标签的身份，在JS脚本中会用到id，当JS要修改一个标签的属性时，JS会将id名作为该标签的唯一标识进行操作。

也就是说ID只是页面元素的标识，供其他元素脚本等引用。假如你的页面里出现了两个同名ID，那JS效果特性会出现逻辑错误而不知道依据哪个ID来改变其标签属性(一般选第一个，第二个不会选)。

在CSS里的ID不一定为JS而设置的，但是同样ID在页面里最好只能出现一次，保持唯一性。

在css 页面中的ID是怎么个用法呢？

通常我们在CSS样式定义的时候以“#”来开头命名id名称如：#css5{属性:属性值;} 这个也有点像class的定义，只是class是以小写句号“.”开头命名，而ID是以“#”好开头定义。

特别注意：在命名id和class类的时候特别要注意大小写，ID和class是对大小写非常敏感的，最好以英文开头，不要用中文命名CSS类名。

三.常见问题

在JS如何使用ID和Class？

四.解决方案

在js中

ID通过document.getElementById(IDname),

document.getElementById("id4").style.cssText="width: 200px;height: 200px;background-color:purple;";

CLASS通过 document.getElementsByClassName(CLASSname)

var js_css4 = document.getElementsByClassName("css4");

js_css4[0].style.cssText = "width: 200px;height: 200px;background-color:purple;";

js_css4[1].style.cssText = "width: 200px;height: 200px;background-color:red;";

// 但是没有类似JQ的js_css4.style.cssText = "width: 200px;height: 200px;background-color:purple;";只能用循环for()

JQ中ID用$("IDname")

$("#id5").css({"width": "200px", "height": "200px", "background-color": "red"});

CLASS用$("CLASSname")

$(".css5").css({"width": "200px", "height": "200px", "background-color": "yellow"});

//这里是按顺序选择css5类中第几个

$(".css5").eq(0).css({"width": "200px", "height": "200px", "background-color": "orange"});

$(".css5").eq(1).css({"width": "200px", "height": "200px", "background-color": "green"});

六.拓展思考

在一般情况下：我们利用class来为元素添加样式----css

利用id来为元素添加行为----js/jQuery

ID的作用？

id 属性规定 HTML 元素的唯一的 id。

id 在 HTML 文档中必须是唯一的。

id 属性可用作链接锚（link anchor），通过 JavaScript（HTML DOM）或通过 CSS 为带有指定 id 的元素改变或添加样式

class的作用？

1.在css中，用class来定义那些可复用的样式，然后可以套给多个结构/内容。

2.在JS中，获取到的class将是一个数组，在使用的时候要特别注意！

七.参考文献