JavaScript

#JavaScript概述:
    JS:网页上动态效果
    JS:运行在浏览器上的脚本语言 :写在<script></script>中
    三个组成:ECMAScript DOM BOM
    基本语法:
        区分大小写
        弱变量类型(声明):(与Java不同int String...) var i =3;var s = "abd";
        数据类型:
            原始类型:undefined,boolean,string,number,null
            引用类型:
            运算符:基本一致 "===" 类型和值全一致才相等

----

##JS开发套路:
    - JS通常由一个事件触发;
    - 触发一个函数,定义一个函数;
    - 获得操作对象的控制权;
    - 修改要操作的对象的属性或值;
        - 获取某个标签的属性:
          1. 对于sytle外面的直接`.属性`获取
          2. style里面的`.style.属性`获取
        - 修改:
            - `=`重新赋值修改
                                                                              
1. 注册页表单校验:
Document 对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
JS校验正则表达式
onsubmit:此事件 依赖于返回值
2. 图片轮播的效果(设置定时)
    - setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
    - setTimeout() 在指定的毫秒数后调用函数或计算表达式。
   
    * 均会返回一个ID,使下面两个方法可以通过此ID清除定时效果
   
    - clearInterval() 取消由 setInterval() 设置的 timeout。
    - clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
3. 定时弹出广告定时隐藏(无法修改图片属性)
    - 利用style里面的display属性:
        - block:显示
        - none:隐藏

##JS中的BOM对象:
BOM:浏览器对象模型
Browser:
    - Window :
        window中的方法可以直接用,可以通过window获得以下四个对象中的方法
    - Navigator
    - Screen
    - History
    - Location
window对象:
    - 方法 描述
    * `alert() 显示带有一段消息和一个确认按钮的警告框。`
    - blur() 把键盘焦点从顶层窗口移开。
    * `clearInterval() 取消由 setInterval() 设置的 timeout。`
    * `clearTimeout() 取消由 setTimeout() 方法设置的 timeout。`
    - close() 关闭浏览器窗口。
    * `confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。`
            确认:返回true 取消:返回false
    - createPopup() 创建一个 pop-up 窗口。
    - focus() 把键盘焦点给予一个窗口。
    - moveBy() 可相对窗口的当前坐标把它移动指定的像素。
    - moveTo() 把窗口的左上角移动到一个指定的坐标。
    * `open() 打开一个新的浏览器窗口或查找一个已命名的窗口。`  
    - print() 打印当前窗口的内容。
    *` prompt() 显示可提示用户输入的对话框。 `
            返回值:对话框输入的内容
    - resizeBy() 按照指定的像素调整窗口的大小。
    - resizeTo() 把窗口的大小调整到指定的宽度和高度。
    - scrollBy() 按照指定的像素值来滚动内容。
    - scrollTo() 把内容滚动到指定的坐标。  
    * `setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。 `
    * `setTimeout() 在指定的毫秒数后调用函数或计算表达式。`
Navigator ：包含的是浏览器的信息.
Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。
虽然这个对象的名称显而易见的是 Netscape 的 Navigator 浏览器，但其他实现了 JavaScript 的浏览器也支持这个对象。
Navigator 对象的实例是唯一的，可以用 Window 对象的 navigator 属性来引用它。

    - appCodeName 返回浏览器的代码名。
    - appMinorVersion 返回浏览器的次级版本。  
    - appName 返回浏览器的名称。
    - appVersion 返回浏览器的平台和版本信息。
    - browserLanguage 返回当前浏览器的语言。
    - cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值。
    - cpuClass 返回浏览器系统的 CPU 等级。
    - onLine 返回指明系统是否处于脱机模式的布尔值。
    - platform 返回运行浏览器的操作系统平台。
    - systemLanguage 返回 OS 使用的默认语言。  
    - userAgent 返回由客户机发送服务器的 user-agent 头部的值。  
    - userLanguage 返回 OS 的自然语言设置。

