(一) JS学前预热课程

最新推荐文章于 2024-07-20 23:54:17 发布

iteye_17773

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量112

点赞数

分类专栏：【妙味课堂笔记】文章标签： javascript xhtml ViewUI

【妙味课堂笔记】专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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" οnmοusemοve="toGreen()" οnmοuseοut="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

iteye_17773

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
(一) JS学前预热课程

1. 所有的属性都有一个特点：页面怎么写js就怎么写，但改变class特殊比如：&lt;div id="div1" class="box" style="display:none"&gt;&lt;/div&gt;要改变display：document.getElementById("div1").style.display='block'要改变class：document.getE
复制链接

扫一扫