JS复习

第一天

1. javascript 简介

1.1 什么是javascript

1.1.1 概念: javascript是 基于对象 和 事件驱动 并具有相对安全性的 客户端 脚本语言
1.1.2 发展简史:
    ① Nombas公司1992年开发 嵌入式脚本语言 C-- 后改名 ScriptEase
    ② Netscape公司 1995年发布LiveScript 后改名javascript1.0
    ③ 三足鼎立  NetScape推出javascript1.1后,Microsoft推出Jscript, 加上 ScriptEase
    ④ 标准化 1997javascript1.1 作为草案 提交给 ECMA(欧洲计算机制造商协会) 。由来自 Netscape、Sun、
        微软、Borland 和其他一些对脚本编程感兴趣的公司的程序员组成的 TC39 锤炼出了 ECMA-262,该标准
        定义了名为 ECMAScript 的全新脚本语言.
1.1.3 组成: 核心(ECMAScript) 文档对象模型(DOM)  浏览器对象模型(BOM)
1.1.4 客户端浏览器上执行的脚本 JavaScript   VBScript    applet(需要安装JDK)
1.1.5 ECMAScript核心: JavaScript   ActionScript  ScriptEase
1.1.6 扩展:node.js  服务端开发(apache+php)手机app:  phonegap框架
1.1.7 课程 内容:
    JS 基本语法
    JS 函数/对象/数组
    JS 内置对象
    JS 事件
    BOM
    DOM
        HTML XML
    Ajax
    Jquery类库
    Bootstrap


1.1.8 浏览器
    IE    IE6  7  8     /  IE9+  EDGE
    非IE  Chrome firefox  opera  Safari ...

1.2 javascript的特点

①.javascript是一种脚本编程语言,也是一种解释性语言
②.javascript的语法结构与C++、java十分类似
③.javascript是一种基于对象的语言
④.javascript具有跨平台性。
⑤.安全性与简单性
⑥ 基于对象(真正的对象 封装 继承 多态)

1.3 javascript 和 java的区别

雷锋和雷峰塔

1.4 javascript 程序运行开发环境

1.NetScape.3.0 以上版本和IE3.0 以上版本
2.用于编辑HTML的字符编辑器

1.5 javascript 优点与局限

1.5.1 优点
    ①使用javascript在客户端进行验证,节省服务器资源  
    ②方便的操控页面中的各个对象,使网页更加友好
    ③使多种任务仅在客户端就可以完成而不需要网络和服务器的参与,从而支持分布式的运算和处理
1.5.2 局限
    ①兼容性
    ②javascript不能打开,读写和保存计算机上的文件

2. javascript基本语法

2.1 在HTML中使用javascript

① 写在header 中的 script标签内
② 外部文件导入 script标签导入 <script src="script.js"></script> 标签内不能写代码
③ 通过事件 写在标签内 <tag onclick="code...."></tag>

2.2 基本语法

2.2.1 区分大小写
    一切都区分大小写

2.2.2 标示符
    不能一数字开头,可以由 数字/字母/下划线/$ 组成

2.3 注释

单行注释:  //
多行注释:  /*  */

2.4 语句(指令结束符) ; 或者 换行

2.5 关键字和保留字

break       else        new     var
case        finally     return  void
catch       for         switch  while
abstract    enum        int     short
······

2.4 变量

2.5 数据类型 typeof() 返回一个值或变量 的数据类型

2.5.0 分类
    基本类型
        String(字串)  Number(数值)  Boolean(布尔)
    复合类型
        Object(对象)  Array(数组)
    特殊类型
        Null(空)  undefined(未定义)  function(函数)

2.5.1 数据类型 typeof()返回变量的类型
2.5.2 字符串类型
    定义字符串  ""  ''
    不论是单引号还是双引号 都可以解析 转义字符,都不能解析变量
    字符串连接符 +
