[石家庄校区]JS/JQuery/BootStrap

<<<JavaScript>>>
        JS:运行在浏览器的脚本语言
                是轻量级的编程语言
                可插入HTML页面的编程代码,插入后可用所有浏览器执行
        JS的组成:ECMAScript  DOM  BOM
                ECMAScript:Js的基本语法
                DOM:浏览器对象模型
                BOM:文档对象模型
        其他的脚本语言: ActionScript Fiex

        JS的用途:使页面更加丰富,使页面动起来

        JS的基本语法:
                1.区分大小写
                2.弱变量类型语言(就是没有具体的数据类型):(与java不同 )
                        定义所有变量时,统一都用var定义,赋值是什么类型变量就是什么类型
                        如:        var i = 1;(i在这里为整型)
                                var i = "abc";(i在这里是字符串类型)
                3.        每行结尾";"可有可无(建议写上";")
                4.注释:
                        第一种://语句体
                        第二种:/*语句体*/
                5.大括号代表代码快                        
                6.变量声明
                        如: var i;(可以声明一个变量)
                                var a = "asd", b = "eff";(也可以声明多个变量,用","分隔)
                7.命名变量(和java命名方式一样)
                        第一个字符必须以字母,下划线或"$"符,
                        余下的字符可以是下划线,"$"或任何字母或数字字符
                8.关键字(和java关键字类似)
                9.数据类型:
                        原始类型:
                                undefined:未定义类型(什么是undefined类型?就是定义了变量但未赋值的变量类型,可通过typeof进行测试)
                                boolean:布尔类型
                                number:数字类型
                                string:字符或字符串类型
                                Null:空

                        引用类型:
                                对象类型:对象类型默认值是null
                10.运算符(和java里面的运算符基本一致)
                                JS特殊的运算符:        "===" 代表全等于(全等于是类型和值都一致的情况下才会返回true)
                11.JS语句(与java语句一致)
                12.输出
                        往文档中写入方式:document.write();
                        操作HTML元素方式:interHTML
                        弹出提示框方式:

        JS通常开发步骤
                1. JS通常由一个事件触发
                2. 触发一个函数,定义一个函数
                3. 获得操作对象的控制权
                4. 修改要操作的对象的属性或值

        JS定义函数
                关键字:function
                第一种:
                        function 函数名(){
                                函数体
                        }
                第二种:匿名函数
                        window.onload = function(){

                        }
        JS常用事件:onclick,        ondblclick,onmouseover,onmouseout,onload等

        JS的引用方式
                第一种:页面内直接编写JS代码,JS代码需要使用<script></script>
                第二种:将JS代码编写到一个.js文件中,在HTML中引用该技js代码
                                引入方式:<script src="js文件路径"><script>
        JS检验正则表达式的方法:
                第一种:String对象的match()方法                        
                        使用方法:        字符串对象.match("正则表达式");
                第二种:是正则对象对象中的test()方法中的代码               
                        使用方法:        正则对象.test("字符串" );

        获取的页面中的元素:document.getElementById("id名");


        JS轮播图:

        使用Window对象下的计时方法
                setInterval();  每隔多少毫秒执行某个表达式
                        使用:setInterval("check()", 5000);  --> 该实例表示每隔5000毫秒执行一次check()函数(一直执行)
                setTimeout();        间隔多少毫秒执行一次该表达式
                        使用:setTimeout("check()", 5000);  --> 该实例表示间隔5000毫秒执行一次check()函数(只执行一次)


                clearInterval();        取消setInterval()方法的定时
                clearTimeout();                取消setTimeout()方法的定时
        JS中的BOM对象
                Window:代表浏览器窗口
                        alert():弹出警告框
                        setInterval():
                        setTimeout():
                        clearInterval():
                        clearTimeout():
                        confirm():弹出一个确认窗口
                        prompt():弹出一个可输入的对话框
                        open():打开一个新的窗口
                Naviqator:包含浏览器信息
                Screen:获得屏幕信息
                History:浏览器的历史对象
                        back():上一个
                        forward():下一个
                        go():加载具体哪一个
                Location:包含URL信息的对象   
                        href();跳转


        JS完成注册页面的表单提醒和校对
                js的输出
                        1.document的innterHTML属性   =使用=>   document.getElementById("").innerHTML = "HTML的代码"
                        2.document的write()方法      =使用=>   document.write("");
                js事件
                        onload:页面加载
                        onfocus:获得焦点
                        onblur:失去焦点
                        onsubmit:提交时间
                        onchange:下来列表改变事件
                        ondblclick:双击某个元素属性
                        键盘事件:
                                onkeydown:键盘按下
                                onkeyup:键盘抬起
                                onkeypress:键盘敲
                        鼠标操作事件
                                onmousemove: 鼠标被移动
                                onmouseout:        鼠标从某元素移开
                                onmouseover:鼠标被移动到某个元素上移动
                                onmousedown:鼠标按键被按下
                                onmouseup:鼠标按键抬起

        JS中的DOM对象
                DOM:文本对象模型
                        将一个HTML的文档加载到内存形成一个树形结构从而操作树形结构就可以改变HTML的样子
                DOM的使用:
                        知道domcument,element,attribute的属性和方法
                Document的常用的操作
                        获得元素:
                                document.getElementById():通过id获得元素
                                document.getElementsByName():通过name属性获得元素
                                document.getElementsByTagName():通过标签名获得元素
                         创建元素:
                                document.createElement():创建元素
                                document.createTextNode():创建文本
                        添加节点        
                                element对象.appendChild():添加节点(默认添加在某个元素之后)
                                element对象.insertBefore():在某个元素之前添加
                        删除节点
                                element对象.removeChild():删除节点(必须要找到上一层)