Screen:用来获得屏幕信息:
    - availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。
    - availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。
    - bufferDepth 设置或返回调色板的比特深度。
    - colorDepth 返回目标设备或缓冲器上的调色板的比特深度。
    - deviceXDPI 返回显示屏幕的每英寸水平点数。
    - deviceYDPI 返回显示屏幕的每英寸垂直点数。
    - fontSmoothingEnabled 返回用户是否在显示控制面板中启用了字体平滑。
    - height 返回显示屏幕的高度。
    - logicalXDPI 返回显示屏幕每英寸的水平方向的常规点数。  
    - logicalYDPI 返回显示屏幕每英寸的垂直方向的常规点数。  
    - pixelDepth 返回显示屏幕的颜色分辨率（比特每像素）。
    - updateInterval 设置或返回屏幕的刷新率。
    - width 返回显示器屏幕的宽度。

###History:
    - back() 加载 history 列表中的前一个 URL。
    - forward() 加载 history 列表中的下一个 URL。
    - go() 加载 history 列表中的某个具体页面。
###Location:把用户带到一个新的地址
    - href:跳转到链接

#DOM模型:
##DOM的概述：
    什么是DOM
    DOM：Document Object Model：文档对象模型.
    将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子.
    * 节点:
        - 整个文档是一个文档节点
        - 每个 HTML 元素是元素节点
        - HTML 元素内的文本是文本节点
        - 每个 HTML 属性是属性节点
        - 注释是注释节点
##DOM的使用：
    知道document，element，attribute中的属性和方法
##DOM的常用的操作(增删改查):
获得元素：
    * document.getElementById();        -- 通过ID获得元素.
    * document.getElementsByName();        -- 通过name属性获得元素.
    * document.getElementsByTagName();    -- 通过标签名获得元素.
创建元素：
    * document.createElement();            -- 创建元素
    * document.createTextNode();        -- 创建文本
添加节点：
    * element.appendChild();            -- 在最后添加一个节点.
    * element.insertBefore();            -- 在某个元素之前插入.
删除节点：
    * element.removeChild();            -- 删除元素
【使用DOM完成对ul中添加一个li元素】
            function addElement(){
                var city = document.getElementById("city");
                // 创建一个元素:
                var liEl = document.createElement("li");
                // 创建一个文本节点:
                var text = document.createTextNode("深圳");
                // 添加子节点:
                liEl.appendChild(text);
                city.appendChild(liEl);
            }

**省市联动**



标签值是什么:
(单选框,复选框,下拉列表...)
`单选框标签的值`:被选中的value值,只有一个
`复选框标签的值`:被选中的value值,有多个
`下拉列表标签的值`:被选中的value值,只有一个

JQuery

#JQuery
##JQuery概述:
    - JQuery是一个JS的框架（JS的类库）.对传统的JS进行了封装,提供方法
    - 现在企业的开发中往往不会使用传统的JS进行开发，通常都会使用JS框架进行开发.
    - JS的常用框架:
        JQuery,ExtJS,DWR,Prototype,angular js...angular js和Java后台思想比较对等
##JQuery入门:
    - 引入JQuery的js文件:<script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
    - JQuery的核心函数:$();
    - JQuery的入口函数:$( function(){} );
    * window.onload 和`S();`区别:window.onload需要等页面加载完成,S();只需等到DOM树绘制完成,节点完成

##JQ对象和JS对象的转换:
    ***JQ方法只能由JQ对象调用,JQ方法只能由JQ对象调用***

    - JS-->JQ:$(d)(利用核心函数)
    - JQ-->JS:
        1. $d1[0].innerHTML = "将JQ的对象转成JS对象"
        2. $d1.get(0).innerHTML = "将JQ的对象转成JS对象的方式二";