2.5.2 数值类型
    ① 整数类型   十进制   十六进制   八进制
    ② 浮点型      科学计数法   浮点数的精度问题
    ③ 数值范围 5e324 ~ 1.7976931348623157e+308  超过范围回自动转换成 infinity(正无穷) -infinity(负无穷)
       可以使用 *isFinity() 验证是不是无穷  超出范围不能参与运算
    ④ NaN类型  Not a Number
        ① NaN与任何数字操作,结果都是NaN
        ② NaN与任何数都不相等,包括自己
        ③ 函数 isNaN() 判断是否是NaN
    ⑤ Number类型转换
        特点:  1.如果是布尔值,true和false分别转换为1和0
                2.数字,本色演出
                3. null  -> 0
                4. undifined  -> NaN
                5. 字符串:
                    a.“11”会变成11,“011”会变成11
                    b.“1.1”会变成1.1
                    c.“0xf”会变成相同大小的十进制整数值
                    d.  如果字符串是空的,则将其转换为0
                    e.  如果字符串包含除上述格式之外的字符,则将其转换成NaN
                    f. '12e2' => 1200
    ⑥ ParseInt类型转换
        特点:  1. 数字开头的字符串,忽略后面的字母
                2. 0x开头回转换成十六进制, 0不可以
                3. 科学计数法无法行,忽略后面的字母
                4.空字符串 NaN
                5. null true false NaN

    ⑦ parseFloat类型转换
        特点:1, 第一个小数点有效,第二个无效
              2. 数字开头的字符串,忽略后面的字母
              3, 科学计数法有效
              4, 16进制转换为0
              5 八进制 ,忽略前面的0, 无法换算八进制
2.5.3 其他数据类型
2.5.3 隐式数据类型转换
    ①数字类型: 在字符串环境下 隐身转换为字符串 在布尔环境下
    ②字符串类型 在数字环境下,可以隐式转换为字符串中的数字或NaN;在布尔环境下,可以隐式转换为true。
    ③空字符串:在数字环境下可以隐式转换为0;在布尔环境下可以隐式转换为false;
    ④字符串”true“:在数字环境下可以隐式转换位1;布尔为true
    ⑤.字符串“false”:数字环境为0,布尔位false
    ⑥null:在字符串环境下,转换为“null”;数字环境下,转换为0,布尔环境下,转为false
    ⑦NaN:在字符串环境下可以隐式转换为“NaN”;布尔环境下,转换为false
    ⑧undefined:字符串环境下,转换为“undefined”,数字环境下,转为NaN,布尔下,转为false
    ⑨true:字符串转为“true”,数字环境下转为1
    10false:字符串转为“false”,数字环境下转为0

2.6 运算符

2.6.1 算术运算符:
    1.加法运算符     +
    2.减法运算符     -
    3.乘法运算符     *
    4.除法运算符     /
    5.模运算符        %
    6.负号运算符     -
    7.正号运算符     +
    8.递增运算符     ++
    9.递减运算符     --
2.6.2  关系运算符
    1.相等运算符     ==
    2.等同运算符     ===
    3.不等运算符     !=
    4.不等同运算符    !==
    5.小于运算符     <
    6.大于运算符     >
    7.小于或等于运算符  <=
    8.大于或等于运算符      >=
    9.in运算符
    判断一个值是否属于某个数组或者一个属性是否属于一个对象
    10.instanceof
    判断一个对象的实例是否属于某个对象
    11.字符串运算符   +连字符
    12.赋值运算符    =
2.6.3 逻辑运算符:
    1.逻辑与   &&
    2.逻辑或   ||
    3.逻辑非   !
2.6.4 其他运算符:
    1.条件运算符     ?:
    2.new运算符        new 对象类型
    3.void运算符   
    void运算符可以让操作数进行运算,但是却舍弃运算之后的结果。
    4.typeof运算符   说明操作数是什么类型。 typeof(a)