JQuery
        JQuery:是一个JS的框架(JS的类库),对传统JS进行了封装
        *JQuery的方法只能由JQuery的对象调用
        JS常用框架:JQuery, ExtJS,Prototype

        Jquery入门:
                引入JQuery的js文件:将JQuery的包文件放入js文件夹中

                "$"符号相当于JQuery的一个对象
                JQuery的页面加载函数:$(function(){})
                JQ的页面加载方式:  $(function(){});    ==>   相当于JS的页面加载事件:  window.onload = function(){}
                JQuery的页面加载方式:相当于页面加载的事件,可以执行多次(原生JS的onload方法加载页面,如果重复的,则会被覆盖),效率比window.onload要高
                *效率高的原因:        window.onload => 等页面加载完成后执行该方法.
                                                $(function(){}) => 等页面的DOW树绘制完成后进行执行

        *JS对象和JQ对象的转化
                window.onload = function(){
                        //传统JS方式
                        var d = document.getElementById("d");
                        //JS对象的属性和方法
                        d.innerHTML = "JS对象的属性";
                        //将JS对象转化成JQ对象
                        $(d).html("JS对象转成JQ对象")
                }

                $(function(){
                        var $d = $("d");
                        $d.html("JQ对象的属性");
                        //JQ转化成JS的对象
                        //第一种:
                        $d[0].innerHTML = "将JQ的对象转化成JS对象";
                        //第二种:
                        $d.get(0).innerHTML = "将JQ转化成JS对象";
                });
        JQ的遍历:
                        each():(待完善)
                        两种方法:
                                1.$("img").each(function(i,n){});
                                2.$.each(object,function(i,n){});
        1.JQ的效果操作(完成显示和隐藏的操作):               
                *show():显示
                        使用一:jq对象.show();
                        使用二:jq对象.show("字符串参数");  //字符串参数可传入slow,normal,fast,分别表示:慢速.正常,快速显示
                        使用三:jq对象.show(毫秒值); //表示显示的整过程共需要这么多毫秒
                        方法四:jq对象.show(或字符串参数,function(){});
                *hide(): 隐藏
                        使用一:jq对象.hide();
                        使用二:jq对象.hide("字符串参数");  //字符串参数可传入slow,normal,fast,分别表示:慢速.正常,快速显示
                        使用三:jq对象.hide(毫秒值); //表示显示的整过程共需要这么多毫秒
                        方法四:jq对象.hide(或字符串参数,function(){});
                *slideDown():向下滑动
                        使用一:jq对象.slideDown();
                        使用二:jq对象.slideDown("字符串参数");  //字符串参数可传入slow,normal,fast,分别表示:慢速.正常,快速显示
                        使用三:jq对象.slideDown(毫秒值); //表示显示的整过程共需要这么多毫秒
                        方法四:jq对象.slideDown(或字符串参数,function(){});
                *slideUp():向上滑动
                        使用一:jq对象.slideUp();
                        使用二:jq对象.slideUp("字符串参数");  //字符串参数可传入slow,normal,fast,分别表示:慢速.正常,快速显示
                        使用三:jq对象.slideUp(毫秒值); //表示显示的整过程共需要这么多毫秒
                        方法四:jq对象.slideUp(或字符串参数,function(){});
                *fadeIn():淡入
                        使用一:jq对象.fideIn();
                        使用二:jq对象.fideIn("字符串参数");  //字符串参数可传入slow,normal,fast,分别表示:慢速.正常,快速显示
                        使用三:jq对象.fideIn(毫秒值); //表示显示的整过程共需要这么多毫秒
                        方法四:jq对象.fideIn(或字符串参数,function(){});
                *fadeOut():淡出
                        使用一:jq对象.fideOut();
                        使用二:jq对象.fideOut("字符串参数");  //字符串参数可传入slow,normal,fast,分别表示:慢速.正常,快速显示
                        使用三:jq对象.fideOut(毫秒值); //表示显示的整过程共需要这么多毫秒
                        方法四:jq对象.fideOut(或字符串参数,function(){});
                animate():自定义动画        
                *toggle():单击切换函数
                        jq对象.toggle(fn1函数,fn2函数...);单击第一下的时候执行fn1函数,单击第二下执行fn2函数...                  
        2.JQ的属性
                属性:
                         attr():获得或修改元素属性值(了解即可,现在都用prop()方法)
                        *prop():获得或修改元素属性值
                css类:
                        *addClass():添加属性
                                !!!这可是知识点:如果已经定义了css样式则选择addClass()方法中的代码
                                                                如果没定义css样式那么可以选择使用css()方法
                        *removeClass():删除属性
                        *toggleClass():如果存在（不存在）就删除（添加）一个类。
                HTML代码/文本/值
                        *html():取得第一个匹配元素的html内容。(认可HTML码)
                        *text():取得所有匹配元素的内容。(不认可HTML代码,直接读取成文本)
                        *val():获得匹配元素的当前值。                    
        3.JQ的选择器               

                基本选择器(最常用的选择器)
                        *id选择器:                $("#id名")
                        *类选择器:                $(".类名")
                        *元素选择器:                $("元素名")
                        *通配符选择器:        $("*")
                        *并列选择器:                $("选择器1,选择器2,选择器3...")
                层级选择器
                        *后代选择器:                                        使用空格
                        *子元素选择器:                                使用">"
                        *下一个元素选择器:                        使用"+"
                        *下一个所有兄弟元素选择器:        使用"~"
                基本过滤选择器
                        *:first                :第一个元素
                        *:last                :最后一个元素
                         :not(selector):去除所有与给定选择器匹配的元素
                        *:even                :偶数个数的元素
                        *:odd                :奇数位数的元素
                        *:eq(index)        :等于第index为位 的元素
                        *:gt(index)        :大于第index为位 的元素
                        *:lt(index)        :小于第index为位 的元素
                         :header                :匹配如 h1, h2, h3之类的标题元素
                         :animated        :正在执行动画的元素
                        *:focus                :匹配当前获取焦点的元素。(1.6版本以上使用)  
                内容选择器
                         :contains(text):内容包含某些文本的
                        *:empty:内容是空的
                         :has(selector):有某一个内容的
                        *:parent:父元素的
                可见性选择器
                        *:hidden:匹配所有不可见元素，或者type为hidden的元素
                        *:visible:匹配所有的可见元素
                属性选择器(详见API,不解释)
                        [attribute=value]
                表单选择器(必须记住,不然打死)
                        :input:
                        :text:
                        :password:
                        :radio:
                        :checkbox:
                        :submit:
                        :image:
                        :reset:
                        :button:
                        :file:
                        :hidden:
                表单属性选择器(重点点点点!!!)
                        :checked:单选/复选
                        :selected:下拉列表选定            
        4.JQ的文档处理
                内部插入
                        *append():向每个匹配的元素内部追加内容。
                        *appendTo():把所有匹配的元素追加到另一个指定的元素元素集合中。
                外部插入
                         insertAfter():在每个匹配的元素之后插入内容。
                         insertBefor():在每个匹配的元素之前插入内容。
                删除
                        *empty():删除所有
                        *remove():删除所有匹配的





        5.JQ筛选
                过滤
                        *is():用于判断是不是...
                查找
                        *children():查找子元素集合
                        *parent():查找父级元素集合
                        *find():查找匹配的元素
                        *next():查找下一个匹配的元素

        6.JQ的事件
                事件:同js事件,只是去掉js事件前面的on


                页面事件:
                        ready():页面加载

                事件切换:
                        hover():事件切换
                        注意:如果只是切换样式可直接用css的伪类(hover)处理
                                 如果除了查宿舍样式还需要业务逻辑则使用JQ的hover()方法

                事件处理:
                        on(): 用于绑定一个或多个事件的处理函数
                        bind(): 用于绑定一个或者多个事件的处理函数
                                例:创建事件的三种方法
                                        1.普通话用法:
                                                $("选择器").click(function(){
                                                        //语句体
                                                });
                                        2.on()用法:
                                                $("选择器").on("click",function(){
                                                        //单个事件演示
                                                        //语句体
                                                });
                                                $("选择器").on("click dblclick change",function(){
                                                        //多个事件演示
                                                        //语句体
                                                });
                                        3.bind()用法:和on()方法用法一样一样的

                        trigger():在每一个匹配的元素上触发某类事件。
                        triggerHandler():与trigger()方法类似,但有不同之处
                                trigger()与tiggerHandler()的不同点:
                                        tiggerHandler():不会触发浏览器默认事件,只触发JQ对象集合中第一个元素的事件函数
                                                                        该方法返会的是事件处理函数的范返回值而不是JQ对象
                事件委派:
                        delegate():指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
                                                使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

