当前位置:首页 » JavaScript技术

【前端学习笔记】JS基础

2015-08-04 13:10 本站整理 浏览(51)

【前端学习笔记】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
IE(styleFloat)

非IE(cssFloat)

设置开关-------------------------------
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

/*
oDiv.onclick = function (){

fn1();

fn1() 里的this => window
};

<div onclick=" this fn1(); "></div> fn1(); 里的 this 指的是 window
*/

// alert( this ); // object 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 是 false
if( a ){

// alert( '真' );
}else{

// alert( '假' );
}

var abc = [];

// alert( abc === abc ); true

// NaN 与自己都不相等!!
alert( a === a ); // false

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( $('div1') ).width // IE6 7 8 不兼容

$('div1').currentStyle.width // 标准浏览器不兼容
/*

if( $('div1').currentStyle ){
alert( $('div1').currentStyle.width );

} else {
alert( getComputedStyle( $('div1'), 250 ).width );

// FF 4.0 之前
}

获取到的是计算机(浏览器)计算后的样式

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,4,1,9,48,12 );

字符串形式: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));

版权声明:本文为博主原创文章,未经博主允许不得转载。