2.6.5.对象属性存取运算符
    我们使用.来调用和设置对象的属性或者方法 d.name  .
2.6.6.delete运算符
    delete运算符可以用来删除变量、对象的属性、或数组中的元素。delete运算符返回的是布尔值类型。
    delete 对象名      delete 变量名
    delete 对象名.属性
    delete 数组[索引]   
2.6.7.逗号运算符
    var a = 1;
    var b = 2;
    c = a+b , d = a-b;
    8.this运算符   
    this代表的是当前对象。与php的$this的道理一样。

2.7 语句

1. while语句
2. do…while语句
3. for语句
4. for…in语句
5. break语句
6. continue语句
7. with语句

JS第二天

JS函数

1. 函数的声明
    1.1. function  关键字方式
        function 函数名([形参列表]){
            JS  code...
        }
    1.2. 表达式方式
        var 函数名 = function([形参列表]){
            JS  code...
        }
    1.3. Function构造函数
        var 函数名 = new Function('参数1', 'JScode');

2. 调用函数
    加括号 调用
    不加括号 引用

3. JS函数特点
    JS的函数可以重复定义

4. JS函数中的参数
    4.1 形参和实参
        实参个数 > 形参个数 不受影响
        实参个数 < 形参个数 没有赋值的形参 会自动赋值为undefined
    4.2 参数的默认值
        在函数的内部 使用 判断是否为undefined的方式 来赋值默认值.
    4.3 可变参数个数的函数
        arguments  数组,内含所有实参


5. JS中的变量作用域  全局和局部变量
    在函数内 使用var 定义的是 局部变量
    在函数外 使用var 定义的是 全局变量
    在函数内 不使用var 定义的是 全局变量

6. JS的作用域链

    函数的执行 依赖于变量的作用域, 这个作用域是在 函数定义声明时决定的,而不是 函数调用时决定的!

    如果当前作用域里 没有声明变量,则向上一层作用域里面找.
    如果直到找到全局里 还都未找到 则在执行函数时 会报错.


7. 自执行函数 与 闭包

    自执行
    ( function(){console.log(1)} )()
    ( function(){console.log(2)} () )
    这种写法的含义是 将函数声明 转换成 函数表达式,消除了JS引擎识别函数表达式 和 函数声明的歧义.
    告诉JS引擎 这是一个函数表达式,不是函数声明,并且可以在后面 加括号,立即执行 函数的内的代码.


    闭包
    简单说,闭包就是 能够读取 其他函数内部变量的 函数。
    由于在JS中,只有函数内部的 子函数 才能读取 局部变量,
    因此可以把闭包 简单理解成 "定义在一个 函数内部的 函数"。
    所以,在本质上,闭包就是将 函数内部 和 函数外部 连接起来的一座桥梁。
    
    闭包的最大用处有两个:
        一个是可以读取 函数内部的变量,
        另一个就是 让这些变量的值 始终保持在内存中。

JS第三天

JS数组

1. 声明一个数组
    1.1 Array
        var list = new Array();
        var list = new Array(length);
        var list = new Array(v1,v2,v3....);
    1.2 JSON
        var list = [];
        var list = [v1, v2....];

2. 数组特点
    1. JS数组不能使用 [] 追加元素,要使用 push()
    2. JS数组的下标 是连续的,跳跃着赋值数组元素.数组的商都会有累加变化,中间的元素会自动赋值为undefined
    3. JS没有关联数组

3. 遍历
    for
    for in

4. 数组 属性
    length  长度

5. 数组 方法

JS第四天

JS内置对象

  1. Boolean
  2. Number
  3. String
  4. RegExp
  5. Date
  6. Math
  7. Array

PS: JS随机数的产生.

Math.random()函数返回0和1之间的伪随机数,可能为0,但总是小于1,(0,1)

生成n-m,包含n 但不包含m 的整数:
1. 算出 m-n的值,假设等于w
2. Math.random()*w
3. Math.random()*w+n
4. parseInt(Math.random()*w+n, 10)

