妙味js视频学习之旅（二）

1-属性操作

01、HTML的属性操作

HTML属性就是每个标签的id src class type这些。
属性操作就是两种：读操作和写操作（其实是替换的意思，不是添加）

元素.属性//这是读操作，获取、得到我们想要的元素.属性=新的值；//这是写操作，是替换

还有一个innerHTML,这个是所有内容包括标签。

元素.innerHTML;//获取得到元素内的值。元素.innerHTML=新的值;//设置元素内的内容。

通过这两个的配合，可以做出一些效果，可以实现聊天添加，或者把输入文本框的值动态设置为某个元素的属性值，比如src,可以实现点击换图片的效果，等等操作。

02属性操作的注意事项

技术上：必须能掌握兼容性，
项目上：商量着；
1：js中不允许使用“-”符号，因此所有的css属性中带有“-”的一律去掉“-”把后面字母的首字母改为大写，如

font-size==>fontSize;

2:由于js中含有关键字或者保留字，所以其它字符串不能使用，比如class是保留字，因此给class设置属性时，要把class改为className.还有float

oP.className="red";oP.style.styleFloat='left';(IE)oP.style.cssFloat='right';(非IE)

3:相对路径不能判断，颜色值也不能拿来做判断,innerHTML值也不要

img src;href "css/index.css"color:red #f00 rgb(250,0,0)

4：修改type值IE678不兼容；

原来type="button";o.type="cheakbox";//想兼容的话，就是点击隐藏，把cheakbox显示，模拟显示

5：js中可以把”.”换成[]。这两个是完全等价的。实现替换比如

oAttr.value;//属性名oVal.value;//属性值oDiv.style.width=oVal.value;//这样可以，oDiv.style.oVal.value=oVal.value;//但是这样不可以oDiv.style[oVal.value]=oVal.value;//这样是可以的

03判断

if判断有三种形式

if(){};if(){}else{};if(){}else if(){}else if(){};

基于这个我们可以做一个模拟开关，用于循环切换。类似于toggle

var onOff=true;//一般的话在外部定义全局变量，然后再在内部进行变化if(onOff){//算法的魅力  元素显示;  onOff=flase;}else{  元素隐藏;  onOff=true;}

04数组

数组可以理解为一个仓库；下标从0开始。最后一个是arr.length-1

var arr=[元素一，元素二，元素三，元素四]//最后一个一定不要再加，否则真实数量会再多一个。arr.push()//向数组最后面添加内容

使用数组可以制作点击图片切换等等的效果原理大致如下，

style.css//设置好样式oPrev,oNext,oImg,oText,oTotalNum,//获取元素,oImages=[图片地址一，图片地址二，图片地址三]//设置好图片地址oDescription=[图片说明一，图片说明二，图片说明三]//设置好图片说明，var num=0;//定义好计数//初始化设置函数init()//把图片地址给src,把图片说明给oText,把图片地址数组的length给oTotalNum下一个点击事件oNext.onclick=function(){    num++;    if(num==oImages.length){num=0;}//到头了就返回到第一个    init();//图片设置函数}上一个点击事件oPrev.onclick=function(){    num--;    if(num==-1){num=oImages.length-1;}//到头了就返回到第一个    init();//图片设置函数}

这里给出实例