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
2oDiv.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
10for( 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 | <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 | function fn1(){ |
小练习
逢十往下一行
小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:两种图片切换思路