JS&jQuery

1、JavaScript概述
    1、什么是JavaScript
        JavaScript简称JS，是一种专门运行于JS解释器/引擎中的解释型脚本语言
    2、JS发展史
        1、1992年Nombas公司开发了一款运行在网页中的脚本语言，名称为CMM（c--），后来更名为ScriptEase
        2、1995年Netscape(网景)为自己的浏览器Navigator2.0开发了另一款脚本语言（LiveScript），更名为JavaScript
        3、1996年，Microsoft为自己的IE3.0，发布了JavaScript的克隆版本JScript
        4、1997年，Netscape找到了ECMA（欧洲计算机制造商协会），将JS提交给了ECMA。从此JS的核心更名为EMCA Script简称ES
        JS的组成：
            1、核心—EMCA Script：包含了JS的最基本的语法规范
            2、文档对象模型（Document Object Model）简称DOM
                允许JS操作HTML网页上的内容
                DOM的规范是有W3C来制定的
            3、浏览器对象模型（Browser Object MOdel）简称BOM
                允许JS操作浏览器

2、使用JS（JS引用）
    1、使用元素事件执行JS脚本代码
        事件：用户在元素上所激发的行为操作
            1、onclick事件：当用户点击元素时做的操作
        语法：
            <ANY onclick="JS脚本代码">
            JS脚本代码：
                console.log（'向控制台中输出的内容'）;
    2、嵌入在网页中的<script></script>
        语法：<script></script>在任何位置都可以
        特点：
            网页加载的时候就开始执行
            document.write():向网页输出一句话
            注意：如果通过按钮的单击事件执行document.write()的话，则会刷新网页内容
        示例：
            <script>
                document.write("<h1>hello world<h1>")
            <script>
    3、将JS脚本写在外部的JS文件中
        步骤：
            1、创建JS文件（XXX.js）并编写脚本
            2、在网页中对js文件进行引入
                <script src="js文件路径">此处不能写js代码</script>
3、JS基础语法
    1、语法规范
        1、JS都是由语句组成的
            1、由运算符，表达式，关键字组成的称为语句
            2、严格区分大小写
            3、每条语句必须以；分号表示结束
    2、JS中的注释
        1、单行注释：//注释内容
        2、多行注释：/*注释内容*/
4、JS中的变量 和 常量
    1、变量
        1、声明变量的语法
            声明：var 变量名;
            赋值：变量名 = 值;
            声明并赋值：var 变量名=值;
            注意：
                1、声明变量时，尽量使用var关键字，如果省略，也可以，但是容易处问题（全局污染）
                2、声明变量但未赋值的话，默认值为undefined

　　　　 3、使用let定义变量，不会造成全局污染，尽量使用let代替var
        2、变量名的命名规范
            1、不能使用JS中的关键字或保留关键字
            2、有字母，数字，下划线（_）和$组成
            3、不能以数字开头
            4、尽量不要重复
            5、尽量见名知意
            6、如无特殊需求（团队要求）的话，尽量使用小驼峰命名法

2、常量
        1、什么是常量：一经声明就不允许修改的数据就是常量
        2、语法
            const 常量名 = 值;
            注意：常量名采用全大写的形式

5、数据类型
    1、作用：约束了数据在内存中所占空间大小问题的
    2、JS数据类型分类
        1、基本数据类型（值类型）
            1、number类型
                数字类型，可以表示32位的整数或64位的浮点数
                整数：
                    表示十进制，八进制，十六进制
                    十进制：var num = 111；
                    八进制：var num = 010；
                    十六进制：var num = 0x10；
                小数：
                    小数点计数法：var num = 123.456；
                    科学计数法：var num = 1.5e2；
            2、string类型（所占内存为2-4字节）
                字符串：都是由Unicode的字符，数字，标点组成的
                1、查看字符的Unicode码(可以根据的Unicode码对应的二进制判断所占内存（多少字节）)
                    var str = "张三丰";
                    var uCode =str.charCodeAt(0).toString(2)
                2、如果将Unicode码转换成对应的字符(只能转16进制的，如果是二进制或八进制需要先转换成16进制)
                    已知Unicode码：5f20
                    var str = '\u5f20';
                    console.log(str);
                3、文中范围
                    '\u4e00'~'\u9fa5'
                4、转义字符
                    \n: 换行
                    \t: 制表符
                    \": "
                    \': '
                    \\: \
            3、boolean类型
                布尔类型，只用于表示真（true）或假（false）
                注意：
                    在参与数字运算时，true当做1运算，false当做0

　　　 4、undefined属于基本数据类型，函数没有返回值或没有传递参数时都是undefined
            5、查看数据类型
                使用typeof() 或 typeof 都可以查看变量的数据类型
        2、引用数据类型

　　　　null, 对象(onject)
    3、数据类型转换
        1、隐式转换
            不同类型的数据在左加法运算时，会进行自动转换
            1、字符串+数字：将数字转换为字符串
                var num = 15；
                var str = ‘18’；
                var r = num+str；//1518
                var r = '15'+18+15;//151815
                var r =  15+18+'15';//3315
            2、数字+布尔：将布尔转为数字做加法（true转为1，false转为0）
            3、字符串+布尔：将布尔转为字符串做连接
                var boo = true；
                var str = ‘Hello’；
                var r = boo+str；//trueHello
            4、布尔+布尔：都转为数字做加法运算
        2、强制转换（转换函数）
            1、toString（）：将任意类型的数据转为字符串，并返回转换后的结果
                语法：
                    var r = 变量.toString();
                    var r = 变量+'';
            2、parseInt（）
                作用：将指定的数据尽量转换为整数，如果实在无法转换的话，则返回NaN（Not a Number）
                示例：
                    1、var r = parseInt（‘456’）；
                        r：456
                    2、var r = parseInt（‘123.556’）；
                        r：123
                    3、var r = parseInt（‘123Hello’）；
                        r：123
                    4、var r = parseInt（‘hello123’）；
                        r：NaN
            3、parseFloat（）
                作用：尽量将任意类型的数据转为小数，如果实在无法转换的话，那么结果为NaN
                示例：
                    1、var r = parseFloat('3.14');
                        r:3.14
                    2、var r = parseFloat('3.14hello');
                        r:3.14
                    3、var r = parseFloat('hello3.14')
                        r:NaN
            4、Number（）
                作用：将任意类型的数据转为数字，只要包含非法字符，结果就是NaN
                示例：
                    1、var r = Number('123hello');
                        r:NaN
