1778人阅读
& & &我觉得这篇文章讲得不错， 所以直接转载过来学习， 不过我对格式进行了大致的调整。转载地址：/zzf_fly/blog/static//
1. class是设置标签的类，&class属性用于指定元素属于何种样式的类。
& & 如样式表可以加入.content1 { color: background: #ff80c0 } 使用方法：class=&content1& &.
& & id是设置标签的标识。id属性用于定义一个元素的独特的样式。如一个CSS规则#content2 { font-size: larger } 使用方法为：id=&content2&&
& & &概念上说不一样（下面的两句话还是比较精辟的）：
& & & class是一个样式，先定义好， 然后可以套给多个结构/内容,
便于复用。也就是说class名称可以相同。
& &&id是一个标签，用于区分不同的结构和内容，就象你的名字，&如果一个屋子有2个人同名，就会出现混淆；id是先找到结构/内容，再给它定义样式；
2.属性的优先级问题
& id的优先级要高于class, 可以自己写个例子看看。部分代码如下（是我写的， 不是原作者写的哈）：
&style type=&text/css&&
color:blue
&div id=&aa& class=&aa&&I love you.&/div&
3. &关于js
& & &如果在页面中要对某个对象进行脚本操作（js），那么可以给他定义一个id，否则只能利用遍历页面元素加上指定特定属性来找到它，这是相对浪费时间资源，远远不如一个id来得简单.
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：668430次
积分：16467
积分：16467
排名：第263名
原创：1004篇
转载：59篇
评论：613条
(7)(48)(53)(51)(52)(35)(20)(53)(41)(35)(13)(32)(36)(7)(1)(47)(23)(26)(4)(13)(4)(19)(72)(13)(2)(14)(45)(32)(7)(3)(28)(53)(106)(68)2183人阅读
&&&&&要做这样一个功能，将检索出来的客户信息以名片的方式显示出来，　这样的功能没有什么问题可言，只是根据相应的名片布局将数据显
示出来而已，但主要的问题是要可动态改变名片样式，也就是说数据显示布局也得相应改变，以适应当前的名片样式，
&&&& 刚开始并没有把它想的多么复杂，　让美工给一个公共table的定义，在换名片的同时，将table的样式随之一换，不就行了么，但因为名片太多，而且布局基本都不一样，因此公共的table无法正确定义，
　& 因为没有好的实现方法，该功能的开发一直陷入僵局。到最后实在没有办法了，突然灵机一动，利用js生成table，然后织到div中去不就成了么，依据这个想法，很快用js就写出了两个名片table的定义，分别放到两个js文件中(因为必须是相同的方法名), js文件的文
件名与缩略图文件名一样，为了以后调取方便。　下面是例码：
　function showHtmlByCard(userName, comName, comAdd, postCode, tel, mobile,fax,email, divId) {&&var tableHtml = "&table width='100%' height='116' border='0' cellpadding='0' cellspacing='0'
bordercolor='#333333'&";&&&&& tableHtml += " &th height='35' align='left' valign='bottom' class='m1sy STYLE8' scope='col'&" +
userName + "&/th&"; &&&tableHtml += "&tr&&th height='55' align='left' class='m1sy1' scope='col'&" + comName +
"&/th&&/tr&";&&&tableHtml += "&tr&&th align='left' class='m1sy1 textStyle' scope='col' style='font-size:14'&地
址：" + comAdd + "&/th&&/tr&&/table&";&&&tableHtml += "&table width='100%' height='80' border='0' cellpadding='0' cellspacing='0'&";&&&tableHtml += "&tr&&th height='19' colspan='2' class='m1sy2' scope='col'&&&/th&&/tr&";&&&tableHtml += "&tr&&th width='47%' height='19' class='m1sy2' scope='col'&&div align='left'
class='textStyle'&邮编:&" + postCode + "&/div&&/th&";&&&tableHtml += "&th width='53%' class='m1sy2' scope='col'&&div align='left' class='textStyle'&电
话:&&a href='#' style='color:#F3E3CC;'&" + tel + "&/a&&/div&&/th&&/tr&";&&&tableHtml += "&tr&&th height='19' class='m1sy2' scope='col'&&div align='left' class='textStyle'&传
真:&&a href='#' style='color:#F3E3CC;'&" + fax + "&/a&&/div&&/th&";&&&&&&&&&&& tableHtml += "&th height='19' class='m1sy2' scope='col'&&div align='left' class='textStyle'&手机:&&a
href='#' style='color:#F3E3CC;'&" + mobile + "&/a&&/div&&/th&&/tr&";&&&tableHtml += "&tr&&th height='19' colspan='2' class='m1sy2' scope='col'&&div align='left'
class='textStyle'&E-mail:&" + email + "&/div&&/th&&/tr&&/table&";&&&document.getElementById(divId).innerHTML = tableH}　
调用:&&div class="&s:property value="jsSrc"/&" id="cardDiv${i.count}"&&&&&&&&&&&&&&&&
&script type="text/javascript"&&&&&&&&&&&&&&&&&
showHtmlByCard('&s:property value="userName" escape="false"/&', '&s:property value="companyName" escape="false"/&',
'&s:property value="companyAddress" escape="false"/&','&s:property value="companyPostcode" escape="false"/&', '&s:property
value="companyTel" escape="false"/&', '&s:property value="companyMob" escape="false"/&', '&s:property value="companyFax"
escape="false"/&', '&s:property value="companyMail" escape="false"/&', 'cardDiv${i.count}');&&&&&&&&&&&&&&&
&/div&当然不知道这样做来完成该功能是否适合，有更好方法的可以留言说出来，谢谢
版权声明：本文为博主原创文章，未经博主允许不得转载。
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：14020次
排名：千里之外
转载：14篇
(1)(2)(8)(1)(2)(2)(2)(1)的命名及编码的6个最佳习惯
一、样式都用class而不用id。
　　有三个理由。
　　1，id不可以重复，所以用class的话，可以肆无忌惮的用无数次。
　　2，id的优先级太高，若是写了一个#page_content&a&{color:#f60}&，那你完蛋了，里面要改链接颜色，都必须加上#page_content才能越过这个优先级。
　　3，id专门留给JS用，这样才符合表现与行为分离的原则。所以id我用驼峰式，也是为了体现这一点。
二、用class_name方式写类名。
　　以前喜欢用class-name写，不过好像两样也没什么差别。但我比较反对用className写类名，因为始终对浏览器大小写敏感的问题抱有怀疑态度。但是id我会写成驼峰式，理由见第一条。
三、按标准写css，再针对特定浏览器作hack。
　　比如，通常我们会遇到如下的写法：
&示例源代码 []
.side_col_mb5u&{
&&&&float:
&&&&display:&
&&&&margin-left:&20
而我的写法会是：
&示例源代码 []
.side_col_mb5u&{
&&&&float:&
&&&&margin-left:&20
*&&&.side_col_mb5u&{
&&&&_display:&&/*hacked&for&IE&6*/
　看明白了么？不应该把hack混在一起，也不应该用一种侥幸的心态，觉得float:left与display:inline写在一起没事。嗯，它们俩
确实没事儿，但是其他的hack就不一定了。而且这里写display:inline纯粹就是为了解决IE6的bug，所以前面加上下划线，以明确的表达
你的目的。
　　另外不要以为凡是hack都是为IE准备的。其实有些hack是针对其他浏览器的，比如FF。这就要求你对css标准的熟练掌握，能够自信的判断哪些渲染是遵守标准，哪些违反标准的。
　　此外，我喜欢在hack前面加上星号，其实这纯粹是个人习惯了。可能过段时间我就不这么用了，呵呵。
五、记得加空格。
　.class_name&{&property:&&}&。我个人觉得合理的空格是优秀代码的一个指标。按英文的习惯，标点后面都应该带空
格（如果你写This&is&a&pen.That&s&a&pencil.句点后面不加空格，&word里面会有错误提示）。所以既然css是外国人发
明的，应该按他们的格式来写。类似的，在JS里var&a&=&b&+&c;里面的空格也应该都要加。
六、适当的层叠（Cascading)或缩进以定义css的&作用域&。
　　啥叫&css的作用域&？其实并不是所有的样式都在所有的地方使用。有的样式只用在某一块里面，比如&导航栏&里的&搜索框&，可能应该写成：
&示例源代码 []
.nav&.search&{}
　　而有时候用层叠会增加代码优先级，所以也可以用缩进来&象征性的&体现作用域。像这样：
&示例源代码 []
.login_box&{}
&&&.forgot_pwd{}
　　缩进，是为了表示它们对应的标签具有父子关系。但这样只能起一个提醒的作用。
六、margin和padding，尽量省略最后一个值。
　比如margin:&20px&10px&5px&10&，左右值是一样的，就应该省略掉最后一个值，写成
margin:&20px&10px&5&这样到时候要改左右间距，改一个就好，免得改漏了。其实这个问题虽然很细小，但是可以看得出对
margin四个值省略规则的熟练程度。
此文为网上收集
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：20265次
排名：千里之外
原创：10篇
转载：26篇
(2)(4)(9)(19)(4)如何根据ID，删除ID下的所有DIV
[问题点数：100分，结帖人dhzggg]
如何根据ID，删除ID下的所有DIV
[问题点数：100分，结帖人dhzggg]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
相关推荐：
2015年5月 Web 开发大版内专家分月排行榜第三2015年1月 Web 开发大版内专家分月排行榜第三2014年12月 Web 开发大版内专家分月排行榜第三
2015年5月 Web 开发大版内专家分月排行榜第三2015年1月 Web 开发大版内专家分月排行榜第三2014年12月 Web 开发大版内专家分月排行榜第三
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。2871人阅读
&如果不用类库(如jquery)来写，往往很多时候，都需要通过id或tag来获取html里的某一对象，然后对其进行操作。为了节省代码，把常用的获取对象的方法集成到函数里，每次直接通过传递参数来调用，可以是代码更简洁。下面总结了一下常用的获取对象的方法，供参考。function GetId(id){return document.getElementById(id)}&&//通过ID获取对象function GetTag(tag){return document.getElementsByTagName(tag)}&&//通过Tag获取对象(html标签名称)function GetChildTag(id,tag){return id.getElementsByTagName(tag)}&&//通过Tag获取某ID对象的子对象function GetClass(className){return getElementsByClassName(className)}&&//通过className获取对象var $c=function(array){var nArray = [];for (var i=0;i&array.i++) nArray.push(array[i]);return nA};& & Array.prototype.each=function(func){for(var i=0,l=this.i&l;i++) {func(this[i],i);};};var getElementsByClassName=function(cn){& && &&&var hasClass=function(w,Name){& && &&&var hasClass =& && &&&w.className.split(' ').each(function(s){& && && && &if (s == Name) hasClass =& && &&&});& && &&&return hasC& && && && &}; & && &&&var elems =document.getElementsByTagName("*")||document.& && && && &var elemList = [];& && && &&&$c(elems).each(function(e){& && && && && &if(hasClass(e,cn)){elemList.push(e);}& && && &&&})& && && && &return $c(elemList);& & };& && &&&//上面代码里通过className获取对象的代码参考了论坛的一篇帖子，在此表示感谢。使用方法示例：
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&javascript获取对象封装&/title&
&mce:style type="text/css" media="all"&&!--
border:#FF0000 1
background-color:#F0F0F0;
border:#FFCC33 1
background-color:#666666;
color:#FFFFFF;
margin:6px 0
list-style-type:
background-color:#999999;
color:#333333;
border:#FF9933 1
--&&/mce:style&&style type="text/css" media="all" mce_bogus="1"&#test{
border:#FF0000 1
background-color:#F0F0F0;
border:#FFCC33 1
background-color:#666666;
color:#FFFFFF;
margin:6px 0
list-style-type:
background-color:#999999;
color:#333333;
border:#FF9933 1
&mce:script language="javascript" type="text/javascript"&&!--
/*-------------封装开始------------------*/
function GetId(id){return document.getElementById(id)}
//通过ID获取对象
function GetTag(tag){return document.getElementsByTagName(tag)}
//通过Tag获取对象
function GetChildTag(id,tag){return id.getElementsByTagName(tag)}
//通过Tag获取ID的子对象
function GetClass(className){return getElementsByClassName(className)}
//通过className获取对象
var $c=function(array){var nArray = [];for (var i=0;i&array.i++) nArray.push(array[i]);return nA};
Array.prototype.each=function(func){for(var i=0,l=this.i&l;i++) {func(this[i],i);};};
var getElementsByClassName=function(cn){
var hasClass=function(w,Name){
var hasClass =
w.className.split(' ').each(function(s){
if (s == Name) hasClass =
return hasC
var elems =document.getElementsByTagName("*")||document.
var elemList = [];
$c(elems).each(function(e){
if(hasClass(e,cn)){elemList.push(e);}
return $c(elemList);
/*-----------------封装结束---------------------*/
window.onload=function(){
GetTag("input")[0].onclick=function(){alert("id为test的div内容是：/n"+GetId("test").innerHTML)}
GetTag("input")[1].onclick=function(){alert("body里共有"+GetTag("li").length+"个li")}
GetTag("input")[2].onclick=function(){alert("DIV里共有"+GetChildTag(GetId("test"),"li").length+"个li")}
GetTag("input")[3].onclick=function(){alert("className为test2的内容是：/n"+GetClass("test2")[0].innerHTML+"/n"+GetClass("test2")[1].innerHTML)}
// --&&/mce:script&
&div id="test" title="这是id=test的div"&
&ul title="div内第一个ul"&
&li&ccontent1&/li&
&li&ccontent2&/li&
&li&ccontent3&/li&
&li&ccontent4&/li&
&ul class="test2" title="div内第二个ul，class=test2"&
&li&bcontent1&/li&
&li&bcontent2&/li&
&li&bcontent3&/li&
&ul class="test2" title="div外的ul，class=test2"&
&li&content1&/li&
&li&content2&/li&
&input type="button" value="通过id获取" /&
&input type="button" value="通过tag获取" /&
&input type="button" value="通过id内tag获取" /&
&input type="button" value="通过className获取" /&
&&&&&&& 除了上面的方法，还有两个方法：
&&&&&& （1）：document.getElementsByName("name"):即通过html标签元素的name属性名称来获取对象，这一点在radiobutton组和checkbox组中特别有用，见下例；
&&&&&& （2）：和（1）配合使用：nextSibling&&当前对象的下一个对象。见下例：
&meta http-equiv="Content-Type" content="text/ charset=utf-8"&
&title&js&/title&
&mce:script language="javascript"&&!--
function aa(){
var r=document.getElementsByName("r");
for(var i=0;i&r.i++){
if(r[i].checked){
alert(r[i].value+","+r[i].nextSibling.nodeValue);
// --&&/mce:script&
&form name="form1" method="post" action=""&
&input type="checkbox" name="r" value="1"&a&br&
&input type="checkbox" name="r" value="2"&b&br&
&input type="checkbox" name="r" value="3"&c&br&
&input type="checkbox" name="r" value="4"&d&br&
&input type="checkbox" name="r" value="5"&e&br&
&input type="checkbox" name="r" value="6"&f&br&
&input type="checkbox" name="r" value="7"&g&br&
&input type="checkbox" name="r" value="8"&h&br&
&input type="checkbox" name="r" value="9"&i&br&
&input type="checkbox" name="r" value="10"&j&br&
&input type="button" onclick="aa()" value="button"&
版权声明：本文为博主原创文章，未经博主允许不得转载。
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：142965次
积分：2019
积分：2019
排名：第10239名
原创：75篇
评论：21条
(2)(1)(4)(23)(14)(35)}