JavaScript基础学习(1)

发表于 | 分类于 ， ， | 阅读次数:

HTML 属性操作

  • 属性读操作：获取、找到
    元素.属性名
  • 属性写操作：(添加)替换、修改
    元素.属性名 = 新的值

oP.innerHTML 读取元素内的所有HTML内容
oP.innerHTML = 新的值 替换元素内的所有HTML内容
oP.innerHTML += 新的值 添加元素内的所有HTML内容

属性操作实例：模拟手机短信发送

  • 属性操作注意事项
    JS不允许出现的特殊字符
    实例：网页字体大小控制
    JS中操作属性名不允许出现‘-’，要把‘-’去掉，‘-’后的单词首字母大写
    css3中浏览器前缀也同

给元素添加class
实例：替换皮肤

- 行间样式与className

关键字、保留字
不能使用保留字、关键字,如需要操作class属性时要将其替换成className
class 保留字 关键字：js语言中用到的单词 var function
class => className

相对路径的读取问题
所有的相对路径都不要用来做判断

- img src
- href
颜色值不要用来做判断
- color
innerHTML值不要用来做判断 //会引发兼容性问题

表单元素的type值修改
IE6、IE7、IE8兼容性问题及解决思路
可以考虑使用控制元素隐藏显示的方式实现

float的兼容性问题
IE（sytleFloat）、非IE（cssFLoat）

1
2
oDiv.sytle.styleFloat = 'left';
oDiv.sytle.cssFloat = 'left';

可以考虑把浮动样式写到css里，用添加class的方式实现

属性操作中的：[]
实例：任意修改DIV的值
JS中允许把“.”替换成“[]”

  • 条件判断
    缺少判断条件时

for循环

重复执行某些代码
每次执行的时候，有个数字在变化
性能问题。for循环内部尽量不要直接操作dom元素或者复杂计算
比如需要用arr.length可以先存到一个变量中，

1
2
3
4
5
6
7
8
9
10
for( var i=0; i<arr.length; i++ ){
	document.body.innerHTML += ‘<input type="button" value="按钮">’;
}
=>
	var len = arr.length;
	var str = '';
	for( var i=0; i<len; i++ ){
		str += '<imput type="button" value="按钮">';
	}
	document.body.innerHTML += str;

循环生成坐标（利用绝对定位来做）
小练习 一字排开；逢十换行；v字形坐标

for循环遍历二维数组、嵌套元素

1
2
3
4
5
6
7
8
9
10
11
12
<script>
	var arr = [
		[ 1,2,3 ],
		[ 4,5,6 ],
		[ 7,8,9 ]
	];
	for( var i=0; i<arr.length; i++ ){
		for( var j=0; j<arr[i].length; j++ ){
			alert(arr[i][j]);
		}
	}
</script>

cssText文本格式化与属性操作
var oDiv.style.cssText = ' width:200px; height:200px '; //该操作会替换行间样式

实例：生成一组新闻及思路分析
思路：
1.按钮不可操作（用户体验不好）a. oBtn.disabled = true; b. oBtn.display = ‘none’;
2.先清空，再生成（很多时候会用到，但性能会有影响）
3.判断

关键字：this

  • this是什么
    当前方法、函数的调用对象
    通过事件调用函数的对象
  • 函数套函数中的this指向
    嵌套函数中的this
    this的变量引用
  • this运用
    this选取当前元素
    this选取当前元素内的子元素

this指向及this应用
this：指的是调用当前方法(函数)的那个对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function fn1(){
	alert(this);
}
fn1();	this => window
oDiv.onclick = fn1();	this => oDiv
oDiv.onclick = function(){
	fn1();	//fn1()里的this => window
}
<div onclick="this"></div>	this => oDiv
<div onclick="fn1();"></div>	fn1()里的this => window

this
fn1(this);
function fn1(obj){
	obj => window
}
oDiv.onclick = function(){
	this
	fn1(this);
}
function fn1(obj){
	obj => oDiv
}

小练习
逢十往下一行
小v字形
【示例：点击查看】

自定义属性、自定义一组开关应用

  • 什么是自定义属性
    运用for循环为一组元素添加开关
    实例：点击当前列表，切换各自的class
  • 添加索引值
    index索引值
    索引值运用：图片切换实例
    思路一：全部清除
    思路二：消除上一个
  • 图片切换实例扩展
    this引用
    函数合并

JS可以为任何HTML元素添加任意个自定义属性

1
2
3
4
5
6
7
8
9
10
11
12
13
<input type="button" value="按钮1">
<input type="button" value="按钮2">

<script>
window.onload = function(){
	oBtn = document.getElementsByTagName('input');

	for(var i = 0; i < oBtn.length; i ++){
		oBtn[i].abc = 123;
		oBtn[i].xyz = true;
	}
}
</script>

获取自身递增数字及匹配数组内容

添加索引值、匹配数组、HTML元素

图片切换综合实例1:布局
图片切换综合实例2:数据与初始化
图片切换综合实例3:两种图片切换思路

  • 思路1:全部清除 当前添加
  • 思路2:消除上一个 当前添加
    图片切换综合实例4:代码简化函数合并
    QQ菜单实例1：实现折叠与展开
    QQ菜单实例2：实现点击高亮显示、3道作业要求
    练习：
  • qq菜单
    【示例：点击查看】
  • 带缩略图的图片轮换
    【示例：点击查看】
  • 花瓣
    【示例：点击查看】