6、运算符
    1、算数运算符
        1、+ - * /  %
        2、++ --
            ++：自增运算符，在自身基础上做+1操作
            --：自减运算符，在自身基础上做-1操作
            后缀：
                var num = 10；
                num++；
                特点：先使用num的值，然后再做自增运算
                var num = 10；
                console.log(num++);输出10
                console.log(num);  输出11
            前缀：
                var num = 10；
                ++um；
                特点：先对变量进行自增，然后再使用变量的值
                var num = 10；
                console.log(++num);输出11
                console.log(num);  输出11
            练习：
                var num = 5；
                var result = num + ++num + num++ + ++num +num;
                              5  + (6)6     +    6(7) + (8)8     + 8    
    2、关系运算符（比较运算符）
        > < >= <= == != === !==
        1、10>5:true
        2、'10'>5:true
            运算符两端如果有一个是数字的话，那么另外一个会自动转换（通过Number）成数字，再进行比较
        3、'10a' > 5:false
        4、"10a" < 5:false
            NaN除了 != 运算时为true，其他都为false
        5、"10" > "5":false
            比较的是字符1的ASCII 和 字符5的ASCII
        6、"张三丰" > "张无忌"：false
            比较三和无的Unicode码的大小
        7、’10‘ == 10 ：true
        ===、判断数值和数据类型必须全相等时才返回true
        !==、只要数值或数据类型中有一个不相等即返回true
    3、逻辑运算符
        ！：逻辑非，等同于python中的not
        &&：逻辑与，and
        ||：逻辑或，or
    4、为运算符
        1、按位与 &：两个数字的二进制进行比较，对应位都为1，则该结果为1，否则 为0
            场合：奇偶性验证，将一个数与1按位求与，结果为1则为奇数，否则为偶数
                7 & 1 =1
                    7:111
                    1:001
        2、按位或 |：只要有1即为1，
        3、按位异或^:不同则为1，相同则为0
            场合：不借助第三方变换两个数字
            示例:
                var a = 3;
                var b = 5;
                a = a ^ b;  110
                    3:011
                    5:101
                b = b ^ a;  011
                    b(5):101
                    a(6):110
                a = a ^ b;  101
                    a(6):110
                    b(3):011
    5、条件运算符（三目运算）
        语法：？：
            条件表达式 ？ 表达式1 ：表达式2;
            当条件表达式的结果为true的时候，执行表达式1中的内容，并将表达式1的结果作为整体表达式的结果，否则执行表达式2
        练习：
            BMI计算器
            1、分两次从弹框中输入数据
                1、第一次：输入 身高（m）
                2、第二次：输入 体重（kg）
            2、计算bmi
                bmi = 体重 /(身高*身高)
            3、
                如果bmi的值小于20，提示偏瘦
                如果bmi的值大于25，提示偏胖
                否则：提示正常
    6、赋值运算符
        += -= *= /= ^=
        a ^= b 等价于 a =

a^b
7、流程控制
    1、程序控制结构
        1、顺序结构
        2、分支结构/选择结构
        3、循环结构
    2、分支结构
        1、if结构
            1、if结构
                语法：
                    if（条件表达式）{
                        语句块；
                    }
            2、if...else结构
                语法：
                    if（条件表达式）{
                        语句块1；
                    }else{
                        语句块2；
                    }
            3、if ...else if...结构
                语法：
                    if（条件表达式）{
                        语句块1
                    }else if（条件表达式2）{
                        语句块2；
                    }else if（条件表达式n）{
                        语句块n；
                    }else{
                        语句块n+1；
                    }
            练习：
                1、分三次从弹框中输入年，月，日
                2、判断该日是概念的第几天

2、switch结构
            1、作用：等值判断
            2、语法
                switch（变量）{
                    case 值1：
                        语句块1；
                        break；//跳出switch结构，可以选
                    case 值：
                        语句块2；
                        break；//跳出switch结构，可以选
                    .......
                    default：
                        语句块n；
                        /*所有case都未匹配上时，才执行default*/
                }
                注意：
                    1、变量 和 case后的值的判断，采用===来判断的
                    2、break，如果省略break的话，则从匹配的case块开始，依次向下执行（执行下面所有case块的内容，或default块内容）直到遇见break或执行结束
            3、练习：
                从弹框中输入1-7任意一个数字表示1-星期日
                输入1：今天吃红烧肉
                输入2：今天吃红烧鱼
                输入3：今天吃清蒸甲鱼
                输入4：今天吃红烧皮皮虾
                输入5：今天吃红烧排骨
                输入6：今天休息
                输入7：今天休息
                其他：输入有误！
    3、循环结构
        1、作用：重复执行相同或相似的代码
        2、循环的二要素
            1、循环条件：循环从什么时候开始，到什么时候结束
            2、循环操作：循环中要做的事情（要执行的代码）
        3、while循环
            1、语法
                while（循环条件）{
                    循环操作
                }
                流程：
                    1、判断循环条件（boolean值/表达式）
                    2、如果条件为真，则执行循环操作
                        2.1、执行完操作后，再回来判断条件
                    3、如果条件为假，则退出循环
        4、do...while循环
            语法：
                do{
                    循环操作；
                }while（条件）；
            流程
                1、先执行循环操作
                2、再判断循环条件
                3、如果条件为真，再继续执行循环条件，当条件为假时结束循环
        5、循环的流程控制
            1、break：跳出循环结构
            2、continue：结束本次循环，继续执行下次循环
        6、for循环
            1、while
                打印1-100之间的所有数字
                var i = 1;//循环条件的初始化
                while(i <= 100){//循环条件的判断
                    console.log(i);//循环操作
                    i++;//更新循环条件
                }
            2、语法：
                for（表达式1；表达式2；表达式3）{
                    循环操作；
                }
                表达式1：循环条件的初始化
                表达式2：循环条件的判断
                表达式3：更新循环条件
                流程：
                    1、先执行表达式1，即循环条件初始化（执行1次）
                    2、判断表达式2的值，true 或 false
                    3、如果表达式2的结果为true则执行循环操作，如果为false则退出循环
                    4、执行循环操作后，再执行表达式3
                    5、再判断表达式2，同步骤2
                for(var i = 1; i<=100; i++){
                    console.log(i)
                }
        7、循环嵌套
            允许在一个循环中再出现另一个循环
            for(var i=1; i<=10;i++){//外层循环
                for(var j=1;j<1=0;j++){//内层循环

}
            }
            外层循环走一次，内层循环走一轮

