数组的遍历
- 什么是数组的遍历：就是取出数组中的每一个元素
for(var i = 0 ; i < arr.length ; i ++){
var result = arr[i];
console.log(result);
}
- 代码抽取的思想：
功能相同的抽取出来，不同的用变量
练习代码
// 分析：偶数行的li变成红色
// 1.获取所有的元素
var lis = document.getElementsByTagName("li");
console.log(lis);
// 2.找出偶数行设置颜色
for(var i=0; i<lis.length; i++){
if (i%2 != 0){
lis[i].style.backgroundColor = "red";
}
}
数组的常用方法
- 增
var arr = [12,undefined,null];
arr[3] = 188;
arr.push(90,99);
- 删
var result = arr.pop();
console.log(arr);
console.log(result);
- 改
arr[1] = 588;
console.log(arr);
- 查
查就是遍历然后用 if 判断
JS 的内置
<button style ="background-color:red" onclick = "alert('大家早上好')">按钮</button>
九宫格
九宫格关键点
btns[i].style.position = "absolute";
row = parseInt(i / count);
col = i % count;
// console.log(col);
btns[i].style.top = row * 100 + "px";
btns[i].style.left = col * 100 + "px";
排他思想
- 谁调用代表谁的关键词 this
- 排他思想的关键点
for(var i=0; i<btns.length; i++){
btns[i].onclick = function () {
// this代表当前事件的调用者
// 排他思想：干掉所有人（包括自己）
for(var j = 0; j < btns.length; j++){
btns[j].style.backgroundColor = "#ccc";
}
// 最后再让自己复活
this.style.backgroundColor = "blue";
}
}
通过类名获得标签(阉割版)
- 有兼容性问题，ie/6/7/8不支持，所以要自己做函数来实现
function getElementsByClass_name(class_name)
{ // 判断当前浏览器是否支持这个方法
if (document.getElementsByClassName){
return document.getElementsByClassName(class_name);
}
// 就是用来存储指定class_name类名称的标签
var arr = [];
// 取出页面上所有的元素
var doms = document.getElementsByTagName("*");
for(var i=0; i<doms.length; i++){
// console.log(doms[i]);
// 取出类名称，判断是否和class_name相等，如果相同，保存到数组中
if (doms[i].className == class_name){
arr.push(doms[i]);
}
}
return arr;
}
var arr = getElementsByClass_name("box");
console.log(arr);
arr[1].style.backgroundColor = "red";
</script>
补充如何把字符串切割成数组
- 使用字符串的 .split 方法
var str = "box demo test";
//这里空格表示，用空格分隔的字符串
var arr = str.split(" ");
console.log(arr);
//输出 arr["box","demo","test"];
完整版通过类名称获取标签
function getElementByClass_name(class_name){
var arr = [];
var doms = document.getElementsByTagName("*");
for(var i = 0; i < doms.length ; i++){
var classNameArr = doms[i].className.split(" ");
for(var j = 0; j < doms.length; j++){
if(classNameArr[j] == class_name){
arr.push(doms[i]);
}
}
}
return arr;
}
var arr = getElementsByClass_name("box");
其他类型转换称字符串类型
- 布尔类型转换为字符串类型
var flag = false;
var result = flag.toString();
- 数字类型转换为字符类型
var number = 123;
var result = number.toString();
//输出字符类型的123
- 补充
- 运算符 也可以用来连接字符
var str1 = "hello";
var str2 = "world";
//输出helloworld
- 当数字类型和字符类型相加的时候，数字类型会转变为字符串类型
var num1 = 10;
var str = "10";
var num2 = 10;
var result = num1 + str + num2;
//输出101010
var num3 = 10;
var num4 = 10;
var str = "10";
var result = num1 + num2 + str;
//输出 2010
- 数字类型转换成字符串类型最简单的方式
var num = 90;
var str = num + "";
字符串转换成数值类型
- 使用 parseInt 方法
var str = "123";
var result = parseInt(str);
- 转换原理：
当遇到 0~9 的时候就转换，如果是其他的那么停止转换，并且返回当前转换完成的数字
var str = "123abc";
var str = "123.45abc";
var num = parseInt(str);
console.log(typeof num);
console.log( num);
// var str = "123.45abc"
- 注意
只有遇到第一个小数点 . 的时候会继续转换，再有其他不是0~9的证书，就退出转换
var str = "123.45.567abc";
var result = parseFloat(str);
console.log(result);
//输出123.45
- 要求进制转换
var num = 10;
var result = num.toString(8);
//输出12
对象、方法、属性和变量
- 对象
具有特定功能的功能组
document.getElementByTagName(); - 方法(就是函数):
隶属于对象 - 属性：就是变量，隶属于对象，想要使用，必须有对象调用，（对象.属性）
- 变量：
变量比较自由，在哪都可以使用
-自定义属性
var arr = [12,345];
arr.length;
arr.suibian = 123;
var result = arr.suibian;
console.log(result);
//输出123
tab 切换
也可以使用小闭包解决
//自定义属性，将循环的变量抽离出来，在循环内部的函数中使用
lis[i].index = i;
lis[i].onclick = function(){
divs[this.index].style.display = "black";
}
// 获取对一个的标签
var lis = document.getElementsByTagName("li");
var divs = getElementsByClass_name("son");
console.log(divs);
for(var i=0; i<lis.length; i++){
// 自定义属性
lis[i].index = i;
lis[i].onclick = function () {
// 干掉所有人（包括自己）
for(var j=0; j<lis.length; j++){
lis[j].className = "";
divs[j].style.display = "none";
}
// 自己
this.className = "current";
divs[this.index].style.display = "block";
}
}
//自己创建兼容类名选择器
function getElementsByClass_name(class_name)
{
var arr = [];
// 取出页面上所有的元素
var doms = document.getElementsByTagName("*");
for(var i=0; i<doms.length; i++){
// console.log(doms[i].className);
// 把字符串切割成数组
var classNameArr = doms[i].className.split(" ");
for(var j=0; j<classNameArr.length; j++){
// 判断数组中的每一个元素是否等于class_name
if (classNameArr[j] == class_name){
arr.push(doms[i]);
}
}
}
return arr;
}
