一、JS原生态

1．JavaScript 产生的背景和作用

（1）作用: web页面进行相互交互的作用 就是美化页面

（2）JavaScript开始产生的就是因为为了解决表单验证问题

2．JavaScript定义

 JavaScript 缩写是JS 正式名JavaScript

 标准:ECMAScript标准来进行执行的  这个标准是由微软进行维护

JavaScript 是网景（Netscape）公司开发的一种基于客户端浏览器、面向（基于）对象、事件驱动式的网页脚本语言

 事件:  当鼠标或者键盘操作文本文档的时候产生的事情 事件就是用户操作

 事件驱动: 当产生一种事件的时候调用程序处理事件达到一定的效果的过程我们叫做事件驱动

3．JavaScript 特点

（1）JS是解析型语言

（2）JS 具有跨平台的性质

（3）具有安全和简单的特性

（4）基于对象

4．JavaScript优点

（1）美化页面

（2）表单验证

5．缺点

浏览器兼容性问题

6．开发环境

（1）编辑器: vim sublime  np++ 记事本

（2）运行环境: 只要你有支持js的各个浏览器就可以

例如: 火狐  谷歌 ie   360 欧朋  猎豹  。。。。。。

7．JavaScript 和Java是什么关系？

雷锋和雷锋塔的关系

8．JavaScript 特效原理

 找需要美化的元素或者对象进行美化即可

 找对象    改属性(重点重点重点)

9．JavaScript 严格区分大小写

10．JavaScript能做哪些操作

（1）表单验证

（2）交互式操作

（3）网页特效

（4）web游戏

（5）服务器脚本

11．JavaScript 不能做什么

（1）不能操作数据库

（2）不能操作本地文件

12．如何学习JavaScript

（1）基本语法 ECMAScript

（2）BOM  浏览器对象

（3）DOM  文档对象

13．JavaScript 语法(重点重点重点)

1. 注释: //单行注释   /**/ 多行注释   多行注释不能嵌套
2. 使用方式

(1) 写在script标签中

例如: <script>alert(1)</script>

(2) 通过事件方式写js

例如: <button οnclick="alert('12233444545')">点击</button>

<button οnclick="test()">点击</button>

(3) 通过协议方式写js

<a href="javascript:alert('1321314124')">点击</a>

<!-- 事件中return false 可以阻止默认行为 -->

<a href="http://www.4399.com" οnclick="return false">去4399玩游戏</a>

<a href="http://lol.qq.com" οnclick="return check()">想去玩游戏</a>

(4) 通过外部引入的方式写js

<!-- 4.通过外部引入的方式写js代码 -->

<script src="./js.js">

一旦我们的script标签用于导入外部js文件的时候那么这个script标签里面的所有代码都无效

alert('我是在引入的同时写js代码在里面好暖和好开心');

 

</script>

1. js能在html中的位置有哪些

 除了title标签外js都可以出现在我们的html 的任意位置上

1. js的执行顺序

请各位以后将你的所有js放置在body标签后面

1. 获取元素对象的方式

document.getElementById(‘元素id 的值’)

1. JS中严格区分大小写

14．JS的调试方式

（1）alert()弹窗方式法   相当于php中的exit 终止代码继续执行

（2）document.write() 类似于php中的echo  执行完成之后再执行会覆盖所有内容

（3）console.log() 记录到控制台的内容 没有任何弊端  

console.dir() 类似于php中的print() 专业打印数组内容

（4）document.title调试动态数据方式

15．跟随鼠标图片

16．奇葩的运算符

（1）奇葩的加号

如果两边是数字那么就是数学运算  只要任何一边是字符串那么就是拼接

（2）+= 同上

（3）对象成员访问符    php对象成员访问符 ->

1. 对象成员访问符(.)

.成员访问符 不能解析变量

他会将变量变为属性来访问如果这个变量在对象中存在返回内容 如果不存在则返回undefined

1. 对象成员访问符([])

[]成员访问符 可以解析变量

他会解析变量 将变量里面的值去访问我们的对象中的属性如果这个解析之后的变量属性不存在则返回undefined

（4）奇葩的命令执行符  分号;

换行符也可以作为命令执行符操作

换行符如果会产生错误那么就不作为命令执行符操作

17．流程控制

（1）分支结构

1. else if 中间必须有一个空格否则报错
2. switch case 结构的匹配要报纸一致匹配的类型也要一样

（2）循环结构