8、函数-function
    1、函数的声明
        function 函数名(参数列表){
            函数体
        }
        1、参数列表
            参数列表，允许声明0或多个参数，多个参数的话使用，逗号隔开，没有默认参数
        2、返回值
            返回值是可选的，如果需要返回值的话，通过return 值；进行返回
    2、函数调用
        在任意JS的合法位置处，都允许做函数调用
            函数名(参数列表);
    3、由ES提供的函数（内嵌函数）
        在网页中无需声明，就可以直接使用
        parseInt（）/parseFolat（）/Number（）
        1、isNaN（value）：判断value是否为非数字，返回true表示不是数字，返回false表示是数字
            示例：
                1、isNaN（1）//false
                2、isNaN（‘1’）//false
                3、isNaN（‘hello’）//true
        2、eval（）：执行由字符串来表示的JS代码
    4、局部变量与 全局变量
        1、全局变量：一经声明，在JS的任何位置处都能使用的变量就是全局变量
            1、在<script></script>内部在函数体外边
            2、或则在函数内部不适用var声明的变量也是全局变量（不建议使用）
        2、局部变量：使用var关键字，并且声明在function中的变量
            局部变量的作用于只在声明的函数内，出了函数就不能使用

9、数组（在python中称为列表）
    1、什么是数组
        数组（Array）是一个用于保存批量数据的结构，即一个变量中允许保存多个数据。是按照线性结构的方式来保存数据的
        说明：字符串与数组相加，会将数组准变为字符串
        示例：
            ‘names’+['张无忌','张翠山','张三丰','金毛狮王']
            names张无忌,张翠山,张三丰,金毛狮王
    2、创建数组
        1、创建一个空数组
            var 数组名 = [];
        2、创建数组并初始化元素
            var 数组名 = [元素1，元素2，... ,...];
        3、创建一个空数组：
            var 数组名 = new Array（）;
        4、创建数组并初始化元素
            var 数组名 = new Array（元素1，元素2，... ,...）；
    3、数组的使用
        获取 或设置数组中的元素，一律都使用下标
        下标范围：从0开始，到元素个数-1为止,如果超出下标不会报错，而是返回undefined
        1、向获取元素的第二个元素
            数组名[1];
        2、为数组元素赋值
            数组名[下标] = 值；
            说明：如果下标越界，会将越界的下标赋值，前面的为undefined（空empty）
    4、获取数组的长度
        属性：length
        用法：数组名.length;
        使用场合：
            1、配合循环，遍历数组中的每个元素
            2、能够找到数组中，最新要插入元素的位置
    5、关联数组
        1、什么是关联数组
            JS中数组分为索引数组 和 关联数组
                索引数组：由数字做下标
                关联数组：由字符串做下标
        2、声明和使用关联数组
            var names = [];
            names['x'] = '西游记';
            names['y'] = '红楼梦';
        3、注意
            length只能统计索引数组，不能统计关联数组
        4、使用for ... in遍历数组
            能够遍历数组中所有的数字下标和字符串下标
            for(var 变量 in 数组){
                变量：数组中所有的数字下标和字符串下标（变量为字符串）
            }
    6、数组的常用API
        1、toString():将数组转换为字符串并返回
            console.log(['aa','bb','cc'].toString())//aa,bb,cc
        2、join（seperator）：返回一个由指定连接符连接的数组元素的字符串,连接符不能数\反斜杠，默认是逗号
            console.log(['aa','bb','cc'].join('|'))//aa|bb|cc
        3、concat
        （arr，arr2，...）:拼接多个数组到一起，并返回拼接后的结果
            注意：该函数并不会改变数组，而是返回拼接后的一个副本
        4、reverse（）：反转
            语法：arr.reverse()
            注意：该函数会改变现有数组的结构
        5、sort（）：排序，默认情况下，按照元素的Unicode码进行排序（升序）
            注意：该函数会改变现有数组的结构
            允许通过自定义的排序函数来指定数字的排序规则
                语法：arr.sort(排序函数名);
                    1、指定排序函数
                        function sortAsc（a，b）{将数组的值依次传递给a，b
                            return a-b；//返回值大于0则交换a b的位置，
                        }
                    2、调用arr.sort(sortAsc)
                    3、使用匿名函数
                        arr.sort(function(a,b){a,b});
        6、进出栈操作
            栈式操作：提供了快速操作数组头部或尾部的方法
            1、push（）：入栈，向数组的尾部添加新元素，并返回新数组的长度
            2、pop（）：出栈，删除并返回数组尾部的元素
            3、unshift（）：向数组头部增加新元素并返回新数组的长度
            4、Shift（）：删除并返回数组头部的元素
        7、二维数组
            1、什么是二维数组
                数组中的数组，在一个数组中的每个元素又是一个数组
            2、声明二位数组
                var names = [['aa','bb'],['cc',dd]];
                names[0][1] = 'bb'
10、字符串-string
    1、声明字符串
        1、var str1 = '字符串1';
        2、var str2 = String（’字符串2‘）；
        3、var str3 = new String（’字符串3‘）；
    2、length-属性
        作用：返回当前字符串中字符的个数
    3、常用函数-string API
        1、大小写转换函数
            1、toUpperCase（）：返回字符串的完全大写形式
            2、toLowerCase（）：返回字符串的完全小写形式

