记录

//div或ul等块级元素只有在规定宽度时才有backgroundcolor/image属性//color属性为字体颜色属性//#caidanli:hoverul//通过类改变来触发transition动画时，style中所加的类要放在原来的类后面//onmouseenter等事件必须赋以函数//触发transition不一定非要加类名，style中声明transition时间属性后，直接通过.style方法改//图片灰度属性filter:black;-webkit-filter:grayscale(90%);//类名、id开头不能为数字//复合动画效果，可以为元素添加父元素，为父元素添加动画或用animation//只要声明transition动画时间，操作属性就会触发动画//两个循环用同一个变量，循环之间会产生影响//document.getElementById(a).getElementsByTagName(b)注意a要为b的第一级父元素//setInterval()循环时，全局变量存储循环到哪，所以被循环的函数要检测全局变量//获取属性名称后，要获取值后面要加value//aherf=#target=_blank#表示#top即回到顶端，_blank表示跳转//aherf=javascript:void(0)herf可以赋予javascript:函数名，点击链接时执行函数javascript:void(表达式)，点击会计算表达式一次，但不会返回值aherf=javascript:void(0)onclick=delate(123)不会返回delate(123)的值aherf=delate(123)会执行函数//margin:50pxauto;上下边距50px，左右居中对齐//clear:both;元素左右都不允许有浮动元素//overflow:hidden;隐藏内部元素溢出的部分，另一个作用就是清除浮动，就是隔开浮动的元素对于float的理解，添加float属性后，被添加的元素例a相当于浮起一层，类似z-index+1，所以同级的元素会和a重叠例如htmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/title无标题文档/title/headbodydivstyle=border:solid1px#006600;width:300px;height:300px;float:left;/divdivstyle=border:solid1px#006600;width:200px;height:200px;background-color:#060/div/body/html和htmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/title无标题文档/title/headbodydivstyle=border:solid1px#006600;width:300px;height:300px;float:left;/divdivstyle=border:solid1px#006600;width:200px;height:200px;background-color:#060;overflow:hidden/div/body/html如果改为clear:both;则绿色填充的div会另起一行//width用%来表示，并且当外层元素没有宽度限制时，会自动计算并适应浏览器宽度，并且会居中显示例如1.styletype=text/css2.body{margin:0auto;text-align:center;}3..yangshi{width:80%;border:1pxsolid#003;margin:0auto;}4./styledivclass=yangshi我是80%自适应宽度/div结果//background-position属性坐标规定：Div的左上角为坐标（0，0），右移和下移为正，上移和左移为负背景图片的左上角对齐background-position的坐标例如浅绿色background-img的左上角对准(3,2)坐标//已经规定了backgroud-img，仍可以规定background-color属性，后规定的color属性会覆盖img//函数既是对象例FunctionClass1(){this.name=class1;this.showNam=function(){alert(this.name);}}Class1为对象，用this.name=class1;规定name属性和属性值this.showNam=function()(0,0)(3,0)(2,0)(3,2)(-1,0){alert(this.name);}规定showName()方法访问Class1()对象中的属性，通过varc1=newClass1();c1.showNam;//访问方法与访问属性访问属性例pid=demo/pscriptvarperson={firstName:John,lastName:Doe,id:5566,fullName:function(){returnthis.firstName++this.lastName;}};document.getElementById(demo).innerHTML=person.fullName;/script将函数作为属性值返回，结果为：function(){returnthis.firstName++this.lastName;}访问方法例：pid=demo/pscriptvarperson={firstName:John,lastName:Doe,id:5566,fullName:function(){returnthis.firstName++this.lastName;}};document.getElementById(demo).innerHTML=person.fullName();/script返回函数方法结果：JohnDoe常用的方法：Obj.name返回属性名称Obj.value返回属性值//对元素属性的操作∆Element.attribute返回一个[ObjectNameNodeMap]，NameNodeMap对象不是数组，没有数组的方法，其包含的属性节点的索引顺序随浏览器不同而不同Element.attribute[1].name.value.length注意i值因浏览器不同而不同∆Element.getAttribute()element.getAttribute(attributename)document.getElementsByTagName(a)[0].getAttribute(target)获得a元素的target属性值∆Element.getAttributeNode()element.getAttributeNode(attributename)document.getElementsByTagName(a)[0].getAttributeNode(target)获取元素idElement.id性能最好Element.getAttribute(“id”)其次Element.getAttributeNode(“id”).value∆Element.hasAttribute()element.hasAttribute(attributename)若拥有指定属性名，则返回true，否则返回false∆Element.setAttribute()element.setAttribute(attributename,attributevalue)改变对象的指定属性的值∆Element.setAttributeNode()element.setAttributeNode(attributenode)例，为元素添加class属性headstyletype=text/css.democlass{color:red;}/style/headbodyh1HelloWorld/h1pid=demoClickthebuttontosettheclassattributenodeoftheheaderabove./pbuttononclick=myFunction()Tryit/buttonscriptfunctionmyFunction(){varatr=document.createAttribute(class);//创建class属性,注意是creatAttribute是document方法atr.nodeValue=democlass;//属性值(class名称),atr.valuevarh=document.getElementsByTagName(H1)[0];h.setAttributeNode(atr);//将class属性赋予h};/script/body注意，参数为属性节点//document.activeElemnt返回文档中获得焦点的元素例：bodyonclick=myFunction()p点击文档中任意一元素输出元素标签名。/pinputtype=textvalue=输入字段button按钮/buttonpid=demo/pscriptfunctionmyFunction(){varx=document.activeElement.tagName;document.getElementById(demo).innerHTML=x;}/script/body//document.creatAttribute()语法document.createAttribute(attributename)//document.creatElement()和创建属性节点一样，都是document方法functionmyFunction(){varbtn=document.createElement(BUTTON);vart=document.createTextNode(CLICKME);btn.appendChild(t);document.body.appendChild(btn);};//document.creatDocumentFragment()创建空的文档片段例：varul=document.getElementsByTagName(ul)[0];//assumingitexistsvardocfrag=document.createDocumentFragment();varbrowserList=[InternetExplorer,MozillaFirefox,Safari,Chrome,Opera];browserList.forEach(function(e){varli=document.createElement(li);li.textContent=e;docfrag.appendChild(li);});ul.appendChild(docfrag);一般用法就是为其添加子元素即：document.createDocumentFragment().appendChild()//element.appendChild()语法：node.appendChild(node)!DOCTYPEhtmlhtmlbodyulid=myListliCoffee/liliTea/li/ulpid=demoClickthebuttontoappendanitemtot