javascript代码实例教程-JavaScript [学习笔记]

发布时间:2019-01-15 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JavaScript [学习笔记]脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

js的初步了解

1.就是用来修改样式的,修改的是行内样式。任何样式都能够修改。

2.css里面怎么写js就怎么写。

3.任何元素都能加事件;事件都要小写

js的三大组成部分:

1.ECMAScript——核心解释器,把js代码转换成计算机可以读懂的语言

2.DOM——Document object model 文档对象模型

增删改查文档节点

3.BOM——browser object model 浏览器对象模型

完全不兼容

特别的问题:

0、 document.ready 和 document.load 有什么区别?

document.ready比onload要快,要先加载

页面加载完成有两种事件,一是 ready ,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是 onload ,指示页面包含图片等文件在内的所有元素都加载完成。

1.调用一个函数总是返回一个值,如果没有指定这个值则返回undefined;

2.对象引用问题(Date,json,arr)

VAR arr = [1,2];

var arr2 = arr;

arr2.push(5);

document.wrITe(arr+'

');//[1,2,5]

document.write(arr2);//[1,2,5]

js的数据类型:

数字类型(number),字符串(string),布尔值(booleans),未定义(undefined),对象(object)

基本数据类型:数字类型(number),字符串(string),布尔值(booleans),未定义(undefined)

复合数据类型:对象(object)

数据类型转化:

1.强制数据类型转化

转整数:parseint();

转小数:parseFloat();

弱转化:number();//严格转化

2.隐式数据类型转化

+:字符串拼接==》12+'5'='125';

-*/%:字符串转数字==》'12'-5=7;

++:字符串转NaN==》var i='12';i++;tyPEOf(i)=='number';

函数:有返回值,返回值,返回值

函数返回值:

1.函数没有返回值,返回undefined

2.函数有return,但是没有值,返回undefined;

3.return后面的代码不执行

还有一个特殊的是 "函数function(){}"

1.函数分定义阶段和调用阶段

2.在哪里定义不重要,重要的是在哪里调用

*3.只要函数名能出现的地方,都可以放函数本身

函数传参:

函数不设置参数接收的话可以调取arguments[i]获取到参数

--------------

字符串:

字符串定义: var i=0;

var str='abc';

*字符串拼接:

var name = 'leo';

var age = 19;

var hobby = '妹子';

var you = '你';

var str = you+'是帅气的'+name+',今年'+age+'岁,性别男,爱好'+hobby;

操作样式的2种方法:

. 方便灵活

[]能使用变量参数,点能做的它都可以做

循环:操作一组元素的时候使用

①条件循环

while(i<5){

执行语句;

i++;

}

当i不满足条件的时候的,循环自动终止;

②固定次数循环

//循环5次

for(var i=0;i<5;i++){

执行语句;

}

for循环小知识:

continue 跳出当次循环

break 阻断后面的循环

函数的作用域

1.全局变量=公用卫生间

2.局部变量=次卧卫生间

局部变量 全局无法使用

局部声明变量不加var的话就变成全局变量(不推荐使用)

window.a=123;

3.闭包=次卧的可以用自己的卫生间,也可以用公用卫生间;

闭包: 变量作用域

预解析(从上至下,从左至右)

1、先把变量声明 全部提前,赋值不动

2、函数也有预解析,直接提前

3、预解析 不会脱离函数作用域,也不会冲出script标签 最多提到自己标签的顶部

代码执行顺序 见一个script解析执行一个,执行完了 在执行下一个

预解析的时候,函数和变量重名的时候,函数覆盖变量

执行代码的时候,有表达式的为大,会覆盖掉同名的函数值,最后读取变量的值;

var a=function(){

alert(1);

};

function a(){

alert(2);

}

a();

预解析的时候a=function a(){alert(2)}

正常执行代码时候a=function(){alert(1)};覆盖了上面的值

所以弹1(表达式为大)

if语句和switch语句

不适用break会导致case穿越,且不会报错

switch(条件){

case 条件可能的取值1:

执行的语句1;

break;

case 条件可能的取值2:

执行的语句2;

break;

default:

默认的情况;

break;

}

if(判断条件1){

判断条件1成立执行 语句1

}else if(判断条件2 ){

判断条件2成立执行 语句2

}else{

以上判断条件都不成立的情况这条语句

}

if语句的简写形式:

1.

var a=500;

if(a==500){

alert('大餐');

}

可以简写成:a==500&&alert('吃大餐');

2.三目运算符

条件成立不?执行语句1:执行语句2;

运算

算数运算符 +-*/%

赋值运算符 = += -= /= *= %=

比较运算符 <><= >= == === != !==(三等号:数据类型和值都完全相等的情况下才是true;)

逻辑运算符 &amp;& || !取反

运算优先级 ()

return

后面的代码不执行了

用函数的返回值代替执行结果

定时器:

先开后关

开启:setInterval(function(){}||fn,300);有返回值

清除:clearInterval(定时器名);

setTimeout(fn,300);

clearTimeout(定时器名);

定时器的问题:

1.循环里面加定时器,定时器里面用i 的问题

用闭包解决

2.定时器函数不能放括号

否则会undefined;因为函数没有返回值,返回一个undefined

3.定时器里面不能用this 当事件发生的时候先把this存下来,而不是在定时器里直接用this (定时器里面的this指向window);

在定时器外面:var _this=this;

例子:

延迟选项卡

2.第一次起作用的时候要等一个定时器的时间;解决:封装成函数,先调用一次

日期对象:

特殊用法:

var oData=new Data(oData.getTime()时间戳);

时间戳是毫秒数

里面放置时间戳也可以获得,时间戳转化得来的时间

获取日期对象:

var oDate=new Date();

var year=oDate.getFullYear();

var month=oDate.getMonth()+1;小1

var day=oDate.getDay();//获取星期(0,1,2,3,4,5,6)

var date=oDate.getDate();

var hour=oDate.getHours();

var mintues=oDate.getMinutes();

var seconds=oDate.getSeconds();

oDate.getTime();获取时间戳

设置日期对象:

var oDate= new Date();

oDate.setFullYear(2017,0,1);设置:年,月,日

oDate.setHours(0,0,0,0);设置:时,分,秒,毫秒

oDate.getTime();

经典案例:获取到本月最后一天是星期几?

var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];

