web路途-基础的JavaScript语法概要
一边学习前端，一边经过博客的形式本身总结一些东西，固然也但愿帮助一些和我同样开始学前端的小伙伴。javascript
若是出现错误，请在评论中指出，我也好本身纠正本身的错误css
author： thomaszhouhtml
- 目录
- [1. 基本语法]
- [2. 排序sort()默认和自定义]
- [3. js一些简单提升性能实例]
- [4. this的理解和应用]
- [5. 点击事件的调试错误]
- [6. js能够为全部标签添加任何自定义属性]
- [7. 数据类型和类型转换]
- [8. 函数传参(未完成）]
- [9. 做用域]
- [10. 定时器]
- [11. 日期对象]
- [12. 字符串方法]
- [13. 数组方法]
- json,对象
基本语法-1
- javascript分别提供内置函数 parseInt()和parseFloat()，转换为数字 注：若是被转换的字符串，同时又数字和字符构成，那么parseInt会一直定位数字，直到出现非字符。 因此"10abc" 会被转换为 10
- 使用内置函数Boolean() 转换为Boolean值 当转换字符串时：非空即为true 当转换数字时：非0即为true 当转换对象时：非null即为true
- Number和parseInt同样，均可以用来进行数字的转换 区别在于，当转换的内容包含非数字的时候，Number() 会返回NaN(Not a Number) parseInt() 要看状况，若是以数字开头，就会返回开头的合法数字部分，若是以非数字开头，则返回NaN
- getElementsByTagName和getElementsById区别！
- 返回值不一样：getElementsByTagName是选择标签的类型。返回的是一个一堆的标签，也就是一个集合（不是数组，可是拥有和数组同样的方法）.getElementsById返回的是一个标签
var oLi = oDiv.getElementsByTagName('li'); //oLi实际上是一个集合 for(var i = 0; i < arrUrl.length; i++) { // 若是oLi[i]后的 事件 或者 属性 是肯定的，能够用.来写 oLi[i].index = i; oLi[i].onclick = fn1; 重要！！！！！！！！！！！！！ // 若是经过函数参数来改变oLi[i]的事件 或者 属性，就用oLi[i][evt]来写，例如evt就是参数, //oLi[i]的点击事件还能够以下写： // var evt = onclick; // oLi[i][evt] = fn1; } 复制代码- 写法不一样:getElementsById只能写成document.getElementsById,可是getElementsByTagName前面不止能够写ducument还能够写别的，以下:
（1） var oUl = document.getElementsByTagName('ul')[0]; /*如何用getElementsByTagName来找一个标签，就加个[0]*/ var oli = oUl.document.getElementsByTagName('li'); /*选择的是ul标签下的全部li标签*/ （2） 若是查找的标签只有一个，能够用id，class，也能够用TagName， 可是若是用TagName就要加上一个[0] var oImag = oDiv.getElementsByTagName('img')[0]; 复制代码- 静态方法和动态方法: getElementsByTagName是动态方法：即便前面写了语句获取某个类型标签返回为0，只要后面有添加该类型标签，就能够直接访问，不须要再来一次查找。 可是getElementsById若是前面返回值为0，后面如何添加了，也须要再次重复操做一次查找才能够
aSpan[i].style.left是修改left值，若是遇到要将整个样式进行修改，也就是新写一个样式，将以前经过js对标签style进行修改的那些样式的所有进行一个替换，能够考虑用aSpan[i].style.cssText（记住：是将js操做修改的样式所有替换成一个新的，标签自己经过css设置的样式不变）- 数组：中能够包含不一样的数据类型： 例如：数子、字符串、数组、路径（例如存放图片地址）等 7.函数：函数的参数若是是字符串，就像是一个字符串数组
function fn1(args) {
console.log(args[0]);
console.log(typeof args[0]);//string
}
fn1('qwe');//q
fn1(234);//undefined ----typeof undefined也是undefined
复制代码
排序sort()默认和自定义-2
- sort()默认升序，可是只适用于0～9,由于：
var array1 = [0,1,5,10,15];
  array1.sort();//结果为:0,1,10,15,5---->彻底不符合
复制代码
缘由：是这个函数在进行排序的过程影响其值的根本缘由。(其实，在使用sort()进行排序的时候会调用toString()函数将其值转换成字符串在进行比较，是按ASCII进行比较的)前端
解决方法：自定义sort()java
compare(a,b)返回的值小于0：那么a就小于b，也就是说a排在了b的前面jquery
compare(a,b)返回的值大于0: 那么a就大于b，也就是说a排在了b的后面正则表达式
compare(a,b)返回的值等于0：那么a就等于b，也就是说a和b的位置保持不变json
var Array1 = [0,1,5,10,15];
Array1.sort(function(a,b){return b-a;});
结果是：15，10，5，1，0
复制代码
解释：a,b表示数组中的任意两个元素，若return > 0 b前a后；reutrn < 0 a前b后；a=b时存在浏览器兼容，简化一下：a-b输出从小到大排序，b-a输出从大到小排序。数组
var arr1 = [0,19,5,10,15],//数字
arr2 = ['500', '70', '9'];//数字形式的字符串
arr3 = [500, '70', '9'];//数字和数字形式的字符串混合
function compare(a, b) {
return a-b;
// return (a < b)? -1: (a > b)? 1: 0;
//利用相减的方法，能够对字符串形式的数字和纯数字都有效，而不须要专程纯数字在比较！！！！！
}
console.log(arr1.sort());//[0, 10, 15, 19, 5]
console.log(arr1.sort(compare));//[0, 5, 10, 15, 19]
console.log(arr1.sort(compare)[1]);//5
console.log(arr2.sort());//["500", "70", "9"]
console.log(arr2.sort(compare));//["9", "70", "500"]
console.log(arr3.sort());//[500, "70", "9"]
console.log(arr3.sort(compare));//["9", "70", 500]
//得出，对于数字和数字类型的字符串，用了compare函数都是按照数字的大小排序！！！！！！
复制代码
- 针对（单个属性）的对象数组排序
var obj1 = [
{'name': 'john', 'age': 13},
{'name': 'aohn', 'age': 93},
{'name': 'bohn', 'age': 53}
],
obj2 = [//age的值改成字符形式
{'name': 'john', 'age': '13'},
{'name': 'aohn', 'age': '93'},
{'name': 'bohn', 'age': '53'}
]
//对象数组排列
function objectSort(args) {
var sortOrder = 1;
if (args[0] === '-') {
sortOrder = -1;
args = args.substr(1);
console.log(args);
}
return function (a, b) {
var result = a[args] - b[args];
return result * sortOrder;
}
}
console.log(obj1.sort(objectSort('age')));
console.log(obj2.sort(objectSort('age')));//结果同样
//正序：正序和逆序同时显示就出错，只有当只有一个的时候就没问题？？？
console.log(obj1.sort(objectSort('-age')));
//逆序：正序和逆序同时显示就出错，只有当只有一个的时候就没问题？？？
复制代码
- 针对（多个属性）的对象数组排序
<script>
var obj1 = [
{'name': 'john', 'age': '13'},
{'name': 'aohn', 'age': '93'},
{'name': 'john', 'age': '93'},
{'name': 'bohn', 'age': '53'}
]
function objectSortMuti() {//应对对象数组的多个属性排序
var props = arguments;
return function (obj1, obj2) {
var i = 0,
result = 0,
numberOfProperties = props.length;
while(result === 0 && i < numberOfProperties) {
//调用单个属性排序的函数objectSort()
result = objectSort(props[i])(obj1, obj2);
i++;
}
return result;
}
}
console.log(obj1.sort(objectSortMuti('name','age')));
// {name: "john", age: "13"}
// {name: "bohn", age: "53"}
// {name: "aohn", age: "93"}
// {name: "john", age: "93"}
</script>
复制代码
- 利用sort将数组内的元素弄成随机排列
// 数字数组随机排列：让数组的数字大小随机排列
function randomSort(a, b) {
return Math.random() - 0.5//由于默认random是0～1，减去0.5就是-0.5~0.5,正负为一半几率
}
console.log(arr1.sort(randomSort));// ["blue", "hum", "zelu"]默认就是字符串排序
复制代码
性能方面-3：
例1
for(var i = 0; i < arr.length ; i++)
/*里面的arr.length会每次循环都计算一次长度，这样影响性能！*/
修改成： var num = arr.length;
for(var i = 0; i < num ; i++)
复制代码
例2
for( var i=0; i<6000; i++ ){
document.body.innerHTML += '<input type="button" value="按钮" />';
/*每次循环都须要dom一次，性能很差*/
}
/*解决方法：设置一个字符串str，将每次的操做都做用在str上，等循环结束，一次性所有加在document.body.innerHTML中*/
var str = '';
for( var i=0; i<6000; i++ ){
str += '<input type="button" value="按钮" />';}
}
document.body.innerHTML = str;
复制代码
例3 下面代码的点击事件执行点击都会生成4个div，可是每次点击都会生成4个，如何限制按钮的功能只保证第一次有效
var arr1 = ['qwe','qwe','sdf','qwe'];
for(var i = 0; i < arr1.length;i++){
document.body.innerHTML += '<div>'+arr1[i]+'</div>';
/*若是是 = ，那就是修改，若是是 += ，那就是不断相加*/
}
方法：写一个判断(建立变量onoff，初始为true，点击事件结束后赋值为false，此时经过if判断没法执行 点击事件)
var arr1 = ['qwe','qwe','sdf','qwe'];
oBtn1.onclick = function(){
onoff = true;
if(onoff){
for(var i = 0; i < arr1.length;i++){
document.body.innerHTML += '<div>'+arr1[i]+'</div>'; }
onoff=false;}
}
复制代码
- 注：标签的背景属性是不能够用===来判断的，由于背景后面跟着颜色（多种表达方式）、url等等。通常牵扯到判断，尽可能用变量 如何实现多个div的背景图片的点击事件(点击一次换一张图片，再点击一次，恢复原来的图片)，经过变量判断每一个点击事件(点击一次后)
this的理解和应用-4
this 指的是调用当前方法（函数）的那个对象浏览器
- 判断this的指向
- 直接在中写一个alert(this);这个this是window
- 只要见到单独的fn1()，那么this就是window。这个this表达的是window不是obtn1，由于是windw调用的，不是oBtn1调用的
举例： function fn1(){alert(this);}
// 只要见到单独的fn1()，那么this就是window，可是若是是oBtn1.onclick = fn1;
//那么this指的就是oBtn1（谁调用的函数，this就指向谁！）
eg1: fn1(); this ---> window
eg2: oBtn1.onclick = fn1; this -----> oBtn1
eg3: oBtn1.onclick = function(){
fn1(); } this ---> window
复制代码
题外话！（点击事件的函数赋值为何不能oBtn1.onclick = fn1()，这样写为何是错的❌？）
- this应用：
//this ---> aBtn 的三种写法
//第一种
var aBtn = document.getElementsByTagName('input');
for(var i = 0;i < aBtn.length;i++){
aBtn[i].onclick = function() {
this.style.background = 'red';
}
}
//第二种
var aBtn = document.getElementsByTagName('input');
that = null;
for(var i = 0;i < aBtn.length;i++){
aBtn[i].onclick = function() {
that = this;
fn1();
}
}
function fn1(){
that.style.background = 'red';
}
//第三种
var aBtn = document.getElementsByTagName('input');
for(var i = 0;i < aBtn.length;i++) {
aBtn[i].onclick = fn1;
}
function fn1(){
this.style.background = 'red';
}
复制代码
点击事件的调试错误-5
var aBtn = document.getElementsByTagName('input')；
for(var i = 0;i < aBtn.length;i++){
aBtn[i].onclick = function(){
that = this;
fn1();
}
/*因为下一句代码呆滞程序出错，加载页面没有出错，可是点击时出错，且错误定位在209行，
不须要用alert()调试错误.错误只发生在点击后，也就是说是函数点击事件错误或者是调用点击事件时发生错误,
本例子是下一句发生错误，也就是调用点击事件的时候发生错误，屡次定义同一点击事件！*/
// aBtn[i].onclick = fn1; ❌的源头
}
function fn1(){
that.style.background = '#2a426c';
}
复制代码
js能够为全部标签添加任何自定义属性-6
- 例子1：建立3个li标签，每一个li的背景图都是一张图片，即共三个图片，每一个图片都写一个点击事件(点击一次变一下背景图片，再点一下就回去前一张图)：
document.body.innerHTML = '<ul> <li></li> <li></li> <li></li> </ul>'; // 三个li是存放图片
var aLi = document.getElementsByTagName('li');
for(var i = 0;i < aLi.length; i++){
aLi[i].style.cssText = 'margin:0;list-style:none;background:url(1.jpg);float:left;width:100px;height:100px;margin-right:10px;'
}
var onoff = true; // 方法一：利用变量的true和false来判断，点击第一次的时候onoff置false，
//而后经过if else就能够执行else语句
for(var i = 0; i < aLi.length; i++){
aLi[i].onclick = function(){
if(onoff){
//aLi[i].style.background = 'url(2.jpg)';这样写是错的❌
this.style.background = 'url(2.jpg)';
onoff = false;
} else{
this.style.background = 'url(1.jpg)';
onoff=true;
}} }
复制代码
方法一的问题：因为是多个图片并行添加点击事件，而onoff是全局变量，若是点击第一个li的图片1，图片变成2，而后再点击第二个li的图片1，此时是执行else语句（图片变成1），可是问题在于此时第二个li的图片就是1，因此点击事件在用户看起来是失灵的！每次换一个li点击，都须要点击两次才能够生效，这就是问题
方法二：一样是利用判断，可是，不是利用一个全局变量，而是利用每一个li的自定义属性onOff。每次置为true和false都是对当前li的自定义属性onOff属性操做，这样就不会影响到其余的 li 标签，每一个onOff都是仅针对对应的标签
注：
- 给一些标签数组设置自定义属性的时候，会用到for循环，可是给标签数组设置自定义函数的语句要在for循环的开头写好，例以下面第二句代码
aLi[i].onOff = true;若是写在了按钮事件里面，就会出错！（由于写在里面的话，若是不作一些相似闭包等操做，i的值不是从0-->aLi.length-1，而是老是length-1） - 该方法是经过自定义建立一个仅属于某个标签的属性，可是若是目前的代码中有经过自定义属性来操做的一些别的功能，咱们最好把该属性拿来判断，由于若是有现成能够用的，那就用现成的，若是没有，才去创造一个新的
for(var i = 0; i < aLi.length; i++){
aLi[i].onOff = true; //设置自定义属性onOff
aLi[i].onclick = function(){
if(this.onOff){
this.style.background = 'url(2.jpg)';
this.onOff = false;
}
else{
this.style.background = 'url(1.jpg)';
this.onOff=true; }} }
复制代码
-
自定义属性---设置索引值index（适用于想创建“匹配”，“对应”关系）
-
例子2：仍是三个li，点击每一个li时，点击屡次依次为A、B、C、D，而后循环，三个li各自独立完成功能
实现方法：建立一个数组
var arr = ['A','B','C','D'],而后为每一个li标签设置一个自定义属性num，初始都为0，在不超过数组arr的长度，每次点击都num++以及将li的value值或者innerHTML置为arr[num] -
例子三：三个button，三个p标签，一个包含字符串的数组，点击button，经过索引值将数组对应的值，对应的对p标签做出value的修改（利用自定义属性建立--索引）
数组也能够包含字符串，图片，路径等等
-
数据类型和类型转换-7
- 任何非空的数据类型，均可以添加自定义属性和自定义方法
- 能够经过
typeof判断数据类型，例如：typeof n判断n的数据类型 - js的数据类型：数字，字符串，布尔，函数，对象(obj、[]、{}、null),undefine
- 从html上获取到的值，innerHTML和一些属性，都是字符串！！！！！！！！
- 显式类型转换：
- Number()函数：转化为数字,出现空通常状况下转为0（除json外），若是遇到字母或者符号，obj类型，json，undefine直接就是NaN
var a = '100'; var b = '000100'; var c = '----100'; var d = ''; 以及 var d = null; var e = 'true'; var f = function(){var a = 777};//转换函数 var g = ['4'];//一个值 var h = [1,3,5];//多个值 var i = json = {}; var j ;//undifine //Number(a):字符串直接转换为数字 alert(Number(a)+100);// 100+100 alert(Number(b));//100 alert(Number(c));//NaN 含有符号 alert(Number(d));//0 alert(Number(e));//true --> 1 false --> 0 alert(Number(f));//NaN alert(Number(g));//4 alert(Number(h));//NaN alert(Number(i));//json不管是空仍是有东西，都是 NaN alert(Number(j));//NaN 复制代码- parseInt()函数：原理是从第一个开始日后找，一旦遇到不是数字的(若是开头是+或者—或者空格是能够的)，立马截断，而后把以前读到的数字转换成int型数字。（注：适用于转换一些数字开头的字符串，例如b）
- parseInt(a,10) 表示按照10进制转换，也能够是二进制，十六进制等等。
var a = 'a100'; var b = '100px'; var c = '000100'; var d = '+100'; var e = ' 100'; 以及 e = 00000100 var f = null; alert(parseInt(a,10));//NaN alert(parseInt(b,10));//100 alert(parseInt(c,10));//100 alert(parseInt(d,10));//100 认识'+ - = ' 分别是 100 -100 100 alert(parseInt(e,10));//100 空格 和 0 自动忽略 alert(parseInt(f,10));//NaN 复制代码- parseInt()和parseFloat()的区别
var a = '12.34fff'; var b = '12.3.4'; alert(parseInt(a));//12 alert(parseFloat(a));//12.34 alert(parseFloat(b));//12.3 只认识第一个小数点 复制代码
//两个转换的值相等，就能够判断为整数 if(parseInt(a) == parseFloat(a)){ alert('a是小数'); }else{ alert('a是整数'); } 6. **隐式类型转换** 隐式类型转换： + 200 + '3' 变成字符串 '2003'
- * / % '200' - 3 变成数字 197
++ -- '2'++ 变成数字 3
> < 数字的比较是一个数字和一个字符串，那就是默认数子进行比较alert( 10000000 > '9' ); 、
字符串的比较 alert( '10000000' > '9' );
! 取反 ！'asd' true 把右边的任何数据类型转成布尔值
== alert('2' == 2) true 只是判断值
（=== 是判断 数据类型 和 值 都必须相同）
```
复制代码
- 转换失败的时候返回NaN。有4个特色：
- NaN在bool型中是 false
- NaN必定是出现非法操做
- NaN是一个数字类型（number），可是它不是一个数字
- 除NaN之外，全部的数据类型的值都是等于自己
- isNaN() 判断某些值是否是数字：
- 是数字，就是false不是数子，就是true**
- isNaN()内部是经过number（）函数来判断是否是数字！
var arr = [ '100px', 'abc'-6, [], -98765, 34, -2, 0, '300', ,
function(){alert(1);}, null,document, [], true, '200px'-30,'23.45元',
5, Number('abc'), function(){ alert(3); }, 'xyz'-90 ];
/*
一、找到arr里全部的数字：-98765, 34, -2, 0, 5
*/
for(var i = 0; i < arr.length; i++){
//方法一：把全部数字都找出来
if((typeof arr[i] != 'string')&&(parseFloat(arr[i]) == arr[i])){
console.log(arr[i]);
}
//方法二：判断是数字，而不是NaN
if((typeof arr[i] === 'number')&&(arr[i] === arr[i]))
}
复制代码
- charAt（i）把字符串的字符单独拿出来
str = '123';
str.charAt(2);//3
复制代码
做用域-9
浏览器：
“JS解析器过程”
1） JS 的预解析:“找一些东西” ：仅 var和function
全部的变量，在正式运行代码以前，都提早赋了一个值：未定义
全部的函数，在正式运行代码以前，都是整个函数块
注：遇到重名的：只留一个（变量和函数重名了，就只留下函数），
多函数的话，函数留最后的那个！
2）逐行解读代码：
表达式：= + - * / % ++ -- ! 参数……
表达式能够修改预解析的值！
注：script 全局变量、全局函数
自上而下
<script>var a =1 ;</script>
<script>alert(a)</script> ===> 1
是能够执行的，由于自上而下，上面的东西会存进仓库而后杯使用和读取，
就像一开头会用script引用一些js文件同样
复制代码
var a = 1;
function fn1(){
alert(a); // 1
//(做用域链，里面找不到var和函数，就跳到父级，而后找到a=1，因此返回1（由里到外）)
a = 2; ／／找不到a，而后又是做用域链往外面爬，遇到a = 1；而后a =2是将全局a赋值为2
}
fn1();
alert(a); // 2
预处理结果为：a = undefined fn1 = function fn1{...}
逐行解读：如上注释
注：
1. 函数内部找不到变量的声明，就会跳出来找同名的全局变量，若是也没有才会报错！！！！（由里到外），
；可是外面不能直接用局部变量（函数内）
** 想要获取函数内的值---解决办法：
方法一：
声明一个全局变量，再函数中的局部变量赋值给全局变量
var str = '';
function fn1(){
var a = '大鸡腿~';
str = a;}
方法二：申明另外一个函数，利用参数来传递局部变量
function fn2(){
var a = '9999999克拉钻石23456789';
fn3(a);}
fn2();
function fn3(a){
alert(a);}
复制代码
例子1:
alert(a); // function a (){ alert(4); }
var a = 1;
alert(a); // 1
function a (){ alert(2); }
alert(a); // 1
var a = 3;
alert(a); // 3
function a (){ alert(4); }
alert(a); // 3
alert( typeof a ); //number
a（）;报错，由于此时a是变量不是函数
解析过程：
“JS解析器过程”
1）JS 的预解析:
===> 读取到var a = 1 ==> a = undefined
===> a = function a(){ alert(2); }
===> 读取到var a = 3 ==> a = undefined
===> a = function a (){ alert(4); }
===> 只留函数，函数留最后的那个
因此预解析的结果是：a = function a (){ alert(4); }
注：遇到重名的：只留一个（变量和函数重名了，就只留下函数）
2）逐行解读代码：
因为预解析得出a = function a (){ alert(4); }
按顺序读，第一个alert(a);是返回一个函数，预处理的结果！
复制代码
例子2:
var a = 1;
function fn1(){
alert(a); // undefined
var a = 2;
}
fn1();
alert(a); // 1
解析过程：
“JS解析器过程”
1）JS 的预解析:
===> 读取到var a = 1 ==> a = undefined
===> fn1 = function fn1(){ alert(a); var a = 2;}
===> 只留函数
因此预解析的结果是：fn1 = function fn1(){ alert(a); var a = 2;}
2）逐行解读代码：
解析结果为表达式
函数调用：
1）函数内部预解析（和外部预解析同样！）
alert(a); ==> null
var a = 2; ==> a=undefined
2)逐行解读代码
alert(a) ==> undefined
alert(a); ==> a是全局变量a，不是局部的a，因此是a
复制代码
例子3:
var a = 1;
function fn1(a){
参数就至关于一个局部变量，就至关于var a;，
可是没有赋值，因此内部js解析器是读取到a=undefine;
alert(a); // undefined
a = 2;
}
fn1(); 下面是fn1(a);
alert(a); // 1
例子4:
var a = 1;
function fn1(a){
alert(a); // 1
a = 2;
}
fn1(a);
alert(a); // 1
复制代码
-
定时器-10
- 函数的返回值 return：返回值
- return能够返回的类型有：数字、字符串、布尔、函数、对象（元素[数组]{}\null）、未定义
- 函数名+括号：fn1() ==> return 后面的值；
- 全部函数默认返回值：未定义；
- return 后面任何代码都不执行了；
a、返回对象 alert(fn2()); ----> 显示整个function(b){}（包括注释） function fn2(){ return function (b){ alert(a+b); // 嘿嘿，我是注释~ };} a、返回对象 fn3().onload = function (){ document.body.innerHTML = 123; }; function fn3(){ return window;} b、经过双括号来调用 函数 内的 函数 fn2(20)(10); function fn2(a){ return function (b){ alert(a+b); // 嘿嘿，我是注释~ };} 复制代码- 函数的return小应用
模仿jquery，封装一个 $方法 function $( v ){ if( typeof v === 'function' ){ --> 若是v是函数 window.onload = v; } else if ( typeof v === 'string' ) { --> 若是v是字符串 return document.getElementById(v); } else if ( typeof v === 'object' ) { --> 若是v是一个对象，例如this return v; }} $(function(){ --> 直接用$()方法 $('btn1').onclick = function(){ $( this ).style.background = 'yellow'; };}); 复制代码- argument
fn1( 1,2,3 ); // 实参——实际传递的参数 // function fn1( a,b,c ){ // 形参——形式上，abc这些名表明123 function fn1(){ //arguments => [ 1,2,3 ] —— 实参的集合 alert( arguments ); -->[ 1,2,3 ] alert( arguments.length ); -->3 alert( arguments[arguments.length-1] );像数组同样，经过[]来定位参数} !!! 当函数的参数个数没法肯定的时候：用 arguments 以下： // alert( sum( 1,2,3 ) ); // 6 // alert( sum( 1,2,3,4 ) ); // 10 function sum (){ var n = 0; for( var i=0; i<arguments.length; i++ ){ n += arguments[i]; } return n;} 复制代码- 获取元素样式：要注意三点
-
获取到的是计算机（浏览器）计算后的样式
-
background: url() red …… 复合样式（不要获取）
backgroundColor 单同样式（不要用来作判断）
-
不要获取未设置后的样式：不兼容
-
注：该$方法是上个return小应用里面的自定义方法
- 函数的返回值 return：返回值
alert( getComputedStyle( $('div1') ).width ); IE6 7 8 不兼容
alert( $('div1').currentStyle.width ); 标准浏览器不兼容
例子1：对于以上两个方法的使用，最好用if-else来多方位考虑
if( $('div1').currentStyle ){ //当为标准浏览器时
alert( $('div1').currentStyle.width );
} else { //当为ie 6 7 8时
alert( getComputedStyle( $('div1')).width );
// alert( getComputedStyle( $('div1'),1).width ); FF 4.0 以前要加一个参数，任何数字均可以，此处为1
}
例子2：自定义获取元素的属性方法getStyle方便之后调用
function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}
调用方法：
var div2 = document.getElementById('div1')
getStyle(div2,'left'))
若是要获取右外边距，不要写成 getStyle( div2, 'margin-right' ) );
正确写法：alert( getStyle( div2, 'marginRight' ) );
复制代码
- 定时器
定时器：时间概念
var timer = setInterval( 函数, 毫秒 );
重复执行（发动机）
clearInterval( timer );
清除定时器
var timer = setTimeout( 函数, 毫秒 );
仅执行一次！！一些须要重复操做定时器的操做不要用！！！
clearTimeout( timer );
复制代码
注：for(var i=0; i<3; i++){ document.title = i; } -->瞬间i = 2
javascript的for循环瞬间完成，没有时间根据
例子1：
功能：到i加到10自动中止
i = 0;
var timer = null;
function fn1(){
i++;
document.title = i;
if( i === 10 ){
clearInterval( timer );
}
}
timer = setInterval( fn1, 200 );
例子2：
功能：每秒切换一张图片，循环显示
var aBtn = document.getElementsByTagName('input');
var arrUrl = [ 'img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg' ];
var num = 0;
var timer = null;
var oBody = document.body;
aBtn[0].onclick = function (){
clearInterval( timer );
//必须先进行clearInterval()，才能按钮的正常
// 若是不先清除，由于屡次按第一个按钮就会不断的建立新timer（不会覆盖以前的timer）
timer = setInterval(function(){
oBody.style.background = 'url('+ arrUrl[num] +')';
num++;
num %= arrUrl.length;
}, 1000);
};
aBtn[1].onclick = function (){
clearInterval( timer );
};
例子3:这种只须要操做一次定时器的操做，能够考虑用settimeout（）
功能：2s后显示一张图片，而后3s后再消失
window.onload = function (){
var miaov = document.getElementById('miaov');
setTimeout( function(){
miaov.style.display = 'inline-block'; 2s后显示
setTimeout(function(){ 嵌套两个定时器，显示后3s再消失
miaov.style.display = 'none';
}, 3000);
}, 2000);
};
例子4:相似鼠标移到qq头像，就会弹果，见《ex5定时器.html》
复制代码
- 回调函数
功能：先右移到500，再往下移动到500
Abtn[3].onclick = function(){
move(Odiv,'left',12,500,function(){
move(Odiv,'top',12,500) ------>回调函数
})
};
参数 obj:对象 attr：属性
temp:步长 end:终点位置
回调函数endFn,第5个参数
function move(obj,attr,temp,end,endFn){
//判断步长是正仍是负，也就是向前仍是向后
temp = parseInt(getStyle(obj,attr))<end?temp:-temp;
clearInterval( obj.timer );//要对同一timer进行变化和操做
obj.timer = setInterval(function(){
// 判断temp不能放在定时器内！由于定时器操做div的变化，每次变化temp都会变，
// 此处判断temp正负是经过初始的left，而不是每时每刻的left值
// temp = parseInt(getStyle(obj,'left'))<end?temp:-temp;
var speed = parseInt(getStyle(obj,attr)) + temp ;
if((speed > end) && (temp>0) || (speed < end) &&(temp<0) ){
//判断是往前仍是日后，经过经过传参的temp正负来判断
speed = end;
}
obj.style[attr]= speed + 'px';
if ( speed == end ) { //可加不可加
clearInterval( obj.timer );
// 待left操做结束再执行回调函数，因此放在这个if语句中
endFn && endFn();
// 等同于以下语句
/*若是endFn参数不为空，就调用回调函数
if ( endFn ) {
endFn();
}
*/
}
},30);
}
复制代码
日期对象-11
- 系统时间
var mytime = new Date();//获取系统当前时间
- 而后经过一些方法获取年，月，日，星期，天，时分秒，
var iyear = mytime.getFullYear();//2017
var imonth = mytime.getMonth()+1;//得出来的比真实月份小1，因此要加1
var iday = mytime.getDate();//日
var iWeek = mytime.getDay();
var ihours = mytime.getHours();
// alert(ihours);
var imin = mytime.getMinutes();
var isec = mytime.getSeconds();
var str = '';
// 下面是日期的的一些对照
if( iWeek === 0 ) iWeek = '星期日';
if( iWeek === 1 ) iWeek = '星期一';
if( iWeek === 2 ) iWeek = '星期二';
if( iWeek === 3 ) iWeek = '星期三';
if( iWeek === 4 ) iWeek = '星期四';
if( iWeek === 5 ) iWeek = '星期五';
if( iWeek === 6 ) iWeek = '星期六';
str = iyear+'-'+imonth+'-'+iday+'-'+iWeek+'-'+ihours+':'+onTwo(imin)+':'+onTwo(isec);
alert(str)//2017-7-28-星期五-17:23:45
//设置时间：
oDate.setDate( oDate.getDate() + 5 );//将天数加5天
// toGMTString() 方法可根据格林威治时间 (GMT) 把 Date 对象转换为字符串，并返回结果。
alert( oDate.toGMTString());
注：为了更佳合理，若是是1:8:2的时间应该要变成01:08:02，自定义函数onTwo()
function onTwo ( n ) {
//返回的是一个字符串
return n < 10 ? '0' + n : '' + n;
}
复制代码
实例1:图片时钟(经过修改img标签的src)
<body>
<img src="img/0.JPG" />
<img src="img/0.JPG" />
<img src="img/0.JPG" />
<img src="img/0.JPG" />
<img src="img/0.JPG" />
<img src="img/0.JPG" />
<!--图片为img的0～9的图片，-->
<script>
setInterval(date,1000);
date();
// 图片 时间显示---------------------------------------------
function date(){
var Oimg = document.getElementsByTagName('img');
var mytime = new Date();
var ihours = mytime.getHours();
var imin = mytime.getMinutes();
var isec = mytime.getSeconds();
// 字符串单纯拼接
var str = onTwo(ihours)+onTwo(imin)+onTwo(isec);
for(var i = 0; i < str.length; i++)
{
Oimg[i].src = 'img/'+str.charAt(i)+'.jpg'
// alert(typeof(str.charAt(i)));//string
}
}
</script>
复制代码
- 倒计时
// 如今的时间点（在变）
// 将来的时间点（不变）
var iNow = new Date();
//法一：数字形式获取时间的毫秒形式
var iNew = new Date( 2017, 12, 23, 0,0,0 );//iNewh获取的是毫秒为单位
// 毫秒 -> 秒(向下取整--去掉小数点)
var t = Math.floor((iNew - iNow)/1000);
//死公式-转换成 天 时 分 秒 的单位，记住
// 天：Math.floor(t/86400)
// 时：Math.floor(t%86400/3600)
// 分：Math.floor(t%86400%3600/60)
// 秒：t%60
var str = Math.floor(t/86400)+'天'+Math.floor(t%86400/3600)+'时'+Math.floor(t%86400%3600/60)+'分'+t%60+'秒';
alert( str );
// 法二：数字形式：new Date( 2013,4,1,9,48,12 );
//若是要经过某个控件来获取将来的时间，建议用字符串形式，由于能够经过dom操做引入value值
// 字符串形式：new Date('June 10,2013 12:12:12');
复制代码
实例2:设置一个将来时间，而后显示倒计时
<!--//若是要经过某个控件来获取将来的时间，建议用字符串形式，由于能够经过dom操做引入value值-->
距离：<input type="text" style="width: 200px;"value="November 27,2017 22:3:0"><br>
还剩：<input type="text"style="width: 200px;"><input type="button"value="开始倒计时">
<script>
var Oinput = document.getElementsByTagName('input');
Oinput[2].onclick = retime;//点击事件
function retime(){
var timer = setInterval(function(){
var iNow = new Date();
var iEnd = new Date(Oinput[0].value);
var t = Math.floor((iEnd-iNow) / 1000);
var str = Math.floor(t/86400)+'天'+Math.floor(t%86400/3600)+
'时'+Math.floor(t%86400%3600/60)+'分'+t%60+'秒';
Oinput[1].value = str;
},1000);
</script>
复制代码
测试一个方法的用时
var startime = +new Date();//+new date() == new Date().valueof()返回当前毫秒数
//这里放测试的代码
var endtime = +new Date();
console.log("耗时为"+(endtime - startime)+'ms');
复制代码
//+new Date() 中的+其实至关于.valueOf();
// 如下四句console代码都是能够返回当前时间的毫秒数
console.log(+new Date);//1512049475622
console.log(+new Date());// 1512049475622
var s = new Date();
console.log(s.valueOf());// 1512049475624
console.log(s.getTime());// 1512049475624
//如下是返回的字符串形式
console.log(s.toLocaleString()); // 2017/11/30 下午9:44:35
console.log(s.toLocaleDateString()); // 2017/11/30
console.log(s.toLocaleTimeString()); // 下午9:44:35
复制代码
字符串方法-12
（1）
字符长度
var str = 'aaaaa';
alert(str.length);
str.length = 1;//可是使其长度为1，无效
alert(str);//仍是aaaaa
// 头三个方法前面是接一个字符串
//第三个方法的前面是接String
alert( 'miaov'.charAt(2) );//输出：字符串'miaov'第3个的字符
不能赋值给charAt()
alert( 'miaov'.charCodeAt(2) );//输出字符串'miaov'第3个的字符的ASC编码
// String.fromCharCode()是能够经过编码返回对应的字符
//这就弹出23383和23443的字符（用，来隔开，能够转换多个）
alert( String.fromCharCode(22937, 21619) );//返回22937和 21619编码对应的字符
复制代码
（2）
alert( str.indexOf('m') );//返回str中查找第一个字符m的位置
// 若是第2个值为负数，默认当成0来处理
alert( str.indexOf('m', 5) );//从第五个位置开始，返回str中查找第一个字符m的位置
var str = '字符串';
var str1 = '字符串 ';//空格也算字符长度
alert( str.length );//str--3 str1--5(含两空格)
alert( str.charAt() );//找字符串的某一个，什么都不写和charAt(0)就是默认第一个，
alert(str.charAt(0));
alert( str.charCodeAt() );// 返回字符的计算机储存编码，字的编码是23383
alert( str.charCodeAt(1) ); //参数同charAt同样
// 0~9 48~57 a~z 97~122 A~Z 65~90
alert( String.fromCharCode(23383, 23383) );//字字
复制代码
- substring()和slice()-截取字符串函数
var str = 'this is a bag';
str.substring(2);//从第2个位置开始截取-is is a bag
alert( str.substring(0,2) );//截取0-2位置的字符
// 两个都是正数的状况：能够检测两个数大小，自动变成(0,2)，就和上一行同等
alert( str.substring(2,0) );
alert( str.substring(-3, 2) ); // -3 当成0处理
alert( str.substring(2, -3) );
slice()截取方法和substring()的区别：
alert( str.slice( 2, 0 ) ); // 不交换位置，但也没有结果
alert( str.slice( -4, -2 ) ); // 负数从后面倒着往前数~
复制代码
（4）
字符串比较：第一个字符的编码大小，即charCodeAt()的值
alert( '莫涛' > '杜鹏' );//true
alert( 'abbbbb' > 'b' );//false
alert( '10000' > '2' );//false
大小写转换:
alert( str.toUpperCase() ); // 转成大写
alert( str.toLowerCase() ); // 转成小写
复制代码
- str.split()分割函数--能够把字符串变成函数
var str = 'www.baidu.com';
//存储的是一个数组形式,而后就能够把arr看成数组来处理（可用数组的方法）
alert(str.split('.') ); // [ 'www', 'baidu', 'com' ]
var arr = str.split( '.' );
// alert( arr[1] );
var str1 = 'leo';
//若是不放置分割符，就是整个字符为一个数组的元素
alert( typeof str1.split() ); // [ 'leo' ]
//若是只写个空字符为分割符，那就是每一个字符都分别分割
alert( str1.split('') ); // [ 'l', 'e', 'o' ]
var str2 = '百度网页';
alert( str2.split('度') );//['百','网页']
var str3 = '/www.baidu.com/';
alert( str3.split('/').length );//[ , www.baidu.com, ].第一个和第三个是空格
var str4 = '2013-11-29-23-07';
//-分割，且只保留前3段
alert( str4.split('-', 3) );//['2013','11','29']
复制代码
- indexOf(),lastIndexOf(),search(),concat()
var str = 'abcsssbc';
console.log(str.indexOf('bc',1));//1 第一次出现的字符串的位置
console.log(str.indexOf('bc',2));//6 第二次出现的字符串的位置
// 没找到返回-1
console.log(str.lastIndexOf('bc'))//6 匹配的字符串最后出现的位置
console.log(str.search(/bc/g));//返回于正则表达式查找内容匹配的第一个字符串的位置
console.log(str.concat('aa'));//abcsssbcaa str和字符串aa进行拼接
复制代码
- join()拼接函数 ->str.join()是以()里面的内容来拼接，至关于split的对立面
例子：替换段落中的某些文字
（html）：
<p id="p1"><span>sadgergfsdfss阿斯顿设施的阿斯顿啊 啊实打实的爽肤水的方式水淀粉
水淀粉十大方式地方十大发生的法十大方式发的法十大法的身份 水淀粉是地方十大发生的 </span></p>
<div>替换文字</div>
<input type="text" value=""/>
<input type="text" />
<input type="button" value="替换" />
（js）：
//替换字符串里面的指定字符串!
// !!!!!若是这两句话写在外面，功能错误，为何？
// !!!!由于每次点击都要获取案件的值，获取控件的值是须要经过点击时间来操做的，而不是放在点击事件外
// var tar =aInp[6].value;
// var trans = aInp[7].value;
aInp[8].onclick = function(){
var tar =aInp[6].value;
var trans = aInp[7].value;
if (!tar)return;
op.innerHTML = op.innerHTML.split(tar).join(trans);
};
复制代码
trim()方法 已移除前导空格、尾随空格和行终止符的原始字符串。
var s = ' Hello ';
s.trim();
复制代码
数组方法-13
- 标准的json格式{key:value}
var json = { name : 'leo', age : 32 };
alert( json.name );
var json2 = { name : 'miaov' };
//推荐写成这个格式，key都用''圈住,对于增删改查彻底等同
var json2 = { 'name' : 'miaov' };
//访问的两种方式，js任何的.均可以用[]取代，只是格式要注意
alert( json2.name );//适用于上面两种写法
alert( json2['name'] );//适用于上面两种写法
//替换值-两种方式
json2.name = '妙味';
json2['name'] = 'miaov';
复制代码
- json格式和数组的形式能够互为结合
// { [], [], [] } [ {}, {}, {} ]
var arr = [ { 'name' : 'TM', 'age' : 23 }, { 'name' : 'leo', 'age' : 32 } ];
alert( arr[0].name + '今年有' + arr[1]['age'] );
var arrUrl = [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ];
var arrText = [ '小宠物', '图片二', '图片三', '面具' ];
//变成json格式
var imgData = {
url : [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ],
text : [ '小宠物', '图片二', '图片三', '面具' ]
};
alert( imgData.url[2] );
复制代码
- json格式的遍历
- json只能用的遍历for in 语法,由于json没有长度length
- 数组，两种for循环均可以使用
var arr = [ 'a', 'b', 'c' ]; 第一种 for ( var i in arr ) { alert( arr[i] ); } 第二种 for (var i = 0;i < arr.length;i++){ console.log(arr[i]); } 复制代码
var json4 = { 'name' : 'thomas', 'age' : 3, 'fun' : '前端开发' };
for ( var attr in json4 ) {
alert( attr );//返回的是key--name,age,fun
alert( json4[attr] );//返回的是value--thomas,3,前端开发
}
//json和数组混合的遍历
//var json5 = { [], [], [] }
var json5 = {
'url' : [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ],
'text' : [ '小宠物', '图片二', '图片三', '面具' ]
};
for ( var attr in json5 ) {
for ( var i=0; i < json5[attr].length; i++ ) {
alert( json5[attr][i] );
}
}
// var arr = [ {}, {}, {} ];
var arr = [ { 'name' : 'TM', 'age' : 23 }, { 'name' : 'leo', 'age' : 32 } ];
for(var i = 0; i < arr.length; i++){
for(var attr in arr[i]){
console.log(arr[i][attr]);//TM 23 leo 32
console.log(attr);//name age name age
}
}
复制代码
- 对象
//对象的遍历方法和查询方法
var test = {"events": ["carrot", "exercise", "weekend"], "squirrel": false}
// 另外一种遍历对象数组的方式
for (item in test) {
console.log(item);
}
// 判断某个元素是否在test对象数组里面
if(('events' in test)){
console.log('event在test对象中');
}
复制代码
- 数组的状况(push,unshift,pop,shift,splice,concat,reverse,replace)
数组定义
// var arr = [ 1,2,3 ];
// var arr = new Array(1,2,3);
// alert( arr );
数组能够存放多种数据类型的数据,
var arr = [ 'aaa',2,3 ];
//数组能够查看长度，修改长度
alert( arr.length ); // 3
arr.length = 0;
alert( arr );//null
//数组添加--------
var arr = [ 1,2,3 ];
alert(arr.push(4));//输出添加4后的arr长度
arr.push(4);//从后面添加4
alert(arr);//1,2,3,4,4
arr.unshift(5);//从前面添加
// IE 6 7 不支持 unshift 返回值
alert(arr.unshift(5));//同push
// alert(arr);//5,5,1,2,3,4
//数组删除----------
var arr = [ 1,2,3 ];
// pop()从后删除,shift()从前删除，返回值都是被删除的那个值
var arr = [ 1,2,3 ];
alert( arr.pop() );//3
alert( arr );//1,2
alert( arr.shift() );//1
alert( arr );//2
//小实例----------
var arr = [ 1,2,3 ];
arr.push(arr.shift())
alert(arr);//2，3，1至关于集体向前移一位
arr.unshift(arr.pop());//至关于集体后前移一位，3,1,2
复制代码
**注：**因为unshift比push慢很是多，一个更好的解决办法是：线reverse，在用push，而后再reverse就能够完成相同的效果，并且效率更高
//splice()----------------
splice()能够删除、替换、添加，可是返回值就是删除、替换、添加的那个值（或那几个值）
var arr = [ 1,2,3 ];
// 删除
arr.splice(0,1);//从第0个位置开始，删除一个，即1
alert(arr);//2,3
// 添加
arr.splice(0,0,'aaaaaa');//第0个位置，插入'aaaaaa'
alert(arr);//aaaaaa.2,3
//替换
arr.splice(0,2,5);//第0个位置，用5来替换后面两个值
alert(arr);//5,3
//concat()连接数组-------------
var arr1 = [ 1,2,3 ];
var arr2 = [ 4,5,6 ];
var arr3 = [ 7,8,9 ];
alert( arr1.concat( arr2, arr3 ) );//能够链接多个数组
//倒序方法reverse()
var arr1 = [ 1,2,3,4,5,6 ];
arr1.reverse();
alert( arr1 );//6,5,4,3,2,1
//倒叙字符串
var str = 'abcdef';
//经过split转为数组，而后倒叙，再变为字符串
alert(str.split('').reverse().join(''));
//replace（）替换
// replace(/\//g, '') 的做用是把/替换成''。
var aa= "adsdd/sdsd12/";
bb=aa.replace(/\//g, '') ;//bb=adsddsdsd12
解释：1。/pattern/是正则表达式的界定符，里面的内容(pattern)是要匹配的内容，就是本例中的/\//；
2。\是转义的意思，\/表明的是/字符。
3。JavaScript中应该是字符串的replace() 方法若是直接用str.replace(/\//g, '')只会替换第一个匹配的字符. 而str.replace(/\//g, '')则能够替换掉所有匹配的字符（g为全局标志）。
复制代码
- sort排序
var arr = [ 'c', 'd', 'a', 'e' ];
arr.sort();
alert( arr );//a,c,d,e 默认按照字符排序
var arr2 = [ 4,3,5,5,76,2,0,8 ];
arr2.sort();
// 对纯数字排序时，默认状况是错误的，8<76
alert( arr2 );//0,2,3,4,5,5,76,8
自定义排序规则
arr2.sort(function ( a, b ) {
// 若是a-b<0不动，反之调换位置
return a - b;
// 若是b-b<0不动，反之调换位置
// return b-a;降序
});
alert( arr2 );//0,2,3,4,5,5,8,76
复制代码
例子1：若是对var arrWidth = [ '345px', '23px', '10px', '1000px' ];排序？
arrWidth.sort(function ( a, b ) {
//转化为数字，而后排序
return parseInt(a) - parseInt(b);
});
复制代码
例子2:自定义一个打乱数组次序的函数 var arr = [ 1,2,3,4,5,6,7,8 ];
arr.sort(function ( a, b ) {
//random()函数是0～1的随机数，若是>0.5就调换位置
return Math.random() - 0.5;
});
复制代码
- 随机函数
alert( Math.round(3.4) );//四舍五入--4
Math.random();//0~1的随机数
//0~10
alert( Math.round(Math.random()*10) );
//5~10
alert( Math.round( Math.random()*5 + 5 ) );
//20~100
alert( Math.round( Math.random()*80 + 20 ) );
// x ~ y
var x = 3;
var y = 49;
alert( Math.round( Math.random()*(y-x) + x ) );
// 0~x
alert( Math.round( Math.random()*x) );
// 1~x
alert( Math.ceil( Math.random()*x) );//ceil()向下取整
复制代码
相关文章
- 1. JavaScript基础语法
- 2. JavaScript(基础语法)
- 3. JavaScript 语法基础
- 4. JavaScript语法基础
- 5. javascript基础语法
- 6. javascript的语法基础
- 7. JavaScript基本语法基础
- 8. web前端基础知识09--javascript基础语法（2）
- 9. web前端基础知识08---javascript基础语法（1）
- 10. Javascript Objects - Javascript语法基础 - Javascript核心
- 更多相关文章...
- • Kotlin 基础语法 - Kotlin 教程
- • Scala 基础语法 - Scala教程
- • Kotlin学习（一）基本语法
- • ☆基于Java Instrument的Agent实现
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