##JQ的效果(显示隐藏)
    JQ的效果操作:
    * show();
        * 使用一:Jq对象.show();
        * 使用二:Jq对象.show(“slow”); // slow,normal,fast
        * 使用三:Jq对象.show(毫秒值); // 1000
        * 使用四:Jq对象.show(毫秒值,function(){});
   
    * hide();
        * 使用一:Jq对象.hide();
        * 使用二:Jq对象.hide(“slow”); // slow,normal,fast
        * 使用三:Jq对象.hide(毫秒值); // 1000
        * 使用四:Jq对象.hide(毫秒值,function(){});
   
    * slideDown();    --向下滑动
        * 使用一:Jq对象.slideDown();
        * 使用二:Jq对象.slideDown(“slow”); // slow,normal,fast
        * 使用三:Jq对象.slideDown(毫秒值); // 1000
        * 使用四:Jq对象.slideDown(毫秒值,function(){});
   
    * slideUp();    --向上滑动
        * 使用一:Jq对象.slideUp();
        * 使用二:Jq对象.slideUp(“slow”); // slow,normal,fast
        * 使用三:Jq对象.slideUp(毫秒值); // 1000
        * 使用四:Jq对象.slideUp(毫秒值,function(){});
   
    * fadeIn();        --淡入
        * 使用一:Jq对象.fadeIn();
        * 使用二:Jq对象.fadeIn(“slow”); // slow,normal,fast
        * 使用三:Jq对象.fadeIn(毫秒值); // 1000
        * 使用四:Jq对象.fadeIn(毫秒值,function(){});
   
    * fadeOut();    --淡出
        * 使用一:Jq对象.fadeOut();
        * 使用二:Jq对象.fadeOut(“slow”); // slow,normal,fast
        * 使用三:Jq对象.fadeOut(毫秒值); // 1000
        * 使用四:Jq对象.fadeOut(毫秒值,function(){});
   
    * animate();    --自定义动画
    * toggle();        --单击切换函数
        * Jq对象.toggle(fn1,fn2...);单击第一下的时候执行fn1,单击第二下执行fn2...