String.prototype.equalsIgnoreCase = function (str) {
  if (str == null) return false;
  return this.toLowerCase() === str.toLowerCase();
};
//定义字符串忽略大小写比较的函数

"a".equalsIgnoreCase("A")
//true

2、获取指定位置的字符 或 Unicode码
            1、charAt（index）：返回指定下标位置处的字符
            2、charCodeAt（index）返回指定下标位置处的字符的Unicode码（十进制）
        3、检索字符串
            1、作用：查询子字符串在指定字符串中的起始下标
            2、函数
                1、indexOf（value，fromIndex）
                    value：要查询的子字符串
                    fromIndex：从哪个位置处开始查，如果省略的话，则从头查找
                    返回值：返回第一次出现子字符串的下标，如果为找到，则返回-1
                2、lastIndexOf（value，fromIndex）
                    作用：查找value最后一次出现的下标
                    注意：该函数的查找方式是从后向前找
                    fromIndex如果省略，则将从字符串的最后一个字符处开始检索
                    示例：
                        'avcdbabcd'.lastIndexOf('cd',7)//7
                        说明：如果在下标为7的位置上匹配到字符串的头部，则会继续向后面判断剩余部分是否可以匹配到
        4、截取子字符串
            函数：substring（start，end）
            作用：返回从start到end-1之间的子字符串，如果end省略表示截取到字符串的结尾
        5、分割字符串
            函数：split（seperator）
            作用：将字符串，通过seperator拆分成一个数组
        6、模式匹配
            1、作用：配合正则表达式来完成字符串的查找和替换...
            2、正则表达式
                语法：/正则表达式/修饰符
                示例：/\d{6}/gim

修饰符：
                        i：忽略大小写匹配（Ignorcase）
                        g：全局匹配（Global）
                        m：允许多行匹配（Multiple）
            3、函数
                1、replace（substr/regexp,replacement）
                    作用：使用replacement替换substr/regexp的内容，并返回一个替换后的字符串
                2、match（substr/regexp）
                    作用：返回满足substr 或 regexp格式的字符串，将这些字符串放在数组中进行返回    
                3、serach（substr、regexp）
                    作用：返回满足substr或regexp格式的子字符串第一次出现的下标。如为未找到，则返回-1
                    注意：search函数不支持全局匹配，将自动忽略g