<<<BootStrap>>>

        概述:前端框架,基于HTML CSS JS的响应式框架
        前期准备工作:
                下载解压  =>  导入文件(导BootStrap文件时需要先把JQuery文件导入)  =>  <head>中添加<meta name="viewprot" content="width=device-width, initial-scale=1">标签

        内部容器:
                container:
                container-filuid:占100%
        栅格系统:将屏幕分成十二列的形式
                使用.row样式定义栅格的行
                定义列:        .col-lg-n  .col-md-n  .col-sm-n  .col-xs-n

[石家庄校区]JS/JQuery/BootStrap

<<<JavaScript>>>
        JS:运行在浏览器的脚本语言
                是轻量级的编程语言
                可插入HTML页面的编程代码,插入后可用所有浏览器执行
        JS的组成:ECMAScript  DOM  BOM
                ECMAScript:Js的基本语法
                DOM:浏览器对象模型
                BOM:文档对象模型
        其他的脚本语言: ActionScript Fiex

        JS的用途:使页面更加丰富,使页面动起来

        JS的基本语法:
                1.区分大小写
                2.弱变量类型语言(就是没有具体的数据类型):(与java不同 )
                        定义所有变量时,统一都用var定义,赋值是什么类型变量就是什么类型
                        如:        var i = 1;(i在这里为整型)
                                var i = "abc";(i在这里是字符串类型)
                3.        每行结尾";"可有可无(建议写上";")
                4.注释:
                        第一种://语句体
                        第二种:/*语句体*/
                5.大括号代表代码快                        
                6.变量声明
                        如: var i;(可以声明一个变量)
                                var a = "asd", b = "eff";(也可以声明多个变量,用","分隔)
                7.命名变量(和java命名方式一样)
                        第一个字符必须以字母,下划线或"$"符,
                        余下的字符可以是下划线,"$"或任何字母或数字字符
                8.关键字(和java关键字类似)
                9.数据类型:
                        原始类型:
                                undefined:未定义类型(什么是undefined类型?就是定义了变量但未赋值的变量类型,可通过typeof进行测试)
                                boolean:布尔类型
                                number:数字类型
                                string:字符或字符串类型
                                Null:空

                        引用类型:
                                对象类型:对象类型默认值是null
                10.运算符(和java里面的运算符基本一致)
                                JS特殊的运算符:        "===" 代表全等于(全等于是类型和值都一致的情况下才会返回true)
                11.JS语句(与java语句一致)
                12.输出
                        往文档中写入方式:document.write();
                        操作HTML元素方式:interHTML
                        弹出提示框方式:

        JS通常开发步骤
                1. JS通常由一个事件触发
                2. 触发一个函数,定义一个函数
                3. 获得操作对象的控制权
                4. 修改要操作的对象的属性或值

        JS定义函数
                关键字:function
                第一种:
                        function 函数名(){
                                函数体
                        }
                第二种:匿名函数
                        window.onload = function(){

                        }
        JS常用事件:onclick,        ondblclick,onmouseover,onmouseout,onload等

        JS的引用方式
                第一种:页面内直接编写JS代码,JS代码需要使用<script></script>
                第二种:将JS代码编写到一个.js文件中,在HTML中引用该技js代码
                                引入方式:<script src="js文件路径"><script>
        JS检验正则表达式的方法:
                第一种:String对象的match()方法                        
                        使用方法:        字符串对象.match("正则表达式");
                第二种:是正则对象对象中的test()方法中的代码               
                        使用方法:        正则对象.test("字符串" );

        获取的页面中的元素:document.getElementById("id名");


        JS轮播图:

        使用Window对象下的计时方法
                setInterval();  每隔多少毫秒执行某个表达式
                        使用:setInterval("check()", 5000);  --> 该实例表示每隔5000毫秒执行一次check()函数(一直执行)
                setTimeout();        间隔多少毫秒执行一次该表达式
                        使用:setTimeout("check()", 5000);  --> 该实例表示间隔5000毫秒执行一次check()函数(只执行一次)


                clearInterval();        取消setInterval()方法的定时
                clearTimeout();                取消setTimeout()方法的定时
        JS中的BOM对象
                Window:代表浏览器窗口
                        alert():弹出警告框
                        setInterval():
                        setTimeout():
                        clearInterval():
                        clearTimeout():
                        confirm():弹出一个确认窗口
                        prompt():弹出一个可输入的对话框
                        open():打开一个新的窗口
                Naviqator:包含浏览器信息
                Screen:获得屏幕信息
                History:浏览器的历史对象
                        back():上一个
                        forward():下一个
                        go():加载具体哪一个
                Location:包含URL信息的对象   
                        href();跳转


        JS完成注册页面的表单提醒和校对
                js的输出
                        1.document的innterHTML属性   =使用=>   document.getElementById("").innerHTML = "HTML的代码"
                        2.document的write()方法      =使用=>   document.write("");
                js事件
                        onload:页面加载
                        onfocus:获得焦点
                        onblur:失去焦点
                        onsubmit:提交时间
                        onchange:下来列表改变事件
                        ondblclick:双击某个元素属性
                        键盘事件:
                                onkeydown:键盘按下
                                onkeyup:键盘抬起
                                onkeypress:键盘敲
                        鼠标操作事件
                                onmousemove: 鼠标被移动
                                onmouseout:        鼠标从某元素移开
                                onmouseover:鼠标被移动到某个元素上移动
                                onmousedown:鼠标按键被按下
                                onmouseup:鼠标按键抬起

        JS中的DOM对象
                DOM:文本对象模型
                        将一个HTML的文档加载到内存形成一个树形结构从而操作树形结构就可以改变HTML的样子
                DOM的使用:
                        知道domcument,element,attribute的属性和方法
                Document的常用的操作
                        获得元素:
                                document.getElementById():通过id获得元素
                                document.getElementsByName():通过name属性获得元素
                                document.getElementsByTagName():通过标签名获得元素
                         创建元素:
                                document.createElement():创建元素
                                document.createTextNode():创建文本
                        添加节点        
                                element对象.appendChild():添加节点(默认添加在某个元素之后)
                                element对象.insertBefore():在某个元素之前添加
                        删除节点
                                element对象.removeChild():删除节点(必须要找到上一层)

