JS高级（原型、回调、匿名函数、闭包、jQuery事件委托、继承、命名空间、含jQuery包）--展示以代码为主--
一、JS高级1、JS基础：一切皆对象1.数据类型2.js里面true和false3.对象使用对象遍历
4.json的操作（json字符串转换为json对象）5.js类的操作6.函数对象使用7.this的使用8.prototype（原型的使用）
2、回调、匿名函数2.1回调函数2.2匿名函数
3、JS闭包
二、jQuery增强1、jQuery事件1.1注册有三种方式1.2事件的委托1.3事件的命名空间
2、jquery的继承(扩展函数)
说明1：代码可以直接拿到html中运行，帮助理解！
说明2：如果有jQuery代码，需要下载导入其文件！
一、JS高级
1、JS基础：一切皆对象
1.数据类型
JS基本数据类型
number
boolean
string
null(值:null)
undefined(undefined)
引用：Object/Array/Regexp/Date/Number/Boolean/String...
与java代码对比：java代码中的基本数据类型不能调用方法，而JS中的基本数据类型可以调用函数。
<script type="text/javascript">
//(1)js一切都是对象，包括基本类型 和引用类型 ，函数,平时使用比较多，只是把引用类型看成对象
//基本类型调用方法
var num = 12.118;
console.log(typeof num);//number
console.log(num.toFixed(2)); //保留两位小数
//引用类型调用方法
var num1 = new Number(12.889);//引用类型
console.log(typeof num1);
console.log(num1.toFixed(2));
//认识一下
var func1 = new Function("a","b","return a+b");
console.log(func1(1,2));
func1.age = 18;
console.log(func1);
</script>
2.js里面true和false
<script type="text/javascript">
//当成一个boolean类型用
var b = true;
if(b){
console.log("jinlaile");
}
//js在里面什么才是false：0,"",undefined,NaN,null,false，除开这几个，全部是true了
//false
console.log(new Boolean(0));
console.log(new Boolean(""));
console.log(new Boolean(undefined));
console.log(new Boolean(NaN));
console.log(new Boolean(null));
console.log(new Boolean(false));
//true 除开上面的，全部是true了
console.log(new Boolean(34));
console.log(new Boolean("zhende"));
console.log(new Boolean(true));
</script>
3.对象使用
<script type="text/javascript">
//(1)对象怎么创建
var obj1 = new Object();
var obj2 = {"name":"cc","age":19};
function Person(){}
var obj3 = new Person();
//(2)往对象添加属性和方法
obj1.name = '1cc';
obj1.age = 11;
obj1["11"]=111;
//添加方法
obj1.eat = function(){
console.log("打印一下？");
};
console.dir(obj1);
console.log(obj1.eat()+"??");
obj2.sex = true;
obj2["22"] = "22";
console.dir(obj2);
obj3.name = "sigui";
obj3["paly"] = "JJ";
console.dir(obj3);
//了解 删除属性
delete obj3["paly"];
console.dir(obj3);
//(3)使用属性和方法
obj1.eat();
</script>
对象遍历
<script type="text/javascript">
//给对象添加字段、方法
var c = {};
c.name = "cc";
c.age = "18";
c.sex = true;
c.eat = function(){
console.debug("吃人");
}
//遍历
for (var key in c) {
//不能这样写 obj1.key 调用
//判断如果是方法的话，使用： 对象名[key]() 调用
if(typeof c[key] == 'function'){
c[key]();
}else{//如果不是方法的话，就直接 对象名[key] 就可以了。
console.log(c[key]);
}
}
</script>
4.json的操作（json字符串转换为json对象）
<script type="text/javascript" src="js/jquery-2.1.3.min.js" ></script>
<script type="text/javascript">
/*Json字符串转换成对象*/
//json字符串 标准格式
var jsonStr = '{"name":"张三","age":18}';
console.log(jsonStr);
//1.eval表达式
var json1 = eval("("+jsonStr+")");
console.log(json1);
//2.JSON.parse jsonStr必须是标准的格式
var json2 = JSON.parse(jsonStr);
console.log(json2);
//3.使用jQuery 中的 $.parseJSON()
var json3 = $.parseJSON(jsonStr);
console.log(json3);
</script>
5.js类的操作
<script type="text/javascript">
function Person(name,age){
this.name = name;
this.age = age;
}
//创建对象，调用类
var p1 = new Person("cc",18);
var p2 = new Person("dd",20);
console.log(p1);
console.log(p2);
//属性拷贝
var obj1 = {
"name" : "gg",
"address" : "yyy",
age : "18",
sex : "man"
}
var obj2 = {
name : "mm",
sex : "woman"
};
//把obj1中的拷贝到2中去
/*一个个复制*/
/*obj2.address = obj1.address;
console.log(obj2);*/
for(var key in obj1){
//判断obj2中有没有，没有才拷贝
//obj2.hasOwnProperty(key) key是obj1的属性名
console.log(key);
if(!obj2.hasOwnProperty(key)){//表示obj2中没有obj1的属性名
//通过了，才拷贝
//不能用点取值 因为obj1和obj2中都没有key这个属性值
obj2[key] = obj1[key];
}
}
console.log(obj1);
console.log(obj2);
</script>
6.函数对象使用
<script type="text/javascript">
//函数的name
var f = new Function();
f.name = "能赋值吗？";
//函数里面name这个属性，比较特殊，他是可读的属性，不能进行修改
console.log(f);//name 不会改变，是只读的哦
//window里面默认有个属性name 默认值的空字符串
console.log(window.name);
name = "what";
console.log(name);
</script>
7.this的使用
<script type="text/javascript">
/*this的使用*/
//this 指当前对象，谁调用 ，就是指代谁
var obj = {
"name" : "??????"
};
function sayHello(){
//取到方法传递过来参数
//console.log(arguments);
return this.name;//谁调用这个方法，this就指代谁
}
obj.say = sayHello;//把方法赋值给对象里面say
//相当于是obj在调用这个方法
console.log(obj.say());
//可以改变的this的指向
var o1 = {"name":"cc"};
var o2 = {"name":"陈成"};
//console.log(sayHello('xxx111','yyyy111'));
//改变this指向
console.log(sayHello.apply(o1,["xxx","yyy"]));
console.log(sayHello.call(o2,"xxx","yyy"));
</script>
8.prototype（原型的使用）
<script type="text/javascript">
/*原型*/
//prototype指原型的，每一个对象都有prototype的这个属性，我们可以通过该属性往
//对象上面添加属性和方法
function User(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
this.eat = function(){
console.log("调用User");
}
}
//从User的原型上面调用eat
User.prototype.eat = function(){
console.log("调用原型的？")
}
console.log(User);
//对象里面原型属性 --这个原型属性也是一个对象(原型相等)
var u1 = new User("c1",11);
console.dir(u1);
var u2 = new User("c2",22);
console.dir(u2);
//上面的u1和u2不相等，但是里面的原型相等
console.log(u1 === u2);//false
//console.log(u1.prototype === u2.prototype);//true
console.log(u1.__proto__ === u2.__proto__);//true
//(1)同一个类的不同实例的原型是共享的;
u1.__proto__.sex = true;
//给u1设置了，u2上面也有了。
console.dir(u2);
//(2)对象属性查找规则，先从自定义的属性上面找，如果找到，就返回，如果没有，从原型上面去找
//比如说这里查找age
u1.__proto__.age=333;
u1.__proto__.add="zj";
console.log(u1.age);//打印11
console.log(u1.add);//打印zj（自己没有这个属性，在原型上面去找了。）
console.log(u2.add);//打印zj（共享)
console.log(u1.aaa);//没有 undefined
</script>
2、回调、匿名函数
2.1回调函数
<script type="text/javascript">
/*回调函数，就是过一会再回来调用的函数*/
/*
如：定时器、Ajax请求中的回调函数一样
* */
setTimeout(cc,2000);//过2秒再执行cc函数
function cc(){
alert("过两秒再出来")
};
</script>
2.2匿名函数
<script type="text/javascript">
/*匿名函数*/
//匿名函数：没有名称的函数
//匿名函数 有什么用：一次性执行
//1匿名函数怎么写 -- 推荐写法
/*(function(){
alert("11匿名函数执行了11");
})*/
//上面的不会执行，因为没有调用，加一个（）才是调用
/*
(function(){
alert("22匿名函数执行了22");
})
//2
~function(){
alert(33)
}
//3
+function(){
alert(333333)
}
*/
//匿名函数有什么用：（1） 只想执行一次 可以使用，解决作用域污染问题(比如只想要结果，可以屏蔽不要的实现)
// （2）作为一个参数来传递
//作用域污染问题
/*
var x = 3;
var y = 4;
var z = x*y;
console.log(z);//本来只想要z的结果的，结果xy也在window中。
console.dir(window);//这个里面有xyz这三个变量哦。
*/
//上面污染了window哦。
/*
//匿名函数的写法
(function(a,b){
var result = a*b;
console.log(result);
//把result挂在window上面，在外面好看看，有没有a、b这两个变量。
window.result;
})(5,6);
//上面的就是一次性调用。
console.dir(window);//没有哦。
//什么都没有
(function(name){
console.log(name);
})
*/
//调用
(function(name){
console.log(name);
})("来了")
setTimeout((function(){
alert("time");
}),2000)
</script>
3、JS闭包
<script type="text/javascript">
/*闭包？*/
//最简单的闭包，函数里面使用函数外面的变量
/*
var c = "qwer";
function fun (){
console.log(c);
}
fun();
*/
/*
//闭包：
var sum = 0;
function add(){
return sum++;
}
console.log(add());
console.log(add());
//在这里可以改变sum的值。sum的值不是只读的哦。
sum = 7;
console.log(add());//7
console.log(add());//8
console.log(add());//9
*/
//实现只读的属性 = 闭包+匿名函数
/*
(function(){
var a = 0;
//把函数挂在window上面去，这样外面才能调用
window.sum = function(){
return a++;
}
})();
//console.dir(window);
console.log(sum());
console.log(sum());
//改变a的值，看看后面的会不会变，不会变的
a = 10;
console.log(sum());
console.log(sum());
console.log(sum());
*/
/*
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
alert(object.getNameFunc()());
//这里相当于是window在调用方法，所以等于The Window
*/
/*
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
var that = this;
return function(){
return that.name;
};
}
};
alert(object.getNameFunc()());
//that表示这个函数内？
*/
//从上往下执行 -- js 编译解析 -- 运行
function Hello(){
alert("Hello");
}
Hello();//hello World
function Hello() {
alert("Hello World");
}
Hello();//hello World
//只会运行最后一个。
</script>
二、jQuery增强
1、jQuery事件
jQuery事件注册、
事件委托、
事件命名空间（了解）
1.1注册有三种方式
$("#btn").click(function() //jQuery对象.事件名
$("#btn").bind(‘click’，function() // jQuery对象.bind unbind取消绑定
$("#btn").on(‘click’，function() // jQuery对象.on off取消绑定
1.2事件的委托
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-2.1.3.min.js" ></script>
<script type="text/javascript">
//提前加载事件
$(function(){
//需求，点击a标签的时候，给form添加div标签
$("#addFile").click(function(){
$("#userForm").append("<div>附件:<input type='file' name='file' /><a href='javascript:void(0)' class='delete'>删除</a></div>");
});
//给上面的删除 a标签注册一个事件
//原始方法
/*
$(".delete").click(function(){
//测试有没有
alert("不行啊")
})
*/
//事件委托
/*
主要使用的格式：
this.on( types, selector, data, fn );*/
//下面没有传入data参数
$("#userForm").on("click","a.delete",function(){
$("#userForm div").remove()
})
})
</script>
</head>
<body>
<a id="addFile" href="javascript:;">添加更多附件</a>
<form id="userForm">
<div>
附件:<input type="file" name="file" />
</div>
</form>
</body>
1.3事件的命名空间
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-2.1.3.min.js" ></script>
<script type="text/javascript">
//委托事件
$(function(){
//事件命名空间--了解
$("#input").on("click.1",function(){
alert(1);
})
$("#input").on("click.2",function(){
alert(2);
})
$("#input").off("click.2");//只取消2
})
</script>
</head>
<body>
<input id="input" type="button" value="点我" />
</body>
</html>
2、jquery的继承(扩展函数)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-2.1.3.min.js" ></script>
<script type="text/javascript">
$(function(){
/*jQuery继承(扩展)*/
/**
* java 继承：体现在子类和父类之间，子类可以继承父类里面的属性和方法
* 继承： jquery的继承：可以扩展功能
* jquery想实现继承：可以通过prototype
* 通过公式添加：
* jQuery.fn == jQuery.prototype == $.fn
*
* 语法：$.fn.函数名 = function(参数){功能}
*
*/
//给jQuery扩展功能
//我给jquery这个框架扩展的函数
$.fn.setHtml = function(content){
//在不确定this是DOM对象还是jQuery对象前提下，都可以加上 $( )
$(this).html(content);
}
//jQuery调用
$("#div").setHtml("添加进去！");
//jQuery中html方法
$.fn.getHtml = function(){
//html中没有参数就是获取这个标签的文本值
return $(this).html();
}
//jQuery调用
var divHtml= $("#div").getHtml();
console.log(divHtml);
})
</script>
</head>
<body>
<div id="div">div</div>
</body>
</html>
有兴趣关注，未完待续…
jQuery 的 js 文件 百度网盘链接：https://pan.baidu.com/s/1o63JGgC1JZsCG08BbHrk7w 提取码：cvbj
