1.Javascript互联网上的脚本语言，轻量级编程语言
2.外部js可以直接引入
3.文档输出：

#document.write();

#document.getElementById("id ").innerHTML = "重写"

<script>
    document.write("Hello");
</script>

4.按照编写顺序执行
5.对大小写敏感
6.忽略多余的空格
7.保留字
8.数据类型：字符串string 数字Number 布尔Boolean 数组Array 对象Object 空null 未定义undefined
9.可以通过赋值为null的方式清除变量

运算符	内容
算术运算符	+ - * % / ++ --
赋值运算符	= += -= *= /= %=
*字符串操作
比较运算符	== === != !== > < >= <=
逻辑运算符	&& 两竖！
条件运算符	三元符号

10.三等必须满足类型也相通双等可以类型不相同，数值相同即可
11.!= 数值比较正确 !== 类型不同也为true

条件语句	循环语句	跳转语句
if-else	for循环： for/in	break
switch	while循环：do...while	continue

switch(i){
    case 1:
        输出语句1
        break;
    case 2:
        输出语句2
        break;
    default:  //当条件不满足任何一个case
        break;
}

do{
    执行语句
}while(i<10){
    //与while的区别是先执行一次再判断
}

12.break 跳出当前循环语句结束本次循环就不执行别的循环了 continue 结束当前本次循环，但还会继续执行循环语句
13.函数是由事件驱动或者当它被调用时执行的可重复使用的代码块
14.函数调用中可以传值，值被称为参数，参数可以任意多，逗号隔开，参数传递时顺序必须一致。

15.参数可以个数不同，也可以类型不同

函数执行：
//<script>标签中调用 
//html中调用

16.返回值：将函数的值返回给调用它的地方，通过return实现。在使用return语句的时候，函数会停止执行，同时返回值/

17.异常捕获：

try{  //发生异常的代码块
}catch(err){ //错误信息处理
}

18.Throw语句，通过throw语句创建自定义错误

事件	描述
onClick	单击事件
onMouseOver	鼠标经过事件
onMouseOut	鼠标移出事件
onChange	文本内容改变事件
onSelect	文本框选中事件
onFouse	光标聚集事件
onBlur	移开光标事件
onLoad	网页加载
onUnload	关闭网页的事件

js的DOM对象

当网页被加载时，浏览器会创建页面的文档对象模型 Document Object Model == HTML DOM

DOM操作HTML

1.JS改变页面中所有HTML元素
2.JS改变页面中的所以HTML属性
3.JS能改变页面中所以CSS样式
4.JS能对页面中的所有事件做出反应

#1.改变HTML的输出流：绝对不要在文档加载完之后使用document.write(),会覆盖该文档
#2.寻找元素（id 或标签名）. #3.改变HTML内容使用：innerHTML #4改变HTML的属性使用：attribute

document.getElementById(id).attribute=new attribute

DOM操作CSS

document.getElementById(id).style.property = new style;

DOM EventListener

addEventListener 用于向指定元素添加事件句柄
removeEventListener 移除方法添加的事件句柄

<button id="btn">button</button>
<script>
    document.getElementById('div').addEventListener("click",function(){
        alert('hello')
    })
</script>

添加两个句柄没有任何问题

var x =document.getElementById('');
x.addEventListener("click",hello);
x.removeEventListener("click", hello);
function hello(){}

Js创建对象

对象直接量

对象直接量——一副映射表；键名加引号是字符串，

var obj3 = {
  name: "ys",
  age: obj2.age,   //引用obj2.age
  like: {
    drink: "water",
    eat: "food"
  }
};

console.log(obj3.age); //100

new创建对象

1.系统内置对象

var obj1 = new Object();
var obj2 = new Array();
var obj3 = new Date();
var obj4 = new RegExp("ys");

console.log(typeof obj1);  //object
console.log(typeof obj2);  //object
console.log(typeof obj3);  //object
console.log(typeof obj4);  //object

2.自定义对象

function Person(name, age){
  this.name = name;
  this.age = age;
}

var obj1 = new Person("ys", 12);

console.log(Object.prototype.toString.call(obj1));  //object
console.log(Person instanceof Object);        //true
console.log(typeof obj1);              //object
console.log(obj1.age);                //12

Object.create()创建

该方法有两个参数：第一个参数：传入要继承的原型prototype对象第二个参数是对对象的熟悉进行进一步的描述

var obj1 = Object.create({
  name: "ys",
  age: 12
});
console.log(obj1);     //{}
console.log(obj1.age);   //12
console.log(obj1.__proto__);  //Object {name: "ys", age: 12}

