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雪门（1891～1973）在其一生对学前教育深入研究的结晶，他在我国学前教育领域享有极高的声誉，被誉为"南陈北X"之一。X雪门的主要贡献在于他对幼稚园教育的理论与实践，其著作超过200...
学前比较教育学五种学前课程描述比较。蒙台梭利课程，
【学前音乐课程标准】 学前音乐课程是专门为学前教育专业设计的一门专业课程，旨在培养具备音乐基础知识、技能和教学能力的学生，使他们能够在幼儿音乐教育领域发挥出色的教学效果。该课程覆盖了乐理与视唱练耳、...
上海市学前教育课程指南.doc
《学前教育学》是一门融合理论与实践的综合性课程，其设计理念旨在为高职教育的学生提供一个以服务社会、就业为导向的学习平台，同时注重培养学生的创新精神和实践能力。课程设计遵循四项基本原则：理论知识学习、...
上海市学前教育课程的指南.doc
【高校学前教育专业艺术课程体系构建...总之，构建和完善学前教育专业艺术课程体系是一项系统工程，需要综合考虑各种因素，旨在培养出既具备艺术才能又具有全面教育理念的优秀幼儿教师，为我国的学前教育事业贡献力量。
探讨如何创新学前教育课程改革机制.pdf
【学前教育专业课程改革对策】 随着我国教育改革的深入，学前教育专业课程改革已成为当前教育领域亟待解决的问题。本文主要探讨了在应用型人才培养视角下，学前教育专业课程改革的必要性，改革的基本原则以及应对...
《学前教育美术课程教学本土化研究》是一篇深入探讨如何将学前教育中的美术课程与本土文化相结合的学术论文。文章首先强调了课程的文化适宜性对于教育的重要性，特别是在学前教育领域，美术课程的文化适应性对于揭示...
研究以阜新市第一中等职业技术专业学校为例，分析了当前学前教育专业课程改革的现状、问题，并提出了改革建议和策略。 文档内容分为七部分，首先明确了以工作过程为导向的课程改革的内涵，包括对国内外相关改革的...
总的来说，学前教育专业课程改革方案致力于创建一个更贴近实际、更注重技能培养的教育环境，旨在培养出既有扎实理论基础，又具备出色实践能力的学前教育工作者，以满足行业和社会的需求。这种改革不仅关注学生在校...
【学前教育史】课程标准详细解析 学前教育史是一门在教育科学领域内不可或缺的课程，尤其在学前教育本科专业中，它被视为必修的核心课程。这门课程以历史唯物主义为指导，深入研究中外学前教育的发展历程和规律，...
这些机构通常拥有标准化的课程，旨在实现一系列教育目标。 印度幼儿教育的主要目标包括：(1)促进身体健康和基本运动技能的发展；(2)培养健康生活习惯和基本自理能力；(3)塑造良好的社会态度和礼貌行为，鼓励合作和...
【学前教育舞蹈课程教学改革探析】的焦点在于探讨如何改进学前教育阶段的舞蹈教学，以适应时代需求，提高学生全面的艺术素养。舞蹈课程是幼儿教育的重要组成部分，它对培养幼儿的艺术才能、审美能力和身心健康发展...
高师（高等师范学院）学前教育专业的课程改革成为了推动这一领域发展的重要任务。传统的中等师范教育已无法满足21世纪幼儿园教育对师资的多元化需求，因此高等师范院校在培养目标上需要转向更高级别的幼儿园教师培养...
【学前教育专业课程改革的核心要点】 在学前教育专业课程改革中，数学课程扮演了至关重要的角色。数学不仅是提升学生逻辑思维能力和严谨精神的工具，更是为未来幼儿园教育工作者提供必需的知识基础。改革的目标应...