生成n-m,不包含n 但包含m 的整数:​
1. 算出 m-n的值,假设等于w
2. Math.random()*w
3. Math.random()*w+n
4. Math.floor(Math.random()*w+n) + 1

生成n-m,不包含n和m的整数:
1. 算出 m-n-2的值,假设等于w
2. Math.random()*w
3. Math.random()*w+n +1
4. Math.round(Math.random()*w+n+1) 或者 Math.ceil(Math.random()*w+n+1)

生成n-m,包含n和m的随机数:
1. 算出 m-n的值,假设等于w
2. Math.random()*w
3. Math.random()*w+n
4. Math.round(Math.random()*w+n) 或者 Math.ceil(Math.random()*w+n)

JS第五天

JavaScript 事件

1. 事件的绑定

  • 事件作为 元素的属性
    <button event="JS CODE..."></button>
  • 事件作为 元素对象的属性
    element.event = function() {}
    element.event = funName;
  • 事件监听(标准)
    非IE: element.addEventListener('事件名字', funName, false);
    IE:   element.attachEvent('事件名字', funName);

2. 解除绑定

  • 第1种和第2种的绑定方式
    重写覆盖事件属性为null  function(){}
    element.event = null;
    element.event = function(){}
  • 监听方式
    element.removeEventListener('事件名字', funName, false);
    element.detachEvent('事件名字', funName);

3. 给一组元素绑定事件和this的使用

  • 循环绑定事件,获取触发事件的 元素对象时,需要使用this.
  • 元素标签内部 绑定事件时,可以传入this,表示 该元素对象自己.

4. 闭包 closure

  • 在循环绑定事件时,将循环变量保留下来,就必须使用闭包.
  • 用一组元素去控制另一组元素时, 需要使用闭包.
  • 语法:
    for ( ... ) {
        (function(i,x,y){
            element.event = function () {
                // 使用 i,x,y
            }
        })(i,x,y);
    }

5. 常用事件

5.1 鼠标事件

  • onclick 鼠标单击事件

  • ondblclick 鼠标双击事件

  • oncontextmenu 鼠标右击事件

  • onmouseover 鼠标指向触发

  • onmouseout 鼠标移开触发

  • onmousedown 鼠标按下触发

  • onmouseup 鼠标松开触发

  • onmousemove 鼠标移动触发

JS第六天

JS事件

5.2 键盘事件

  • onkeydown 按下按键触发
  • onkeyup 松开按键触发
  • onkeypress 按下并松开按键触发(高级事件) 不是所有按键都能触发,非输出型按键都不能触发 方向键/tab/shift/大小写切换/ctrl/alt

5.3 表单事件

  • onsubmit 表单被提交时触发
  • onreset 表单被重置时触发
  • onfocus 获取焦点时触发
  • onblur 失去焦点时触发
  • onchange 改变表单控件的内容或状态时就触发 用户input元素时,value值变化且失焦才会触发
  • oninput 非IE: 输入时触发
  • onpropertychange IE8: 输入时触发
  • onselect 选区文本时触发

5.4 框架/对象事件

  • onload 文档加载完触发/图片加载完触发

  • onunload 文档关闭时触发 IE

  • onbeforeunload 文档关闭时触发 非IE 浏览器阻止了关闭前的弹框 需要return "string..."

  • onabort 图片加载过程中中断触发 https://krpano.com/panos/tokyo45gp/

  • onerror 图片加载错误触发

  • onresize 窗口/框架大小变化时触发

  • onscroll 元素滚动条在滚动时触发

5.5 其他事件

  • oncopy 拷贝内容时触发

  • oncut 剪切内容时触发

  • onpaste 粘贴内容时触发

  • onplay 音/视频开始播放时触发(audio/video)

  • onpause 音/视频暂停时触发(audio/video)

  • onended 音/视频播放结束时触发(audio/video)