var oDate=new Date();

oDate.setMonth(oDate.getMonth()+1);//设置日期到下个月

oDate.setDate(0);//获取到上个月的最后一天

var week=oDate.getDay();

alert(arr[week]);

数组常用方法:增,删,改,查 9

var arr=[12,5,8];

arr.push(0);向后添加==》arr=[12,5,8,0];

arr.unshift(0);向前添加==》arr=[0,12,5,8];

arr.pop();数组后删除一位==》arr=[12,5];

arr.shift();数组前删除一位==》arr=[5,8];

arr.join('-');数组连接成字符串==》'12-5-8';

arr.splice('开始位置','几位','元素');具备‘增删改’

for(){}时候需要i--;

增加:arr.splice(1,0,3);==》arr=[12,3,5,8];

删除:arr.splice(1,1);==》arr=[5,8];

修改:arr.splice(1,1,3);==》arr=[12,3,8];

arr.reverse;数组反转==》arr=[8,5,12];

arr.concat();数组连接

arr.sort(function(n1,n2){

return n1-n2; 由小到大的排序

return n2-n1; 由大到小的排序

n1n2可以是对象的某个具体属性值比较

})

字符串常用方法:7

var str='welcome to zhinengshe'

str.charAt(0);==>w //查找位置范围相应字符

str.indexOf('e');==>1【UA检测】

str.lastIndexOf('e');==>20【判断文件名】

找到相对应的元素返回元素位置

找不到元素的位置返回-1

str.split(' ');分割成数组==》['welcome','to','zhinengshe'];

str.substring('开始位置','结束位置'不包含结束位置);截字符串

str.substring(0,1);==>' w'

str.substring(0,str.length-1);把最后一个字母去掉

str.toUpperCase();转成大写;

str.toLowerCase();转成小写;

str.charCodeAt(位置);返回指定位置的字符编码

String.FromCharCode(字符编码);返回对应字符编码的字符

str.replace('要更换的','更换的');

注意:字符串的比较 其实就是编码大小的比较

Math的常用方法:9

Math.round();四舍五入

Math.random();获取0-1之间的随机数字,不包含1本身

