Day3
仿淘宝搜索框引入 IE 678 兼容问题:
普通浏览器: oninput 检测用户表单输入内容
IE浏览器 678: onpropertychange 检测用户表单输入内容
最终用H5的标签解决:
placeholder=”内容”; 写入在input标签内即可.
子绝父相
数组:
声明数组:
1 var arr = [1,2,3,4];
2 var arr = new Array[1,2,3,4];
使用数组:
arr[0]; 获取第一个数组元素.
遍历数组:
1 for(var i = 0; i<arr.length:i++){
console.log(arr[i]);
}
ps:传统方式遍历,太多重复 影响性能.
2 for(var i = 0; len=arr.length; i<len;i++){
console.log(arr[i]);
}
ps:推荐方式,性能较好,去除重复,在执行for循环时已计算出长度直接进行比较即可.
隔行变色:
.current{
}
!important : 权限最大 用于提高某个元素的优先级使用. 一般用于冲突或者被元素值覆盖的情况下,放在元素最后面即可.
.current : 作为一个自定义类, 用于自定义一类的元素值,方便指定使用该元素设置值.
使用: obj.className = “类名”; 即可.
ps:
由于隔行变色遍历了所有的li元素内容,因为要实现鼠标移入操作进行更改被移入的行( 某个li ),所以不能使用 遍历完以后的结果, 所以这里必须使用this来代表当前的对象来进行改变当前元素的元素值.
code:
//当鼠移入的时候通过类名植入改变元素值
lis[i].onmouseover = function(){
this.className = "current";
}
字符相连:
input里的value值是字符型
运算符中, 除 ‘+’ 号外, 其余都可以正常进行运算,‘+’号很多时候充当字符连接的作用, 如果需要进行+法运算 需要进行强转.
1 parseInt parseFloat
2 Number(“需要运算的内容”);
组合连接:
目的是为了解决变动式的参数值.
比如更改精灵图的坐标:
var iis = document.getElementById("iconsprite").getElementsByTagName("i");
for(var i=0;i<iis.length;i++) {
iis[i].style.backgroundPosition ="0 "+(-i*25)+"px";
}
"0 "+(-i*25)+"px";
解读:
坐标 0 + 0*25 + px = 0,0 px
var iis = document.getElementById("iconsprite").getElementsByTagName("i");
用法:
文档的某个元素ID的元素类指向iis变量.
一般用作某个ID下的某个标签, 类似 ul 下的所有li.
全选 取消和反选:
1 要改变checkbox 的值需要的是获取 input 元素 然后改变checked 的值为布尔值 ( true/false)即可
2 传统方式实现;
三元运算符方式实现:
obj[i].checked = value; (value作为形参传递)
例:
obj[i].checked == true ? obj[i] = false : obj[i].checked = true;
变量和属性:
区别:
变量:独立存在, 自由
属性:有对象的,属于对象的,唯一的
排他思想:
代码:
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title> </title>
<style>
.aa{
background-color:pink;
}
</style>
<script>
window.onload = function(){
var btns = document.getElementsByTagName("button");
for(var i = 0;i<btns.length;i++)
{
btns[i].onclick = function()
{
for(var j = 0;j<btns.length;j++)
{
btns[j].className = "";
}
this.className = "aa";
}
}
}
</script>
</head>
<body>
<button>变色</button>
<button>变色</button>
<button>变色</button>
<button>变色</button>
<button>变色</button>
</body>
</html>
解读:
第一个循环作用先遍历出所有的button元素,然后再嵌套一个循环获取所有的元素,目的是为了清除元素的className,也就是重置一遍.然后当点击事件触发一次的时候清空一遍,然后给当前(this)点击的元素进行加入className 以达到排他的作用.
弹出索引号:
btns[i].index = i;
解读:
就是在遍历的时候把i<obj.length 的值赋值给obj.index ,这样obj就存在索引号,然而就可以拿这个索引号做其他事情,比如主流网站上的侧边栏显示大的分类内容, 如: JD TB
...
Tab 栏切换:
浙公网安备 33010602011771号