JS 笔记

廖雪峰Javascript教程的笔记

数组

获取数组长度 lenth

var arr = [1, 2, 3.14, 'Hello', null, true];
arr.length; // 6

修改数组的值

var arr = ['A', 'B', 'C'];
arr[1] = 99;
arr; // arr现在变为['A', 99, 'C']

var arr = [1, 2, 3];
arr[5] = 'x';
arr; // arr变为[1, 2, 3, undefined, undefined, 'x']

搜索指定的元素的位置 indexOf

var arr = [10, 20, '30', 'xyz'];
arr.indexOf(10); // 元素10的索引为0
arr.indexOf(30); // 元素30没有找到，返回-1
arr.indexOf('30'); // 元素'30'的索引为2

切割数组 slice

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.slice(0, 3); // 从索引0开始，到索引3结束，但不包括索引3: ['A', 'B', 'C']
arr.slice(3); // 从索引3开始到结束: ['D', 'E', 'F', 'G']
var aCopy = arr.slice();
aCopy; // ['A', 'B', 'C', 'D', 'E', 'F', 'G']
aCopy === arr; // false

添加或删除数组元素 push pop unshift shift

push()向Array的末尾添加若干元素，pop()把Array的最后一个元素删除掉

var arr = [1, 2];
arr.push('A', 'B'); // 返回Array新的长度: 4
arr; // [1, 2, 'A', 'B']
arr.pop(); // pop()返回'B'
arr; // [1, 2, 'A']
arr.pop(); // 空数组继续pop不会报错，而是返回undefined

unshift()向Array的头部添加若干元素，shift()把Array的第一个元素删除掉：

var arr = [1, 2];
arr.unshift('A', 'B'); // 返回Array新的长度: 4
arr; // ['A', 'B', 1, 2]
arr.shift(); // 'A'
arr; // ['B', 1, 2]
arr.shift(); // 空数组继续shift不会报错，而是返回undefined

数组排序 sort reverse

var arr = ['B', 'C', 'A'];
arr.sort();
arr; // ['A', 'B', 'C']
arr.reverse(); 
arr; // ['C', 'B', 'A']

删除并添加 splice

从指定的索引开始删除若干元素，然后再从该位置添加若干元素：

var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
// 从索引2开始删除3个元素,然后再添加两个元素:
arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
// 只删除,不添加:
arr.splice(2, 2); // ['Google', 'Facebook']
arr; // ['Microsoft', 'Apple', 'Oracle']
// 只添加,不删除:
arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

合并数组 concat

var arr = ['A', 'B', 'C'];
var added = arr.concat([1, 2, 3]);
added; // ['A', 'B', 'C', 1, 2, 3]
arr; // ['A', 'B', 'C']
arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]

数组转字符串

var arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'

解构赋值

var [x, y, z] = ['hello', 'JavaScript', 'ES6'];

Map和Set

Map

默认对象表示方式{}-即一组键值对,键必须是字符串。为了解决这个问题，最新的ES6规范引入了新的数据类型Map

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95
m.set('Adam', 67); // 添加新的key-value
m.set('Adam', 88);
m.get('Adam'); // 88
m.has('Adam'); // 是否存在key 'Adam': true
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined

Set

Set是一组key的集合，但不存储value，key不能重复

var s = new Set([1, 2, 3, 3]);
s; // Set {1, 2, 3}
s.add(4);
s; // Set {1, 2, 3, 4}
s.add(4);
s; // 仍然是 Set {1, 2, 3, 4}
s.delete(3);
s; // Set {1, 2, 4}

循环

for ... in

var o = {
    name: 'Jack',
    age: 20,
};
for (var key in o) {
    console.log(key); // 'name', 'age'
}

var a = ['A', 'B', 'C'];
for (var i in a) {
    console.log(i); // '0', '1', '2'
    console.log(a[i]); // 'A', 'B', 'C'
}

for ... of

Array、Map和Set都可以通过for ... of循环来遍历

foreach

array

var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
    // element: 指向当前元素的值
    // index: 指向当前索引
    // array: 指向Array对象本身
    console.log(element + ', index = ' + index);
});

Set没有索引，因此回调函数的前两个参数都是元素本身

var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
    console.log(element);
});

map

var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
    console.log(value);
});

函数

方法

在一个对象中绑定函数，称为这个对象的方法。

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        var y = new Date().getFullYear();
        return y - this.birth;
    }
};

在一个方法内部，this是一个特殊变量，它始终指向当前对象，也就是xiaoming这个变量。所以，this.birth可以拿到xiaoming的birth属性。

浏览器

浏览器对象

window

• window.innerWidth：获取浏览器窗口的内部宽

• window.innerHeight：获取浏览器窗口的内部高

  内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。

• window.outerWidth：获取浏览器窗口的整个宽
• window.outerHeight：获取浏览器窗口的整个高

navigator

• navigator.appName：浏览器名称；
• navigator.appVersion：浏览器版本；
• navigator.language：浏览器设置的语言；
• navigator.platform：操作系统类型；
• navigator.userAgent：浏览器设定的User-Agent字符串。

