JS 基础
一切实例都参照于 菜鸟教程、表严肃
- 页面文字改变
<p id="demo"> JavaScript 能改变 HTML 元素的内容。 </p>
<script>
document.write(Date()); //直接在html中显示页面刷新时间
console.log(Date());
function myFunction() { x=document.getElementById("demo"); // 找到元素 y=document.getElementById("dem \ //在输出中可能由于内容太长,可以通过 \ 换行,便于阅读
o2"); x.innerHTML="Hello JavaScript!"; // 改变内容 y.innerHTML=x.innerHTML; } </script> <p id="demo2"> ddddd </p>
<button type="button" onclick="myFunction()">点击这里</button>
innerHTML 用于修改元素的 HTML 内容
将灰色位置 内容 都变成 Hello JavaScript!(demo位置是直接改变,demo2位置参照demo的新值)
- 判断
<script> function changeImage() { element=document.getElementById('myimage') if (element.src.match("bulbon")) { element.src="/images/pic_bulboff.gif"; } else { element.src="/images/pic_bulbon.gif"; } } </script> <img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180"> <p>点击灯泡就可以打开或关闭这盏灯</p>
match() 方法可在字符串内检索指定的值(通过在src属性中检索是否含有bulbon这个值)
- 变量
function varTest() { var x = 1; if (true) { var x = 2; // 同样的变量! console.log(x); // 2 } console.log(x); // 2 } function letTest() { let x = 1; if (true) { let x = 2; // 不同的变量 console.log(x); // 2 } console.log(x); // 1 }
let 声明的变量只在其声明的块或子块中可用(let 内外是不一样的)
- 数据类型
number 在其他类型前加+可以快速将其转换为数字类型 +'1' // 1 +'' // 0 +'1.1' // 1.1 +true // 1 +false // 0
string `我是个模板字符串,我叫 ${name}` //使用`(反引号,1左边)定义模板字符串,可以传入变量,还可以直接断行 'yo'.charAt(0); // "y" 程序员是从0开始数的,获得字符串中的某一个字符 'yo'[0]; // "y" '花花你好'.includes('花花'); // true,检查一段字符是否包含另一段字符 '花花→_→拴蛋→_→背背'.split('→_→'); // ["花花", "拴蛋", "背背"] //用字符串将字符串分割为数组 'y'.concat('ooo', 'oo', 'o'); // "yoooooo",依次连接传入的字符,传参数量不限 连接字符串 var str = '王花花和小熊跳舞跳呀跳呀一二一'; //截取字符串 str.slice(3, 8); // "和小熊跳舞",第一个传参为开始索引,第二个传参为结束索引 str.slice(3); // "和小熊跳舞跳呀跳呀一二一",若省略第二个传参将会截取至最后一个字符 ' yo '.trim(); // "yo" .trim 移除两头的空格
对象
<p id="demo"></p>
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo").innerHTML = person.fullName();
docuument.write(person.firstName);
</script>
//获取对象属性
person.firstName
person['firstName']
array
var arr = [3, 4, 5]; .push(新元素) 从末尾添加 arr.push(6); // 4 返回修改后的长度 console.log(arr); // [3, 4, 5, 6] .unshift(新元素) 从开头添加 arr.unshift(2); // 4 返回修改后的长度 console.log(arr); // [2, 3, 4, 5] .pop() 从末尾删 arr.pop(); // 6 返回被删除的数 console.log(arr); // [3, 4, 5] .shift() 从开头删 arr.shift(); // 2 返回被删除的数 console.log(arr); // [3, 4, 5] .reverse() 颠倒顺序 [1, 2, 3].reverse(); // [3, 2, 1] .splice(从哪剪, 剪多长, 替换元素1, 替换元素2) 剪接 var 片儿 = ['a', 'b', '辣鸡1', '辣鸡2', 'c']; // 从第3格开始剪,剪2格 片儿.splice(2, 2); // ["辣鸡1", "辣鸡2"] 返回减掉的东西 console.log(片儿); // ["a", "b", "c"] // 注意,现在片儿已经剪成了['a', 'b', 'c'] // 从第2格开始剪,剪1格,进两个广告 片儿.splice(1, 1, '广告1', '广告2'); console.log(片儿); // ["a", "广告1", "广告2", "c"] .slice(从哪剪,在哪停) 剪裁 返回剪裁的新数组,不影响原数组。 var 片儿 = ['a', 'b', '辣鸡1', '辣鸡2', 'c']; // 从第3格开始剪,剪2格 var 垃圾堆 = 片儿.slice(2, 4); // ["辣鸡1", "辣鸡2"] 返回减掉的东西 console.log(垃圾堆); // ["辣鸡1", "辣鸡2"] .forEach(回调函数) 迭代 ['a', 'b', 'c'].forEach(function(string,index) { console.log('第' + index + '条:' + string); }); .filter(回调函数) 过滤器 (通过你给他的条件返回一个新数组) var 旧数组 = [1, 2, 3, 4]; var 新数组 = 旧数组.filter( // 传入一个函数,每迭代一个元素就执行一次 function(元素, 索引, 原始数组) { // 只要大于2的元素 var 条件 = 元素 > 2; return 条件; } ); console.log(新数组); // [3, 4] .every(回调函数) 查看是否满足条件 var 满足 = [1, 2, 3].every( // 传入一个函数,每迭代一个元素就执行一次 function(元素, 索引, 原始数组) { // 是否小于10 var 条件 = 元素 < 10; return 条件; } ); /*只有当所有条件都满足时才返回true*/ console.log(满足); // true
this 一般是指代父类 但是要看它的引用位置 var person={ fname:'y', lname:'f', full:function(){ console.log(this); //window 若是在严格模式('use strict';)就是undefined return this.lname + this.fname; } } // var get_fullName = person.full; // console.log(get_fullName()); //NaN console.log(person.full()); //就等于父级对象 function yo(){ console.log('yo.'); } //可以在不同的父级动态绑定 function yo(nam,a){ console.log('yo, '+nam+' 我是'+this.name +' '+a); } // yo(); var f ={ name:'f', } // f.yo = yo; // f.yo(); yo.call(f,'aa',1); // call可以绑定this yo.apply(f,['b',2]) yo2 = yo.bind(f); yo2('c',3);
- 回调函数
function yo(callback){ if(callback){ callback(); } } yo(function(){ console.log('222'); }); function each(arr,callback){ for(var i =0;i<arr.length;i++){ var item = arr[i]; callback(item); } } each(['a','b','c'],eqc); function eqc(item){ if(item=='c') console.log(item); }
- 闭包
function user(name){
var name,age;
return {
getName:function(){
return name;
},
setName:function(NewName){
name = NewName;
}
}
}
var ss = new user('sss');
ss.setName('wwww');
var name = ss.getName();
console.log("name:",name);
- window对象
// alert('这是一个弹框'); // var r = confirm('这是一个可以选择是否的弹框,你点的是什么?'); // console.log("r:",r); //返回true 或者 false //var name = prompt('这是一个可供输入的弹框'); //console.log("name:",name);
三个弹框都会使程序暂时停止
//定时操作 setTimeout(function(){ console.log("it's 2 sec"); },2000) //间隔多久执行一次 setInterval(function(){ console.log("ok"); },1000) //每秒报数 var count = 0; var timer = setInterval(function(){ count++; if(count>3){ clearInterval(timer); return; //若没有return 外面依然会执行一次 } console.log("ok"+count); },1000)
console.log因为一直在程序内,所以不管定时器是否0秒执行(计时器在程序外有一个队列)
都是先打印console的内容