1. for-in 这是js中foreach
2. for(键名变量 in  要遍历的对象){

想要值  通过对象[键名变量]

想要键   直接打印键名变量即可

}

18．定时器(延时器)

（1）单次定时器

1. setTimeout(function(){},1000)
2. setTimeout(test,1000);

functioin test(){}

清除单次定时器

clearTimeout(定时器变量)

（2）周期定时器

1. setInterval(function(){},1000)
2. setInterval(test,1000)

function test(){}

清除周期定时器

clearInterval(定时器变量)

（3）单位是毫秒

19．倒计时特效

innerHTML 获取元素文本值的内容

对象.innerHTML 获取文本内容

对象.innnerHTML  = 值  赋予文本相应内容

20．轮播图

修改图片的显示路径

对象.src=路径

21．新消息特效

22．等待按钮特效

让按钮不能点击效果

对象.disabled = true;

让按钮能点击效果

对象.disabled = false;

23．获取对象的方式

document.getElementById(‘id值’)---->一个对象

document.getElementsByTagName(‘标签名’)-->一组对象 每个都有一个属性 length长度或者个数

24．全选反选全不选

（1）document.getElementsByTagName

（2）数组不能直接操作属性需要变为单独对象才可以操作(循环操作)

（3）对象.checked=true 多选框前面加上对号

（4）对象.checked =false 多选框前面没有对号

25．数据类型

（1）typeof 查看数据类型

（2）undefined

 undefined   定义了变量 但是没有赋值

（3）boolean 布尔型   true  false

true != TRUE JS中严格区分大小写

（4）数值类型

1. 整数整型
2. 浮点数

浮点数运算不精确 不要出现在比较里面 因为精度太高

1. 进制

2进制: 0b

8进制: 0

10进制:没有

16进制:0x

1. 科学计数法
2. 无穷大 Infintiy

a) 最大范围值 MAX_VALUE

b) 最小范围值 MIN_VALUE

1. NaN 不是一个数字的数字

NaN参与运算得到的值一定是NaN

isNaN() 如果变量是NaN返回true 否则返回false

（5）手机验证码等待按钮特效

绑定事件

对象.onclick = function(){} 这就是绑定事件

（6）字符串

单双引号 没有差异想用哪个就用哪个 你开心就好 因为没有差异

（7）数据类型转换

1. parseInt()

a) 如果把非数值类型转换为数值类型并不是绝对的

b) 如果把一个字符串不是数字或者负号开头的转换为数值  返回结果就是NaN

c) 如果当前非数值类型的值是NULL 返回值是NaN

1. parseFloat()
2. 典型案例

box.style.left = parseInt(box.style.left) + 10 + 'px';

（8）计算器特效

获取input框中的值使用value 不能使用innerHTML

（9）选项卡特效

a) 对象.style.display = “block” 显示

b) 对象.style.display=”none”  隐藏

26．函数

他和你的字符串内容一样  字符串怎么写他就怎么用

1. 函数的定义

a) 直接法(常用)

function   函数名([形参]){

函数体

}

b) 匿名函数方式定义(常用)

var c = function(){}

c) 构造方法(了解即可)

var f= new Function(‘a’,’b’,’return a+b’); 在声明函数的时候最后面的参数一定是函数的函数体内容 前面的所有参数都是函数的形参

d) 

1. 函数的调用(重点重点重点)

a) 指定调用(常用)

 函数名([实参])

注意: 函数声明和调用不在同一个script标签中 必须要先声明后调用

b) 赋值语句中的调用(常用)

var  func = function(){}

func()

注意:

匿名定义的函数 必须先声明后调用

因为js变量都是先声明后使用

//将函数的返回值赋值给变量

var  demo = func();

//将函数本身赋值给变量

var demo1 = func;

c) 事件调用(常用)

<button οnclick="test()">我想早点调用</button>

d) a标签方式调用(常用)

<a href="javascript:test()">点击</a>

<a href="javascript:void(0)" οnclick="test()">连接</a>

<a href="javascript:;">嘿嘿嘿</a>

1. 函数的一些细节内容

a) js中函数可以重复定义

b) js中没有返回值的函数默认返回undefined

php中没有返回值的函数默认返回 null

c) js函数的返回值没有任何特殊内容返回值后面的内容不在继续执行

d) js中函数可以不传递实参  形参的默认值为undefined

1. 函数的参数

a) 如果当前的实参个数大于形参的个数那么多出来的实参就会被省略掉