screen

• screen.width：屏幕宽度，以像素为单位；
• screen.height：屏幕高度，以像素为单位；
• screen.colorDepth：返回颜色位数，如8、16、24。

location

• location.href：获取页面完整的URL。
• location.protocol：获取协议
• location.host：获取域名
• location.port：获取端口
• location.pathname：获取路径
• location.search：获取get参数
• location.assign()：加载一个新页面
• location.reload()：重新加载当前页面

document

• document.title：获取页面标题
• document.getElementById()：按ID获得一个DOM节点
• document.getElementsByTagName()：按Tag名称获得一组DOM节点
• document.getElementsByClassName()：按Class名称获得一组DOM节点

• document.cookie：获取当前页面的Cookie。

  为了确保安全，服务器端在设置Cookie时，应该始终坚持使用httpOnly。

cookie

设置cookie的值

document.cookie="id=77";  # 设置单个cookie的值

document.cookie="id=77;name=bill";  # 设置多个cookie的值

cookie的名或值中不能使用分号（;）、逗号（,）、等号（=）以及空格。如果想存入这些值，我们可以使用escape()函数进行编码，它能将一些特殊符号使用十六进制表示，例如空格将会编码为“%20”，从而可以存储于cookie值中。在取出值以后需要使用unescape()进行解码才能得到原来的cookie值。

修改cookie的值

如果要改变一个cookie的值，只需重新赋值，例如：

document.cookie="id=88";

这样cookie中id的值就变成成了88

获取cookie的值

var strCookie=document.cookie;

该方法将以字符串的方式返回所有的cookie，要是想获取指定的cookie值，需要进行遍历

function getCookieValue(name) {
    var strCookie=document.cookie;
    var arrCookie=strCookie.split("; ");
    for(var i=0;i<arrCookie.length;i++){
        var c=arrCookie[i].split("=");
        if(c[0]==name){
            return c[1];
        }
    }
    return "";
}

该方法可以根据存入cookie的名称，获取对应的值。如getCookieValue("name"),得到结果就是bill

给cookie设置终止时间

如不设置终止时间，浏览器关闭后这些cookie将会丢失。

document.cookie="userId=828; expires=GMT_String";

var date=new Date();
var expireDays=10;  # 设置cookie过期时间为10天
date.setTime(date.getTime()+expireDays*24*60*60*1000);
document.cookie="id=77; name=bill; expires="+date.toUTCString();

删除cookie

直接将cookie的有效时间设置成过去即可。如

var date=new Date();
date.setTime(date.getTime()-1000)
document.cookie="id=77; name=bill; expires="+date.toUTCString();

jQuery

基本选择器

$("#id")            //ID选择器
$("div")            //元素选择器
$(".classname")     //类选择器
$(".classname,.classname1,#id1")     //组合选择器

层次选择器

$("#id>.classname ")    //子元素选择器
$("#id .classname ")    //后代元素选择器
$("#id + .classname ")    //紧邻下一个元素选择器
$("#id ~ .classname ")    //兄弟元素选择器

过滤选择器(重点)

$("li:first")    //第一个li
$("li:last")     //最后一个li
$("li:even")     //挑选下标为偶数的li
$("li:odd")      //挑选下标为奇数的li
$("li:eq(4)")    //下标等于 4 的li(第五个 li 元素)
$("li:gt(2)")    //下标大于 2 的li
$("li:lt(2)")    //下标小于 2 的li
$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li

内容过滤选择器

$("div:contains('Runob')")    // 包含 Runob文本的元素
$("td:empty")                 //不包含子元素或者文本的空元素
$("div:has(selector)")        //含有选择器所匹配的元素
$("td:parent")                //含有子元素或者文本的元素

可见性过滤选择器

$("li:hidden")       //匹配所有不可见元素，或type为hidden的元素
$("li:visible")      //匹配所有可见元素

属性过滤选择器

$("div[id]")        //所有含有 id 属性的 div 元素
$("div[id='123']")        // id属性值为123的div 元素
$("div[id!='123']")        // id属性值不等于123的div 元素
$("div[id^='qq']")        // id属性值以qq开头的div 元素
$("div[id$='zz']")        // id属性值以zz结尾的div 元素
$("div[id*='bb']")        // id属性值包含bb的div 元素
$("input[id][name$='man']") //多属性选过滤，同时满足两个属性的条件的元素

状态过滤选择器

$("input:enabled")    // 匹配可用的 input
$("input:disabled")   // 匹配不可用的 input
$("input:checked")    // 匹配选中的 input
$("option:selected")  // 匹配选中的 option

表单选择器

$(":input")      //匹配所有 input, textarea, select 和 button 元素
$(":text")       //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password")   //所有密码框
$(":radio")      //所有单选按钮
$(":checkbox")   //所有复选框
$(":submit")     //所有提交按钮
$(":reset")      //所有重置按钮
$(":button")     //所有button按钮
$(":file")       //所有文件域