【前端学习笔记】JS学习基础

入门——————————————————————————————————————-
希望把某个元素移除你的视线：

1、display:none; 显示为无
2、visibility:hidden; 隐藏
3、width \ height
4、透明度
5、left \ top
6、拿一个白色DIV盖住它
7、margin负值

JS中如何获取元素：
1、通过ID名称来获取元素：
document get element by id ‘link’
docuemnt.getElementById(‘link’);
2
……

事件：鼠标事件、键盘事件、系统事件、表单事件、自定义事件……

onclick
onmouseover
onmouseout
onmousedown
onmouseup
onmousemove 就像是鼠标抚摸一样的事件
……

onload 加载完以后执行……
window.onload = 事情
img.onload
body.onload
……

如何添加事件：
元素.onmouseover

函数：可以理解为-命令，做一些事~~
function abc(){// 肯定不会主动执行的！
……
}
1、直接调用：abc();
2、事件调用：元素.事件 = 函数名 oDiv.onclick = abc;

function (){} 匿名函数
元素.事件 = function (){};

测试：
alert(1); 带一个确定按钮的警告框
alert(‘ok’); ‘ok’ 字符串
alert(“ok”);

变量：
var li = document.getElementById(‘lis’);
var num = 123;
var name = ‘leo’;

a.removeAttribute(‘style’);//去除当前页面的附加样式，恢复初始样式

HTML 的属性操作：读、写———————————————————————

读操作：获取、找到
元素.属性名

写操作：”添加？”、替换、修改
元素.属性名 = 新的值

innerTHML用法—————————

oP.innerHTML //读取p里面所有的html代码
oP.innerHTML = 123; //替换p里面所有的html代码

JS 不允许出现”-“—————————
padding-top => paddingTop
margin-left => marginLeft