6. Event事件对象

  • 6.1 获取 var e = en || window.event;
  • 6.2 属性
    e.clientX  鼠标x坐标
    e.clientY  鼠标y坐标
    e.keyCode  按键码

7. 常用HTML元素属性

    innerHTML   双标签之间的文本

    当前元素 相对与body 或已定位的父元素的 偏移量
    offsetTop
    offsetLeft

    当前元素 左边缘或顶边缘 滚过的像素值
    scrollTop
    scrollLeft

    className   当前元素的class属性值
    tagName     当前元素的标签名

BOM

1. 什么是BOM

Browser Object Model  浏览器对象模型

2. JavaScript 对象层次

2.1 对象种类

自定义对象 Object
内置对象  A B N S R D M G
BOM 浏览器对象模型
DOM 文档对象模型

2.2 对象树 (倒树状结构)

                window
                   |
history  location  document screen  navigator
                    |
            doc       html
                        |
                    head   body
                            |
                    h1  p  div a  i u b ...

3. BOM 对象

3.1 window

- 描述 整个浏览器窗口
- 它是JS(web)中 所有对象的根对象
- 使用window的属性和方法时, 省略window的调用
- 自定义对象/变量/函数 都属于window

属性:
    见手册
方法:
    clearInterval() 取消由 setInterval() 设置的 timeout。 
    clearTimeout() 取消由 setTimeout() 方法设置的 timeout。 
    setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。 
    setTimeout() 在指定的毫秒数后调用函数或计算表达式。 

    alert()    警告框
    confirm()  确认框
    prompt()   输入框

    open()   打开新窗口
    close()  关闭自己打开过的窗口
    print()  打印

    scrollTo()  滚到哪去
    scrollBy()  滚多少

3.2. HTML DOM 对象参考

2.1 document 对象
2.2 form 对象
2.3 image 对象
2.4 anchor 对象
2.5 base 对象
2.6 canvas 对象
2.7 Event 对象
2.8 input 系列对象
    blur()    失去焦点
    focus()   获取焦点
    select()  选中
2.9 select 对象
2.10 option 对象
2.11 style 对象
2.11 table 对象
2.12 tableRow 对象
2.13 tableCell 对象

JS第八天

节点操作XMLDOM

文档对象模型—节点操作 XML DOM 节点

1.节点介绍

1.1 什么是节点 node
    HTML文档中 所有的组成部分 都称之为节点

    document   文档
    element    元素标签
    attr       属性 Attribute
    text       文本
    comment    注释

1.2 节点树
    子节点
    父节点
    同辈节点
    后代节点
    先辈节点

1.3 节点的访问
    得到节点
        document   直接使用
        element    使用方法 get...
        attr       element.getAttributeNode(attrname)
        text       子节点
        comment    子节点
    获取子节点
        childNodes
    获取子元素节点
        children

    获取第一个子节点
        firstChild
    获取最后一个子节点
        lastChild

    获取父节点
        parentNode
    获取父元素节点
        parentElement

    获取前一个节点
        previousSibling
    获取后一个节点
        nextSibling

1.4 节点属性
    nodeName
        document   #document
        element    标签名
        attr       属性名
        text       #text
        comment    #comment
    nodeValue
        document   null
        element    null
        attr       属性值
        text       文本内容
        comment    注释内容
    nodeType
        document   9
        element    1
        attr       2
        text       3
        comment    8

2.节点操作

2.1 获取节点
    document    直接使用
    element     使用方法 get.../子节点/父节点/同辈节点
    attr        element.attr
                element.getAttributeNode(attrname) 获取属性节点
                element.getAttribute(attrname) 获取属性值

2.2 改变节点(改变节点的值) nodeValue
    element: 无意义
    attr: 
        element.setAttribute(attrnamem, value);
        element.attr = value;
2.3 删除节点
    属性节点: 把值赋值为null 或 removeAttribute();
    元素节点: removeChild(node) 需要找到父元素节点