Math.floor();向下取整

Math.ceil();向上取整;

Math.max();获取最大数

Math.min();获取最小数字;

Math.abs();获取绝对值;

Math.sqrt();幂

Math.pow();开方

闭包(匿名函数自执行、封闭空间)变量作用域

1.命名冲突

商量

2.i的问题

for(var i=0;i (function(index){

直接用index代替i

})(i);

}

a)循环里面用事件,事件里面用i,i变成长度而不是对应的i的值 0 1 2

b)循环里面加定时器,定时器里面用i

左边小括号里面用的是匿名函数的定义,右边的小括号是函数的调用

(function(){ })();

json={};

JSON.stringify(json) -> 普通json变成标准json版字符串

JSON.parse(str) -> 把字符串变成json

兼容:IE8+ chrome FF

后台返回的是'{}'字符串的json

eval:把字符串变成可以执行JS代码,把结果放过去

eval解析json必须加括号;不然会报错

var str1='({"name":"shiyou","age":20})';

alert(eval(str1).name); ==>shiyou

////////

var str2='{"name":"shiyou","age":20}';

//直接eval一个'json'会报错(Uncaught SyntaxError: Unexpected token :)

//必须eval 的时候加上小括号

alert(eval('('+str2+')').age);

var json={a:5,b:5,c:5};

delete json.a;可以移除a和它的值

它值兼容ie9以上的浏览器

先创建 ,后添加

var opt = new Option('text','value'); //创建选项

oS.options.add(opt) //添加

oS.options.remove(下表||opt); //删除

selectedIndex 获取选中的那个项 下标

oS.options[oS.options.selectedIndex].value/text

注意1:一定要加value

注意2: 事件oS.onchange=function(){};

对象引用:

1、基本数字类型:number,string,undefined,boolean

赋值就是复制;

var a = 12;

var b =a ;

b=b+2;

a的值还是不变

2、 对象引用

1) 赋值不会复制,对象比较不相等,看起来一样也不行

var oDate1=new Date();

var oDate2=new Date();

oDate1 !==oDate2

2)一个东西改变,另外一个东西也跟着改变

案例1:

var a = [12,5,8]; //对象

var b =a;

b.pop();

alert(a);

给b赋值了a对象,a,b同时指向了同一个对象

当一个改变了,对象就会发生改变;

案例2:

var oDate = new Date();

var oDate2 = oDate;

oDate2.setFullYear(2020);

alert(oDate)

'use strict'严格模式

解决的问题

1.变量必须加var

2.不允许 if 里面定义函数,必须顶层定义

3.严格模式干掉了with

严格模式特性

1.必须写use strict 不能是其它单词 否则不起作用

2.use strict 有作用范围 只针对当前函数起作用

3.只针对 当前自己 script标签起作用

4.只针对当前js文件起作用

各种表达式:

1.逗号表达式:优先级特别低用()括起,读取后面的

var a = (12,5);

alert(a);//5

————————

同样读取最后一个,走else

if(undefined,true,false,32,0){

alert('ok');

}else{

alert('不ok');

}

2.||:比较懒,碰到真的就返回

var a=0||5;

alert(a);结果5

3.&&:比较勤快,得查完,有一个假就都是假的

DOM 增,删,改,查

oUl.children 获取UL的子节点 有length的属性

oUl.children[0] 获取UL第1个子节点 使用比较多

oUl.children[oUl.children.length-1] 获取Ul的最后一个子节点 使用比较多

oUl.parentNode 获取Ul的父节点 body,HTML,document

oUl.FirstElementChild||oUl.firstChild 首个节点(first) "firstChild 低版本IE6 -8

firstElementChild 高级浏览器"

oUl.lastElementChild||oUl.lastChild 最后一个字节点 同上

oLi.PReviousElementSibling||oLi.previousSibling 获取上一个兄弟节点 相对自己

oLi.nextElementSibling||oLi.nextSibling 获取下一个兄弟节点 相对自己

var oLi=document.createElement('li'); 创建一个li的节点 创建赋值添加3个步骤

oLi.innerHTML='' 给它赋值

oUl.appendChild(oLi); 插入到oUl里面去(向后插入)常用