对象本身为空，但是对象的原型链上数组不为空

####特殊情况

当第一个参数为null
```
var obj = Object.create(null);  //不继承对象应有的属性和方法
console.log(obj2+"abc"); //报错 失去+功能
```
PS:Javascript中所有对象都继承自Object,Object处于继承的最顶端本代码使得obj的原型删除了。即obj不再是对象

创建空对象

var obj3 = Object.create(Object.prototype); 
console.log(obj3);              //{}，（空对象，与前两个方法 {}，new Object 相同）
console.log(obj3.__proto__);         //如下图 ，只包含了基本对象的方法

综合理解

var obj1 = {
  name: "ys",
  age: 12
};
obj1.prototype = {
  sayName: function(){
    return console.log(this.name);
  }
};

/*①对象参数，只继承对象*/
var obj2 = Object.create(obj1);
console.log(obj2);                 //{}
console.log(obj2.name);               //ys
/*console.log(obj2.sayName());*/          /* 报错 obj2.sayName is not a function*/
console.log(obj2.__proto__.prototype.sayName());  //ys 理解原型的原型

/*②对象原型，继承对象原型*/
var obj3 = Object.create(obj1.prototype);
console.log(obj3);                 //{}
console.log(obj3.name);               //undefined，没有继承对象本身
obj3.name = "ys";
console.log(obj3.name);               //ys
console.log(obj3.sayName());

JSON和字符串的转换

1.JSON对象的stringify()和parse() 浏览器支持的转换方式

JSON.stringify(obj)  //将JSON转为字符串。
JSON.parse(string)  //将字符串转为JSON格式；

2.jquery插件支持的转换方式

$.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象

3.Javascript支持的方法

eval('(' + jsonstr + ')'); //可以将json字符串转换成json对象,注意需要在json字符外包裹一对小括号

4.JSON官方转换方式引入http://www.json.org/提供了一个json.js,这样ie8(兼容模式),ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法；可以在https://github.com/douglascrockford/JSON-js上获取到这个js，一般现在用json2.js。

事件详解

事件流

1.事件流：描述在页面中接受事件的顺序
2.事件冒泡：由最具体的元素接受，然后逐级向上传播至最不具体的元素的结点（文档）
3.事件捕获：最不具体的节点先接收事件，而最具体的节点应该是最后接收事件。层层深入

事件处理

1.HTML事件处理：直接添加到HTML结构中
2.DOM0级事件处理：把一个函数赋值给一个事件处理程序属性
3.DOM2级事件处理：addEventListener("事件名"，“事件处理函数”，“布尔值”); true:事件捕获 false:事件冒泡

4.IE事件处理程序 attachEvent detachEvent

<script>
  var btn =  document.getElementById("");
  if(btn1.addEventListener){
      btn.addEventListener("click",demo);
  }else if(btn.attachEvent){
      btn.attachEvent("onclick",demo)
  }else{
      btn.onclick =demo();
  }
  function demo(){}
</script>

事件对象

在触发DOM事件的时候都会出现一个对象

事件对象event

type 获取事件类型
target获取事件目标
stopPropagation()阻止事件冒泡
preventDefault()阻止事件默认行为

<script>
    document.getElementById("").addEventListener('click',demo);
    function demo(event){
        alert(event.type)
    }
</script>

事件的默认行为：a标签的跳转行为

面向对象

1.面向对象中的概念

- 1.一切事物皆对象
- 2.对象具有封装和继承特性
- 3.信息隐藏

2.函数构造器构造对象

/*类似于类概念*/
function People(){

}

People.prototype.say = function(){
    alert("hello");
}
function Student(){

}

Student.prototype = new People();//原型继承
/*Student.prototype.say=function(){//复写父类的方法会覆盖父类
    alert("stu-Hello")
}*/

/*解决父类方法被覆盖的问题*/
var superSay = Student.prototype.say;
Student.prototype.say=function(){//复写父类的方法会覆盖父类
    superSay.call(this);
    alert("stu-Hello");
}
var s= new Student();    //创建一个对象来测试一下
s.say();

改变函数this指针：call、apply、bind

相同点：

都用来改变this对象的指向；

第一个参数都是this要指向的对象；

都可以利用后续参数传参

var xw = {
  name : "小王",
  gender : "男",
  age : 24,
  say : function() {
  alert(this.name + " , " + this.gender + " ,今年" + this.age);                                
  }
}
var xh = {
  name : "小红",
  gender : "女",
  age : 18
}
xw.say();