2.4 替换节点
    属性节点: setAttribute(attrnamem, value);
    元素节点: replaceChild(new_node, old_node) 需要找到父元素节点

2.5 插入节点
    属性节点: 
        setAttribute(attrnamem, value);
        setAttributeNode(attrnamem).nodeValue;
    元素节点: 
        appendChild(node)  追加
        insertBefore(new_node, old_node)  指定位置之前

2.6 创建节点
    属性节点: document.createAttribute(attrname);
    元素节点: document.createElement('tagName');

2.7 克隆节点
    cloneNode()   true / false(默认值)
  1. XML 对象

    node nodeList document element attr text comment

  2. HTMLElement对象

    innerHTML
    innerText
    outerHTML

    盒子模型实际宽高: 宽 + 高 + 内边距 +边框 offsetWidth offsetHeight 宽高 + 内边距 clientWidth clientHeight 宽高 + 内边距 + 计算元素内部的大小 scrollWidth scrollHeight

    视口高度 document.documentElement.clientHeight 文档高度 document.documentElement.scrollHeight

JS第九天

特效扩展

银行卡自动截断

轮播图(Banner)

图片无缝轮滚

下滑加载图片

模态框(Modal)

蛇形文字

自定义输出表格(节点方式)

JS第十一天

AJAX

  1. Ajax

    async javascript and xml 异步的JS和xml

    请求 客户端向服务器请求一个文件 响应 服务器 把文件内容 返回给客户端, 一般服务端有输出才算真真的响应. 传统的请求,通过地址栏刷新请求 AJAX 通过技术 偷偷的请求

  2. XMLHttpRequest对象 XHR

    2.1 概念 XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应,并且能够以文本或者一个 DOM 文档的形式返回内容。

    2.2 常用属性 readyState 请求响应的状态 0 Uninitialized 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。 1 Open open() 方法已调用,但是 send() 方法未调用。请求还没有被发送。 2 Sent Send() 方法已调用,HTTP 请求已发送到 Web 服务器。未接收到响应。 3 Receiving 所有响应头部都已经接收到。响应体开始接收但未完成。 4 Loaded HTTP 响应已经完全接收。

     status   HTTP的响应状态码
         200 响应成功
         404 文件不存在
         304 文件来自于缓存
         500 服务器未知错误 
         503 服务器宕机 或 服务不可用
    
     responseText  获取服务器的响应返回文本
    

    2.3 常用方法 open() 初始化请求 参1 method POST/GET/HEAD 参2 url 请求主体 参3 是否同/异步 默认是true(异步) 参4,5 认证的用户名和密码,需要时填写 send() 发送请求 GET方式 无参 POST方式 有可选参数

     xhr.setRequestHeader() 设置请求头
     xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
    

    2.4 事件句柄 onreadystatechange readyState的值一变化就触发

JS12天

继续AJAX

  1. Ajax+php 请求流程
  • 创建XHR对象
  • 初始化请求
  • 发送请求
  • 接收 并处理响应
  1. 处理json数据

    PHP: json_encode() JS: eval() 或 JSON.parse()

  2. 同步和异步

    open()方法的参3,用于控制是否同异步 默认参数为true,表示请求是异步的,AJAX不会影响到其他程序的运行. 参数为false,表示请求是同步的.AJAX将阻塞之后的程序的继续运行,直到AJAX响应完全接收完毕为止

6 post 和 get

true
false

7.Ajax 无法跨域 与 jsonp

```
function makedata(obj) {
    // alert(obj);
    console.log(obj);
    for (var i in obj) {
        box.innerHTML += i + ':' + obj[i] + '<br>';
    }
}

// JSONP关键步骤
// JS标签不受同源策略
function loadHtml() {
    // 创建JS标签
    var js = document.createElement('script');
    // 设置JS标签的SRC值
    js.src = 'http://127.0.0.1/s76/JS12/php/jsonp.php';
    // 将JS标签添加到页面中
    document.body.appendChild(js);
}
```