判断条件—————————
// img/1.jpg
file:///C:/Users/Administrator/Desktop/11-4-JS1/img/1.jpg
if( oImg.src == ‘img/1.jpg’ ){
不能做为判断条件：
1、所有的相对路径地址
img src
href
2、颜色值：color: red #f00 rgb() rgba()

修改float值————————————————-

oDiv.style.float = ‘right‘; //错误写法

//正确用法
oDiv.style.styleFloat = ‘right‘; // IE非标准
oDiv.style.cssFloat = ‘left‘; //标准
//IE非标准（styleFloat）
//标准（cssFloat）

//兼容写法
if(navigator.userAgent.indexOf(‘MSIE‘)==-1 )
{
    oDiv.style.cssFloat = ‘right‘;//标准
}else{
    oDiv.style.styleFloat = ‘right‘;//IE
}

设置开关——————————-
var onOff=true;
一般可以用来控制按钮的循环点击

cssText—————————
oDiv.style.cssText = ’ width:200px; height:200px; ‘;//会覆盖该字符串已经出现的属性

this——————————
this: 这个
this： 指的是调用 当前 方法（函数）的那个对象

function fn1(){
this
}
// fn1(); this => window
// oDiv.onclick = fn1; this => oDiv




/*
行间调用方法，this的区别:
1.
oDiv.onclick = function (){
    fn1(); 
};
fn1() 里的this => window
2.
<div onclick="fn1();"></div>   

fn1() 里的 this 指的是 window
*/



// window 是 JS “老大”
// window.alert( this );

function fn1(){
alert( this );// window
}


// fn1();
// window.fn1();

总结：this指向包含它的那个区域的老大（谁调用找谁）

HTML 标签属性、自定义属性—————————

var aBtn = document.getElementsByTagName(‘input‘);
aBtn[0].abc = 123; // 自定义属性

aBtn[0].abc = 456;

JS 可以为任何HTML元素添加任意个 自定义属性

JS数据类型—————————————————————
ECMAScript：标准、核心
HTML 标签类型：block、inline、inline-block、table……
JS中的数据类型：数字、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义

typeof() 判断数据类型
s.charAt(3) 返回字符串某位置的字符

var json = { name:’miaov’, age:5 }
json的定义

Number()方法—————————————————————————————

var a = ‘100‘;
// alert( a+100 ); // ‘100100‘
// alert( Number(a) ); // 100
var a1 = ‘    ‘;
// alert( Number(a1) ); // 0
var a2 = true;
// alert( Number(a2) ); // true-1  false-0
var a3 = [ 1 ];
// alert( Number(a3) ); // 1 
var a4 = null;
// alert( Number(a4) ); // 0
////////////////////////////////////////
var json = {};
// alert( Number(json) ); // NaN


var u;
// alert( Number(u) ); // NaN


var a3 = function (){ alert(1); };
// alert( Number(a3) ); // NaN

类型转换—————————————————————————————

显式类型转换（强制类型转换）：

Number()
parseInt()
parseFloat()

隐式类型转换：

+:  200 + ‘3‘//变成字符串
- * / % :  ‘200‘ - 3     //变成数字
++ -- //变成数字

> < //数字的比较 、字符串的比较
!   //取反,把右边的数据类型转成布尔值
==  //判断后转化为布尔值


 alert( Number(‘……‘) );// NaN
 alert( ‘……‘-9 ); //NaN


alert( ‘2‘ == 2 ); //true

alert( ‘10000000‘ > ‘9‘ ); //比较从第一位开始不相等的那一位元素 false

// 数字的比较与字符串的比较
// ‘1000000‘   ‘9‘
alert( ‘2‘ === 2 ); //类型和数值都要相等 false

isNaN()方法———————————————————————————–

JS中的数据类型：数字（NaN）、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义

var a = Number(‘abc‘);
alert( a ); // NaN

NaN：not a number 不是个 数字 的 数字类型

 alert( typeof (a) ); // number

一旦写程序中出现：NaN 肯定进行了非法的运算操作,例如

alert( ‘200px‘ -  100 );//NaN

NaN在if判断里 是 false

var a = NaN; 
if( a ){
// alert( ‘真‘ );
}else{
// alert( ‘假‘ );
}

var abc = [];
 alert( abc === abc );// true

NaN 与自己都不相等！！

var a = NaN;
alert( a === a ); // false

window.isNaN();
返回布尔值
true：不是数字
false：是数字

 alert( isNaN( ‘‘ ) );  //false

 alert( isNaN( [] ) );  //false
 alert( isNaN( [1] ) );  //false
 alert( isNaN( [1,2] ) );  //true
 alert( isNaN( [‘1‘] ) );  //false
 alert( isNaN( [‘1‘,‘2‘] ) );  //true

 alert( isNaN( {} ) );  //true

 alert( isNaN( ‘1.‘ ) );  //false
 alert( isNaN( ‘1..‘ ) );  //true
 alert( isNaN( ‘.1‘ ) );  //false
 alert( isNaN( ‘..1‘ ) );  //true


 alert( isNaN( 1. ) );  //false
 alert( isNaN( 1.. ) );  //报错
 alert( isNaN( .1 ) );  //false
 alert( isNaN( ..1 ) );  //报错

 alert( isNaN(function(){}));  //true

函数传递参数———————————————————————————-

参数=JS的数据类型：
数字、字符串、布尔、函数、对象、未定义

重用代码————————————————————————————–
1、尽量保证 HTML 代码结构一致，可以通过父级选取子元素
2、把核心主程序实现，用函数包起来
3、把每组里不同的值找出来，通过传参实现

作用域定义————————————————————————————
域：空间、范围、区域……
作用：读、写

script ：
全局变量、全局函数
自上而下

函数
由里到外

浏览器解析步骤———————————————————————————–
“JS解析器”两大步骤
1）预解析“找一些东西” ：var、function、参数
a = …
所有的变量，在正式运行代码之前，都提前赋了一个值：未定义

fn1 = function fn1(){ alert(2); }
所有的函数，在正式运行代码之前，都是整个函数块

JS 的预解析
遇到重名的：只留一个
变量和函数重名了，就只留下函数

2）逐行解读代码：
表达式：= + - * / % ++ – ! 参数……

表达式可以修改预解析的值！

解析实例——————————————————————————

var a = 1;
function fn1(){
alert(a); // undefined
var a = 2;
}
fn1();
alert(a); // 1

var a = 1;
function fn1(){
alert(a); // 1
a = 2;
}
fn1();
alert(a); // 2

var a = 1;
function fn1(a){
alert(a); // undefined
a = 2;
}
fn1();
alert(a); // 1

var a = 1;
function fn1(a){
alert(a); // 1
a = 2;
}
fn1(a);
alert(a); // 1

想要获取函数内的值——————————————————————
1)全局变量
var str = ”;
function fn1(){
var a = ‘大鸡腿~’;
str = a;
}
fn1();
alert( str );

2)函数
function fn2(){
var a = ‘9999999克拉钻石23456789’;
fn3(a);
}
fn2();

function fn3(a){
alert(a);
}

switch控制流程———————————————————————————-
switch( str ){
case ‘js’ :
alert( ‘js’ ); break;
case ‘html’ :
alert( ‘html’ ); break;
default :
alert( str );
}

真假的问题—————————————————————————-
数据类型-数字（NaN）、字符串、布尔、函数、对象（elem、[]、{}、null）、未定义
真：非0的数字、非空字符串、true、函数、能找到的元素、[]、{}
假：0、NaN、空字符串”、false、不能找到的元素、null、未定义

return：返回值————————————————————————
1) 函数名+括号：fn1() ==> return 后面的值；
2) 所有函数默认返回值：未定义；
3) return 后面任何代码都不执行了；

arguments => [ 1,2,3 ] —— 实参的集合———————————————-
alert( arguments );
alert( arguments.length );
alert( arguments[arguments.length-1] );

当函数的参数个数无法确定的时候：用 arguments
// alert( sum( 1,2,3 ) ); // 6
// alert( sum( 1,2,3,4 ) ); // 10

获取样式—————————————————————————————

getComputedStyle( oDiv ).width // IE6 7 8 不兼容