三种方法的调用分别是

xw.say.call(xh);
xw.say.apply(xh);
xw.say.bind(xh)(); //bind方法返回的还是一个函数

即：call与apply都是对函数的直接调用。而bind方法返回的还是一个函数，需要加上（）进行执行

var xw = {
  name : "小王",
  gender : "男",
  age : 24,
  say : function(school,grade) {
      alert(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade);                                
  }  //say方法多了两个参数，因此需要进行传参
}
var xh = {
  name : "小红",
  gender : "女",
  age : 18
}

则进行传参时，call与apply的应用：

xw.say.call(xh,"实验小学"，“六年级”)
xw.say.spply(xh,["实验小学"，“六年级”]);

即：call后面的参数是与say方法中的一一对应的。而apply的第二个参数是数组，数组中的元素是和say方法一一对应的。

正确理解this的对比代码

(function(){
   var n= "ime";
   function People(name){
       this._name = name;
   }
    People.prototype.say = function(){
        alert("peo-hello"+this._name);
    }
    //n需要给外部引用的话，需要给外部公开一个n的接口
    //赋给顶级的window
    window.People = People;  //开放接口
}());
(function(){
    function Student(name){
        this._name =name;
    }
    Student.prototype =new People();
    var superSay = Student.prototype.say;
    Student.prototype.say =function(){
        superSay.call(this);
        alert("stu-hello"+this._name);
    }
    window.Student = Student;
}())

var s= new Student("Wang");    //创建一个对象来测试一下
s.say();

与

(function(){
    var n ='ime';
    function Person(name){
        var _this ={};/*创建空对象*/
        _this._name = name;
        _this.sayHello = function(){
            alert("PHello"+_this._name+n);
        }
        return _this;
    }
    window.Person =Person;
}());

function Teacher(name){
    var _this = Person(name); /*将对象传递过去，对象的复制操作*/
    var superSay = _this.sayHello;
    _this.sayHello = function(){
        superSay.call(_this);
        alert("Thello"+_this._name);
    }
    return _this;
}
var t=Teacher("li");
t.sayHello();

JS浏览器对象

Window对象

- window对象是BOM的核心，window对象指当前浏览器窗口
- 所以JavaScript全局对象、函数以及变量均自动成为Window对象的成员
- 全局变量是window对象的属性
- 全局函数是window对象的方法
- 甚至HTML DOM的document也是window对象的属性之一
- 客户端js最高层对象之一

<script>
    document.write();
    window.document.write();
<script>

window的尺寸

1.window.innerHeight 浏览器窗口的内部高度
2.window.innerWidth 浏览器窗口的内部宽度

window方法

1.window.open() 打开新窗口
2.window.close() 关闭当前窗口

计时器的使用

- 在一个设定的时间间隔之后来执行代码，而不是在函数被执行后立即调用——计时事件

计时方法：

setInterval() 间隔指定的毫秒数不停地执行指定的代码
- clearInterval()停止setInterval()方法执行的函数代码
setTimeout() 暂停指定的毫秒数后执行指定的代码
- clearTimeout()停止执行setTimeout()方法的函数代码

 /*延时执行*/
        /*var win;
        function mywin(){
            win = setTimeout(function(){
                alert("hello");
            },3000)
        }*/

/*长期不停执行——自己调自己*/
        var win;
        function mywin(){
            alert("hello");
            win = setTimeout(function(){
               mywin();
            },3000)
        }

        function stopwin(){
            clearTimeout(win);
        }

History对象

window.history对象包含浏览器历史的集合

History方法

history.back() 与在浏览器中点击后退按钮相同
history.forward() 在浏览器中点击前进按钮
history.go()进入历史中的某个页面

Location对象

window.location对象用于获取当前页面的地址url，并把浏览器重定向到新的页面

Location对象的属性

location.hostname 返回web主机的域名
location.pathname 返回当前页面的路径和文件名
location.port返回web主机的端口
location.protocol 返回所使用的web协议
location.href 返回当前页面的url
location.assign()方法加载新的文档

Screen对象

window.screen对象包含有关用户屏幕的信息

属性

screen.availWidth 可用屏幕的宽度
screen.availHeight 可用屏幕的高度
screen.Height 屏幕高度
screen.Width 屏幕的宽度

Navigator对象

navigator对象包含有关浏览器的信息

属性

navigator.appName 浏览器名称
navigator.appVersion 浏览器版本
navigator.appCodeName 浏览器的代码名称
navigator.userAgent 用户代理标识
navigator.plugins 可以使用的插件信息
navigator.language 语言设定