JS第十三天

jQuery

  1. jQuery介绍

    1.1 什么是jQuery jQuery是 JavaScript 的类库

    1.2 jQuery特点 写得少 干得多

    1.3 jQuery优势 ① 开源 ② 便捷的 选择器 ③ 方便的dom操作 ④ 丰富的动画操作 ⑤ 简单的ajax操作 ⑥ 兼容性 ⑦ 方便的插件机制

    1.4 jQuery缺点 额外的 添加 jQuery文件,增加网络传输量

    1.5 jQuery版本 jQuery 1.X 支持IE jQuery 2.X IE9+ 其他…

  2. jQuery的基本语法

    https://www.jquery123.com/ [手册]

    2.1 jquery标准的使用方式 标准入口 $(document).ready(function(){ JS .. }); 简写入口 $(function(){ JS… });

    2.2 ready和onload的区别 1). 触发点 ready 文档中的dom加载完就触发 onload 文档中的一切都加载完 才触发 2). 绑定逻辑 ready 可以绑定多个事件(事件监听) onload 后面的绑定 会覆盖前面的代码

    2.3 链式操作风格 JQDOM.css().attr().css();

    2.4 jQueryDOM 与 JSDOM 的区别 以及相互转化 区别: JQDOM 通过 $() 获取到的是一个数组对象 JSDOM 通过 GET… 获取到的是一个元素对象 互相转换: JSDOM -> JQDOM $(JSDOM) JQDOM -> JSDOM JQDOM[index] JQDOM.get(index)

    2.5 jquery命名冲突 $

  3. jQuery的选择器

    4.1 基本选择器
        *       通配符选择器
        #id     ID选择器
        .class  class选择器
        tagName 标签选择器
        s1,s2,s3 组合/分组选择器

    4.2 层级选择器
        selecotor selecotor  所有的后代元素
        selecotor>selecotor  所有的子元素
        selecotor+selecotor  紧邻着的下一个同辈元素
        selecotor~selecotor  紧邻着的所有同辈元素

    4.3 过滤选择器
        :first         首个
        :last          最后一个
        :eq(index)     指定第几个
        :lt(index)     索引小于
        :gt(index)     索引大于
        :even          索引为偶数的,0索引算作为偶数
        :odd           索引为奇数的
        :header        所有的h标签
        :not(selector) 排除指定选择器所选的元素

    4.4 内容选择器
        :contains(text)  匹配包含指定文本的元素
        :has(selector)   匹配含有选择器的所匹配的元素的元素
        :parent          匹配含有子元素或文本的元素
        :empty           匹配所有不含子元素 或文本的元素

    4.5 可见性选择器
        :hidden       匹配所有不可见元素
        :visible      匹配所有可见元素

    4.6 属性选择器
        select[attrname]            选择有指定属性的元素
        select[attrname='value']    选择值 等于value的元素
        select[attrname!='value']   选择值 不等于value的元素
        select[attrname^='value']   选择值 以value开头的元素
        select[attrname$='value']   选择值 以value结尾的元素
        select[attrname*='value']   选择值 包含value的元素
        [][][][]....                多个属性选择器,进一步做筛选
 
    4.7 子元素选择器
        :first-child    是否为首个子元素
        :last-child     是否为最后一个子元素
        :nth-child(n)   是否为父元素的第N个子元素
        :only-child     是否为父元素的唯一子元素(独苗)


    4.8 表单选择器
        :input 
        :text 
        :password 
        :radio 
        :checkbox 
        :submit 
        :image 
        :reset 
        :button 
        :file 
        :hidden 

    4.9 表单对象选择器
        :enabled    匹配所有可用元素
        :disabled   匹配所有不可用元素
        :checked    匹配所有被选中的元素
        :selected   匹配所有被选中的select元素