My website: welcome to visit
Senior JS
Objects
Everything in JS objects
Basic data are objects, but also the function objects
Analyzing the true and false JS
In JS, the object will be true as long as there
js are all true and false values: 0, "", undefined, NaN, null, false (basic data type false) is false, true another value Dou
<script>
var f = false;
if(f){
alert('能输出我把屎吃下去');
}else{
alert('我们心有猛虎')
}
var s = new Boolean(false); //这是对象,在js中对象是默认存在,所以为true
if(s){
alert('肯定可以输出');
}
</script>
Create Object
Create objects in the js There are six ways
As a back-end programmers, three, as long as usual to the familiar
1.js function defined by the constructor, create an object (function to create an object)
var num = new Number(156); //js自带Number对象
function Person(){} //自建一个构造方法
var p = new Person();//创建Person对象
2.js special function Object () {} (to create the object with the Object)
var s = new Object(); //js自身提供了Object对象
s.name = '尼采';
alert(s);
3.js to create by literal (json objects), it is best to master
var j = {
"name":"萨特",
"age":"18"
};
Call the properties and methods of
1. Ordinary call: object calls.
2. Dynamic call: Object [ "field variables"] objects [ "method name"] (parameter)
<script>
function Fk(){}
var f = new Fk();
f.name = '李志';
alert(f.name);
//动态调用
alert(f["name"]);
</script>
Traversal methods
Use for (var variable name in the object)
Analyzing methods and fields
typeof p == “function”
If true is the way
If the field is false
JSON object and JSON string
The JSON string to JSON object
The first way: eval
jsonString = '[{"id":1,"name":"冲冲冲"},{"id":2,"name":"冲不动了"}]';
var jsonObject = window.eval(jsonString);
The second way: JSON.parse () more commonly used
jsonString = '[{"id":1,"name":"冲冲冲"},{"id":2,"name":"冲不动了"}]';
var jsonObject = JSON.parse(jsonString);
JS in this
this represents the current object, especially: Who calls who points to
prototype prototype
Each object has a prototype property (in the js _proto_), this property is a reference to the prototype object pointed medical
js in the _proto_prototype are shared
Public templates can be set by it
<script>
function Person(name,age){
this.name = name;
this.age = age;
alert('你叫什么：'+this.name+' 年龄：'+this.age);
}
var p1 = new Person('古力果',20);
var p2 = new Person('具岛直子',20);
console.debug(p1.__proto__);
console.debug(p2.__proto__);
alert(p1._proto_ === p2.__proto__);
p1.__proto__.name = '小丑';
console.debug(p1.__proto__.name);
console.debug(p2.__proto__.name);
</script>
Anonymous function
General functions such as name, anonymous function is not defined names
function (){
console.debug("王家卫");
}
//自调用：自己调用自己
(function (){
console.debug("自调用");
})()
Use Scene One:
Use of anonymous functions in the callback method
Callback method: define a method to not execute when certain conditions are met before execution
Use Scene 2: solve the pollution problem domain
jQuery's Ajax
jQuery's Ajax object syntax is as follows:
$ .Get ( 'path request', 'parameter sent', function () {} callback function, 'the format of the received data')
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>回调函数</title>
<script src="js/jquery-3.2.1.js"></script>
<script>// 回调方法
$(function() {
$("button").on("click", function() {
alert("执行回调...");
// ajax 请求使用的也是回调函数
$.get("index.html", function(data) {
// 服务器响应了数据后 执行的方法
console.debug(data);
alert("ajax 请求回调");
});
});
});</script>
</head>
<body>
<button value="点我">点我</button>
</body>
</html>
Closure
<script>
function come(){
var a = 10
console.debug(a);
}
come();
a = 53;
come();
</script>
jQuery event delegation mechanism
Bound object itself, binding events, execution
Event delegation, object to its parent element, listening, through the operation of the parent element objects
Implementation: dynamically added to the object, the binding events
Syntax: Object .on parent element ( "event name", "moving object selector string" callback method function () {})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery委派机制</title>
<script src="js/jquery-3.2.1.js"></script>
<script>
$(function(){
//点击添加
$("#btn").on("click",function(){
$("body").append("<h2>会沉寂吗</h2>");
});
//点击删除
$("body").on("click","h2",function(){
$(this).hide();
});
});
</script>
</head>
<body>
<button id="btn">添加</button>
<h2>我正在远航</h2>
<h2>我正在远航</h2>
<h2>我正在远航</h2>
<h2>我正在远航</h2>
</body>
</html>
