mirror of
https://github.com/Estom/notes.git
synced 2026-02-03 10:33:35 +08:00
JavaScript&nodejs
This commit is contained in:
19
JavaScript/10chrome控制台.md
Normal file
19
JavaScript/10chrome控制台.md
Normal file
@@ -0,0 +1,19 @@
|
||||
### Elements
|
||||
|
||||
渲染完成的页面布局。包括HTML元素和布局分析。
|
||||
|
||||
### Console
|
||||
|
||||
javascript控制台。可以对网页进行操作。可以模拟客户端对服务器发送请求。
|
||||
|
||||
通过js向服务器发送请求,可以跳过前端js对请求数据的验证。
|
||||
|
||||
### Source
|
||||
从服务器端下载的所有文件。包括JS、CSS、HTML以及各种依赖。
|
||||
|
||||
### Network
|
||||
记录了请求的过程。包括所有类型的Request和Response以及其相关分析。
|
||||
|
||||
### Application
|
||||
|
||||
主要是应用数据分析。包括储存在本地Chrome自带数据库中的各种数据。本地缓存、cookies、session
|
||||
@@ -77,14 +77,14 @@ ll
|
||||
o`;//反引号多行字符串
|
||||
```
|
||||
|
||||
### 数组(列表)
|
||||
### 数组array(列表list,集合set)
|
||||
```
|
||||
[1,2,3.14,'hello',null,true];
|
||||
new Array(1,2,3);
|
||||
var arr =[1,2,3.14,'hello',null,true];
|
||||
arr[0];
|
||||
```
|
||||
### 对象(字典,集合,键值对)
|
||||
### 对象object(Dictionary字典,map映射)
|
||||
|
||||
```
|
||||
var person ={
|
||||
@@ -94,12 +94,24 @@ var person ={
|
||||
zipcode:null
|
||||
};
|
||||
```
|
||||
### 变量
|
||||
|
||||
## 4 数据形式
|
||||
### 变量定义var
|
||||
```
|
||||
var a;//不强调类型
|
||||
var b = 1;
|
||||
```
|
||||
|
||||
### 常量定义const
|
||||
|
||||
const来定义常量
|
||||
```
|
||||
const PI = 3.14;
|
||||
PI = 3; // 某些浏览器不报错,但是无效果!
|
||||
PI; // 3.14
|
||||
```
|
||||
|
||||
|
||||
## 4 字符串
|
||||
|
||||
### 模板字符串
|
||||
@@ -127,7 +139,7 @@ s.indexOf('lo');//字符串首次出现的位置。
|
||||
s.substring(0,5);//字字符串
|
||||
```
|
||||
|
||||
## 数组
|
||||
## 5 数组
|
||||
|
||||
### 数组访问与修改
|
||||
```
|
||||
@@ -205,4 +217,80 @@ delete xiaoming.school; // 删除一个不存在的school属性也不会报错
|
||||
+ - * / %;//基本运算符
|
||||
> < >= <= ==(强制类型转换) ===(包括类型);//比较运算符
|
||||
! && || ;//逻辑运算符
|
||||
```
|
||||
& | ~ ^ << >> >>>//位运算符
|
||||
typeof//变量类型运算符
|
||||
instanceof//对象类型运算符
|
||||
```
|
||||
|
||||
## 8 Map映射
|
||||
### 创建map
|
||||
|
||||
```
|
||||
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
|
||||
m.get('Michael');
|
||||
```
|
||||
|
||||
### map使用
|
||||
```
|
||||
var m = new Map(); // 空Map
|
||||
m.set('Adam', 67); // 添加新的key-value
|
||||
m.set('Bob', 59);
|
||||
m.has('Adam'); // 是否存在key 'Adam': true
|
||||
m.get('Adam'); // 67
|
||||
m.delete('Adam'); // 删除key 'Adam'
|
||||
m.get('Adam'); // undefined
|
||||
```
|
||||
|
||||
## 9 Set集合
|
||||
|
||||
### 创建Set
|
||||
单值,值不能重复
|
||||
```
|
||||
var s1 = new Set(); // 空Set
|
||||
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
|
||||
```
|
||||
|
||||
### 使用Set
|
||||
|
||||
```
|
||||
s.add(4);
|
||||
s.delete(3);
|
||||
```
|
||||
|
||||
## 10 iterable循环类型
|
||||
|
||||
array、map、Set、object都可以通过for of进行循环。但array本身也是对象,也是可以添加新的属性的。
|
||||
|
||||
### for-of
|
||||
```
|
||||
var a = ['A', 'B', 'C'];
|
||||
var s = new Set(['A', 'B', 'C']);
|
||||
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
|
||||
for (var x of a) { // 遍历Array
|
||||
console.log(x);
|
||||
}
|
||||
for (var x of s) { // 遍历Set
|
||||
console.log(x);
|
||||
}
|
||||
for (var x of m) { // 遍历Map
|
||||
console.log(x[0] + '=' + x[1]);
|
||||
}
|
||||
```
|
||||
### foreach
|
||||
|
||||
接收一个函数,每次迭代就自动回调该函数
|
||||
```
|
||||
var s = new Set(['A', 'B', 'C']);
|
||||
s.forEach(function (element, sameElement, set) {
|
||||
console.log(element);
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
> 区别复合数据类型
|
||||
> * Array 数组,有顺序的单值,单值可重复。
|
||||
> * Set 集合,无顺序的单值,值不可以重复。
|
||||
> * object对象,无顺序的键值对,键必须是字符串。
|
||||
> * Map映射,无顺序的键值对,键可以是任意类型。
|
||||
> * iterable,加在其他类型上的特殊方法。
|
||||
|
||||
133
JavaScript/2JavaScript程序结构.md
Normal file
133
JavaScript/2JavaScript程序结构.md
Normal file
@@ -0,0 +1,133 @@
|
||||
## 1 条件判断
|
||||
|
||||
### if-else
|
||||
```
|
||||
var age = 20;
|
||||
if (age >= 18) { // 如果age >= 18为true,则执行if语句块
|
||||
alert('adult');
|
||||
} else { // 否则执行else语句块
|
||||
alert('teenager');
|
||||
}
|
||||
//else是可选的
|
||||
//如果语句块只有一句话,可以省略大括号。
|
||||
```
|
||||
|
||||
### if-else可以嵌套
|
||||
|
||||
```
|
||||
var age = 3;
|
||||
if (age >= 18) {
|
||||
alert('adult');
|
||||
} else {
|
||||
if (age >= 6) {
|
||||
alert('teenager');
|
||||
} else {
|
||||
alert('kid');
|
||||
}
|
||||
}
|
||||
|
||||
if (age >= 6) {
|
||||
console.log('teenager');
|
||||
} else if (age >= 18) {
|
||||
console.log('adult');
|
||||
} else {
|
||||
console.log('kid');
|
||||
}
|
||||
```
|
||||
|
||||
## 2 循环
|
||||
|
||||
|
||||
### for循环
|
||||
|
||||
```
|
||||
var x = 0;
|
||||
var i;
|
||||
for (i=1; i<=10000; i++) {
|
||||
x = x + i;
|
||||
}
|
||||
```
|
||||
|
||||
### for-in循环
|
||||
|
||||
可以循环数组(列表)和对象(字典)
|
||||
|
||||
```
|
||||
var o = {
|
||||
name: 'Jack',
|
||||
age: 20,
|
||||
city: 'Beijing'
|
||||
};
|
||||
for (var key in o) {
|
||||
console.log(key); // 'name', 'age', 'city'
|
||||
}
|
||||
|
||||
var a = ['A', 'B', 'C'];
|
||||
for (var i in a) {
|
||||
console.log(i); // '0', '1', '2'
|
||||
console.log(a[i]); // 'A', 'B', 'C'
|
||||
}
|
||||
```
|
||||
|
||||
### while循环
|
||||
|
||||
条件循环
|
||||
|
||||
```
|
||||
var x = 0;
|
||||
var n = 99;
|
||||
while (n > 0) {
|
||||
x = x + n;
|
||||
n = n - 2;
|
||||
}
|
||||
```
|
||||
|
||||
### do-while循环
|
||||
|
||||
```
|
||||
var n = 0;
|
||||
do {
|
||||
n = n + 1;
|
||||
} while (n < 100);
|
||||
n; // 100
|
||||
```
|
||||
|
||||
### foreach循环
|
||||
|
||||
### for-of循环
|
||||
|
||||
### break语句
|
||||
“跳出”循环。
|
||||
|
||||
```
|
||||
for (i = 0; i < 10; i++) {
|
||||
if (i === 3) { break; }
|
||||
text += "数字是 " + i + "<br>";
|
||||
}
|
||||
```
|
||||
### continue语句
|
||||
|
||||
“跳过”循环中的一个迭代。
|
||||
|
||||
```
|
||||
for (i = 0; i < 10; i++) {
|
||||
if (i === 3) { continue; }
|
||||
text += "数字是 " + i + "<br>";
|
||||
}
|
||||
```
|
||||
## 3 条件选择
|
||||
|
||||
### switch
|
||||
Switch case 使用严格比较(===)。
|
||||
```
|
||||
switch(表达式) {
|
||||
case n:
|
||||
代码块
|
||||
break;
|
||||
case n:
|
||||
代码块
|
||||
break;
|
||||
default:
|
||||
默认代码块
|
||||
}
|
||||
```
|
||||
301
JavaScript/3JavaScript函数.md
Normal file
301
JavaScript/3JavaScript函数.md
Normal file
@@ -0,0 +1,301 @@
|
||||
## 1 定义函数
|
||||
|
||||
### 函数
|
||||
```JavaScript
|
||||
function abs(x) {
|
||||
if (x >= 0) {
|
||||
return x;
|
||||
} else {
|
||||
return -x;
|
||||
}
|
||||
}
|
||||
|
||||
var abs = function (x) {
|
||||
if (x >= 0) {
|
||||
return x;
|
||||
} else {
|
||||
return -x;
|
||||
}
|
||||
};
|
||||
|
||||
abs(10);
|
||||
```
|
||||
|
||||
JavaScript的函数允许传入过多的参数或者过少的参数,也不会影响函数的执行。
|
||||
|
||||
### 函数的属性arguments
|
||||
> 因为javascript中,函数也被看做对象,所以能给变量赋值。也能有函数的属性。
|
||||
|
||||
只在函数内部起作用,并且永远指向当前函数的调用者传入的所有参数
|
||||
|
||||
```
|
||||
function foo(x) {
|
||||
console.log('x = ' + x); // 10
|
||||
for (var i=0; i<arguments.length; i++) {
|
||||
console.log('arg ' + i + ' = ' + arguments[i]); // 10, 20, 30
|
||||
}
|
||||
}
|
||||
foo(10, 20, 30);
|
||||
```
|
||||
|
||||
### 函数的属性rest
|
||||
|
||||
用来表示可能的多余的参数
|
||||
```
|
||||
function foo(a, b, ...rest) {
|
||||
console.log('a = ' + a);
|
||||
console.log('b = ' + b);
|
||||
console.log(rest);
|
||||
}
|
||||
|
||||
foo(1, 2, 3, 4, 5);
|
||||
// 结果:
|
||||
// a = 1
|
||||
// b = 2
|
||||
// Array [ 3, 4, 5 ]
|
||||
|
||||
foo(1);
|
||||
// 结果:
|
||||
// a = 1
|
||||
// b = undefined
|
||||
// Array []
|
||||
```
|
||||
|
||||
## 2 变量作用域与解构赋值
|
||||
|
||||
### 作用范围
|
||||
|
||||
* 使用中括号确定一组作用域。只有函数会区分作用域。
|
||||
* 作用域内部的变量,只在内部起作用。
|
||||
* 不同作用域的相同变量相互独立。
|
||||
* 作用域可以嵌套,外部作用域的变量可以在内部作用域使用,反之不可。
|
||||
* 作用域可以嵌套,内部作用域的变量可以覆盖外部作用域的变量。
|
||||
|
||||
### 变量提升
|
||||
|
||||
JavaScript的函数定义有个特点,它会先扫描整个函数体的语句,把所有申明的变量“提升”到函数顶部。
|
||||
|
||||
也就是说,你在函数体中变量的声明被提前,但是变量的定义没有提前。
|
||||
|
||||
```
|
||||
function a(){
|
||||
var x = 1;
|
||||
function b(){
|
||||
console.log(x);//x is undefined
|
||||
var x = 2;
|
||||
}
|
||||
}
|
||||
```
|
||||
> 因为在函数b中,x的声明提前了,console输出的是,函数b中的x。但是x的定义还在后边,所以x的值是undefined。如果删掉内部的生命,则x是1.
|
||||
|
||||
### 全局作用域
|
||||
|
||||
不再任何函数体内定义的变量就是全局作用域。
|
||||
|
||||
* 默认全局变量window。
|
||||
* 顶层寒素的定义也被是为一个全局变量,冰杯绑定到window对象。
|
||||
```
|
||||
function foo() {
|
||||
alert('foo');
|
||||
}
|
||||
|
||||
foo(); // 直接调用foo()
|
||||
window.foo(); // 通过window.foo()调用
|
||||
```
|
||||
|
||||
### 名字空间
|
||||
|
||||
全局变量会绑定到window上,不同的JavaScript文件如果使用了相同的全局变量,或者定义了相同名字的顶层函数,都会造成命名冲突,并且很难被发现。
|
||||
|
||||
减少冲突的一个方法是把自己的所有变量和函数全部绑定到一个全局变量中。例如:
|
||||
```
|
||||
// 唯一的全局变量MYAPP:
|
||||
var MYAPP = {};
|
||||
|
||||
// 其他变量:
|
||||
MYAPP.name = 'myapp';
|
||||
MYAPP.version = 1.0;
|
||||
|
||||
// 其他函数:
|
||||
MYAPP.foo = function () {
|
||||
return 'foo';
|
||||
};
|
||||
|
||||
```
|
||||
把自己的代码全部放入唯一的名字空间MYAPP中,会大大减少全局变量冲突的可能。
|
||||
|
||||
### 局部作用域
|
||||
|
||||
javascript的变量作用域只有函数内部。在for循环语句块中无法定义具有局部作用域变量的。
|
||||
|
||||
可以使用let代替var申请块级作用域变量。
|
||||
|
||||
|
||||
```
|
||||
function foo() {
|
||||
var sum = 0;
|
||||
for (let i=0; i<100; i++) {
|
||||
sum += i;
|
||||
}
|
||||
// SyntaxError:
|
||||
i += 1;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### 解构赋值
|
||||
|
||||
```
|
||||
//数组的结构赋值
|
||||
var [x, y, z] = ['hello', 'JavaScript', 'ES6'];
|
||||
|
||||
//嵌套数组的结构赋值
|
||||
let [x, [y, z]] = ['hello', ['JavaScript', 'ES6']];
|
||||
|
||||
//对象的解构赋值
|
||||
var person = {
|
||||
name: '小明',
|
||||
age: 20,
|
||||
gender: 'male',
|
||||
passport: 'G-12345678',
|
||||
school: 'No.4 middle school',
|
||||
address: {
|
||||
city: 'Beijing',
|
||||
street: 'No.1 Road',
|
||||
zipcode: '100001'
|
||||
}
|
||||
};
|
||||
var {name, address: {city="he", zip}} = person;//使用默认赋值
|
||||
name; // '小明'
|
||||
city; // 'Beijing'
|
||||
zip; // undefined, 因为属性名是zipcode而不是zip
|
||||
// 注意: address不是变量,而是为了让city和zip获得嵌套的address对象的属性:
|
||||
address; // Uncaught ReferenceError: address is not defined
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 3 变量的引用
|
||||
|
||||
* JavaScript中的变量都是引用。所以直接赋值,会将引用传递给另一个变量。应该通过创建新的类型,然后进行值的复制。
|
||||
|
||||
```
|
||||
a={r:1};
|
||||
b=a;
|
||||
a.x=5;
|
||||
b;//{r:1,x=5}
|
||||
```
|
||||
|
||||
## 4 箭头函数
|
||||
|
||||
### 箭头函数的定义
|
||||
```
|
||||
x => x*x
|
||||
|
||||
(x, y) => x * x + y * y
|
||||
|
||||
// 无参数:
|
||||
() => 3.14
|
||||
|
||||
// 可变参数:
|
||||
(x, y, ...rest) => {
|
||||
var i, sum = x + y;
|
||||
for (i=0; i<rest.length; i++) {
|
||||
sum += rest[i];
|
||||
}
|
||||
return sum;
|
||||
}
|
||||
```
|
||||
|
||||
### 箭头函数的this
|
||||
|
||||
箭头函数内this指针指向当前词法作用域的对象。指向函数外层的对象。而且this指针无法更高绑定。
|
||||
|
||||
```
|
||||
var obj = {
|
||||
birth: 1990,
|
||||
getAge: function () {
|
||||
var b = this.birth; // 1990
|
||||
var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
|
||||
return fn();
|
||||
}
|
||||
};
|
||||
obj.getAge();//25
|
||||
```
|
||||
|
||||
## 6 generator函数
|
||||
|
||||
### generator函数定义
|
||||
|
||||
```
|
||||
function* foo(x) {
|
||||
yield x + 1;
|
||||
yield x + 2;
|
||||
return x + 3;
|
||||
}
|
||||
```
|
||||
### generator函数调用
|
||||
```
|
||||
function* fib(max) {
|
||||
var
|
||||
t,
|
||||
a = 0,
|
||||
b = 1,
|
||||
n = 0;
|
||||
while (n < max) {
|
||||
yield a;
|
||||
[a, b] = [b, a + b];
|
||||
n ++;
|
||||
}
|
||||
return;
|
||||
}
|
||||
```
|
||||
|
||||
直接调用调用,仅仅创建了一个generator对象,没有执行函数。不断调用next()方法,可以执行generator函数执行。每次遇到yield返回一次。
|
||||
```
|
||||
var f = fib(5);//一个generator对象
|
||||
f.next(); // {value: 0, done: false}
|
||||
f.next(); // {value: 1, done: false}
|
||||
f.next(); // {value: 1, done: false}
|
||||
f.next(); // {value: 2, done: false}
|
||||
f.next(); // {value: 3, done: false}
|
||||
f.next(); // {value: undefined, done: true}
|
||||
```
|
||||
|
||||
利用for of方法访问generator对象。
|
||||
|
||||
```
|
||||
for (var x of fib(10)) {
|
||||
console.log(x); // 依次输出0, 1, 1, 2, 3, ...
|
||||
}
|
||||
```
|
||||
|
||||
### 特点
|
||||
因为generator可以在执行过程中多次返回,所以它看上去就像一个可以记住执行状态的函数,利用这一点,写一个generator就可以实现需要用面向对象才能实现的功能。
|
||||
|
||||
generator还有另一个巨大的好处,就是把异步回调代码变成“同步”代码。
|
||||
|
||||
|
||||
简单来说,就是一个局部状态变量。
|
||||
|
||||
|
||||
|
||||
## 7 装饰器
|
||||
|
||||
> (java中称为注解,Python也称为装饰器)
|
||||
|
||||
因为JavaScript是脚本语言所有的对象、变量都是动态的。可以随时解绑。可以利用重新绑定的方法,修改原来的函数,为原来的函数添加装饰器。
|
||||
```
|
||||
//统计函数的执行次数
|
||||
var count = 0;
|
||||
var oldParseInt = parseInt; // 保存原函数
|
||||
|
||||
window.parseInt = function () {
|
||||
count += 1;
|
||||
return oldParseInt.apply(null, arguments); // 调用原函数
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
208
JavaScript/4JavaScript高阶函数.md
Normal file
208
JavaScript/4JavaScript高阶函数.md
Normal file
@@ -0,0 +1,208 @@
|
||||
## 1 高阶函数定义
|
||||
|
||||
JavaScript的函数其实都指向某个变量。既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数。
|
||||
|
||||
```
|
||||
function add(x, y, f) {
|
||||
return f(x) + f(y);
|
||||
}
|
||||
|
||||
x = -5;
|
||||
y = 6;
|
||||
f = Math.abs;
|
||||
f(x) + f(y) ==> Math.abs(-5) + Math.abs(6) ==> 11;
|
||||
return 11;
|
||||
```
|
||||
|
||||
## 2 MapReduce
|
||||
|
||||
map:对集合分割运算。
|
||||
reduce:对分割运算的结果进行聚合。
|
||||
|
||||
### array.map
|
||||
map()方法本身可以接受一个函数,作用在数组的每一个元素,并拼接成新的数组。是一个高阶函数。
|
||||
|
||||
|
||||
```
|
||||
function pow(x) {
|
||||
return x * x;
|
||||
}
|
||||
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
|
||||
var results = arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]
|
||||
console.log(results);
|
||||
|
||||
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
|
||||
arr.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']
|
||||
```
|
||||
|
||||
### array.reduce
|
||||
|
||||
再看reduce的用法。Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上,这个函数必须接收两个参数,reduce()把结果继续和序列的下一个元素做累积计算,其效果就是:
|
||||
```
|
||||
[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
|
||||
```
|
||||
|
||||
```
|
||||
var arr = [1, 3, 5, 7, 9];
|
||||
arr.reduce(function (x, y) {
|
||||
return x + y;
|
||||
}); // 25
|
||||
```
|
||||
|
||||
## 3 filter
|
||||
|
||||
### 过滤元素
|
||||
把Array的某些元素过滤掉,然后返回剩下的元素
|
||||
|
||||
Array的filter()也接收一个函数。filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素。
|
||||
|
||||
```
|
||||
var arr = [1, 2, 4, 5, 6, 9, 10, 15];
|
||||
var r = arr.filter(function (x) {
|
||||
return x % 2 !== 0;
|
||||
});
|
||||
r; // [1, 5, 9, 15]
|
||||
```
|
||||
|
||||
### 回调函数
|
||||
filter()接收的回调函数,其实可以有多个参数。通常我们仅使用第一个参数,表示Array的某个元素。回调函数还可以接收另外两个参数,表示元素的位置和数组本身:
|
||||
|
||||
```
|
||||
var arr = ['A', 'B', 'C'];
|
||||
var r = arr.filter(function (element, index, self) {
|
||||
console.log(element); // 依次打印'A', 'B', 'C'
|
||||
console.log(index); // 依次打印0, 1, 2
|
||||
console.log(self); // self就是变量arr
|
||||
return true;
|
||||
});
|
||||
```
|
||||
|
||||
利用回调函数,除掉重复元素
|
||||
|
||||
```
|
||||
|
||||
var r,arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
|
||||
r = arr.filter(function (element, index, self) {
|
||||
return self.indexOf(element) === index;
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
## 4 sort
|
||||
|
||||
默认把所有的元素转换为String进行排序。可以接受比较函数进行排序。
|
||||
```
|
||||
arr.sort(function (x, y) {
|
||||
if (x < y) {
|
||||
return -1;
|
||||
}
|
||||
if (x > y) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
console.log(arr); // [1, 2, 10, 20]
|
||||
```
|
||||
## 5 every
|
||||
every()方法可以判断数组的所有元素是否满足测试条件。
|
||||
|
||||
```
|
||||
var arr = ['Apple', 'pear', 'orange'];
|
||||
console.log(arr.every(function (s) {
|
||||
return s.length > 0;
|
||||
})); // true, 因为每个元素都满足s.length>0
|
||||
|
||||
console.log(arr.every(function (s) {
|
||||
return s.toLowerCase() === s;
|
||||
})); // false, 因为不是每个元素都全部是小写
|
||||
```
|
||||
## 6 find
|
||||
find()方法用于查找符合条件的第一个元素,如果找到了,返回这个元素,否则,返回undefined
|
||||
|
||||
```
|
||||
var arr = ['Apple', 'pear', 'orange'];
|
||||
console.log(arr.find(function (s) {
|
||||
return s.toLowerCase() === s;
|
||||
})); // 'pear', 因为pear全部是小写
|
||||
|
||||
console.log(arr.find(function (s) {
|
||||
return s.toUpperCase() === s;
|
||||
})); // undefined, 因为没有全部是大写的元素
|
||||
```
|
||||
|
||||
## 7 findIndex
|
||||
findIndex()和find()类似,也是查找符合条件的第一个元素,不同之处在于findIndex()会返回这个元素的索引,如果没有找到,返回-1:
|
||||
|
||||
```
|
||||
var arr = ['Apple', 'pear', 'orange'];
|
||||
console.log(arr.findIndex(function (s) {
|
||||
return s.toLowerCase() === s;
|
||||
})); // 1, 因为'pear'的索引是1
|
||||
|
||||
console.log(arr.findIndex(function (s) {
|
||||
return s.toUpperCase() === s;
|
||||
})); // -1
|
||||
```
|
||||
|
||||
## 8 forEach
|
||||
forEach()和map()类似,它也把每个元素依次作用于传入的函数,但不会返回新的数组。forEach()常用于遍历数组,因此,传入的函数不需要返回值:
|
||||
|
||||
|
||||
```
|
||||
var arr = ['Apple', 'pear', 'orange'];
|
||||
arr.forEach(console.log); // 依次打印每个元素
|
||||
```
|
||||
|
||||
## 9 闭包
|
||||
> 闭包的出现,可以获取函数内部的变量且变量一直在内存当中.最简单的理解,一个作用域使用了另一个作用域中的变量。比如外层函数通过传参的方式,把某个变量传递给内层函数,就产生了闭包
|
||||
>
|
||||
### 函数可以作为返回值实现惰性求值
|
||||
高阶函数除了可以接受函数作为参数外,还可以把函数作为结果值返回。
|
||||
|
||||
可以通过函数作为返回值,实现懒求值。
|
||||
|
||||
```
|
||||
function lazy_sum(arr) {
|
||||
var sum = function () {
|
||||
return arr.reduce(function (x, y) {
|
||||
return x + y;
|
||||
});
|
||||
}
|
||||
return sum;
|
||||
}
|
||||
|
||||
//调用函数f时,才真正计算求和的结果:
|
||||
|
||||
f(); // 15
|
||||
```
|
||||
|
||||
### 函数作为返回值实现循环惰性求值
|
||||
> 感觉与Python的生成器yield惰性求值很像,这里介绍了其根本的原理。
|
||||
|
||||
|
||||
```
|
||||
function count() {
|
||||
var arr = [];
|
||||
for (var i=1; i<=3; i++) {
|
||||
arr.push((function (n) {
|
||||
return function () {
|
||||
return n * n;
|
||||
}
|
||||
})(i));
|
||||
}
|
||||
return arr;
|
||||
}
|
||||
|
||||
var results = count();
|
||||
var f1 = results[0];
|
||||
var f2 = results[1];
|
||||
var f3 = results[2];
|
||||
|
||||
f1(); // 1
|
||||
f2(); // 4
|
||||
f3(); // 9
|
||||
```
|
||||
|
||||
## 10 回调函数与多线程异步通信
|
||||
|
||||
回调函数就是一个函数,它是在我们启动一个异步任务的时候就告诉它:等你完成了这个任务之后要干什么。这样一来主线程几乎不用关心异步任务的状态了,他自己会善始善终。
|
||||
22
JavaScript/5JavaScript异常处理.md
Normal file
22
JavaScript/5JavaScript异常处理.md
Normal file
@@ -0,0 +1,22 @@
|
||||
## 1 异常处理语句
|
||||
|
||||
|
||||
try 语句使您能够测试代码块中的错误。
|
||||
|
||||
catch 语句允许您处理错误。
|
||||
|
||||
throw 语句允许您创建自定义错误。
|
||||
|
||||
finally 使您能够执行代码,在 try 和 catch 之后,无论结果如何。
|
||||
|
||||
```
|
||||
try {
|
||||
供测试的代码块
|
||||
}
|
||||
catch(err) {
|
||||
处理错误的代码块
|
||||
}
|
||||
finally {
|
||||
无论 try / catch 结果如何都执行的代码块
|
||||
}
|
||||
```
|
||||
148
JavaScript/6JavaScript对象.md
Normal file
148
JavaScript/6JavaScript对象.md
Normal file
@@ -0,0 +1,148 @@
|
||||
## 1 对象定义
|
||||
|
||||
* 在JavaScript中所有事物都是对象。
|
||||
* 对象也是一个变量,可以包含任意值。`var car = {type:"Fiat", model:500, color:"white"};`
|
||||
|
||||
## 2 对象属性
|
||||
|
||||
### 定义
|
||||
* 键值对
|
||||
|
||||
### 访问
|
||||
|
||||
* person.lastName
|
||||
* person["lastName"]
|
||||
|
||||
|
||||
## 3 对象方法
|
||||
|
||||
|
||||
### 对象绑定的函数称为方法
|
||||
|
||||
```
|
||||
var xiaoming = {
|
||||
name: '小明',
|
||||
birth: 1990,
|
||||
age: function () {
|
||||
var y = new Date().getFullYear();
|
||||
return y - this.birth;
|
||||
}
|
||||
};
|
||||
|
||||
xiaoming.age; // function xiaoming.age()
|
||||
xiaoming.age(); // 今年调用是25,明年调用就变成26了
|
||||
```
|
||||
|
||||
### this变量
|
||||
|
||||
* this指针一直指向当前的对象。
|
||||
* 如果是全局对象,this指向window
|
||||
* this指向的具体位置,视调用者不同而改变。
|
||||
|
||||
```
|
||||
function getAge() {
|
||||
var y = new Date().getFullYear();
|
||||
return y - this.birth;
|
||||
}
|
||||
|
||||
var xiaoming = {
|
||||
name: '小明',
|
||||
birth: 1990,
|
||||
age: getAge
|
||||
};
|
||||
|
||||
xiaoming.age(); // 25, 正常结果,this指向小明。
|
||||
getAge(); // NaN,this指向window
|
||||
```
|
||||
* 对象的方法中的嵌套方法,this指向不明确(window)。所以,如果在子作用域调用本作用域的内容,定义that进行指针传递。
|
||||
```
|
||||
var xiaoming = {
|
||||
name: '小明',
|
||||
birth: 1990,
|
||||
age: function () {
|
||||
var that = this; // 在方法内部一开始就捕获this
|
||||
function getAgeFromBirth() {
|
||||
var y = new Date().getFullYear();
|
||||
return y - that.birth; // 用that而不是this
|
||||
}
|
||||
return getAgeFromBirth();
|
||||
}
|
||||
};
|
||||
|
||||
xiaoming.age(); // 25
|
||||
```
|
||||
|
||||
### apply()
|
||||
使用函数的apply属性,重新定义this指针的指向。
|
||||
|
||||
即,将函数应用到某个对象上。
|
||||
|
||||
函数本身的apply方法,它接收两个参数,第一个参数就是需要绑定的this变量,第二个参数是Array,表示函数本身的参数。
|
||||
|
||||
```
|
||||
function getAge() {
|
||||
var y = new Date().getFullYear();
|
||||
return y - this.birth;
|
||||
}
|
||||
|
||||
var xiaoming = {
|
||||
name: '小明',
|
||||
birth: 1990,
|
||||
age: getAge
|
||||
};
|
||||
|
||||
xiaoming.age(); // 25
|
||||
getAge.apply(xiaoming, []); // 25, this指向xiaoming, 参数为空
|
||||
```
|
||||
|
||||
### call()
|
||||
|
||||
使用函数的call属性,同样可以定义this指针的具体指向。
|
||||
|
||||
与apply()类似的方法,唯一区别是apply()把参数打包成Array再传入;call()把参数按顺序传入。
|
||||
|
||||
比如调用Math.max(3, 5, 4),分别用apply()和call()实现如下:
|
||||
|
||||
```
|
||||
Math.max.apply(null, [3, 5, 4]); // 5
|
||||
Math.max.call(null, 3, 5, 4); // 5
|
||||
```
|
||||
|
||||
## 4 new运算符
|
||||
|
||||
### 实例
|
||||
new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。
|
||||
|
||||
```
|
||||
function Car(make, model, year) {
|
||||
this.make = make;
|
||||
this.model = model;
|
||||
this.year = year;
|
||||
}
|
||||
|
||||
const car1 = new Car('Eagle', 'Talon TSi', 1993);
|
||||
|
||||
console.log(car1.make);
|
||||
// expected output: "Eagle"
|
||||
```
|
||||
|
||||
### 语法
|
||||
|
||||
```
|
||||
new constructor([arguments])
|
||||
```
|
||||
|
||||
### 原理
|
||||
|
||||
1. 创建一个空的简单JavaScript对象(即{});
|
||||
2. 链接该对象(即设置该对象的构造函数)到另一个对象 ;
|
||||
3. 将步骤1新创建的对象作为this的上下文 ;
|
||||
4. 如果该函数没有返回对象,则返回this。
|
||||
|
||||
|
||||
### 步骤
|
||||
|
||||
创建一个用户自定义的对象需要两步:
|
||||
|
||||
1. 通过编写函数来定义对象类型。
|
||||
2. 通过 new 来创建对象实例。
|
||||
127
JavaScript/7JavaScript内建对象.md
Normal file
127
JavaScript/7JavaScript内建对象.md
Normal file
@@ -0,0 +1,127 @@
|
||||
# JavaScrip对象
|
||||
## 0 对象
|
||||
|
||||
### typeof
|
||||
在JavaScript一切皆对象。
|
||||
|
||||
使用typeof运算符获取对象类型。返回对象类型。
|
||||
|
||||
### 包装对象
|
||||
|
||||
将基本类型转换为对象类型。
|
||||
```
|
||||
var n = new Number(123); // 123,生成了新的包装类型
|
||||
var b = new Boolean(true); // true,生成了新的包装类型
|
||||
var s = new String('str'); // 'str',生成了新的包装类型
|
||||
```
|
||||
## 1 JavaScript内建对象
|
||||
|
||||
### Array对象
|
||||
|
||||
Array 对象用于在变量中存储多个值
|
||||
### Boolean对象
|
||||
|
||||
Boolean 对象用于转换一个不是 Boolean 类型的值转换为 Boolean 类型值 (true 或者false).
|
||||
### Date对象
|
||||
|
||||
Date 对象用于处理日期与时间。
|
||||
### Math对象
|
||||
|
||||
Math 对象用于执行数学任务。
|
||||
### Number对象
|
||||
原始数值的包装对象
|
||||
### String对象
|
||||
|
||||
处理文本字符串
|
||||
### RegExp对象
|
||||
|
||||
正则表达式字符串的处理
|
||||
### 全局属性、函数
|
||||
|
||||
encode、decode系列
|
||||
数据类型转换系列
|
||||
### Error对象
|
||||
在错误发生时,提供了错误的提示信息。
|
||||
|
||||
## 2 Browser对象
|
||||
|
||||
### window对象
|
||||
|
||||
表示浏览器打开的窗口。是默认的全局对象。默认绑定了alert等方法。
|
||||
|
||||
### Navigator对象
|
||||
|
||||
包含浏览器相关的信息。
|
||||
|
||||
### Screen对象
|
||||
|
||||
客户端显示屏相关的信息。
|
||||
### History对象
|
||||
|
||||
包含用户在浏览器中访问过的URL。是window对象的一部分。
|
||||
|
||||
### Location对象
|
||||
|
||||
包含当前的URL信息。是window对象的一部分。
|
||||
### 存储对象
|
||||
|
||||
webAPI提供了sessionStorage(会话存储)和localStorage(本地存储)两个对象来对网页的数据进行增删查改操作。
|
||||
|
||||
localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。
|
||||
|
||||
sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。
|
||||
|
||||
|
||||
## 3 DOM对象
|
||||
|
||||
* 文档是一个文档节点
|
||||
* 所有的HTML元素是元素节点
|
||||
* 所有的HTML属性是属性节点
|
||||
* 文本插入到HTML元素是文本节点
|
||||
* 注释是注释节点。
|
||||
### DOM Document对象
|
||||
|
||||
当浏览器载入 HTML 文档, 它就会成为 Document 对象。
|
||||
|
||||
Document 对象是 HTML 文档的根节点。
|
||||
|
||||
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
|
||||
|
||||
Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问
|
||||
### DOM元素对象
|
||||
|
||||
元素对象代表着一个 HTML 元素。
|
||||
|
||||
元素对象 的 子节点可以是, 可以是元素节点,文本节点,注释节点。
|
||||
|
||||
NodeList 对象 代表了节点列表,类似于 HTML元素的子节点集合。
|
||||
|
||||
元素可以有属性。属性属于属性节点(查看下一章节)。
|
||||
### DOM属性对象
|
||||
|
||||
在 HTML DOM 中, Attr 对象 代表一个 HTML 属性。
|
||||
|
||||
HTML属性总是属于HTML元素。
|
||||
|
||||
在 HTML DOM 中, the NamedNodeMap 对象 表示一个无顺序的节点列表。
|
||||
|
||||
我们可通过节点名称来访问 NamedNodeMap 中的节点。
|
||||
|
||||
### DOM事件对象
|
||||
|
||||
HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。
|
||||
|
||||
事件通常与函数结合使用,函数不会在事件发生前被执行! (如用户点击按钮)。
|
||||
|
||||
### DOMConsole对象
|
||||
|
||||
Console 对象提供了访问浏览器调试模式的信息到控制台。
|
||||
|
||||
|
||||
### CSS Style Declaration对象
|
||||
|
||||
CSSStyleDeclaration 对象表示一个 CSS 属性-值(property-value)对的集合。
|
||||
### DOMHTMLCollection
|
||||
HTMLCollection 是 HTML 元素的集合。
|
||||
|
||||
HTMLCollection 对象类似一个包含 HTML 元素的数组列表。
|
||||
85
JavaScript/8JavaScript事件响应.md
Normal file
85
JavaScript/8JavaScript事件响应.md
Normal file
@@ -0,0 +1,85 @@
|
||||
## 1 常见事件
|
||||
|
||||
> 本质上也是一种异步通信的方式。基于回调的异步通信,和基于事件响应机制的异步通信。
|
||||
|
||||
### 鼠标事件
|
||||
|
||||
* onclick 用户点击了 HTML 元素
|
||||
* ondblclick 当用户双击某个对象时调用的事件句柄
|
||||
* onmousedown 鼠标按钮被按下。
|
||||
* onmouseenter 当鼠标指针移动到元素上时触发。
|
||||
* onmouseleave 当鼠标指针移出元素时触发
|
||||
* onmousemove 鼠标被移动。
|
||||
* onmouseover 鼠标移到某元素之上。
|
||||
* onmouseout 鼠标从某元素移开。
|
||||
* onmouseup 鼠标按键被松开。
|
||||
|
||||
|
||||
### 键盘事件
|
||||
|
||||
|
||||
* onkeydown 用户按下键盘按键
|
||||
* onkeypress 某个键盘按键被按下并松开。
|
||||
* onkeyup 某个键盘按键被松开。
|
||||
### 框架对象事件
|
||||
|
||||
* onabort 图像的加载被中断。 ( <object>) 2
|
||||
* onbeforeunload 该事件在即将离开页面(刷新或关闭)时触发 2
|
||||
* onerror 在加载文档或图像时发生错误。 ( <object>, <body>和 <frameset>)
|
||||
* onhashchange 该事件在当前 URL 的锚部分发生修改时触发。
|
||||
* onload 一张页面或一幅图像完成加载。 2
|
||||
* onpageshow 该事件在用户访问页面时触发
|
||||
* onpagehide 该事件在用户离开当前网页跳转到另外一个页面时触发
|
||||
* onresize 窗口或框架被重新调整大小。 2
|
||||
* onscroll 当文档被滚动时发生的事件。 2
|
||||
* onunload 用户退出页面。 ( <body> 和 <frameset>)
|
||||
|
||||
### 表单事件
|
||||
|
||||
* onblur 元素失去焦点时触发 2
|
||||
* onchange 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>) 2
|
||||
* onfocus 元素获取焦点时触发 2
|
||||
* onfocusin 元素即将获取焦点时触发 2
|
||||
* onfocusout 元素即将失去焦点时触发 2
|
||||
* oninput 元素获取用户输入时触发 3
|
||||
* onreset 表单重置时触发 2
|
||||
* onsearch 用户向搜索域输入文本时触发 ( <input="search">)
|
||||
* onselect 用户选取文本时触发 ( <input> 和 <textarea>) 2
|
||||
* onsubmit 表单提交时触发
|
||||
### 剪贴板事件
|
||||
### 打印事件
|
||||
### 拖动事件
|
||||
|
||||
* ondrag 该事件在元素正在拖动时触发
|
||||
* ondragend 该事件在用户完成元素的拖动时触发
|
||||
* ondragenter 该事件在拖动的元素进入放置目标时触发
|
||||
* ondragleave 该事件在拖动元素离开放置目标时触发
|
||||
* ondragover 该事件在拖动元素在放置目标上时触发
|
||||
* ondragstart 该事件在用户开始拖动元素时触发
|
||||
* ondrop 该事件在拖动元素放置在目标区域时触发*
|
||||
### 多媒体事件
|
||||
|
||||
|
||||
### 动画事件
|
||||
|
||||
* animationend 该事件在 CSS 动画结束播放时触发
|
||||
* animationiteration 该事件在 CSS 动画重复播放时触发
|
||||
* animationstart 该事件在 CSS 动画开始播放时触发
|
||||
### 过度事件
|
||||
### 其他事件
|
||||
|
||||
## 2
|
||||
## 3 事件处理
|
||||
|
||||
### 通过HTML事件属性,绑定JS方法
|
||||
```
|
||||
<button onclick="displayDate()">点这里</button>
|
||||
```
|
||||
|
||||
### 通过JS给HTML对象添加事件属性,并绑定方法
|
||||
|
||||
```
|
||||
<script>
|
||||
document.getElementById("myBtn").onclick=function(){displayDate()};
|
||||
</script>
|
||||
```
|
||||
54
JavaScript/9JavaScriptJSON.md
Normal file
54
JavaScript/9JavaScriptJSON.md
Normal file
@@ -0,0 +1,54 @@
|
||||
## 1 JSON 简介
|
||||
|
||||
JSON 是存储和传输数据的格式。
|
||||
|
||||
JSON 经常在数据从服务器发送到网页时使用。
|
||||
|
||||
* JSON 指的是 JavaScript Object Notation
|
||||
* JSON 是轻量级的数据交换格式
|
||||
* JSON 独立于语言 *
|
||||
* JSON 是“自描述的”且易于理解
|
||||
|
||||
|
||||
## 2 JSON使用
|
||||
### 基本语法
|
||||
|
||||
* 数据是名称/值对
|
||||
* 数据由逗号分隔
|
||||
* 花括号保存对象
|
||||
* 方括号保存数组
|
||||
### JSONObject
|
||||
JSON 数据的书写方式是名称/值对。
|
||||
|
||||
名称/值对由(双引号中的)字段名构成,其后是冒号,再其后是值:
|
||||
JSON 对象是在花括号内书写的。
|
||||
```
|
||||
{"firstName":"Bill", "lastName":"Gates"}
|
||||
```
|
||||
### JSONArray
|
||||
JSON 数组在方括号中书写。
|
||||
|
||||
```
|
||||
"employees":[
|
||||
{"firstName":"Bill", "lastName":"Gates"},
|
||||
{"firstName":"Steve", "lastName":"Jobs"},
|
||||
{"firstName":"Alan", "lastName":"Turing"}
|
||||
]
|
||||
```
|
||||
### JSONString
|
||||
```
|
||||
var text = '{ "employees" : [' +
|
||||
'{ "firstName":"Bill" , "lastName":"Gates" },' +
|
||||
'{ "firstName":"Steve" , "lastName":"Jobs" },' +
|
||||
'{ "firstName":"Alan" , "lastName":"Turing" } ]}';
|
||||
```
|
||||
### JSONString转换为JavaScript对象
|
||||
```
|
||||
var obj = JSON.parse(text);
|
||||
```
|
||||
|
||||
### JavaScript对象转换为JSONString
|
||||
|
||||
```
|
||||
var myJSON = JSON.stringify(obj);
|
||||
```
|
||||
18
JavaScript/AJAX/1ajax简介.md
Normal file
18
JavaScript/AJAX/1ajax简介.md
Normal file
@@ -0,0 +1,18 @@
|
||||
## 1 基础
|
||||
|
||||
### 简介
|
||||
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
|
||||
|
||||
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
|
||||
|
||||
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
|
||||
|
||||
AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
|
||||
|
||||
### 原理
|
||||
异步的JavaScript和XML。创建快速动态网页技术。在后台与服务器进行少量的数据交换,实现网页的异步更新。
|
||||
|
||||
|
||||
* 使用JS创建XMLHTTPRequest对象,发送HTTPRequest内容。
|
||||
* 使用JS处理被返回的数据,更新页面内容。
|
||||
|
||||
64
JavaScript/AJAX/2ajax应用.md
Normal file
64
JavaScript/AJAX/2ajax应用.md
Normal file
@@ -0,0 +1,64 @@
|
||||
## 1 实例
|
||||
|
||||
```
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script>
|
||||
function loadXMLDoc()
|
||||
{
|
||||
var xmlhttp;
|
||||
if (window.XMLHttpRequest)
|
||||
{
|
||||
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
|
||||
xmlhttp=new XMLHttpRequest();
|
||||
}
|
||||
else
|
||||
{
|
||||
// IE6, IE5 浏览器执行代码
|
||||
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
|
||||
}
|
||||
xmlhttp.onreadystatechange=function()
|
||||
{
|
||||
if (xmlhttp.readyState==4 && xmlhttp.status==200)
|
||||
{
|
||||
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
|
||||
}
|
||||
}
|
||||
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
|
||||
xmlhttp.send();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
|
||||
<button type="button" onclick="loadXMLDoc()">修改内容</button>
|
||||
|
||||
</body>
|
||||
```
|
||||
|
||||
## 2 说明
|
||||
|
||||
* 创建xmlhttp=new XMLHTTPRequest()对象。(浏览器的内建对象)
|
||||
* xmlhttp.open(method,url,async)打开http请求async=true,异步执行。async=false同步执行,JavaScript会等到服务器返回后才执行。
|
||||
* xmlhttp.send(string);发送http请求
|
||||
* xmlhttp.responseText;返回字符串形式
|
||||
* xmlhttp.responseXML;使用XML解析返回值
|
||||
|
||||
## 3 事件响应机制
|
||||
|
||||
* onreadystatechange:存储函数,当readyState属性改变时,调用该函数(也是回调函数。)
|
||||
* readyState,存储有状态。0:请求初始化,1已经建立连接,2请求已接收,3请求处理中,4请求已完成
|
||||
* status:200:OK,404:未找到页面。
|
||||
|
||||
```
|
||||
xmlhttp.onreadystatechange=function()
|
||||
{
|
||||
if (xmlhttp.readyState==4 && xmlhttp.status==200)
|
||||
{
|
||||
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -1,30 +0,0 @@
|
||||
## 1 条件判断
|
||||
|
||||
### if-else
|
||||
```
|
||||
var age = 20;
|
||||
if (age >= 18) { // 如果age >= 18为true,则执行if语句块
|
||||
alert('adult');
|
||||
} else { // 否则执行else语句块
|
||||
alert('teenager');
|
||||
}
|
||||
//else是可选的
|
||||
//如果语句块只有一句话,可以省略大括号。
|
||||
```
|
||||
|
||||
### if-else可以嵌套
|
||||
|
||||
```
|
||||
var age = 3;
|
||||
if (age >= 18) {
|
||||
alert('adult');
|
||||
} else {
|
||||
if (age >= 6) {
|
||||
alert('teenager');
|
||||
} else {
|
||||
alert('kid');
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
0
JavaScript/NodeJS/10GET&POST.md
Normal file
0
JavaScript/NodeJS/10GET&POST.md
Normal file
0
JavaScript/NodeJS/11Express.md
Normal file
0
JavaScript/NodeJS/11Express.md
Normal file
0
JavaScript/NodeJS/12Express.md
Normal file
0
JavaScript/NodeJS/12Express.md
Normal file
88
JavaScript/NodeJS/1简介.md
Normal file
88
JavaScript/NodeJS/1简介.md
Normal file
@@ -0,0 +1,88 @@
|
||||
## 1 基础
|
||||
|
||||
### 为什么
|
||||
|
||||
JavaScript是运行在浏览器的脚本。为了能让JavaScript在服务器上运行,执行服务器上的业务逻辑,产生了NodeJS。
|
||||
|
||||
### 是什么
|
||||
|
||||
Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
|
||||
Node.js是一个事件驱动I/O服务端JavaScript环境。
|
||||
|
||||
### 优势
|
||||
|
||||
* 单线程高并发。通过JS的回调方法,实现了并发。
|
||||
* 自带web服务器模块。
|
||||
|
||||
|
||||
## 2 helloworld
|
||||
|
||||
### server.js
|
||||
```
|
||||
var http = require('http');
|
||||
|
||||
http.createServer(function (request, response) {
|
||||
|
||||
// 发送 HTTP 头部
|
||||
// HTTP 状态值: 200 : OK
|
||||
// 内容类型: text/plain
|
||||
response.writeHead(200, {'Content-Type': 'text/plain'});
|
||||
|
||||
// 发送响应数据 "Hello World"
|
||||
response.end('Hello World\n');
|
||||
}).listen(8888);
|
||||
|
||||
// 终端打印如下信息
|
||||
console.log('Server running at http://127.0.0.1:8888/');
|
||||
```
|
||||
|
||||
```
|
||||
node server.js
|
||||
```
|
||||
|
||||
## 3 NPM
|
||||
nodeJS的包管理器。
|
||||
|
||||
### 安装
|
||||
```
|
||||
$ npm install <Module Name>
|
||||
$ npm uninstall express
|
||||
|
||||
npm install express # 本地安装
|
||||
npm install express -g # 全局安装
|
||||
npm install express@1.3.4 # 指定版本安装
|
||||
```
|
||||
|
||||
### 查看
|
||||
```
|
||||
npm list -g
|
||||
npm ls
|
||||
npm search express
|
||||
npm info jquery 查看jQuery相关的信息
|
||||
```
|
||||
|
||||
### 创建
|
||||
|
||||
```
|
||||
npm init//创建npm模块
|
||||
npm adduser//注册npm
|
||||
npm publish//发布模块
|
||||
```
|
||||
|
||||
### 初始化依赖
|
||||
```
|
||||
npm install
|
||||
```
|
||||
### package.json
|
||||
|
||||
* name - 包名。
|
||||
* version - 包的版本号。
|
||||
* description - 包的描述。
|
||||
* homepage - 包的官网 url 。
|
||||
* author - 包的作者姓名。
|
||||
* contributors - 包的其他贡献者姓名。
|
||||
* dependencies - 依赖包列表。如果依赖包没有安装,npm 会自动将依赖包安装在 node_module 目录下。
|
||||
* repository - 包代码存放的地方的类型,可以是 git 或 svn,git 可在 Github 上。
|
||||
* main - main 字段指定了程序的主入口文件,require('moduleName') 就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js。
|
||||
* keywords - 关键字
|
||||
|
||||
79
JavaScript/NodeJS/2基础.md
Normal file
79
JavaScript/NodeJS/2基础.md
Normal file
@@ -0,0 +1,79 @@
|
||||
## 1交互式解释器
|
||||
|
||||
* 读取 - 读取用户输入,解析输入了Javascript 数据结构并存储在内存中。
|
||||
* 执行 - 执行输入的数据结构
|
||||
* 打印 - 输出结果
|
||||
* 循环 - 循环操作以上步骤直到用户两次按下 ctrl-c 按钮退出。
|
||||
|
||||
> nodeJS提供了交互式解释器的功能,可以进行基本的运算和调试。
|
||||
## 2回调函数
|
||||
|
||||
通过回调函数实现了异步编程。
|
||||
|
||||
```
|
||||
var fs = require("fs");
|
||||
|
||||
fs.readFile('input.txt', function (err, data) {
|
||||
if (err) return console.error(err);
|
||||
console.log(data.toString());
|
||||
});
|
||||
|
||||
console.log("程序执行结束!");
|
||||
```
|
||||
|
||||
## 3工程构建
|
||||
> CommonJS是nodejs的标准。nodejs是commonjs的实现。
|
||||
### 包目录构成
|
||||
* package.json 包描述文件
|
||||
* bin 用于存放二进制文件的目录
|
||||
* lib 用于存放JavaScript代码的目录
|
||||
* doc 用于存放文档的目录
|
||||
### 模块说明
|
||||
|
||||
* CommonJS定义,分为系统模块和自定义模块。
|
||||
* 系统模块包括http模块、URL模块、FS模块
|
||||
* 用户自定义模块把公共的功能抽离成一个单独的js文件。需要通过exports输出,require引入。
|
||||
|
||||
```
|
||||
exports.outapi=innerfunction;
|
||||
const selfmodule = require(".../module.js")
|
||||
selfmodule.outapi();
|
||||
```
|
||||
|
||||
```
|
||||
module.exports obj;
|
||||
const seflmodule = reuqire(".../module.js")
|
||||
```
|
||||
|
||||
### node_moudles文件夹说明
|
||||
|
||||
* 工程构建过程中,会自动扫描node_modules文件夹下的子文件夹。
|
||||
* 如果子文件夹下有index.js,nodejs会自动识别,并做为模块入口。
|
||||
* 如果没有index.js,则nodejs无法识别模块入口。
|
||||
* 如果有package.json,nodejs会读取配置文件,并识别配置文件中的入口。包描述文件
|
||||
|
||||
### package.json说明
|
||||
|
||||
* 使用nmp init,初始化一个nodejs模块,生成一个package.json包描述文件。
|
||||
* 使用npm install,会自动下载nodejs模块对应的所有依赖。
|
||||
```
|
||||
{
|
||||
"name": "first",//模块名字
|
||||
"version": "1.0.0",//模块版本号
|
||||
"main": "app.js",//模块入口
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"keywords": [//模块检索关键词
|
||||
"hello"
|
||||
],
|
||||
"author": "ykl",//模块作者
|
||||
"license": "ISC"//模块开原证书
|
||||
"dependencies":[
|
||||
//^版本号第一位不变,~前两位不变,*版本号都不变
|
||||
]
|
||||
"devDependencies":{
|
||||
//dev工具依赖的包。
|
||||
}
|
||||
}
|
||||
```
|
||||
0
JavaScript/NodeJS/3url模块.md
Normal file
0
JavaScript/NodeJS/3url模块.md
Normal file
0
JavaScript/NodeJS/4supervisor模块.md
Normal file
0
JavaScript/NodeJS/4supervisor模块.md
Normal file
1
JavaScript/NodeJS/5fs模块.md
Normal file
1
JavaScript/NodeJS/5fs模块.md
Normal file
@@ -0,0 +1 @@
|
||||
const fs = re
|
||||
86
JavaScript/NodeJS/6异步回调.md
Normal file
86
JavaScript/NodeJS/6异步回调.md
Normal file
@@ -0,0 +1,86 @@
|
||||
> nodejs最著名的地方,可能就是异步回调了吧。通过异步非阻塞的编程方式,通过回调函数,实现了通信。可以实现宏观上的单线程并发。
|
||||
|
||||
## ES6新特性
|
||||
### let const
|
||||
|
||||
let const 都是块作用域。不是函数的作用域。或是对象作用域。
|
||||
|
||||
### 模板字符串
|
||||
|
||||
```
|
||||
name = 'zhangsan'
|
||||
age = 10
|
||||
console.log(`${name}${age}`)
|
||||
```
|
||||
|
||||
### 箭头函数
|
||||
|
||||
```
|
||||
(err,data)={
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
## 2 异步方法获取数据
|
||||
|
||||
### 不能通过返回值获取异步方法中的数据
|
||||
|
||||
因为return语句执行的时候,内部的运算还没有结束。
|
||||
|
||||
### 通过回调函数获取异步方法中的数据
|
||||
|
||||
```
|
||||
function getData(callback){
|
||||
//异步调用
|
||||
setTimeout(function(){
|
||||
var name = "zhangsan ";
|
||||
callback(name)
|
||||
},1000);
|
||||
}
|
||||
|
||||
getData(function(aaa){
|
||||
console.log(aaa);
|
||||
})
|
||||
```
|
||||
|
||||
### 通过promise获取异步方法中的数据
|
||||
|
||||
promise添加回调方法。p.then调用的时候,复写回调方法。与之前的回调方法很相似。相当于promise代替了之前的getData方法,调用异步方法。
|
||||
```
|
||||
var p = new Promise(function(resolve,reject){
|
||||
//异步调用
|
||||
setTimeout(function(){
|
||||
var name = "zhangsan ";
|
||||
callback(name)
|
||||
},1000);
|
||||
})
|
||||
|
||||
p.then(function(data){
|
||||
console.log(data);
|
||||
})
|
||||
```
|
||||
|
||||
### async、await和promise实现异步非阻塞通信
|
||||
|
||||
* async,想要同步必须返回promise类型
|
||||
* await,等待异步方法执行完成
|
||||
* promise,能够作为异步方法标记,await会等被标记为promise的异步方法执行完毕后,获取返回值。
|
||||
|
||||
```
|
||||
async function test(){
|
||||
return new Promise((resolv,reject)=>{
|
||||
var name = "zhang san "
|
||||
resolve(name);
|
||||
},1000)
|
||||
}
|
||||
|
||||
async function main(){
|
||||
var data = await test();
|
||||
console.log(data);
|
||||
}
|
||||
|
||||
main
|
||||
```
|
||||
|
||||
|
||||
|
||||
5
JavaScript/NodeJS/7流读写.md
Normal file
5
JavaScript/NodeJS/7流读写.md
Normal file
@@ -0,0 +1,5 @@
|
||||
## 1 文件读入流fs.createReadStream
|
||||
|
||||
## 2 文件写入流fs.createWriteStream
|
||||
|
||||
## 3 管道流reStream.pipe(writeStream)
|
||||
6
JavaScript/NodeJS/8静态web服务器.md
Normal file
6
JavaScript/NodeJS/8静态web服务器.md
Normal file
@@ -0,0 +1,6 @@
|
||||
## 1 URL解析
|
||||
|
||||
|
||||
## 2 URL路由
|
||||
|
||||
|
||||
8
JavaScript/NodeJS/9Ejs.md
Normal file
8
JavaScript/NodeJS/9Ejs.md
Normal file
@@ -0,0 +1,8 @@
|
||||
# 文件渲染
|
||||
|
||||
页面渲染主要有两种方式,后端渲染和前端渲染。
|
||||
|
||||
1. 后端渲染主要在服务器将动态数据,加载到HTML页面,然后返回HTML页面。
|
||||
2. 前端渲染主要在客户端(浏览器)上异步请求数据,加载到当前页面,然后返回HTML页面。
|
||||
|
||||
后端渲染速度慢,但逻辑简单。前端渲染速度快,响应速度快。
|
||||
21
JavaScript/NodeJS/demo/app.js
Normal file
21
JavaScript/NodeJS/demo/app.js
Normal file
@@ -0,0 +1,21 @@
|
||||
const http = require('http');
|
||||
const url = require('url');
|
||||
http.createServer(
|
||||
function(request,response){
|
||||
//客户端传递的信息
|
||||
console.log(request.url);
|
||||
//使用URL模块解析url
|
||||
if(request.url!='/favicon.ico'){
|
||||
var userinfo = url.parse(request.url,true).query;
|
||||
console.log(userinfo.name+userinfo.age);
|
||||
}
|
||||
|
||||
//响应客户端的信息
|
||||
response.writeHead(200,{'Content-Type':'text/plain;charset=utf-8'});
|
||||
response.write("你好ddddthis is node js\n")
|
||||
|
||||
//结束客户端响应
|
||||
response.end('hello world');
|
||||
}
|
||||
).listen(8081);
|
||||
console.log("server runing")
|
||||
14
JavaScript/NodeJS/demo/package.json
Normal file
14
JavaScript/NodeJS/demo/package.json
Normal file
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"name": "first",
|
||||
"version": "1.0.0",
|
||||
"description": "hello",
|
||||
"main": "app.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"keywords": [
|
||||
"hello"
|
||||
],
|
||||
"author": "ykl",
|
||||
"license": "ISC"
|
||||
}
|
||||
24
JavaScript/NodeJS/demo/test.js
Normal file
24
JavaScript/NodeJS/demo/test.js
Normal file
@@ -0,0 +1,24 @@
|
||||
|
||||
|
||||
|
||||
async function run(){
|
||||
var a=1;
|
||||
for(var i=0;i<1000000000;i++){
|
||||
a++;
|
||||
}
|
||||
console.log("run finish");
|
||||
return "run return";
|
||||
}
|
||||
|
||||
async function run2(){
|
||||
console.log(await run());
|
||||
console.log("run2 finish")
|
||||
return "run2 return";
|
||||
}
|
||||
|
||||
async function run3(){
|
||||
|
||||
console.log(await run2());
|
||||
return "run3 return";
|
||||
}
|
||||
run3();
|
||||
68
JavaScript/jQuery/1简介.md
Normal file
68
JavaScript/jQuery/1简介.md
Normal file
@@ -0,0 +1,68 @@
|
||||
## 1 功能
|
||||
|
||||
> jquery是js的一个框架。目的是对js的编程方式进行封装,提供了新的编程方法。简化过程。
|
||||
|
||||
基本内容:
|
||||
* HTML 元素选取
|
||||
* HTML 元素操作
|
||||
* CSS 操作
|
||||
|
||||
事件和动画处理
|
||||
* HTML事件处理
|
||||
* JavaScript 特效动画
|
||||
|
||||
|
||||
* HTML DOM 遍历和修改
|
||||
* AJAX
|
||||
* Utilities
|
||||
|
||||
## 2 引用
|
||||
|
||||
|
||||
### 使用本地jquery
|
||||
```
|
||||
<head>
|
||||
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
|
||||
</script>
|
||||
</head>
|
||||
```
|
||||
### 使用CDN
|
||||
|
||||
```
|
||||
<head>
|
||||
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
|
||||
</script>
|
||||
</head>
|
||||
```
|
||||
## 3 CSS选择器
|
||||
|
||||
### 元素选择器
|
||||
|
||||
```
|
||||
$("p")
|
||||
```
|
||||
|
||||
### #id选择器
|
||||
|
||||
```
|
||||
$("#test")
|
||||
```
|
||||
|
||||
### .class 选择器
|
||||
|
||||
```
|
||||
$(".test")
|
||||
```
|
||||
|
||||
### 属性选择器
|
||||
|
||||
```
|
||||
$("[href]")
|
||||
```
|
||||
|
||||
### 特殊选择器
|
||||
|
||||
```
|
||||
$("*") 选取所有元素
|
||||
$(this) 选取当前 HTML 元素
|
||||
```
|
||||
42
JavaScript/jQuery/2事件.md
Normal file
42
JavaScript/jQuery/2事件.md
Normal file
@@ -0,0 +1,42 @@
|
||||
## 1 常见事件
|
||||
> jquery对事件进行了重新封装。采取了与原生JS完全不同的事件处理方法。JS是在HTMLDOM元素中个,添加事件属性,将事件属性与事件响应函数绑定的方法,完成事件响应机制。
|
||||
|
||||
> jquery,大多数DOM事件都有一个等效的jQuery方法对应。调用jQuery对象的事件函数,传递高阶函数作为参数,用于回调。实现事件响应与主进程的异步通信。
|
||||
### 鼠标事件
|
||||
|
||||
* click
|
||||
* dblclick
|
||||
* mouseenter
|
||||
* mouseleave
|
||||
* hover
|
||||
|
||||
### 键盘事件
|
||||
|
||||
* keypress
|
||||
* keydown
|
||||
* keyup
|
||||
|
||||
|
||||
### 表单事件
|
||||
* submit
|
||||
* change
|
||||
* focus
|
||||
* blur
|
||||
|
||||
### 文档/窗口事件
|
||||
* load
|
||||
* resize
|
||||
* scroll
|
||||
* unload
|
||||
|
||||
## 2 事件处理
|
||||
### 事件处理方法
|
||||
回调函数作为参数进行传递。
|
||||
|
||||
```
|
||||
("p").click(function(){$(this).hide()});
|
||||
```
|
||||
### $(document).ready()
|
||||
|
||||
在加载完成文档后需要执行的函数。
|
||||
|
||||
111
JavaScript/jQuery/3动画.md
Normal file
111
JavaScript/jQuery/3动画.md
Normal file
@@ -0,0 +1,111 @@
|
||||
|
||||
# jQuery效果
|
||||
|
||||
## 1 显示和隐藏
|
||||
```
|
||||
$(selector).hide(speed,callback);
|
||||
$(selector).show(speed,callback);
|
||||
$(selector).toggle(speed,callback);
|
||||
|
||||
$("#hide").click(function(){
|
||||
$("p").hide();
|
||||
});
|
||||
|
||||
$("#show").click(function(){
|
||||
$("p").show();
|
||||
});
|
||||
|
||||
$("button").click(function(){
|
||||
$("p").toggle();
|
||||
});
|
||||
```
|
||||
|
||||
## 2 淡入淡出
|
||||
|
||||
```
|
||||
$(selector).fadeIn(speed,callback);
|
||||
$(selector).fadeOut(speed,callback);
|
||||
$(selector).fadeToggle(speed,callback);
|
||||
$(selector).fadeTo(speed,opacity,callback);
|
||||
|
||||
$("button").click(function(){
|
||||
$("#div1").fadeIn();
|
||||
$("#div2").fadeIn("slow");
|
||||
$("#div3").fadeIn(3000);
|
||||
});
|
||||
|
||||
$("button").click(function(){
|
||||
$("#div1").fadeOut();
|
||||
$("#div2").fadeOut("slow");
|
||||
$("#div3").fadeOut(3000);
|
||||
});
|
||||
|
||||
$("button").click(function(){
|
||||
$("#div1").fadeToggle();
|
||||
$("#div2").fadeToggle("slow");
|
||||
$("#div3").fadeToggle(3000);
|
||||
});
|
||||
$("button").click(function(){
|
||||
$("#div1").fadeTo("slow",0.15);
|
||||
$("#div2").fadeTo("slow",0.4);
|
||||
$("#div3").fadeTo("slow",0.7);
|
||||
});
|
||||
```
|
||||
## 3 滑动
|
||||
|
||||
```
|
||||
$(selector).slideDown(speed,callback);
|
||||
$(selector).slideUp(speed,callback);
|
||||
$(selector).slideToggle(speed,callback);
|
||||
|
||||
$("#flip").click(function(){
|
||||
$("#panel").slideDown();
|
||||
});
|
||||
$("#flip").click(function(){
|
||||
$("#panel").slideUp();
|
||||
});
|
||||
|
||||
$("#flip").click(function(){
|
||||
$("#panel").slideToggle();
|
||||
});
|
||||
```
|
||||
|
||||
## 4 jquery效果动画
|
||||
### 定义
|
||||
animate()方法
|
||||
* 必需的 params 参数定义形成动画的 CSS 属性。
|
||||
* 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
|
||||
* 可选的 callback 参数是动画完成后所执行的函数名称。
|
||||
```
|
||||
$(selector).animate({params},speed,callback);
|
||||
```
|
||||
|
||||
### 使用
|
||||
|
||||
```
|
||||
$("button").click(function(){
|
||||
$("div").animate({
|
||||
height:'toggle'
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
## 5 停止动画
|
||||
```
|
||||
$(selector).stop(stopAll,goToEnd);
|
||||
|
||||
$("#stop").click(function(){
|
||||
$("#panel").stop();
|
||||
});
|
||||
```
|
||||
|
||||
## 6 jquery动画链
|
||||
```
|
||||
$("#p1").css("color","red")
|
||||
.slideUp(2000)
|
||||
.slideDown(2000);
|
||||
|
||||
$("#p1").css("color","red")
|
||||
.slideUp(2000)
|
||||
.slideDown(2000);
|
||||
```
|
||||
110
JavaScript/jQuery/4操作.md
Normal file
110
JavaScript/jQuery/4操作.md
Normal file
@@ -0,0 +1,110 @@
|
||||
|
||||
## 1 获取设置内容的方法
|
||||
|
||||
* * text() - 设置或返回所选元素的文本内容
|
||||
* * html() - 设置或返回所选元素的内容(包括 HTML 标记)
|
||||
* * val() - 设置或返回表单字段的值
|
||||
|
||||
```
|
||||
$("#btn1").click(function(){
|
||||
alert("Text: " + $("#test").text());
|
||||
});
|
||||
$("#btn2").click(function(){
|
||||
alert("HTML: " + $("#test").html());
|
||||
});
|
||||
$("#btn1").click(function(){
|
||||
alert("值为: " + $("#test").val());
|
||||
});
|
||||
|
||||
$("#btn1").click(function(){
|
||||
$("#test1").text("Hello world!");
|
||||
});
|
||||
$("#btn2").click(function(){
|
||||
$("#test2").html("<b>Hello world!</b>");
|
||||
});
|
||||
$("#btn3").click(function(){
|
||||
$("#test3").val("RUNOOB");
|
||||
});
|
||||
```
|
||||
|
||||
## 2 获取设置属性的方法
|
||||
attr() 方法用于获取属性值。
|
||||
```
|
||||
$("button").click(function(){
|
||||
alert($("#runoob").attr("href"));
|
||||
});
|
||||
|
||||
$("button").click(function(){
|
||||
$("#runoob").attr("href","http://www.runoob.com/jquery");
|
||||
});
|
||||
```
|
||||
jQuery 方法 attr(),也提供回调函数。回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
|
||||
|
||||
```
|
||||
$("button").click(function(){
|
||||
$("#runoob").attr("href", function(i,origValue){
|
||||
return origValue + "/jquery";
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
## 3 添加元素
|
||||
|
||||
* append() - 在被选元素的结尾插入内容
|
||||
* prepend() - 在被选元素的开头插入内容
|
||||
* after() - 在被选元素之后插入内容
|
||||
* before() - 在被选元素之前插入内容
|
||||
|
||||
```
|
||||
$("p").append("追加文本");
|
||||
$("p").prepend("在开头追加文本");
|
||||
$("img").after("在后面添加文本");
|
||||
$("img").before("在前面添加文本");
|
||||
```
|
||||
|
||||
## 4 删除元素
|
||||
|
||||
* remove() - 删除被选元素(及其子元素)
|
||||
* empty() - 从被选元素中删除子元素
|
||||
```
|
||||
$("#div1").remove();
|
||||
$("#div1").empty();
|
||||
```
|
||||
|
||||
|
||||
## 5 CSS设置
|
||||
|
||||
* addClass() - 向被选元素添加一个或多个类
|
||||
* removeClass() - 从被选元素删除一个或多个类
|
||||
* toggleClass() - 对被选元素进行添加/删除类的切换操作
|
||||
* css() - 设置或返回样式属性
|
||||
|
||||
|
||||
```
|
||||
$("button").click(function(){
|
||||
$("h1,h2,p").addClass("blue");
|
||||
$("div").addClass("important");
|
||||
});
|
||||
|
||||
$("button").click(function(){
|
||||
$("h1,h2,p").removeClass("blue");
|
||||
});
|
||||
|
||||
$("button").click(function(){
|
||||
$("h1,h2,p").toggleClass("blue");
|
||||
});
|
||||
|
||||
$("p").css("background-color","yellow");
|
||||
```
|
||||
|
||||
## 7 尺寸设置
|
||||
|
||||

|
||||
|
||||
* width()
|
||||
* height()
|
||||
* innerWidth()
|
||||
* innerHeight()
|
||||
* outerWidth()
|
||||
* outerHeight()
|
||||
|
||||
82
JavaScript/jQuery/5遍历.md
Normal file
82
JavaScript/jQuery/5遍历.md
Normal file
@@ -0,0 +1,82 @@
|
||||
## 1 定义
|
||||
|
||||
与Xpath选择器十分详细。在简介中通过css选择器,能够锁定目标元素。
|
||||
|
||||
|
||||
## 2 向上遍历
|
||||
|
||||
* parent()
|
||||
* parents()
|
||||
* parentsUntil()
|
||||
|
||||
```
|
||||
$(document).ready(function(){
|
||||
$("span").parents("ul");
|
||||
});
|
||||
|
||||
$(document).ready(function(){
|
||||
$("span").parentsUntil("div");
|
||||
});
|
||||
```
|
||||
|
||||
## 3 向下遍历
|
||||
|
||||
* children()
|
||||
* find()
|
||||
|
||||
```
|
||||
$(document).ready(function(){
|
||||
$("div").children();
|
||||
});
|
||||
|
||||
$(document).ready(function(){
|
||||
$("div").find("span");
|
||||
});
|
||||
```
|
||||
|
||||
## 4 水平遍历
|
||||
|
||||
* siblings()
|
||||
* next()
|
||||
* nextAll()
|
||||
* nextUntil()
|
||||
* prev()
|
||||
* prevAll()
|
||||
* prevUntil()
|
||||
|
||||
```
|
||||
$(document).ready(function(){
|
||||
$("h2").siblings();
|
||||
});
|
||||
|
||||
$(document).ready(function(){
|
||||
$("h2").next();
|
||||
});
|
||||
|
||||
$(document).ready(function(){
|
||||
$("h2").nextUntil("h6");
|
||||
});
|
||||
```
|
||||
|
||||
## 5 遍历过滤
|
||||
|
||||
* first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素。
|
||||
* filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
|
||||
|
||||
```
|
||||
$(document).ready(function(){
|
||||
$("div p").first();
|
||||
});
|
||||
$(document).ready(function(){
|
||||
$("div p").last();
|
||||
});
|
||||
$(document).ready(function(){
|
||||
$("p").eq(1);
|
||||
});
|
||||
$(document).ready(function(){
|
||||
$("p").filter(".url");
|
||||
});
|
||||
$(document).ready(function(){
|
||||
$("p").not(".url");
|
||||
});
|
||||
```
|
||||
61
JavaScript/jQuery/6ajax.md
Normal file
61
JavaScript/jQuery/6ajax.md
Normal file
@@ -0,0 +1,61 @@
|
||||
## 1 load
|
||||
|
||||
### load方法
|
||||
jQuery load() 方法是简单但强大的 AJAX 方法。
|
||||
|
||||
load() 方法从服务器加载数据,并把返回的数据放入被选元素中
|
||||
|
||||
```
|
||||
$(selector).load(URL,data,callback);
|
||||
|
||||
$("#div1").load("demo_test.txt");
|
||||
```
|
||||
|
||||
### load回调参数
|
||||
|
||||
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:
|
||||
|
||||
responseTxt - 包含调用成功时的结果内容
|
||||
statusTXT - 包含调用的状态
|
||||
xhr - 包含 XMLHttpRequest 对象
|
||||
|
||||
```
|
||||
$("button").click(function(){
|
||||
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
|
||||
if(statusTxt=="success")
|
||||
alert("外部内容加载成功!");
|
||||
if(statusTxt=="error")
|
||||
alert("Error: "+xhr.status+": "+xhr.statusText);
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
## 2 GET方法
|
||||
GET - 从指定的资源请求数据.GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。
|
||||
```
|
||||
$.get(URL,callback);
|
||||
|
||||
$("button").click(function(){
|
||||
$.get("demo_test.php",function(data,status){
|
||||
alert("数据: " + data + "\n状态: " + status);
|
||||
});
|
||||
});
|
||||
```
|
||||
## 3 POST方法
|
||||
|
||||
POST - 向指定的资源提交要处理的数据.POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据
|
||||
|
||||
```
|
||||
$.post(URL,data,callback);
|
||||
|
||||
$("button").click(function(){
|
||||
$.post("/try/ajax/demo_test_post.php",
|
||||
{
|
||||
name:"菜鸟教程",
|
||||
url:"http://www.runoob.com"
|
||||
},
|
||||
function(data,status){
|
||||
alert("数据: \n" + data + "\n状态: " + status);
|
||||
});
|
||||
});
|
||||
```
|
||||
BIN
JavaScript/jQuery/image/border.gif
Normal file
BIN
JavaScript/jQuery/image/border.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Reference in New Issue
Block a user