【JS-01】
ID和Class有什么区别？
小课堂【武汉分院】
分享人：徐恒
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
一.背景介绍
我们平常在用DIV CSS制作html网页页面时，常会用到class 和id来选择调用CSS样式属性。对学习CSS的新手来说class和id可能比较模糊，同时不知道什么时候该用class，什么时候又用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类名。
三.常见问题
在css JS JQ中class和id用法
四.解决方案
CSS中
一个用.一个用#
用法如上，但要注意覆盖之外的权值问题.
class表示一类当然可以对多个元素设置，但ID表示唯一身份，虽然目前的浏览器还都允许用多个相同ID，一般情况下也能正常显示，不过当你需要用JavaScript通过id来控制div时就会出现错误
在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一般用来干什么
1.在css中，用class来指定标签的类名。多个标签可以写同一类名。多个类名也可以写在一个class中如：class="btn color box"
2.在JS中，获取到的class将是一个数组，在使用的时候要特别注意！也是对象。document.getElementsByClassName(CLASSname),用下标选中同一类中第几个。
3.在jQuery中，获取到的class将是一个对象，用$("CLASSname"):eq() 选择器选取带有指定 index 值的元素。
ID一般用来干什么
1.在css中，用id为元素设置单独的，特殊的样式，虽然目前的浏览器还都允许用多个相同ID，一般情况下也能正常显示，不过当你需要用JavaScript通过id来控制div时就会出现错误(就只是选中第一个名为ID标签)
锚点结合a标签
用于充当label标签for属性的值
2.在JS中，使用id为特定的标签设置特定的行为document.getElementById(IDname),
3.在jQuery中，使用id为特定的标签设置特定的行为$("IDname")
六.拓展思考
id和class还有什么别的用法
7.参考文献
参考：HTML name、id、class 的(格式/应用场景/特性)等区别介绍
八.更多讨论
鸣谢
感谢大家观看
BY : 徐恒
问题
class能不能当锚点？
name id class 用法区别？
为什么现在css样式中相同的id还是可以用？
------------------------------------------------------------------------------------------------------------------------
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！