弹窗

(function(){...})()与(function(){...}())区别：无区别

IIFE 立即执行函数表达式的写法

常用的

(function(){..}());
(function(){...})();

括号和JS的一些操作符可以在函数表达式和函数声明上消除歧义 解析式会知道它是一个表达式，而且两者不能交换

var i = function(){...}();
true && function(){.....}();
0,function(){...}();

一元运算符也可以，但是晦涩难懂

!function(){}();
~function(){}();
-function(){}();
+function(){}();

或者 new function(){. ...} new function(){...}()

(function($){...}) (jQuery)

function(arg){.....}为匿名函数，参数为arg
调用函数时，在函数后面加上括号和实参，由于操作符的优先级，函数本身也使用括号

//定义了一个参数为arg的匿名函数，并将param作为参数来调用这个匿名函数
(function(arg){...})(param)

//形参用$,实参用jQuery
(function($){...})(jQuery)

//等同于
var fn= function($){...};
fn(jQuery);

(function($){})(jQuery)是用来定义一些需要预先定义好的函数 $(function(){})用来在DOM加载完成之后，运行、执行预先定义好的函数

jQuery插件

//在DOM加载完毕后执行了ready()方法
jQuery(function(){...});
//等同于
jQuery(document).ready(function(){...})

//执行()(para)匿名函数，但是传递了jQuery对象
(function(){...})(jQuery)

jQuery(function(){　});用于存放操作DOM对象的代码，执行其中代码时DOM对象已存在。不可用于存放开发插件的代码，因为jQuery对象没有得到传递，外部通过jQuery.method也调用不了其中的方法（函数）。 (function(){　})(jQuery)；用于存放开发插件的代码，执行其中代码时DOM不一定存在，所以直接自动执行DOM操作的代码请小心使用。

jquery的ready（）方法

写法：

$(document).ready(function)
$().ready(function)
$(function)

当DOM已经加载，并且页面已经完全呈现的时候，触发ready事件只试用于当前文档，无需选择器。

jquery中的$.fn

$.fn是指jQuery的命名空间
$.fn.abc()是对jquery扩展了一个abc方法，之后的每一个jquery的实例都可以引用这个方法。

jquery为开发提供了两个方法：

jQuery.extend(object) 为jQuery类本身添加新的方法
jQuery.fn.extend(object) 给jQuery对象添加方法

jQuery.fn = jQuery.prototype ={ init:function(selector,context){} }

//jQuery.extend(0bj) 为jQuery类添加类方法——静态方法
$.extend({
    add:function(a,b){return a+b;}
});

//使用这个方法
$.add(3,4);

//jQuery.fn.extend(object);对jQuery.prototype进行扩展——为jQuery添加成员函数，jQuery类的实例可以使用这个函数
$.fn.extend({
    alertWhileClick: function(){
        $(this).click(function(){
            alert($(this).val());
        });
    }
})
//引用
$("#input1").alertWhileClick();

插件机制——扩展一个对象到jQuery的prototype中

(function($){

})(jQuery)

(function( $ ){
  $.fn.tooltip = function( options ) {
  };
  //等价于
  var tooltip = {
    function(options){
    }
  };
  $.fn.extend(tooltip) = $.prototype.extend(tooltip) = $.fn.tooltip
})( jQuery );

$().on(events,[selector],[data],fn)

events一个或多个用空格分隔的事件类型和可选的命名空间，如“click”
selector 一个选择器字符串，过滤器，用于选择规定触发的事件元素是当前事件的哪些后代。当它到达选定的元素，事件被触发
data 当一个事件被触发时，要传递event.data给事件处理函数
fn是事件被触发时执行的函数

js的DOM对象

DOM操作HTML

DOM操作CSS

DOM EventListener

Js创建对象

对象直接量

new创建对象

Object.create()创建

JSON和字符串的转换

事件详解

事件流

事件处理

事件对象

事件对象

事件对象event

面向对象

1.面向对象中的概念

2.函数构造器构造对象

JS浏览器对象

Window对象

window的尺寸

window方法

计时器的使用

计时方法：

History对象

History方法

Location对象

Location对象的属性

Screen对象

属性

Navigator对象

属性

弹窗

cookie

(function(){...})()与(function(){...}())区别：无区别

(function($){...}) (jQuery)

jQuery插件

jquery的ready（）方法

写法：

jquery中的$.fn

插件机制——扩展一个对象到jQuery的prototype中

$().on(events,[selector],[data],fn)