[石家庄校区]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