##JQ的选择器(获得符合条件的所有节点,并封装成JQ对象):
基础选择器:
    - id选择器
         用法:$(“#id”)
    - 类选择器
         用法:$(“.类名”)
    - 元素选择器
         用法:$(“元素名称”)
    - 通配符选择器(基本不用)
         用法:$(“*”)
    - 并列选择器
         用法:$(“选择器,选择器,选择器”)
层级选择器:
    - 后代选择器：使用空格` `所有后代包含孙子及以下的元素
    - 子元素选择器：使用`>`第一层的元素（儿子）
    - 下一个元素:使用`+`下一个同辈元素
    - 兄弟元素:使用`~`后面所有的同辈元素

基本过滤选择器:
(选择器组合多种多样很灵活,edg:`$(".table tr:even")`)
    - :first
    - :not(selector)
    - :even
    - :odd
    - :eq(index)
    - :gt(index)
    - :lang1.9+
    - :last
    - :lt(index)
    - :header
    - :animated
    - :focus
    - :root1.9+
    - :target1.9+

内容选择器:
    - :contains(text)
    - :empty
    - :has(selector)
属性
    - [attribute]
    - [attribute=value]
    - [attribute!=value]
    - [attribute^=value]
    - [attribute$=value]
    - [attribute*=value]
    - [attrSel1][attrSel2][attrSelN]
可见性选择器:
    - :hidden
    - :visible
表单选择器:
    - :input
    - :text
    - :password
    - :radio
    - :checkbox
    - :submit
    - :image
    - :reset
    - :button
    - :file
    - :hidden
表单对象属性选择器:
    - :checked `用于单选/复选框,获得所有被选中的元素`
    - :selected `用于下拉列表,获得被选中的元素`
##JQuery文档处理:
内部插入:
    - append(content|fn) (元素内部向后插入)
    - appendTo(content)
    - prepend(content|fn) (元素内部向前插入)
    - prependTo(content)
外部插入:
    - after(content|fn)    (元素外部向后插入)
    - insertAfter(content)
    - before(content|fn) (元素外部向前插入)
    - insertBefore(content)
删除:
    - empty()  (不包括自己)
    - remove([expr]) (包括自己)

##JQuery修改样式:
    1.通过css()函数：适用于样式代码比较少的情况
   
    2.addClass()/removeClass()/toggleClass():适用于样式事先定义好的情况
##JQuery操作元素属性:
    - $("#id").prop("src")  获得属性的值
    - $("#id").prop("src","da") 修改属性的值
    - $("#id").prop({"":"","":""}) 一次性修改多个属性
##html()/text()/val()
    - $("#id").html();获取元素里面的html代码
    - $("#id").html("<span>da</span>") 用括号里面的内容覆盖原有的内容，可以在里面写html标签
    -
    - $("#id").text();获取元素里面的文本
    - $("#id").text("<span>fada</span>");用括号里面的内容覆盖原有文本内容，如果写了html标签不会被识别为html
    -
    - $("#id").val():获取元素value属性的值
    - $("#id").val("afda") 用括号里面的内容去设置元素value属性
##遍历:

    $("img").each(function(i,n){
         i:遍历的下表
         n:遍历出来的每一个
    });

    - $.each(object,function(i,n){
    -     object:待遍历的数组
    -     i:遍历的下表
    -     n:遍历出来的每一个
    - });
##查找过滤:
    - 1.parent()
    - 2.find()
    - 3.is()

##JQuery常用事件:
事件处理:
    - on(eve,[sel],[data],fn)1.7+
        在选择元素上绑定一个或多个方法。
    - bind(type,[data],fn)
    - one(type,[data],fn)
        为每一个匹配元素的特定事件（像click）绑定一个一次性的方法。
    - trigger(type,[data])
        在每一个匹配的元素上触发某类事件。 (事件单独绑定方法,某类事件为this绑定的事件).这个函数也会导致浏览器同名的默认行为的执行,比如触发 `blur`事件,浏览器也会将光标从该元素上移除
    - triggerHandler(type, [data])
        用法与trigger相同,有下列三个不同:
        * 第一，他不会触发浏览器默认事件。
        * 第二，只触发jQuery对象集合中第一个元素的事件处理函数。
        * 第三, 这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象
    - unbind(t,[d|f])
事件委派:
delegate(selector,[type],[data],fn)
    指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
    使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
事件切换
hover(over,out)
    当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数(over)。当鼠标移出这个元素时，会触发指定的第二个函数(out)。

事件:
    - blur([[data],fn])
    - change([[data],fn])
    - click([[data],fn])
    - dblclick([[data],fn])
    - focus([[data],fn])
    -
    - focusin([data],fn) `当元素获得焦点时触发 focusin 事件。focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。`
    - focusout([data],fn) `当元素失去焦点时,触发 focusout 事件。focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。`

    - keyup([[data],fn])

    - mousedown([[data],fn]) `当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。不需要松开`
    - mouseup([[data],fn]) `当在元素上放松鼠标按钮时，会发生 mouseup 事件。`

    - mousemove([[data],fn])
    - mouseout([[data],fn])
    - mouseover([[data],fn])

    - resize([[data],fn]) `当调整浏览器窗口的大小时，发生 resize 事件。`
    - scroll([[data],fn]) `当用户滚动指定的元素时，会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。`
    - select([[data],fn]) `当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。`
    - submit([[data],fn]) `当提交表单时，会发生 submit 事件。该事件只适用于表单元素。`

JavaScript

#JavaScript概述:
    JS:网页上动态效果
    JS:运行在浏览器上的脚本语言 :写在<script></script>中
    三个组成:ECMAScript DOM BOM
    基本语法:
        区分大小写
        弱变量类型(声明):(与Java不同int String...) var i =3;var s = "abd";
        数据类型:
            原始类型:undefined,boolean,string,number,null
            引用类型:
            运算符:基本一致 "===" 类型和值全一致才相等

----

##JS开发套路:
    - JS通常由一个事件触发;
    - 触发一个函数,定义一个函数;
    - 获得操作对象的控制权;
    - 修改要操作的对象的属性或值;
        - 获取某个标签的属性:
          1. 对于sytle外面的直接`.属性`获取
          2. style里面的`.style.属性`获取
        - 修改:
            - `=`重新赋值修改
                                                                              
1. 注册页表单校验:
Document 对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
JS校验正则表达式
onsubmit:此事件 依赖于返回值
2. 图片轮播的效果(设置定时)
    - setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
    - setTimeout() 在指定的毫秒数后调用函数或计算表达式。
   
    * 均会返回一个ID,使下面两个方法可以通过此ID清除定时效果
   
    - clearInterval() 取消由 setInterval() 设置的 timeout。
    - clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
3. 定时弹出广告定时隐藏(无法修改图片属性)
    - 利用style里面的display属性:
        - block:显示
        - none:隐藏

##JS中的BOM对象:
BOM:浏览器对象模型
Browser:
    - Window :
        window中的方法可以直接用,可以通过window获得以下四个对象中的方法
    - Navigator
    - Screen
    - History
    - Location
window对象:
    - 方法 描述
    * `alert() 显示带有一段消息和一个确认按钮的警告框。`
    - blur() 把键盘焦点从顶层窗口移开。
    * `clearInterval() 取消由 setInterval() 设置的 timeout。`
    * `clearTimeout() 取消由 setTimeout() 方法设置的 timeout。`
    - close() 关闭浏览器窗口。
    * `confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。`
            确认:返回true 取消:返回false
    - createPopup() 创建一个 pop-up 窗口。
    - focus() 把键盘焦点给予一个窗口。
    - moveBy() 可相对窗口的当前坐标把它移动指定的像素。
    - moveTo() 把窗口的左上角移动到一个指定的坐标。
    * `open() 打开一个新的浏览器窗口或查找一个已命名的窗口。`  
    - print() 打印当前窗口的内容。
    *` prompt() 显示可提示用户输入的对话框。 `
            返回值:对话框输入的内容
    - resizeBy() 按照指定的像素调整窗口的大小。
    - resizeTo() 把窗口的大小调整到指定的宽度和高度。
    - scrollBy() 按照指定的像素值来滚动内容。
    - scrollTo() 把内容滚动到指定的坐标。  
    * `setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。 `
    * `setTimeout() 在指定的毫秒数后调用函数或计算表达式。`
Navigator ：包含的是浏览器的信息.
Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。
虽然这个对象的名称显而易见的是 Netscape 的 Navigator 浏览器，但其他实现了 JavaScript 的浏览器也支持这个对象。
Navigator 对象的实例是唯一的，可以用 Window 对象的 navigator 属性来引用它。

    - appCodeName 返回浏览器的代码名。
    - appMinorVersion 返回浏览器的次级版本。  
    - appName 返回浏览器的名称。
    - appVersion 返回浏览器的平台和版本信息。
    - browserLanguage 返回当前浏览器的语言。
    - cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值。
    - cpuClass 返回浏览器系统的 CPU 等级。
    - onLine 返回指明系统是否处于脱机模式的布尔值。
    - platform 返回运行浏览器的操作系统平台。
    - systemLanguage 返回 OS 使用的默认语言。  
    - userAgent 返回由客户机发送服务器的 user-agent 头部的值。  
    - userLanguage 返回 OS 的自然语言设置。

Screen:用来获得屏幕信息:
    - availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。
    - availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。
    - bufferDepth 设置或返回调色板的比特深度。
    - colorDepth 返回目标设备或缓冲器上的调色板的比特深度。
    - deviceXDPI 返回显示屏幕的每英寸水平点数。
    - deviceYDPI 返回显示屏幕的每英寸垂直点数。
    - fontSmoothingEnabled 返回用户是否在显示控制面板中启用了字体平滑。
    - height 返回显示屏幕的高度。
    - logicalXDPI 返回显示屏幕每英寸的水平方向的常规点数。  
    - logicalYDPI 返回显示屏幕每英寸的垂直方向的常规点数。  
    - pixelDepth 返回显示屏幕的颜色分辨率（比特每像素）。
    - updateInterval 设置或返回屏幕的刷新率。
    - width 返回显示器屏幕的宽度。

###History:
    - back() 加载 history 列表中的前一个 URL。
    - forward() 加载 history 列表中的下一个 URL。
    - go() 加载 history 列表中的某个具体页面。
###Location:把用户带到一个新的地址
    - href:跳转到链接

#DOM模型:
##DOM的概述：
    什么是DOM
    DOM：Document Object Model：文档对象模型.
    将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子.
    * 节点:
        - 整个文档是一个文档节点
        - 每个 HTML 元素是元素节点
        - HTML 元素内的文本是文本节点
        - 每个 HTML 属性是属性节点
        - 注释是注释节点
##DOM的使用：
    知道document，element，attribute中的属性和方法
##DOM的常用的操作(增删改查):
获得元素：
    * document.getElementById();        -- 通过ID获得元素.
    * document.getElementsByName();        -- 通过name属性获得元素.
    * document.getElementsByTagName();    -- 通过标签名获得元素.
创建元素：
    * document.createElement();            -- 创建元素
    * document.createTextNode();        -- 创建文本
添加节点：
    * element.appendChild();            -- 在最后添加一个节点.
    * element.insertBefore();            -- 在某个元素之前插入.
删除节点：
    * element.removeChild();            -- 删除元素
【使用DOM完成对ul中添加一个li元素】
            function addElement(){
                var city = document.getElementById("city");
                // 创建一个元素:
                var liEl = document.createElement("li");
                // 创建一个文本节点:
                var text = document.createTextNode("深圳");
                // 添加子节点:
                liEl.appendChild(text);
                city.appendChild(liEl);
            }

**省市联动**



标签值是什么:
(单选框,复选框,下拉列表...)
`单选框标签的值`:被选中的value值,只有一个
`复选框标签的值`:被选中的value值,有多个
`下拉列表标签的值`:被选中的value值,只有一个

JQuery

#JQuery
##JQuery概述:
    - JQuery是一个JS的框架（JS的类库）.对传统的JS进行了封装,提供方法
    - 现在企业的开发中往往不会使用传统的JS进行开发，通常都会使用JS框架进行开发.
    - JS的常用框架:
        JQuery,ExtJS,DWR,Prototype,angular js...angular js和Java后台思想比较对等
##JQuery入门:
    - 引入JQuery的js文件:<script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
    - JQuery的核心函数:$();
    - JQuery的入口函数:$( function(){} );
    * window.onload 和`S();`区别:window.onload需要等页面加载完成,S();只需等到DOM树绘制完成,节点完成

##JQ对象和JS对象的转换:
    ***JQ方法只能由JQ对象调用,JQ方法只能由JQ对象调用***

    - JS-->JQ:$(d)(利用核心函数)
    - JQ-->JS:
        1. $d1[0].innerHTML = "将JQ的对象转成JS对象"
        2. $d1.get(0).innerHTML = "将JQ的对象转成JS对象的方式二";
##JQ的效果(显示隐藏)
    JQ的效果操作:
    * show();
        * 使用一:Jq对象.show();
        * 使用二:Jq对象.show(“slow”); // slow,normal,fast
        * 使用三:Jq对象.show(毫秒值); // 1000
        * 使用四:Jq对象.show(毫秒值,function(){});
   
    * hide();
        * 使用一:Jq对象.hide();
        * 使用二:Jq对象.hide(“slow”); // slow,normal,fast
        * 使用三:Jq对象.hide(毫秒值); // 1000
        * 使用四:Jq对象.hide(毫秒值,function(){});
   
    * slideDown();    --向下滑动
        * 使用一:Jq对象.slideDown();
        * 使用二:Jq对象.slideDown(“slow”); // slow,normal,fast
        * 使用三:Jq对象.slideDown(毫秒值); // 1000
        * 使用四:Jq对象.slideDown(毫秒值,function(){});
   
    * slideUp();    --向上滑动
        * 使用一:Jq对象.slideUp();
        * 使用二:Jq对象.slideUp(“slow”); // slow,normal,fast
        * 使用三:Jq对象.slideUp(毫秒值); // 1000
        * 使用四:Jq对象.slideUp(毫秒值,function(){});
   
    * fadeIn();        --淡入
        * 使用一:Jq对象.fadeIn();
        * 使用二:Jq对象.fadeIn(“slow”); // slow,normal,fast
        * 使用三:Jq对象.fadeIn(毫秒值); // 1000
        * 使用四:Jq对象.fadeIn(毫秒值,function(){});
   
    * fadeOut();    --淡出
        * 使用一:Jq对象.fadeOut();
        * 使用二:Jq对象.fadeOut(“slow”); // slow,normal,fast
        * 使用三:Jq对象.fadeOut(毫秒值); // 1000
        * 使用四:Jq对象.fadeOut(毫秒值,function(){});
   
    * animate();    --自定义动画
    * toggle();        --单击切换函数
        * Jq对象.toggle(fn1,fn2...);单击第一下的时候执行fn1,单击第二下执行fn2...

##JQ的选择器(获得符合条件的所有节点,并封装成JQ对象):
基础选择器:
    - id选择器
         用法:$(“#id”)
    - 类选择器
         用法:$(“.类名”)
    - 元素选择器
         用法:$(“元素名称”)
    - 通配符选择器(基本不用)
         用法:$(“*”)
    - 并列选择器
         用法:$(“选择器,选择器,选择器”)
层级选择器:
    - 后代选择器：使用空格` `所有后代包含孙子及以下的元素
    - 子元素选择器：使用`>`第一层的元素（儿子）
    - 下一个元素:使用`+`下一个同辈元素
    - 兄弟元素:使用`~`后面所有的同辈元素

基本过滤选择器:
(选择器组合多种多样很灵活,edg:`$(".table tr:even")`)
    - :first
    - :not(selector)
    - :even
    - :odd
    - :eq(index)
    - :gt(index)
    - :lang1.9+
    - :last
    - :lt(index)
    - :header
    - :animated
    - :focus
    - :root1.9+
    - :target1.9+

内容选择器:
    - :contains(text)
    - :empty
    - :has(selector)
属性
    - [attribute]
    - [attribute=value]
    - [attribute!=value]
    - [attribute^=value]
    - [attribute$=value]
    - [attribute*=value]
    - [attrSel1][attrSel2][attrSelN]
可见性选择器:
    - :hidden
    - :visible
表单选择器:
    - :input
    - :text
    - :password
    - :radio
    - :checkbox
    - :submit
    - :image
    - :reset
    - :button
    - :file
    - :hidden
表单对象属性选择器:
    - :checked `用于单选/复选框,获得所有被选中的元素`
    - :selected `用于下拉列表,获得被选中的元素`
##JQuery文档处理:
内部插入:
    - append(content|fn) (元素内部向后插入)
    - appendTo(content)
    - prepend(content|fn) (元素内部向前插入)
    - prependTo(content)
外部插入:
    - after(content|fn)    (元素外部向后插入)
    - insertAfter(content)
    - before(content|fn) (元素外部向前插入)
    - insertBefore(content)
删除:
    - empty()  (不包括自己)
    - remove([expr]) (包括自己)

##JQuery修改样式:
    1.通过css()函数：适用于样式代码比较少的情况
   
    2.addClass()/removeClass()/toggleClass():适用于样式事先定义好的情况
##JQuery操作元素属性:
    - $("#id").prop("src")  获得属性的值
    - $("#id").prop("src","da") 修改属性的值
    - $("#id").prop({"":"","":""}) 一次性修改多个属性
##html()/text()/val()
    - $("#id").html();获取元素里面的html代码
    - $("#id").html("<span>da</span>") 用括号里面的内容覆盖原有的内容，可以在里面写html标签
    -
    - $("#id").text();获取元素里面的文本
    - $("#id").text("<span>fada</span>");用括号里面的内容覆盖原有文本内容，如果写了html标签不会被识别为html
    -
    - $("#id").val():获取元素value属性的值
    - $("#id").val("afda") 用括号里面的内容去设置元素value属性
##遍历:

    $("img").each(function(i,n){
         i:遍历的下表
         n:遍历出来的每一个
    });

    - $.each(object,function(i,n){
    -     object:待遍历的数组
    -     i:遍历的下表
    -     n:遍历出来的每一个
    - });
##查找过滤:
    - 1.parent()
    - 2.find()
    - 3.is()

##JQuery常用事件:
事件处理:
    - on(eve,[sel],[data],fn)1.7+
        在选择元素上绑定一个或多个方法。
    - bind(type,[data],fn)
    - one(type,[data],fn)
        为每一个匹配元素的特定事件（像click）绑定一个一次性的方法。
    - trigger(type,[data])
        在每一个匹配的元素上触发某类事件。 (事件单独绑定方法,某类事件为this绑定的事件).这个函数也会导致浏览器同名的默认行为的执行,比如触发 `blur`事件,浏览器也会将光标从该元素上移除
    - triggerHandler(type, [data])
        用法与trigger相同,有下列三个不同:
        * 第一，他不会触发浏览器默认事件。
        * 第二，只触发jQuery对象集合中第一个元素的事件处理函数。
        * 第三, 这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象
    - unbind(t,[d|f])
事件委派:
delegate(selector,[type],[data],fn)
    指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
    使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
事件切换
hover(over,out)
    当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数(over)。当鼠标移出这个元素时，会触发指定的第二个函数(out)。

事件:
    - blur([[data],fn])
    - change([[data],fn])
    - click([[data],fn])
    - dblclick([[data],fn])
    - focus([[data],fn])
    -
    - focusin([data],fn) `当元素获得焦点时触发 focusin 事件。focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。`
    - focusout([data],fn) `当元素失去焦点时,触发 focusout 事件。focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。`

    - keyup([[data],fn])

    - mousedown([[data],fn]) `当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。不需要松开`
    - mouseup([[data],fn]) `当在元素上放松鼠标按钮时，会发生 mouseup 事件。`

    - mousemove([[data],fn])
    - mouseout([[data],fn])
    - mouseover([[data],fn])

    - resize([[data],fn]) `当调整浏览器窗口的大小时，发生 resize 事件。`
    - scroll([[data],fn]) `当用户滚动指定的元素时，会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。`
    - select([[data],fn]) `当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。`
    - submit([[data],fn]) `当提交表单时，会发生 submit 事件。该事件只适用于表单元素。`