javascript 01
classList http://www.zhangxinxu.com/wordpress/?p=3483
offsettop等 http://www.jb51.net/css/22675.html
http://www.cnblogs.com/trlanfeng/archive/2012/11/04/2753280.html
event.keyCode == 13 按enter键触发事件
1.全选和全部取消
<body> <form> 请选择你爱好:<br> <input type="checkbox" name="hobby" id="hobby1"> 音乐 <input type="checkbox" name="hobby" id="hobby2"> 登山 <input type="checkbox" name="hobby" id="hobby3"> 游泳 <input type="checkbox" name="hobby" id="hobby4"> 阅读 <input type="checkbox" name="hobby" id="hobby5"> 打球 <input type="checkbox" name="hobby" id="hobby6"> 跑步 <br> <input type="button" value = "全选" onclick = "checkall();"> <input type="button" value = "全不选" onclick = "clearall();"> <p>请输入您要选择爱好的序号，序号为1-6:</p> <input id="wb" name="wb" type="text" > <input name="ok" type="button" value="确定" onclick = "checkone();"> </form> <script type="text/javascript"> function checkall(){ var hobby = document.getElementsByTagName("input"); for(i=0;i<hobby.length;i++){ if(hobby[i].type=="checkbox"){ hobby[i].checked=true; } } // 任务1 } function clearall(){ var hobby = document.getElementsByName("hobby"); for(i=0;i<hobby.length;i++){ hobby[i].checked=false; } // 任务2 } function checkone(){ var j=document.getElementById("wb").value; var s="hobby"+j; document.getElementById(s).checked=true; // 输入数字后按照数字勾选复选框 }
2.
var con=document.getElementsByTagName("li");
for (var i=0; i< con.length;i++){
var text= con[i].getAttribute("title");
if(text!=null)
{
document.write(text+"<br>");
}
}
//这个是获取到title属性的值。
//意思就是如果标签有title属性，且值存在，那就获取到。
var con=document.getElementsByTagName("li");
for (var i=0; i< con.length;i++){
var text= con[i].title;
if(text!=="")
{
document.write(text+"<br>");
}
}
//这个则是获取到标签的title，如果没有title则创建一个值为空串的title；
使用和不使用getAttribute的区别：1) 使用getAttribute,通过元素节点的属性名称获取属性的值。因为该属性不存在则为null；
而不使用getAttribute,直接获取title值则为空。
2) con[i].title只能获取HTML元素中现有的属性
而con[i].getAttribute("title")不仅可以获取HTML元素中现在的属性，还可以获取非HTML元素也就是自定义的。
3.
2. 节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，所以IE是2，其它浏览器是5，如下图所示:
<ul> //空白节点 (可插入文本的节点) <li>1</li> //空白节点 <li>2</li> //空白节点 </ul>
但如果修改成
<ul><li>1</li><li>2</li></ul>
则IE和其他浏览器都是3个节点
3.清除节点的方法
1 <body> 2 <div id="content"> 3 <h1>html</h1> 4 <h1>php</h1> 5 <h1>javascript</h1> 6 <h1>jquery</h1> 7 <h1>java</h1> 8 </div> 9 10 <script type="text/javascript"> 11 //从前往后删除节点 12 function clearText() { 13 var content=document.getElementById("content"); 14 var ch=content.childNodes; 15 var l=ch.length; 16 // 在此完成该函数 17 for(i=0;i<l;i++){ 18 content.removeChild(ch[0]); 19 } 20 } 21 //！！！注意：length要提前赋值给某个变量，不能再for循环语句里面写content.length, 22 //因为每删除节点，它的长度都会变化。 23 24 25 //从后面向前删除节点 26 27 function clearText() { 28 var content=document.getElementById("content"); 29 for(var i=content.childNodes.length-1;i>=0;i--){ 30 var childNode = content.childNodes[i]; 31 content.removeChild(childNode); 32 } 33 } 34 </script> 35 36 <button onclick="clearText()">清除节点内容</button> 37 38 39 40 </body>
4.浏览器窗口可视区域大小
获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法:
一、对于IE9+、Chrome、Firefox、Opera 以及 Safari：
• window.innerHeight - 浏览器窗口的内部高度
• window.innerWidth - 浏览器窗口的内部宽度
二、对于 Internet Explorer 8、7、6、5：
• document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。
• document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。
或者
Document对象的body属性对应HTML文档的<body>标签
• document.body.clientHeight
• document.body.clientWidth
在不同浏览器都实用的 JavaScript 方案：
var w= document.documentElement.clientWidth
|| document.body.clientWidth;
var h= document.documentElement.clientHeight
|| document.body.clientHeight;