b) 如果当前的实参个数小于形参的个数那么多出来的形参就会定义为undefined

c) arguments 获取函数的实参的数组对象 他可以把所有实参以数组的形式返回

d) 在函数内部可以直接使用arguments这个对象

e) 所有实参的个数可以通过arguments.length 取值

 

27．变量作用域(重点重点重点)

（1）函数外面声明的变量就是全局变量

（2）函数可以直接访问全局变量

（3）局部变量就是在函数中使用var声明的变量才是我们的局部变量

（4）局部变量在整个函数中有效(从第一行开始有效 只不过是先声明 不赋值而已) 出了函数外就是没有效果了

（5）如果局部变量和全局变量同名那么函数在函数内部使用的变量是局部变量

（6）形参也是局部变量

（7）变量作用域链(非常重要非常重要)

 

 

 

28．各种各样的函数

（1）匿名函数     没有函数你的函数

（2）回调函数     将函数名以参数的形式传递过去 会自动调用这个函数

（3）递归函数     就是自己调用自己函数

（4）子函数      就是声明在函数里面的函数

（5）自调函数    就是声明函数的时候在后面加上小括号，如果是常规声明方式需要将整个函数也加上小括号包起来 如果上面声明了别的函数请记得需要在上面的函数后面加上分号否则变为自调函数影响操作

（6）自己修改自己函数值的函数  函数体内重新赋值

（7）自宫函数  一次性函数  将函数体内容转换为空

 

二、对象操作

1．得到对象的方式

（1）声明对象(不常用)

var obj = {name:'abx',size:size,say:function(){

alert('发卡机离开房间');

}}

注意: 上面这种声明方式可以解析变量 访问不存在的成员属性属性值为undefined  调用成员方法obj.say();

（2）对象名称(常用)

var obj = new Object()

（3）找对象(最常用)

     document.getElementById()

     document.getElementsByTagName();

document.getElementsByClassName();

2．时间对象   Date

//创建时间对象

 

var  date = new Date();

//alert(typeof date);

//alert(date);

 

//获取年

//获取1900年到现在的年份

// year = date.getYear();

// alert(year);

 

year = date.getFullYear();

document.write('年:'+year+'<br/>');

 

//获取月 0-11

month = date.getMonth()+1;

document.write('月:'+month+'<br/>');

 

//获取日

day = date.getDate();

document.write('日:'+day+'<br/>');

 

//获取小时

hour = date.getHours();

document.write('小时:'+hour+'<br/>');

 

//获取分钟

minute = date.getMinutes();

document.write('分钟:'+minute+'<br/>');

 

//获取秒数

seconds = date.getSeconds();

document.write('秒:'+seconds+'<br/>');

 

//时间戳

time = date.getTime();

document.write('时间戳:'+time+'<br/>');

 

//获取时间毫秒

milliseconds = date.getMilliseconds();

document.write('毫秒:'+milliseconds+'<br/>');

 

//获取星期

weekday = date.getDay();

document.write('星期:'+weekday+'<br/>');

 

//获取到时区差 单位是分钟

 

offsettime = date.getTimezoneOffset();

document.write('时区差:'+offsettime+'<br/>');

 

3．表特效

获取本地时间

locatime= date.toLocaleString();

4．数学对象

Math 本身就是一个对象

abs()：绝对值

ceil()：进一法取整

floor()：退一法取整

max()：最大值

min()：最小值

random()：随机数

round()：四舍五入

5．数组对象

（1）直接定义

arr = [10,20,30];

（2）创建数组对象

 arr2 = new Array(10,20,30);

（3）创建数组对象的方式

var  obj = new Array();

// obj[0] = 10;

// obj[1] = 20;

// obj[2] = 30;

// console.log(obj);

obj[obj.length] = 10;

obj[obj.length] = 20;

obj[obj.length] = 30;

console.log(obj);

如果你使用直接赋值法声明数组那么他的键名必须赋予值这是在js中如果想要自增请使用对象.length 来进行书写键值自增

toString()：将数组转换为字符串

join()：将数组转换为字符串（可以指定以什么分隔）；

push()：在数组尾部添加元素

unshift()：在数组的头部添加元素

pop()：删除数组最后一个元素

shift()：删除数组中第一个元素

6．随机轮播图

  通过随机数得到数组下标  通过数组下标获取到图片名称  将图片名称更替换到页面中即可

三、单按钮点名器

四、双按钮点名器

五、定时器特性