oUl.insertBefore(要插的元素,插到哪里) 插入到某个元素前面去

oUl.removeChild(要移除的元素); 删除掉某个元素

节点.cloneNode() 克隆某个元素 "cloneNode(true)深度克隆

移除id:节点.removeAttribute('id');"

window.onscroll 滚动事件 当鼠标滚动的时候发生

window.onresize 窗口事件 当窗口缩小/放大的时候

滚动距离 配合滚动事件

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop

获取可视区

document.documentElement.clientHeight 可视区的高度

document.documentElement.clientWidth 可视区的宽度

offsetHeight(占位物体)(live事件) 物体盒模型高度 border+padding+height

offsetWidth(占位物体)(live事件) 物体盒模型宽度 border+padding+width

offsetparent 定位父级 如果没有定位父级则是body

parentNode 结构父级

offsetTop(占位物体) 物体盒模型最外边距离定位父级的top值 如果没有定位父级则是相对body

offsetLeft(占位物体) 物体盒模型最外边距离定位父级的left值 如果没有定位父级则是相对body

getAttribute('属性') 获取行间自定义属性

setattribute('属性','属性值'); 设置行间属性值 对应使用

removeAttribute('属性') 移除属性

form 表单

关于表单

提交数据

action 提交的地址 数据提交到哪里

method 提交方式

get 默认表单的提交方式 ?user=leo&age=19

get的方式数据在url里面 明文串 不安全

比较小 32k

post 数据量 1G 不在url传输 相对安全

name 名字 必须加name

post与get 区别

get 数据量小 方便 利于分享 不安全

post 数据量大 没法分享 相对安全

更安全的方式

https 相对安全

cache 缓存

冒泡机制

特性

1.冒泡不管 父级有没有事件 都会冒泡

2.冒泡跟css无关 跟元素位置无关 ——》parentNode

子级元素 一层一层将事件 往父级和父级的父级和父级的父级的父级和...一直到头

取消冒泡,谁触发的冒泡,在哪里取消

ev.cancelBubble = true;

cancel:取消

Bubble:冒泡

什么时候出问题什么时候用,没事别瞎瞎取消

一般情况下,我们碰不到冒泡的情况, 等碰到了在想着去取消;

this的问题:

this有问题的情况

1.attachEvent 事件绑定的时候,(addEventListener没有this问题 onclick方式也没问题)

2.定时器中用this(this指向window)

3.行间事件中用函数 函数里面用this

4. 函数嵌套调用this

ev||event事件:

var oEvent=ev||event; 事件兼容的写法ev 是FF用,event是chrome和IE用

页面坐标

oEvent.clientX 鼠标在可视区中距离body左边的距离(当有滚动距离的时候需要加上)

oEvent.clientY 鼠标在可视区中距离body上边的距离(当有滚动距离的时候需要加上)

ev.pageX不兼容ie678

ev.pageX=ev.clientX+scrollLeft;

ev.pageY=ev.clientY+scrollTop;

oEvent.cancelBubble=true; 取消事件冒泡为真

oEvent.keyCode 键值(通过判断键值,可以有些操作)

onkeydown 当键盘按下的时候(例子:键盘控制p行走)

onkeyup 当键盘抬起的时候

down和up的问题 输入框输入的内容是onkeyup的时候进去的

oEvent.ctrlKey&shiftKey&altKey 布尔值,判断ctrl时候有

document.oncontextmenu 右键事件(如果阻止右键事件,可以自定义右键事件)

return false; 阻止浏览器的默认事件的发生

oEvent.preventDefault(); addEventListener的情况下阻止默认事件发生

事件监听:能让一个obj上面能绑定多个事件

obj.addEventListener('事件','函数',false);

①标准浏览器中使用

②事件前面不需要加on

③函数可以放有名字的函数,也可以放匿名的函数

④false 是冒泡阶段绑定事件,默认也是冒泡绑定

⑤函数里面不能用return false 来阻止浏览器默认事件的发生,改为

oEvent.preventDefault();

obj.attachEvent('事件','函数')

①低版本浏览器中使用

②事件前面要加on

③IE浏览器只支持冒泡,所以没有false和true的说法

④函数里面用this会失效

obj.removeEventListener('事件','函数',false); 标准浏览器的删除事件的写法

