谁知道css里的id和class的区别和用法,我知道id只能用一次,而class可以多次使用!
含情脉脉KXq5
我们平常在用DIV CSS制作Xhtml网页页面时,常会用到class 和id来选择调用CSS样式属性.对学习CSS的新手来说class和id可能比较模糊,同时不知道什么时候该用class,什么时候又用id,以及它们用法与限制是怎么样的.接下来我们就来详细了解CLASS与ID基本属性及用法.Class 在程序中称“类”,同时在CSS中也书面语也叫“类”.在CSS样式中以小写的“点”及“.”来命名如： .css5{属性：属性值;} ,而在html页面里则以class="css5" 来选择调用,命名好的CSS又叫css选择器.如： .css5{属性：属性值;} 选择器在html调用为“我是class例子 ”如果不知道怎么引用CSS,那就可以了解下css引用.而且class(类)在同一个html网页页面可以无数次的调用相同的class类,在这里例子里则可以在对应的网页里可以无数次调用选择“css5”.这也说明class一般是用来调用css中的预配制属性的,比如说有一个预配制属性为如这里的“.class01{属性：属性值;} ”,这样就可以像调用函数一样不用再一个网页页面里重复的配置一个“类”属性,而只需要写上一个class类选择,就可以在同一个页面里任何位置调用选择具有相同的CLASS类.ID是表示着标签的身份,在JS脚本中会用到id,当JS要修改一个标签的属性时,JS会将id名作为该标签的唯一标识进行操作.也就是说ID只是页面元素的标识,供其他元素脚本等引用.假如你的页面里出现了两个ID那JS效果特性较出现逻辑错误不知道依据哪个ID来改变其标签属性. 在CSS里的ID不一定为JS而设置的,但是同样ID在页面里也只能出现一次,并且是唯一性.虽然可能我们才学DIV+CSS爱好者在一个页面里同时调用相同的ID多次但是仍然没有出现页面混乱错误,但是我们为了W3C及各个标准我们也要遵循ID在一个页面里唯一性.以免出现浏览器兼容问题.Div css 页面中的ID是怎么个用法呢?通常我们在CSS样式定义的时候 以“#”来开头命名id名称如：#css5{属性:属性值;} 这个也有点像class的定义,只是class是以小写句号“.”开头命名,而ID是以“#”好开头定义.那id是怎么个用法呢? Css里的ID用法与class用法一样,只是把class换成id.如例子：在CSS样式定义ID --- #css5{height:25width: 200} ,调用ID --- 我是ID例子.接下来我们来看下完整关于CLASS和ID实例： DIV CSS中CLASS与ID实例 - -DIV+CSS-.css5{ width:100 height:100 border:1px solid #000; float: } .css5_class{ background:#FFF;} //背景白色#css5_id{ background:#FF0000;} //背景红色我在浏览器下浏览,内容背景将是白色 我在浏览器下浏览,内容背景将是红色 接下来我们分析一下以上实例：class="css5 css5_class" 怎么是这样的?这里是相当于调用选择了class类css5与css5_class .class="css5" id="css5_id" 这里同样是选择调用了class类 :css5和id :css5_id .本页通过CSS实例与CLASS类和ID分别的讲解,相信您能从此深刻认识和区分它们并且灵活.特别注意：在命名id和class类的时候特别要注意大小写,ID和class是对大小写非常敏感的,最好以英文开头,不要用中文命名CSS类名.欢迎来到DIVCSS5希望本页对你有帮助!
为您推荐：
其他类似问题
扫描下载二维码本帖子已过去太久远了，不再提供回复功能。JavaStript（17）
var dynamicLoading = {
css: function(path){
if(!path || path.length === 0){
throw new Error('argument &path& is required !');
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.href = path;
link.rel = 'stylesheet';
link.type = 'text/css';
head.appendChild(link);
js: function(path){
if(!path || path.length === 0){
throw new Error('argument &path& is required !');
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = path;
script.type = 'text/javascript';
head.appendChild(script);
对象包含两个完全独立的方法，分别用来加载 CSS 文件和 JS 文件，参数均为欲加载的文件路径。原理非常的简单：对于不同的加载文件类型创建不同的节点，然后添加各自的属性，最后扔到 head 标签里面。经测试，本方法兼容各浏览器，安全、无毒、环保，实乃 web 开发人员工作常备代码，请放心使用。
下面是调用代码，异常简单：
dynamicLoading.css(&test.css&);
dynamicLoading.js(&test.js&);
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
Jquery版本1.11.0
问题：点击修改链接，在弹出的对话框中，点提交按钮，click事件会执行多次。而用原生js则没有问题。
并且提交后，第二次提交后，多个数据都变成一个了。
代码如下：
点击了多少次修改，点提交时就会alert出多少个222222
出问题部分用原生js实现：
个人认为原因是：
click事件里不能包含click事件？不知道是不是这样。
为方便查看，附带整个文档
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN"&
&title&Document&/title&
&meta http-equiv="Content-Type" content="text/charset=UTF-8" /&
&meta name="description" content="" /&
&meta name="keywords" content="" /&
&style type="text/css"&
* {margin: 0; padding: 0;}
#table {border: 1 border-collapse: width: 500}
tr {height: 30}
th {border: 1}
td {border: 1text-align:}
td a {margin-right: 5 color: text-decoration:}
#popDiv, #editDiv {border: 1 width: 315 padding: 1 margin-top: 10 position: left: 38%; z-index: 4; display:}
.pop p {height: 30 margin-top: 20 clear:}
.pop a {display: float: text-decoration: font-size: 12}
.pop .input {height: 20 line-height: 20}
/*#bottom {width: 100%; height: 30 margin: 0}*/
#sub {display: height: 30 margin: 0}
.mask {background-color: #000; position: left: 0; top: 0; z-index: 2;}
&script type="text/javascript" src="///ajax/jQuery/jquery-1.11.0.min.js"&&/script&
&table id="table"&
&th&姓名&/th&
&th&年龄&/th&
&th&职位&/th&
&th&工资&/th&
&th&操作&/th&
&td&张三&/td&
&td&23&/td&
&td&PHP&/td&
&td&79999&/td&
&td&&a href="#" class="edit"&修改&/a&&/td&
&td&李四&/td&
&td&21&/td&
&td&Java&/td&
&td&12000&/td&
&td&&a href="#" class="edit"&修改&/a&&/td&
&td&王五&/td&
&td&34&/td&
&td&Python&/td&
&td&29999&/td&
&td&&a href="#" class="edit"&修改&/a&&/td&
&td&赵六&/td&
&td&37&/td&
&td&Javascript&/td&
&td&65450&/td&
&td&&a href="#" class="edit"&修改&/a&&/td&
&div id="editDiv" class="pop"&
&a href="#" class="close"&close&/a&
&p&&strong&姓名：&/strong&&input type="text" class="input" /&&/p&
&p&&strong&年龄：&/strong&&input type="text" class="input" /&&/p&
&p&&strong&职位：&/strong&&input type="text" class="input" /&&/p&
&p&&strong&工资：&/strong&&input type="text" class="input" /&&/p&
&input type="button" id="sub" value="提交" /&
&script type="text/javascript"&
// 点击'修改'链接
$('a.edit').click(function () {
var arr = [];
$(this).parent().siblings().each(function () {
arr.push($(this).text());
$('#editDiv').show().find('p').each(function (i) {
$(this).find('input:text').val(arr[i]);
var aTr = $(this);
$('#sub').click(function () {
alert('2222222');
var data = [];
$(this).prevUntil('a.close').each(function () {
data.push($(this).find('input:text').val());
data.reverse();
aTr.parent().siblings().each(function (i) {
$(this).text(data[i]);
$(this).parent().hide();
$('div.mask').remove();
// 原生JS实现点击，没有问题
/*document.getElementById('sub').onclick = function () {
alert('1111111');
var data = [];
$(this).prevUntil('a.close').each(function () {
data.push($(this).find('input:text').val());
data.reverse();
aTr.parent().siblings().each(function (i) {
$(this).text(data[i]);
$(this).parent().hide();
$('div.mask').remove();
// 添加遮罩层
var maskHeight = $(document).height();
var maskWidth = $(document).width();
$('&div class="mask"&&/div&').appendTo($('body'));
$('div.mask').css({
'width':maskWidth,
'height':maskHeight,
'opacity':0.4
$('a.close').click(function () {
$(this).parent().hide();
$('div.mask').remove();
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
已经找到原因了，我提供个方法吧：
$('#sub').unbind('click').click(function () {
每次绑定前先取消上次的绑定。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
找了好久，发现原因应该是：
Click事件 进行了累加绑定，每当我调用一次时，他便增加一次绑定
按这个方法，确实解决了问题。不知道是否正确。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
click事件累加的问题
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
你每次点击一个a.edit, 都会为#sub 重新绑定一个click事件， 搞不懂你为什么这么写，把#sub的click拿出来啊
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
like this...
$('#sub').off().click(function () {
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我也遇到这样的问题，因为每次让弹窗展示出来都会帮顶一次事件，这样累计下来事件会多次执行。1.一种方法是弹窗隐藏的时候把弹窗销毁掉；2.一种是把弹窗里面的事件绑定抽离出来，不要让弹窗每次显示的时候都执行click的绑定。当然楼主的解决方案也不错。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
爱死你了 unbind
同步到新浪微博
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
扫扫下载 App
SegmentFault
一起探索更多未知}