oDiv.currentStyle.width // 标准浏览器不兼容

兼容写法
function getStyle(obj,attr){
        return 
        obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
    }

获取到的是计算机（浏览器）计算后的样式

background: url() red …… 复合样式（不要获取）
backgroundColor 单一样式（不要用来做判断）

不要有空格

不要获取未设置后的样式：不兼容

定时器：时间概念——————————————————————————–

var timer = setInterval( 函数, 毫秒 );//重复执行（发动机）
clearInterval( timer );//清除定时器

var timer = setTimeout( 函数, 毫秒 );//执行一次（炸弹）
clearTimeout( timer );

系统时间对象————————————————————————————

var myTime=new Date(); // 当前系统的时间对象


// myTime typeof   object


var iYear = myTime.getFullYear();
var iMonth = myTime.getMonth()+1;  //月份要+1
var iDate = myTime.getDate();
var iWeek = myTime.getDay();
var iHours = myTime.getHours();
var iMin = myTime.getMinutes();
var iSec = myTime.getSeconds();

倒计时———————————————————————————————————–

计算时间戳两种方法
数字形式：new Date( 2013,7,10,12,12,12 );//注意月份的位置上比实际值大1
字符串形式：new Date(‘June 10,2013 12:12:12’);

t=时间长度
换算时间方法：
天：Math.floor(t/86400)
时：Math.floor(t%86400/3600)
分：Math.floor(t%86400%3600/60)
秒：t%60

字符串常用方法总结————————————————————————

var str = ‘前端基础-WWW.reven.com‘;


str.charAt(1); // ‘端‘
str.charCodeAt(1); // 31471
String.fromCharCode(21069,31471); // ‘前端‘


str.indexOf(‘e‘,11); // 12
str.lastIndexOf(‘o‘); // 16


‘1000‘ < ‘2‘ // true
‘1000‘ > 2 // true


str.substring(0, 4); // ‘前端基础‘ 参数先全变成正数，小的放前面，大的放后面， 取[|a|,|b|)的字符返回 a=b返回空
str.slice(-3); // ‘com‘ 取[a,b)的字符返回 a=b返回空


str.toUpperCase(); // ‘前端基础-WWW.REVEN.COM‘
str.toLowerCase(); // ‘前端基础-www.reven.com‘


str.split(‘.‘, 3); // [ ‘前端基础-WWW‘,‘reven‘,‘com‘ ]


var arr = [ ‘www‘, ‘reven‘, ‘com‘ ];
arr.join(‘.‘); // ‘www.reven.com‘

-数组方法————————————————————————————

var arr=[1,2,3,4,5];//创建数组的一般方法
var arr1=new Array(6);//创建长度为6的数组


arr.push(6);//将参数插入arr数组的尾部，返回数组长度


arr.unshift(0);//将参数插入arr数组的头部，返回数组长度


arr.pop(6);//将最后一位元素弹出数组，返回弹出的元素


arr.shift(0);//将第一位元素弹出数组，返回弹出的元素


arr.push(arr.shift());//去头放尾


arr.unshift(arr.pop());//去尾放头


arr.slice(0,4) //取下标范围[a,b)的元素返回 a=b返回空


arr.splice(0,2,‘b‘);//从0位开始去掉2个元素,第三个参数是替换被去掉的元素,返回的是替换的元素和去掉的元素个数


//利用splice()方法进行数组去重
function unique(arr){
    for(var i=0;i<arr.length;i++)
    {
        for(var j=i+1;j<arr.length;j++)
        {
            if(arr[i]===arr[j])
            {
                arr.splice(j,1);
                j--;
            }
        }
    }
return arr;
}

arr2.sort(function(a,b){return a-b});//sort()是对数组做出字符串顺序排列，加入function(a,b){return a-b}是把数组元素1、2顺序当做a、b,a-b<0就小大顺序，反之大小顺序


arr3.sort(function(a,b){
return parseInt(a)-parseInt(b);
});//当有其他字符时的排序方法


arr2.sort(function(a,b){
return Math.random()-0.5;
});//将数组随机排序


arr.concat(arr1,arr2);//数组拼接

arr.reverse();//顺序翻转


str.split(‘‘).reverse().join();//字符串的顺序翻转

————随机数公式————-

//在0~10内随机
alert(Math.round(Math.random()*10));//Math.round()是四舍五入函数
//在5~10内随机
alert(Math.round(Math.round(Math.random()*5+5)));
//从x~y之间随机
var x=20;
var y=40;
var outPut=Math.round(Math.round(Math.random()*(y-x)+x));

//随机数组公式
function createRandomArr(begin,num)
//begin是数组最小数，num是数组长度
{
    var arr = [];
    for(var i = 0; i < num ;i++)
    {
        arr[i] = begin+i;
    }

    var resultArr = [];
    for(var i = 0; i < num ;i++)
    {
        var arrLen = arr.length;         resultArr.push(arr.splice(Math.floor(Math.random()*arrLen),1)[0]);
    }
    return resultArr;
}