JQuery
        JQuery:是一个JS的框架(JS的类库),对传统JS进行了封装
        *JQuery的方法只能由JQuery的对象调用
        JS常用框架:JQuery, ExtJS,Prototype

        Jquery入门:
                引入JQuery的js文件:将JQuery的包文件放入js文件夹中

                "$"符号相当于JQuery的一个对象
                JQuery的页面加载函数:$(function(){})
                JQ的页面加载方式:  $(function(){});    ==>   相当于JS的页面加载事件:  window.onload = function(){}
                JQuery的页面加载方式:相当于页面加载的事件,可以执行多次(原生JS的onload方法加载页面,如果重复的,则会被覆盖),效率比window.onload要高
                *效率高的原因:        window.onload => 等页面加载完成后执行该方法.
                                                $(function(){}) => 等页面的DOW树绘制完成后进行执行

        *JS对象和JQ对象的转化
                window.onload = function(){
                        //传统JS方式
                        var d = document.getElementById("d");
                        //JS对象的属性和方法
                        d.innerHTML = "JS对象的属性";
                        //将JS对象转化成JQ对象
                        $(d).html("JS对象转成JQ对象")
                }

                $(function(){
                        var $d = $("d");
                        $d.html("JQ对象的属性");
                        //JQ转化成JS的对象
                        //第一种:
                        $d[0].innerHTML = "将JQ的对象转化成JS对象";
                        //第二种:
                        $d.get(0).innerHTML = "将JQ转化成JS对象";
                });
        JQ的遍历:
                        each():(待完善)
                        两种方法:
                                1.$("img").each(function(i,n){});
                                2.$.each(object,function(i,n){});
        1.JQ的效果操作(完成显示和隐藏的操作):               
                *show():显示
                        使用一:jq对象.show();
                        使用二:jq对象.show("字符串参数");  //字符串参数可传入slow,normal,fast,分别表示:慢速.正常,快速显示
                        使用三:jq对象.show(毫秒值); //表示显示的整过程共需要这么多毫秒
                        方法四:jq对象.show(或字符串参数,function(){});
                *hide(): 隐藏
                        使用一:jq对象.hide();
                        使用二:jq对象.hide("字符串参数");  //字符串参数可传入slow,normal,fast,分别表示:慢速.正常,快速显示
                        使用三:jq对象.hide(毫秒值); //表示显示的整过程共需要这么多毫秒
                        方法四:jq对象.hide(或字符串参数,function(){});
                *slideDown():向下滑动
                        使用一:jq对象.slideDown();
                        使用二:jq对象.slideDown("字符串参数");  //字符串参数可传入slow,normal,fast,分别表示:慢速.正常,快速显示
                        使用三:jq对象.slideDown(毫秒值); //表示显示的整过程共需要这么多毫秒
                        方法四:jq对象.slideDown(或字符串参数,function(){});
                *slideUp():向上滑动
                        使用一:jq对象.slideUp();
                        使用二:jq对象.slideUp("字符串参数");  //字符串参数可传入slow,normal,fast,分别表示:慢速.正常,快速显示
                        使用三:jq对象.slideUp(毫秒值); //表示显示的整过程共需要这么多毫秒
                        方法四:jq对象.slideUp(或字符串参数,function(){});
                *fadeIn():淡入
                        使用一:jq对象.fideIn();
                        使用二:jq对象.fideIn("字符串参数");  //字符串参数可传入slow,normal,fast,分别表示:慢速.正常,快速显示
                        使用三:jq对象.fideIn(毫秒值); //表示显示的整过程共需要这么多毫秒
                        方法四:jq对象.fideIn(或字符串参数,function(){});
                *fadeOut():淡出
                        使用一:jq对象.fideOut();
                        使用二:jq对象.fideOut("字符串参数");  //字符串参数可传入slow,normal,fast,分别表示:慢速.正常,快速显示
                        使用三:jq对象.fideOut(毫秒值); //表示显示的整过程共需要这么多毫秒
                        方法四:jq对象.fideOut(或字符串参数,function(){});
                animate():自定义动画        
                *toggle():单击切换函数
                        jq对象.toggle(fn1函数,fn2函数...);单击第一下的时候执行fn1函数,单击第二下执行fn2函数...                  
        2.JQ的属性
                属性:
                         attr():获得或修改元素属性值(了解即可,现在都用prop()方法)
                        *prop():获得或修改元素属性值
                css类:
                        *addClass():添加属性
                                !!!这可是知识点:如果已经定义了css样式则选择addClass()方法中的代码
                                                                如果没定义css样式那么可以选择使用css()方法
                        *removeClass():删除属性
                        *toggleClass():如果存在（不存在）就删除（添加）一个类。
                HTML代码/文本/值
                        *html():取得第一个匹配元素的html内容。(认可HTML码)
                        *text():取得所有匹配元素的内容。(不认可HTML代码,直接读取成文本)
                        *val():获得匹配元素的当前值。                    
        3.JQ的选择器               

                基本选择器(最常用的选择器)
                        *id选择器:                $("#id名")
                        *类选择器:                $(".类名")
                        *元素选择器:                $("元素名")
                        *通配符选择器:        $("*")
                        *并列选择器:                $("选择器1,选择器2,选择器3...")
                层级选择器
                        *后代选择器:                                        使用空格
                        *子元素选择器:                                使用">"
                        *下一个元素选择器:                        使用"+"
                        *下一个所有兄弟元素选择器:        使用"~"
                基本过滤选择器
                        *:first                :第一个元素
                        *:last                :最后一个元素
                         :not(selector):去除所有与给定选择器匹配的元素
                        *:even                :偶数个数的元素
                        *:odd                :奇数位数的元素
                        *:eq(index)        :等于第index为位 的元素
                        *:gt(index)        :大于第index为位 的元素
                        *:lt(index)        :小于第index为位 的元素
                         :header                :匹配如 h1, h2, h3之类的标题元素
                         :animated        :正在执行动画的元素
                        *:focus                :匹配当前获取焦点的元素。(1.6版本以上使用)  
                内容选择器
                         :contains(text):内容包含某些文本的
                        *:empty:内容是空的
                         :has(selector):有某一个内容的
                        *:parent:父元素的
                可见性选择器
                        *:hidden:匹配所有不可见元素，或者type为hidden的元素
                        *:visible:匹配所有的可见元素
                属性选择器(详见API,不解释)
                        [attribute=value]
                表单选择器(必须记住,不然打死)
                        :input:
                        :text:
                        :password:
                        :radio:
                        :checkbox:
                        :submit:
                        :image:
                        :reset:
                        :button:
                        :file:
                        :hidden:
                表单属性选择器(重点点点点!!!)
                        :checked:单选/复选
                        :selected:下拉列表选定            
        4.JQ的文档处理
                内部插入
                        *append():向每个匹配的元素内部追加内容。
                        *appendTo():把所有匹配的元素追加到另一个指定的元素元素集合中。
                外部插入
                         insertAfter():在每个匹配的元素之后插入内容。
                         insertBefor():在每个匹配的元素之前插入内容。
                删除
                        *empty():删除所有
                        *remove():删除所有匹配的





        5.JQ筛选
                过滤
                        *is():用于判断是不是...
                查找
                        *children():查找子元素集合
                        *parent():查找父级元素集合
                        *find():查找匹配的元素
                        *next():查找下一个匹配的元素

        6.JQ的事件
                事件:同js事件,只是去掉js事件前面的on


                页面事件:
                        ready():页面加载

                事件切换:
                        hover():事件切换
                        注意:如果只是切换样式可直接用css的伪类(hover)处理
                                 如果除了查宿舍样式还需要业务逻辑则使用JQ的hover()方法

                事件处理:
                        on(): 用于绑定一个或多个事件的处理函数
                        bind(): 用于绑定一个或者多个事件的处理函数
                                例:创建事件的三种方法
                                        1.普通话用法:
                                                $("选择器").click(function(){
                                                        //语句体
                                                });
                                        2.on()用法:
                                                $("选择器").on("click",function(){
                                                        //单个事件演示
                                                        //语句体
                                                });
                                                $("选择器").on("click dblclick change",function(){
                                                        //多个事件演示
                                                        //语句体
                                                });
                                        3.bind()用法:和on()方法用法一样一样的

                        trigger():在每一个匹配的元素上触发某类事件。
                        triggerHandler():与trigger()方法类似,但有不同之处
                                trigger()与tiggerHandler()的不同点:
                                        tiggerHandler():不会触发浏览器默认事件,只触发JQ对象集合中第一个元素的事件函数
                                                                        该方法返会的是事件处理函数的范返回值而不是JQ对象
                事件委派:
                        delegate():指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
                                                使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

<<<BootStrap>>>

        概述:前端框架,基于HTML CSS JS的响应式框架
        前期准备工作:
                下载解压  =>  导入文件(导BootStrap文件时需要先把JQuery文件导入)  =>  <head>中添加<meta name="viewprot" content="width=device-width, initial-scale=1">标签

        内部容器:
                container:
                container-filuid:占100%
        栅格系统:将屏幕分成十二列的形式
                使用.row样式定义栅格的行
                定义列:        .col-lg-n  .col-md-n  .col-sm-n  .col-xs-n