function combine(baseurl, pathname) {
  //bsaeurl是否以/结尾，pathname是否以/开始，拼接baseurl和pathname
  const separator = (/\/$/.test(baseurl) === false && /^\//.test(pathname) === false) ? '/' : ''
  return Array.prototype.slice.call(arguments, 0).join(separator)
}

11、其他内置对象
    1、JS的对象分类
        1、内置对象—ES提供
            String,Array,... ...
        2、外部对象
            1、window（BOM）浏览器对象
            2、document（DOM）文档对象
        3、自定义对象
            function 就是一个自定义对象
    2、RegExp对象
        RegExp：Regular Expression - 正则表达式
        1、创建RegExp对象
            1、var regExp = /匹配模式/修饰符；
            2、var regExp = new RegExp（‘匹配模式’，‘修饰符’）；
        2、RegExp对象方法
            1、regExp.test（string）
                string：要验证的字符串，如果string符合regExp格式的话，返回true，否则返回false
    3、Math对象
        1、作用：执行与数学相关的运算和数据
        2、属性：
            Math.PI,
            Math.E
        3、函数
            1、三角函数
                Math.sin（x）
                Math.cos(x)
                Math.tan(x)
            2、计算函数
                Math.sqrt(x):开方
                Math.log(x)：对数
                Math.pow(x,y)：求x的有次方
            3、数字比较函数
                Math.abs(x)：绝对值
                Math.max()：最大值
                Math.min()：最小值
                Math.random():返回0-1之间的随机小数，包括0但不包括1
                Math.round(x):将x四舍五入
    4、Date对象
        1、创建Date对象
            1、获取当前系统日期时间
                var now = new Date（）；
            2、初始化自定义日期时间对象
                var date = new Date（‘2018//01/01’）;
        2、函数
            1、读取或设置当前时间的毫秒数
                1、getTime（）：返回自1900-1-1 00:00:00以来的毫秒数
                2、setTime(毫秒数):
            2、读取时间分量函数
                1、getFullYear（）：获取日期时间对象的年份
                2、getYear（）：获取自1900年以来到当前日期时间对象所经过的年数
            3、getMonth（）：返回0-11的数字来表示1-12月
            4、getDate（）：返回当前日期对象对应的日
            5、getDay（）：返回当前日期对象所对应的日期，0-6来表示星期日-星期六
            6、获取时间
                1、getHourse（）：
                2、getMinutes（）：
                3、getSeconds（）；
                4、getMilliseconds（）：获取毫秒
            7、转换为字符串
                1、toString()
                    "Mon Aug 13 2018 12:14:38 GMT+0800 (CST)"
                2、toLocaleString（）
                    "2018/8/13 下午12:14:59"
                3、toLocalTimeString（）
                    "下午12:15:22"
                4、tolocalDateString（）
                    "2018/8/13"
12、外部对象
    1、BOM 和DOM
        BOM：Browser Object Model-浏览器对象模型
        DOM：Document Object Model-文档浏览器对象模型
    2、BOM
        1、作用：表示浏览器窗口，BOM提供了一个核心对象-window
        2、window对象的使用
            window对象会包含若干属性 和 方法
                属性：document，location，history，navigator，screen
                方法：alert（），prompt（），...
            调用window对象的属性和方法时，可以省略window.不写
            window中的对话框
                1、警告框：window.alert()/ alert()
                2、输入框：window.prompt()/ prompt()
                3、确认框：window.confirm()/ confirm,按‘确认‘按钮的话，返回true，否则返回false

window中的定时器
                1、定时器分类
                    1、周期性定时器：每隔一定时间就会执行一遍指定程序，返回执行
                    2、一次性定时器：在指定的时间间隔之后，只执行一次操作
                2、周期性定时器
                    1、声明定时器
                        var ret = setInterval（fun，time）；
                        fun：要周期性执行的操作，可以是匿名函数
                        time：时间间隔周期，以毫秒为单位
                        ret：返回已经创建好的定时器对象（用于停止定时器）
                    2、清除定时器
                        clearInterval（timer）
                        timer：创建好的，要停止的定时器对象
                3、一次性定时器
                    1、声明一次性定时器
                        var ret = setTimeout(fun,time);
                        fun：指定时时间间隔后要执行的操作
                        time：时间间隔，以毫秒为单位
                        ret：返回已经启动的定时器对象
                    2、清除定时器
                        clearTimeout（timer）；
                        timer：创建好的，要停止的定时器对象    
            Window的属性（了解）
                1、screen：获取客户端显示器的相关信息
                    属性：
                        1、width/ height
                        2、availWidth/ availHeight
                2、history：
                    1、作用：包含当前窗口所访问过的url地址
                    2、属性 和方法
                        1、属性
                            length：访问过的URL的数量
                        2、方法
                            1、back（）：后退
                            2、forward（）：前进
                            3、go（num）：去往历史记录中的第num个页面
                                go（1）相当于forward
                                go（-1）相当于back
                3、location
                    1、作用：表示浏览器地址栏上的信息
                    2、属性和方法
                        1、href：表示当前窗口中正在浏览的网页的地址，如果href设置值的话，则相当于浏览器页面跳转的功能
                        2、reload（）：重新加载当前页面，等同于刷新
                4、navigator
                    1、作用：包含浏览器的相关信息
                    2、属性
                        1、userAgent：显示浏览器相关信息（"Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"）
    3、DOM-document对象（重点）
        1、document的概述
            document对象，是DOM中的顶级对对象。封装了和HTML相关的属性，方法和事件。

在网页加载HTML的时候，会在内存中生成一棵节点树（DOM树），DOM树的根就是document
            每个元素其实都是DOM树上的一个节点

DOM中所提供的操作：
                1、查找节点的信息
                2、读取节点的信息
                3、修改节点的信息
                4、删除节点的信息
                5、创建节点的信息
        2、查找节点
            1、通过元素的id查找节点
                var elem = document.getElementById（"元素ＩＤ"）;
                元素ID：要获取的元素的ID
                elem：所得到的元素的对象-DOM对象/元素，如果没有找到匹配的元素，则返回null

DOM对象的常用属性
                    1、innerHTML：获取 或设置当前DOM对象的HTML文本值,会获取标签
                    2、innerText：获取 或设置当前DOM对象的文本值,只获取文本不获取标签
                    3、value：获取 或设置表单控件对象的值
                        说明：value获取的值只是表单控件框中输入的值，设置值也只是设置表单控件框中的值，不会改变value的默认值
            2、通过标签名查询
                语法：document.getElementsByTagName(标签名);或则 elem.getElementsByTagName(标签名);
                示例：
                    1、document>getElementsByTagName('p')//查找网页中所有的p元素
                    2、var div = document.getElementById('d1');
                        div.getElementsByTagName('p')//查找id为d1的div内部的p元素
                返回值：由指定标签元素所组成的数组（列表）
            3、通过元素的name属性值来查询节点(优先使用在 单选框 和 复选框中)
                语法：document.getElementsByName()
                返回值：返回由指定name值的元素所组成的数组
            4、通过元素class值查询节点
                语法：documnet.getElementsByClassName(className) 或 elem.getElementsByClassName(className)
                返回值：由指定className值的元素组成的数组
            5、根据节点的层级关系查询节点
                1、parentNode：返回当前元素的父节点
                2、childNodes：返回当前元素的所有子节点组成的数组（子节点元素节点，属性节点，文本节点（包括空格和回车）、注释节点，文档节点）
                3、children:返回当前元素的子节点组成的数（子节点中只包含元素节点）
                4、nextSibling：返回当前元素的下一个兄弟节点
                5、nextElementSibing：返回当前元素的下一个兄弟元素节点
                6、previousSibling：返回当前元素的上一个兄弟节点
                7、previousElementSibling：返回当前元素的上一个兄弟元素节点
        3、读取节点的信息
            1、节点的类型
                1、元素节点：表示页面上的一个元素
                2、属性节点：表示页面上元素的一个属性
                3、文本节点：表示页面上元素的一个文本内容（包含空格和回车）
                4、注释节点：表示网页上的一个注释
                5、文档节点：表示html文档
                属性：nodeType
                取值：
                    返回1：元素节点
                    返回2：属性节点
                    返回3：文本节点
                    返回8：注释节点
                    返回9：HTML文档（文档节点）
            2、读取节点名称
                属性：nodeName
                返回值：
                    元素节点 和属性节点：返回元素名 或 属性名
                    文本节点：#text
                    文档节点：#document
                    注释节点：#comment
        4、获取 或设置元素节点的方法
            1、getAttribute（attrName）
                作用：获取某元素指定的属性值
                attrName：要获取的属性的名称
                返回值attrName属性名对应的值
                注意：获取的属性值，必须要在标签中编写出来，否则值为null
            2、setAttribute（attrName，attrValue）
                作用：修改指定属性的值
                attrName：要修改的属性的名称
                attrValue：要修改属性名的值
                说明：setAttribute（"value","aa"）只会改变value的默认值，如果此时表单控件框中有值是不会被修改的。与getAttribute（）联合使用，不要和value属性混合使用。
            3、removeAttribute（attrName）
                作用：将attrName属性从元素中删除出去
            练习：
                1、网页中创建一个a标记，内容为 百度 ，链接地址为https://www.baidu.com
                2、网页中创建一个按钮，文本为修改
                3、点击按钮时，将超链接的文本修改为 腾讯，将超链接的地址修改为 http:www.qq.com
        5、元素的样式
            1、使用setAttribute（）设置class属性值
                elem.setAttribute（“class”，”类选择器名称“）；
            2、使用元素的className属性修改class值
                elem.className="类选择器"；
            3、自定义元素样式
                elem.style.css属性 = 值 ；
                注意：如果CSS属性名中包含-连字符的话，连字符要取消，并且-后面的第一个字符要变大写
                 elem.style.color = 'red';
                 elem.style.fontSize = "18px";
                 elem.style.borderRightColor = 'yellow';
         6、增加节点
             1、创建元素节点
                 var elem = document.createElement(”元素名“);
                 elem:表示创建好的DOM元素
             2、增加节点
                 1、document.boby.appendChild(elem):向body中追加新元素elem，在body中的最后一个元素
                 2、parentNode.appendChild(elem)：将elem追加到parentNode的内部
                     parentNode：表示的是已经存在的一个元素
                 3、parentNode.insertBefore(newElem,oldElem)
                     将newElem元素插入到parentNode中oldElem之前
                 说明：创建一个元素节点，只能增加一次，不能多次增加该元素
         7、删除节点：
             删除节点只能由父元素来发起
             1、document.body.removeChild(elem)：删除body中的elem元素
             2、parentNode.removeChild(elem)：在parentNode中删除elem元素

4、事件
         1、什么是事件：允许通过特殊的行为来激发的操作
         2、常用的事件
             1、鼠标事件
                 1、click：鼠标单击事件
                 2、mousevoer：鼠标进入元素时激发的事件
                 3、mousemove：鼠标在元素内移动时激发的事件
                 4、mouseout：鼠标从元素内移出时激发的事件
             2、键盘事件
                 1、keydown：键位按下时的事件
                 2、keypress：键位按下时的事件
                 3、keyup：键位抬起时的事件
             3、状态改变事件
                 1、load：当元素加载完毕时触发的事件
                 2、change：当元素发生改变时触发的事件,一般用在select下拉框中
                 3、focus：当元素获取焦点时触发的事件
                 4、blur：当元素失去焦点时触发的事件
                 5、submit：当表单被提交时触发的事件
             注意：在为html元素绑定事件时，必须要在事件名前加 on
         3、绑定事件的方式
             1、在元素中绑定事件
                 <button onclick=""></button>
                 <input onblur="">
             2、在js中动态的为元素绑定事件
                 <script>
                     var div = $("d1");
                     div.on事件名 = function（）{

}
                     div.onclick = function(){

}
                 </script>
                 或者
                 <script>
                     function func(){

}
                     var div = $("d1");
                     div.on事件名 = func；

</script>
         4、事件行为详解
             1、load事件
                 常用场合：当网页加载完毕时，要执行的操作
                 方式1：在元素中绑定事件
                         <body onload="函数（）"></dody>
                 方式2：JS中动态绑定事件
                     <script>
                         window.onload = function(){
                             //网页中其他元素加载完毕时，才会执行
                             var div = $("d1");
                             div.onclick = function(){
                             this:指的是绑定事件的元素
                         }
                         }
                     </script>
             2、submit事件
                 功能：表单被提交时要触发的事件
                 注意：通过一个boolean的返回值，通知表单是否被提交，返回值为true可以提交表单，为false不能提交
                     <form onsubmit="return 函数（）">
             3、focus事件
                 功能：当元素获取焦点时触发的事件
             4、blur事件
                 功能：当元素失去焦点时触发的事件
         5、事件对象（event对象）
             1、什么是事件对象
                 事件对象中封装了事件中要用到的一些参数和一些操作
             2、获取事件对象（event对象）
                 1、html元素中绑定事件
                     <ANY onclick="btnClick(event)">//event表示事件对象，是实参，不可修改
                     <script>
                         function btnClick(event){
                             //event表示事件对象，是形参，此处event可以修改，
                         }
                     </script>
                 2、使用JS动态绑定
                     <script>
                         d1.onclick = function(event){

}
                     </script>
             3、事件对象的常用属性
                 1、事件源：触发当前事件的元素
                     获取事件源：
                         通过event.target获取事件源，返回DOM对象
                 2、鼠标事件
                     1、offsetX,offsetY
                         获取鼠标在 元素上的坐标，以元素的左上角（border内边缘）为（0,0）计算的
                     2、clientX,clientY
                         获取鼠标在网页上的坐标，以网页左上角为（0，0）计算的
                     3、screenX，screenY
                         获取鼠标在 显示器上的坐标点，以屏幕左上角为（0,0）计算的
                 3、键盘事件
                     1、event.key
                         得到按下键的字符
                     2、event.which :在keypress事件中 和在keydown事件中的含义不同
                         1、在keypress中
                             event.which：表示按下字符的ASCII码
                         2、在keydown中
                             event.which：表示的是键位码，只记录键位，不记录字符（大小写英文字母的键位码是相同的，一些数字和标点的键位码有可能是相同的）
             4、事件冒泡
                 1、什么是事件冒泡
                     当激发了子元素的事件时，把父元素对应的事件也一并给执行了
                     场合：
                         1、必须是父子元素或具备层级关系的元素
                         2、为元素们设置了相同的事件
                 2、阻止事件冒泡
                     只让事件在当前元素中执行，不向上冒泡
                     event.stopPropagation();

jQuery
    1、jQuery的简介
        是一个轻量级的JS库-是一个封装好的JS文件。提供了更为简便的页面元素操作方式。
        封装了 DOM，JS，CSS
        核心理念： Write Less Do More
        jQuery版本：
            jQuery 3.3.1
            jQuery 2.x：不再支持IE6,7,8
            jQuery 1.11.x
    2、使用jQuery
        1、引入jQuery文件
            <script src='文件路径'></script>
            注意：引入文件的操作必须放在其他jQuery操作之前
        2、使用jQuery
    3、jQuery对象
        1、什么是jQuery对象
            jQuery对象是由jQuery对页面元素进行封装后的一种体现
            jQuery中所提供的所有操作都只针对jQuery对象，其他对象不能使用（如DOM对象）
        2、工厂函数 - $()
            想要获取jQuery对象 或 转换为jQuery对象的话，就必须要使用工厂函数
        3、DOM对象和jQuery对象之间的转换
            DOM对象：以DOM的方式获取出来的节点对象，都是DOM对象，DOM对象只能使用DOM中所提供的方法和属性，是不能访问jQUery提供的属性和方法
            jQuery对象：有jQuery封装而得到的对象。jQuery对象只能访问jQuery提供的属性和方法，是不能访问DOM提供的属性和方法
            1、将DOM对象转换为jQuery对象
                语法:var $obj = $(DOM对象)；
                注意：在为jQuery对象起名的时候，最好在变量名称前 + $;
            2、将jQuery对象转换为DOM对象
                1、var dom对象 = jQuery对象.get(0);
                2、var dom对象 = jQuery对象[0];
    4、JS中创建对象（补充）
        1、使用Object 直接创建对象
            var newObj = new Object（）；
            newObj.property = value1；//添加属性
            newObj.method1 = function(){
                //添加无参方法
            }
            newObj.method2 =function（arg）{
                //添加含参方法
            }
        2、使用构造器创建对象
            function 对象名（参数1，参数2，....）{
                //只能使用this来访问或创建当前对象的成员

//使用参数为属性赋值
                this.属性1 = 参数1；
                this.属性2 = 参数2；
                //创建方法
                this.funName = function(){

}
            }
            使用对象
            var obj1 = new 对象名（参数1，参数2，...）
        3、使用JSON创建对象
            1、什么是JSON
                JSON：JavaScript Object Notation - JS对象的表现形式
                JSON通常会作为轻量级的数据交换格式
                JSON一般表示只有属性没有方法的对象
            2、声明JSON对象
                1、使用键值对的方式来声明数据，键表示该对象的属性，值表示该对象的值
                2、所有的属性，必须用""双引号引起来，如果值是字符串的话，也必须用""双引号引起来，单引号有时不好用
                3、属性和值之间用：隔开
                4、多对属性之间用，隔开
                5、JSON对象使用{}来表示
                var person = {"name":"张无忌","age":25,"gender":"Male"}
    5、jQuery选择器
        1、作用：获取页面上的元素们，返回jQuery对象所组成的数组
            语法：$（"选择器"）；
        2、选择器的分类
            1、基础选择器
                1、ID选择器
                    用法：$("#ID值")
                    说明：返回HTML中指定ID的元素
                2、类选择器
                    用法：$(".className")
                    说明：返回HTML中所有class为className的元素
                3、元素选择器
                    用法:$("元素名称")
                    说明：返回HTML中所有指定标记的元素
                4、通用选择器
                    用法：$("*")
                    说明：返回HTML中所有的元素
                5、群组选择器
                    用法：$("selector,selector2,...")
                    说明：返回满足工厂函数内多有选择器的元素
            2、层级选择器：
                1、$("selector1 selector2"):后代选择器
                2、$("selector1 > selector2"):子代选择器
                3、$("selector1 + selector2")：相邻兄弟选择器
                    说明：匹配紧紧跟在selector1后面且满足selector2选择器的元素，如果selector1紧后面的元素不满足selector2时，则找不到
                4、$("selector1 ～ selector2")：通用兄弟选择器
                    说明：匹配selector1后面且满足selector2选择器的所有元素
            3、过滤选择器
                1、基本过滤选择器
                    1、：first：只匹配到一组元素中的第一个
                    2、：last：只匹配到一组元素中的最后一个
                    3、：not（selector）：在一组元素中，将满足selector的元素排除出去
                    4、：odd：匹配 (奇数索引1,3,5,7,...）的元素
                    5、：even：匹配（偶数索引0,2,4，...）的元素
                    6、：eq（index）：匹配下标等于index的元素
                    7、：gt（index）：匹配下标大于index的元素
                    8、：lt（index）：匹配下标小于index的元素
                2、内容过滤选择器
                    1、：contains（“text”）：匹配包含指定文本的元素
                    2、：empty：匹配空元素（不包含任何子元素以及文本）
                    3、：has（selector）：匹配含有指定选择器的元素
                    4、：parent：匹配本身是父元素的元素
                3、可见性过滤选择器
                    1、：visible：匹配所有的可见元素
                    2、：hidded: 匹配所有不可见元素
                4、状态过滤选择器
                    主要用在表单控件上
                    1、：enabled：匹配所有的可用元素
                    2、：disabled：匹配所有禁用元素
                    3、：checked：匹配所有被选中的元素（radio 和 checkbox）
                    4、：selected：匹配所有被选中的元素（select）
                5、子元素过滤选择器
                    1、：first-child：匹配属于其父元素中的第一个子元素
                    2、：last-child：匹配属于其父元素中的最后一个子元素
                    3、：nth-child（n）：匹配属于其父元素的第n个子元素
                        说明：n>=0的任意一个数，（n+1）表示大于0的任意整数，但是不能写成（1+n），n需要写在表达式之前
            4、属性选择器
                使用元素的属性来匹配页面的元素
                1、[attr]：匹配具有attr属性的元素
                    示例：$["id"]匹配所有具有id属性的元素
                2、[attr=value]：匹配attr属性值为value的元素
                    示例：匹配页面中所有文本框
                        1、$(":text")
                        2、$("input[type='text']")
                3、[attr!=value]
                4、[attr^=value]：匹配attr属性值是以value字符开始的元素们
                5、[attr$=value]：匹配attr属性值是以value字符结束的元素们
                6、[attr*=value]：匹配attr属性值中包含value字符的元素们
    6、jQuery操作DOM
        1、基本操作
            1、html（）：等同于DOM中的innerHTML
                作用：读取或者设置jQuery对象中的HTML内容，无参数表示获取，有参数表示设置
            2、text（）：等同于DOM中的innerText
            3、val（）：等同于DOM中的value
            4、属性操作
                1、attr（）：
                    作用：读取或设置jQuery对象的属性值
                    示例：
                        1、$("#main").attr("id");：获取id属性值
                        2、$("#main").attr("class","redBack")；：设置class属性值为reBack
                2、removeAttr（attrName）
                    作用：删除jQuery对象的指定属性
        2、样式操作
            1、attr（"class","className"）:为元素动态绑定class属性值
            2、$obj.addClass("className")：追加类选择器
                $obj.addClass("c1").addClass("c2").addClass("c3").html('测试文本')；
            3、removeClass（”className“）：删除指定的类选择器
            4、removeClass（）：删除所有的类选择器
            5、toggleClass（”className“）：
                样式切换
                    元素如果具有className选择器，则删除
                    元素如果没有className选择器，则添加
            6、hasClass（”className“）：判断元素是否包含className选择器
            7、css（”属性“，”值“）：为元素动态的设置某css属性和值
                $obj.css("background-color",'red');
            8、css(JSON对象)
                $obj.css({
                    "color":"red",
                    "font-size":"32px",
                });
        3、遍历节点
            1、children（） / children(selector)
                获取jQuery对象的所有子元素或带有指定选择器的子元素
                注意：以考虑子代元素，不考虑后代元素
            2、next（）/ next(selector)
                获取jQuery对象的下一个兄弟元素或满足selector的下一个兄弟元素
            3、prev（） / prev(selcetor)
                获取jQuery对象的上一个兄弟元素或满足selector的上一个兄弟元素
            4、siblings（）/ siblings（selector）
                获取jQuery对象的所有兄弟元素 或满足selector的所有兄弟元素
            5、find（selector）
                查找满足selector选择器的后代元素
            6、parent（）
                查找jQuery对象的父元素
        4、创建和插入节点
            1、创建对象
                语法：$("创建内容")
                示例：$("<div>文本内容</div>");
            2、插入节点
                1、内部插入
                    1、$obj.append（$new）：将$new作为$obj的最后一个子元素插入进来
                    2、$obj.prepend($new)：将$new作为$obj的第一个子元素插入进来
                2、外部插入
                    1、$obj.after（$new）:将$new作为$obj的下一个兄弟元素插入进来
                    2、$obj.before（$new）:将$new作为$obj的上一个兄弟元素插入进来
        5、删除节点
            1、remove（）
                语法：$obj.remove（）：删除$obj元素
            2、remove（“selector”）: 按选择器删除元素
            3、empty（）
                语法：$obj.empty():清空$obj中所有的内容
        6、替换和赋值（非重点）
            1、替换
                1、replaceWith
                    语法：$old.replaceWith($new)
                    使用$new元素替换$old元素
                2、replaceAll
                    语法：$new.replaceAll($lod)
                    使用$new元素替换$old元素
            2、赋值
                1、clone（）
                    $new = $old.clone();
    7、jQuery事件
        1、页面加载后执行
            HTML页面加载流程：
                1、向服务器发送请求
                2、接收服务器的相应
                3、在内存中生成DOM树
                4、渲染-显示内容到网页上
                5、执行window.onload
             jQuery处理的时候
                 1、向服务器发送请求
                2、接收服务器的相应
                3、在内存中生成DOM树
                4、执行 加载后的 操作
                5、渲染-显示内容到网页上
            如何实现页面加载后执行：
                1、$(document).ready(function(){
                    //页面的初始化操作，DOM树加载完成后就开始执行
                    });
                2、$().ready(function(){
                    //页面的初始化操作，DOM树加载完成后就开始执行
                    });
                3、$(function(){
                    //页面的初始化操作，DOM树加载完成后就开始执行
                    });
        2、jQuery实现事件的绑定
            1、方式1
                $obj.bind("事件名称"，function（）{
                    //事件操作
                    //允许使用this来表示当前元素(dom对象)
                })；
                $obj.bind("事件名称"，function（event）{
                    //事件操作
                    //允许使用this来表示当前元素(dom对象),
                    //允许传递event对象，作为事件对象
                })；
            2、方式2
                $obj.事件名（function（）{
                    //事件操作
                    //允许使用this来表示当前元素(dom对象)
                }）；
                $obj.事件名（function（event）{
                    //事件操作
                    //允许使用this来表示当前元素(dom对象)
                    //允许传递event对象，作为事件对象
                }）；
    8、jQuery动画
        1、基本显示 和 隐藏
            语法：
                显示：$obj.show(); / $obj.show(duration);毫秒为单位
                隐藏：$obj.hide(); / $obj.hide(duration);毫秒为单位
        2、滑动式显示 和 隐藏
            语法：
                显示：$obj.slideDown() / $obj.slideDown(duration);毫秒为单位
                隐藏：$obj.slideUp()  /     $obj.slideUp(duration);毫秒为单位    
        3、淡入淡出式显示 和 隐藏
            语法：
                显示：$obj.fadeIn() /   $obj.fadeIn(duration);毫秒为单位
                隐藏：$obj.fadeOut()    /  $obj.fadeOut(duration);毫秒为单位

　　9、jQuery插件

　　　　http://www.jq22.com

　　　　1、下载插件并引入（jquery,插件文件，css文件）

　　　　2、结合当前网页修改css

　　　　3、去插件中修改数据（替换图片/图片名称）

　　10、jQuery循环

　　　　each（）函数

　　　　方式1：

　　　　　　$(遍历对象).each(function(下标,遍历出来的数据){})

　　　　方式2：

　　　　　　$.each(遍历对象，function(下标，遍历出来的数据){})

　　　　说明：如果遍历的是字典的话下标就代表 字典的键 ，遍历出来的数据就是 字典的值

<body>
    <script src="/static/js/jquery-1.11.3.js"></script>
    <script>
        var arr = [
            {
                "name":"xdl",
                "age": 20,
                "gender":"男",
            },
            {
                "name":"gj",
                "age": 18,
                "gender":"女",
            },
        ]
        $(arr).each(function(i,obj){
            console.log(i+"："+obj.name);
        })
        $.each(arr,function (i,obj){
            console.log(i+"："+obj.name);
        })
    </script>
</body>

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <a href="https://www.baidu.com/s?wd=">图片</a>
        <a href="https://www.baidu.com/s?wd=">新闻</a>
        <script type="text/javascript">
            <!--获取所有的a标签-->
            var as = document.getElementsByTagName("a")
            for(var i=0;i<as.length;i++){
                <!--循环获取a每个标签-->
                var a = as[i]
                <!--获取a标签的文本-->
                var text = a.innerText
                <!--获取url-->
                var url = a.href
                <!--将原先的url与text文本拼接形成新的URL-->
                a.href = url+text
                alert(a.href)
            }
        </script>
    </body>
</html>