obj.detachEvent('事件','函数'); IE6-8移除绑定事件的写法

addEvent(obj,sEv,fn); 封装好的事件绑定函数

removeEvent(obj,sEv,fn); 移除绑定事件的封装函数

oEvent.detail "火狐下存储滚轮方向信息,当它为正值,滚轮是向下的,为负值的时候滚轮 是向上的"

oEvent.wheelDelta(得了她) "IE&chrome下存储滚轮方向信息的,当它为正值的时候,滚轮向上,为负值的时候滚轮向下"

事件委托:给父级加事件 ,然后寻找事件发生

oEvent.srcElement (chrome、IE ) 谁触发了这个事件的元素(触发事件的源元素)

oEvent.target (Firefox) 同上,触发事件的源元素

兼容写法: var oSrc=oEvent.srcElement||oEvent.target;

oSrc这个变量就是触发事件的源元素的兼容版

判断标签名

oSrc.tagName 触发事件的事件源的标签名 全部大写

oSrc.tagName == 'INPUT'&&oSrc.value

onmouseover和onmoverout的问题

oEvent.fromElement(chrome、IE) 从哪里移动进来的元素

oEvent.relatedTarget(FF) 火狐的写法还是一样的

oEvent.toElement(chrome、IE) 从哪里移出去的元素

oEvent.relatedTarget(FF) 火狐的写法还是一样的

兼容写法:

var oFrom=oEvent.fromElement||oEvent.relatedTarget;

var oTo=oEvent.toElement||oEvent.relatedTarget;

判断 oDiv 是否包含了 oForm

if(oDiv.contains(oForm)){return}

cookie 保存数据

cookie 设置 查看cookie F12->resource ->cookies

特点:

1、不能跨域

同一个域名下所有文件共享cookie

不同域名之间——不共享

2、容量下4k

3、不安全(隐私数据别存cookie)

4、有有效期

默认是 session 浏览器 退出 会话结束

也可以为cookie设置日期,不过某些浏览器还是会选择性删除的

*数据超出有效期,就会删除

cookie的设置

function setCookie(name,value,data){

var oDate =new Date();

oDate.setDate(oDate.getDate()+data);

document.cookie=name+'='+value+';expires='+oDate;

}

cookie的获取

function getCookie(name){

var arr=document.cookie.split('; ');

for(var i=0;i if(name==arr[i].split('=')[0]){

return arr[i].split('=')[1];

}

}

return '';//为了和上面return的数据类型的一致性

}

cookie的移除:设置日期过期就自动清除

function removeCookie(name){

setCookie(name,0,-1);

}

常用事件:

onclick

点击事件

onmouseover

onmouseout

当鼠标移入事件

当鼠标移除事件

onmouseenter

onmouseleave

当鼠标移入事件(已做了冒泡阻止)

当鼠标移除事件(已做了冒泡阻止)浏览器有时会发神经的不支持

onmousedown

onmouSEMove

onmouseup

鼠标按下事件

鼠标按下并移动时触发

当鼠标按下并抬起的时候触发

onfocus

onblur

聚焦的时候触发obj.focus();这个方法可以触发onfocus事件里的逻辑发生失去焦掉的时候触发

onload

onerror

当加载完成后发生(图片)

加载失败时候触发(图片)

onkeydown

onkeyup

键盘按下的时候触发

键盘抬起的时候触发

oncontextmenu

右键事件(环境上下文事件)

onchange

select的选择事件

onresize

窗口大小更改事件

onscroll

滚动条滚动事件

onsubmit

表单提交事件

oninput

onpropertychange

在input的值发生改变的时候触发,IE9不兼容

同oninput的事件意思几乎相同,只是在IE下使用,不兼容IE9故而放弃

DOMContentLoaded

onreadystatechange

还要判断document.readyState==complete

FF chrome 高级浏览(统称:ready事件)只能事件绑定addEventListener

IE6-iE8(统称:ready事件)只能事件绑定attachEvent()

onmousewheel

DOMMouseScroll

chrome IE 滚动事件

(Firefox)当滚轮滚动的事件

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-JavaScript [学习笔记]全部内容,希望文章能够帮你解决javascript代码实例教程-JavaScript [学习笔记]所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。