1. 所有的属性都有一个特点：页面怎么写js就怎么写，但改变class特殊
比如：<div id="div1" class="box" style="display:none"></div>
要改变display：document.getElementById("div1").style.display='block'
要改变class：document.getElementById("div1").style.className='box1'
2. 提取行间事件：
改进前：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:red;
}
</style>
<script type="text/javascript">
function toGreen(){
var oDiv1 = document.getElementById("changeColor");
oDiv1.style.backgroundColor='green';
oDiv1.style.width='200px';
oDiv1.style.height='200px';
}
function toRed(){
var oDiv2 = document.getElementById("changeColor");
oDiv2.style.backgroundColor='red';
oDiv2.style.width='100px';
oDiv2.style.height='100px';
}
</script>
</head>
<body>
<div id="changeColor" onmousemove="toGreen()" onmouseout="toRed()"></div>
</body>
</html>
改进后：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:red;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById("changeColor");
oDiv.onmouseover = toGreen;
oDiv.onmouseout = toRed;
}
function toGreen(){
var oDiv1 = document.getElementById("changeColor");
oDiv1.style.backgroundColor='green';
oDiv1.style.width='200px';
oDiv1.style.height='200px';
}
function toRed(){
var oDiv2 = document.getElementById("changeColor");
oDiv2.style.backgroundColor='red';
oDiv2.style.width='100px';
oDiv2.style.height='100px';
}
</script>
</head>
<body>
<div id="changeColor"></div>
</body>
</html>
3. 给按钮添加索引index，以便记住当前点击的是那个按钮
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选项卡</title>
<style type="text/css">
input{
width:60px;
}
.active{
background-color:#FF3;
}
div{
width:200px;
height:200px;
background-color:#003;
display:none;
color:#CCC;
}
</style>
<script type="text/javascript">
window.onload = function(){
var aBtn = document.getElementsByTagName("input");
var aDiv = document.getElementsByTagName("div");
var i = 0;
for(i = 0; i < aBtn.length; i++){
aBtn[i].index = i;
aBtn[i].onclick = function(){
for(i = 0; i < aBtn.length; i++){
aBtn[i].className = '';
aDiv[i].style.display = 'none';
}
this.className = 'active';
aDiv[this.index].style.display = 'block';
}
}
}
</script>
</head>
<body>
<input class="active" type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
<div style="display:block">111</div>
<div >222</div>
<div >333</div>
</body>
</html>
4. offsetLeft // 左边距
offsetTop // 上边距
offsetWidth // 宽度
offsetHeight // 高度
oUl.onmouseout = function(){
timer = setInterval(function(){
oUl.style.left = oUl.offsetLeft - iSpeed + 'px';
if(oUl.offsetWidth/2 < -oUl.offsetLeft){
oUl.style.left = '0px';
}else if(oUl.offsetLeft > 0){
oUl.style.left = -oUl.offsetWidth/2 + 'px';
}
},50);
}
5. 获取ul下li
<script type="text/javascript">
window.onload = function(){
var oUl = document.getElementsByTagName("ul")[0];
var oLi = oUl.getElementsByTagName("li");
}
</script>
<body>
<ul>
<li><a href="http://www.miaov.com/"><img src="images/1.jpg" /></a></li>
<li><a href="http://www.miaov.com/"><img src="images/2.jpg" /></a></li>
<li><a href="http://www.miaov.com/"><img src="images/3.jpg" /></a></li>
<li><a href="http://www.miaov.com/"><img src="images/4.jpg" /></a></li>
</ul>
</body>
6. length可以获取数组的长度，也可以修改数组的长度
只有数组的length有这个特点
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> var arr = [22,2,3]; arr.length = 1 alert(arr); </script> </head> <body> </body> </html>
7. arr.sort(); // 默认情况下,它会把所有的东西都当做字符串处理
如果我们要排序数字,需要给它传一个比较函数作为参数
<script type="text/javascript" >
var arr1 = [12, 2, 15, 34, 90];
arr1.sort(function(num1, num2){
return num1 - num2;
});
alert(arr1);
var arr2 = ['毕加索', '阿杜', '张三', '李四'];
arr2.sort(function(str1, str2){
return str1.localeCompare(str2);
})
alert(arr2);
</script>
8. 数组复制
<script type="text/javascript" > var arr1 = [1, 2, 3]; var arr2 = arr1.concat([]); // 等于创建了一个新数组,不影响arr1 arr2.push(4); alert(arr1); </script>
9. 数组去重
<script type="text/javascript" >
function hasContain(arr, num){
var i = 0;
for(i = 0; i < arr.length; i++){
if(arr[i] == num){
return true;
}
}
}
var arr = [1, 2, 2, 3, 4, 4, 5, 6, 7, 7];
var i = 0;
var aResult = [];
for(i = 0; i < arr.length; i++){
if(!hasContain(aResult,arr[i])){
aResult.push(arr[i]);
}
}
alert(aResult);
</script>
10. 文档碎片: 提高DOM操作性能:
<script type="text/javascript" >
var oUl = document.getElementById("ul1");
var oLi = null
var oFrag = document.createDocumentFragment();
var i = 0;
for(i = 0; i < 1000000; i++){
oLi.document.createElement('li');
// oUl.appendChild(oLi); 每创建一次就添加到页面,页面就渲染一次
oFrag.appendChild(oLi); // 先放到一个对象中,然后一次性添加到页面
}
oUl.appendChild(oFrag);
</script>
11. document.getElementsByClassName 不兼容IE
相关推荐
上海市学前教育课程指南.pdf
课程是教育的核心，它由目标、内容和组织构成一个系统，旨在促进学前儿童的发展。教育的目标是多元化的，反映了我国现今学前教育课程的特点。课程的性质由学前儿童的特性和社会发展的需求共同决定，其目的是为了提供...
在我国学前教育发展史上，X雪门的名字犹如一颗璀璨的星辰，他的学前教育课程思想不仅为后来者提供了丰富的理论资源，也为中国幼儿教育的改革与发展指明了方向。X雪门，这位被赞誉为"南陈北X"的教育家，其一生的教育...
学前比较教育学五种学前课程描述比较。蒙台梭利课程，
【学前音乐课程标准】 学前音乐课程是专门为学前教育专业设计的一门专业课程，旨在培养具备音乐基础知识、技能和教学能力的学生，使他们能够在幼儿音乐教育领域发挥出色的教学效果。该课程覆盖了乐理与视唱练耳、...
上海市学前教育课程指南.doc
《学前教育学》是一门融合理论与实践的综合性课程，其设计理念旨在为高职教育的学生提供一个以服务社会、就业为导向的学习平台，同时注重培养学生的创新精神和实践能力。课程设计遵循四项基本原则：理论知识学习、...
上海市学前教育课程的指南.doc
【高校学前教育专业艺术课程体系构建...总之，构建和完善学前教育专业艺术课程体系是一项系统工程，需要综合考虑各种因素，旨在培养出既具备艺术才能又具有全面教育理念的优秀幼儿教师，为我国的学前教育事业贡献力量。
探讨如何创新学前教育课程改革机制.pdf
【学前教育专业课程改革对策】 随着我国教育改革的深入，学前教育专业课程改革已成为当前教育领域亟待解决的问题。本文主要探讨了在应用型人才培养视角下，学前教育专业课程改革的必要性，改革的基本原则以及应对...
《学前教育美术课程教学本土化研究》是一篇深入探讨如何将学前教育中的美术课程与本土文化相结合的学术论文。文章首先强调了课程的文化适宜性对于教育的重要性，特别是在学前教育领域，美术课程的文化适应性对于揭示...
综上所述，学前教育专业课程改革方案的实施，旨在创造一个更贴近实际需求、更注重技能培养的教育环境。该方案通过改革文化课程和专业课程，不仅强化学生的理论知识，更注重提升学生的实践能力和职业素养，使学生在...
在当今社会，舞蹈作为一种艺术形式，已逐渐成为学前教育不可或缺的一部分。它不仅仅是一种身体锻炼，更是一种审美教育和情感表达方式。然而，随着时代的发展和社会需求的变化，学前教育舞蹈课程的教学模式亟需改革，...
【学前教育史】课程标准详细解析 学前教育史是一门在教育科学领域内不可或缺的课程，尤其在学前教育本科专业中，它被视为必修的核心课程。这门课程以历史唯物主义为指导，深入研究中外学前教育的发展历程和规律，...
这些机构通常拥有标准化的课程，旨在实现一系列教育目标。 印度幼儿教育的主要目标包括：(1)促进身体健康和基本运动技能的发展；(2)培养健康生活习惯和基本自理能力；(3)塑造良好的社会态度和礼貌行为，鼓励合作和...
《学前教育（专）课程实践一》是一门旨在培养学生将理论知识与实际操作相结合，提升学前教育专业学生专业素养的实践性教学课程。本课程的教学内容丰富多样，涵盖了幼儿园日常规范的熟悉、教学活动的设计与实施、教学...
《学前儿童游戏》课程是一门为学前教育专业学生量身打造的课程，其核心目的在于让学生深入理解并掌握幼儿游戏的诸多方面，从其本质、理论到实践方法。通过这门课程，学生们不仅能获得扎实的理论基础，还能培养出在...
在这一背景下，学前教育专业课程的改革成为了教育领域研究的热点之一，尤其是数学课程的改革，由于其对于培养学生的逻辑思维能力、问题解决能力等方面的重要作用，更是成为了改革的重点。 数学课程在学前教育专业中...