每次点击定时器都会触发定时器这样的定时器会越来越快 解决他的问题只需要加上一个判断 判断你的定时器变量是否为undefined

六、折叠菜单

判断是否显示

对象.style.display=”block”;

对象.style.display=”none”;

七、字符串对象

str = new String(‘字符串内容’);

match()：找到一个或多个正则(字符串)表达式匹配

indexOf()：返回一个字符串第一个出现的位置的索引值(索引从0开始) 

substr()：截取字符串 从哪个位置开始取多少个

slice()：截取字符串从哪个位置到哪个位置

search()：匹配和正则表达式的字符串符合的内容 如果能匹配返回当前字符串所在的索引位置，如果匹配不到返回 -1

replace()：指定某个字符替换另外一个字符

八、什么是事件

1．用鼠标或者键盘操作文档的时候产生的一个过程我们叫做事件 其实就是用户操作

2．事件驱动: 当产生事件的时候就会调用程序去执行处理事件达到某个效果 这个过程我们叫做事件驱动

九、事件组成

事件源     事件     事件处理

十、事件的设置

1．标签引入

2．标签绑定

十一、事件对象

鼠标坐标

1. clientX  鼠标X轴坐标

e.clientY   鼠标Y轴坐标

 

鼠标按键

 

e.button

 

标准浏览器  左键0  滚轮1 右键2

 

IE浏览器    左键 1  滚轮4 右键2

 

键盘编码

 

e.keyCode    获取键盘编码

 

e.shiftKey     获取shift键

 

e.ctrlKey   获取ctrl键

 

e.altKey       获取alt键

 

阻止使用冒泡

 

//标准浏览器可以阻止

 

e.stopPropagation()

 

    所有浏览器都兼容的阻止事件冒泡行为

 

e.cancelBubble =true;

 

十二、事件列表

windows 对象  顶级对象

文档事件

onload  文档加载成功

onunload 关闭窗口的时候触发 IE支持

onbeforeunload  离开页面的时候给予提示信息

图片事件

onload 图片加载成功

onerror 图片加载失败

鼠标事件

onclick 单击事件

ondblclick    双击事件

onmousedown  鼠标按下事件

onmouseup     鼠标弹起事件

onmousemove   鼠标移动事件

onmouseout     鼠标移除事件

onmouseover     鼠标移入事件

onmouseenter    鼠标移入事件

onmouseleave     鼠标移除事件

 

前者对于包含关系的元素会出现移入移除的效果

 

后者对于包含关系的元素不会出现移入移除的效果

 

其他事件

 

oncontextmenu 菜单事件

 

onscroll  滚动条事件 可以使用document也可以使用window对象

 

onresize   调整窗口事件  只能使用window对象

 

键盘事件

 

onkeydown  按下键盘事件

 

onkeyup      弹起键盘事件

 

onkeypress    按键盘事件

 

表单事件

 

onblur  失去焦点事件

 

onfocus  获取焦点事件

 

onselect  选中文本事件

 

onchange  改变选项事件

 

onsubmit  提交事件

 

onreset    重置事件

 

十三、拖拽div特效

1．首先需要知道你当前坐标相对于元素坐标点坐标

2．移动之后的left和top值是 移动之后的鼠标坐标点减去相对坐标点内容

 

十四、

一、事件冒泡

缺点; 事件委派  常用应用应该权限 操作的内容 把所有事件都用在事件委派上容易出现误判 即不应该出现的事件触发

优点: 1.可以大量节省空间  减少事件绑定

1. 可以拾取现在当新子对象的时候无需对象进行事件绑定

一、二级联动

new Option 每次new Option对象都会得到一个option标签

new Option(‘键’,值)

键option 显示内容

值 option.value 的属性值

对象.add()  可以将你的标签放置到某个标签的下面  只限制option标签使用

二、获取计算后样式

var css = box.currentStyle || document.defaultView.getComputedStyle(box);

三、常用属性

offset

offsetWidth

offsetHeight

以上属性包含内边距和边框的内容

offsetLeft

offsetTop

以上属性是外边距和定位的left值和top值之和

client

clientWidth

clientHeight

以上属性是包含内边距的内容不包含边框的内容

clientLeft

clientTop

以上两个属性代表边框的粗细

scroll

scrollWidth 加上一个左边的内边距

scrollHeight

以上属性是文档的宽度和高度（元素的宽和高）

scrollTop

scrollLeft

以上属性 是滚动条的位置(可读可写的属性)