--[石家庄校区]web阶段笔记--

#CSS&JS
#CSS：
* CSS的概述：层叠样式表.
    * 修饰HTML的页面.使页面与样式分离.
* CSS的语法：
    * 选择器{属性名:属性值;属性名:属性值;...}
* CSS的引入方式：
    * 行内样式：在html元素上使用style属性设置
    * 内部样式：在html中使用<style></style>进行设置
    * 外部样式：定义一个css文件,在html中引入该文件.<link href=”” type=”” rel=””/>
* CSS的选择器：(****)
    * 元素选择器:
    * ID选择器：
    * 类选择器：
    * 后代选择器：
    * 子元素选择器：
* CSS的样式：
    * 文本
    * 背景
    * 字体
    * 列表
* CSS的盒子模型：
    * 内边距：padding
    * 边框：border
    * 外边距：margin
* CSS的悬浮和定位：
    * 悬浮：float属性设置悬浮.
    * 清除悬浮：clear属性清除.
    * 定位：position属性设置定位.
        * 使用left和top属性控制位置.
    * display属性：控制元素的显示方式：
        * block--显示的, none--隐藏的,inline--显示到一行.



#JS:
* JS的概述：JavaScript运行在浏览器端脚本语言.
* JS的历史：由网景公司研发的.由ECMA组织统一标准:ECMAScript.
* JS的组成：ECMAScript，BOM，DOM.
* JS的语法：
    * JS的变量声明:
    * JS的数据类型：
        * 原始类型：undefined,boolean,string,number,null
        * 引用类型：
    * JS的运算符：
        * 与java中基本一致.有一个 === 类型与值都相同的情况下才会为true.
    * JS的语句：
        * 与Java中的语句一致.
* 简单的表单校验：
    * 正则的校验：使用String的match方法和正则中的test方法.
#JavaScript
#JavaScript:基本使用:
   * ECMAScript:
       * 变量：弱变量类型: var i;
       * 数据类型:原始类型和引用类型.
       * 语句
       * 运算符
       * 对象:
           * String,Boolean,Date,Math,Number,正则...
       * 全局函数:eval(),encodeURI(),encodeURIComponent(),decodeURI(),decodeURIComponent(),parseInt(),parseFloat()
   * BOM:浏览器对象.
       * window:
       * Navigator:
       * Screen:
       * History:
       * Location:
   * DOM：文档对象.
       * 获得元素:
           * document.getElementById(),document.getElementsByName(),document.getElementsByTagName();
       * 添加元素:
           * element.appendChild(),element,insertBefore();
       * 删除元素:
           * element.removeChild();
       * 创建元素:
           * document.createElement(),document.createTextNode();
       * 修改元素值:
           * innerHTML属性:
#JQuery(很重要)
## 主要的JQ操作
* 属性(prop(),attr())，
* 样式(css(),addClass(),removeClass(),show(),hide())，
* DOM(创建$("<a>百度</a>")，
* 添加append(),
* 删除remove(),empty()，
* each方法遍历数组
* 要使用JQuery,必须先引入Jquery的js文件
        * `<script src="../../js/jquery-1.11.3.min.js"></script>`
* 写出JQ的入口函数
        * `$(function(){});`
* JQ对象和DOM对象的转换
        * JQ对象里面实际上是Dom数组,我们操作JQuery对象,实际上就是操作里面的每一个元素
        * 只有被$()包裹的对象才是JQuery对象
        * JQuery=>dom  `$("div")[0];`
        * dom=>JQuery  `{dom对象};`
* JQuery完成显示和隐藏
        * show():
                1. jq对象.show();
                2. jq对象.show("slow");//slow,normal,fast
                3. jq对象.show(毫秒值);//1000
                4. jq对象.show(毫秒值,function(){});
        * hide():
                1. jq对象.hide();
                2. jq对象.hide("slow");//slow,normal,fast
                3. jq对象.hide(毫秒值);//1000
                4. jq对象.hide(毫秒值,function(){});
#JQ的选择器
        * 基本选择器
                * id选择器
                        * 用法:`$("#id")`
                * 类选择器
                        * 用法:`$(".类名")`
                * 元素选择器
                        * 用法:`$("元素名称")`
                * 并列选择器
                        * 用法:`$("选择器1,选择器2,选择器3,...")`
        * 层级选择器
                * 后代(子孙)选择器:使用空格        所有后代包含孙子及以下的元素
                * 子元素选择器:使用>        第一层的元素（儿子）
        * 基本过滤选择器
                * `:eq(index)`:匹配一个给定索引值的元素,**注意:**这里没有引号
                * `:even`:匹配所有索引值为偶数的元素，从 0 开始计数
                * `:odd`:匹配所有索引值为奇数的元素，从 0 开始计数
                * `:first`:获取第一个元素
                * `:last`:获取最后一个元素
        * 属性选择器
                * `input[type='']`
        * 表单选择器(认识就行)
                * :input
                * :text
                * :password
                * :radio
                * :checkbox
                * :submit
                * :image
                * :reset
                * :button
                * :file
                * :hidden
        * 表单属性选择器
                * :checked
#JQuery对属性的操作的方法
        * val();
                * 传入值表示赋值
                * 不传入值表示获取
        * attr();
            * 使用方法一：$(“”).attr(“src”);
            * 使用方法二：$(“”).attr(“src”,”test.jpg”);
            * 使用方法三：$(“”).attr({“src”:”test.jpg”,”width”:”100”});
        * removeAttr();
        * prop();新版本的方法.
            * 使用方法一：$(“”).prop(“src”);
            * 使用方法二：$(“”).prop(“src”,”test.jpg”);
            * 使用方法三：$(“”).prop({“src”:”test.jpg”,”width”:”100”});
        * removeProp();
        * addClass();
        * removeClass();
* 添加子元素
        * append();               
                * 在某个元素后添加内容
                * 如果添加的元素已经存在,那就变成移动了        
        * html();
                * 传入之表示,覆盖某个元素的内容
                * 不传入值表示,获取
        * appendTO();        ---将某个元素添加到另一个元素后.
* 删除子元素        
        * remove();                ---将某个元素移除.
* JQuery的遍历
        * `$.each(objects,function(index,element){});`
        * `$("").each(function(index,element){});`
* 如何获下拉框中选中的数据:selected
        * 表单选择器和表单属性选择器组合使用
        * `var options = $("#right").find('option:selected');`
* JQ的查找事件
        * find()
                * $("p").find("span")
                * 搜索所有与指定表达式匹配的元素
                * 这个函数是找出正在处理的元素的后代元素的好方法
        * parent()
                * `$("p").parent()`获取父元素
        * children()
                * `$("div").children()`获取子元素
* JQ的事件处理
        * trigger:触发某个或某类元素中的事件
                * `$("input").trigger("focus");`
        * triggerHandler:触发某个元素中的事件
                * `$("input").triggerHandler("focus");`
## 总结
* JQuery的概述：是一个轻量级的JavaScript的类库.对JS进行封装.
* 常见的JS的框架：
    * JQuery，ExtJS，DWR，Prototype...
* JQuery的使用:
    * 引入JQuery的JS.
    * `window.onload`和`$(document).ready(function(){})`;区别?
        * onload页面加载完成后才会执行.执行一次
        * ready在页面的DOM树绘制完成就会执行.执行多次.
    * JS对象与JQuery对象的转换.
        * JS-->JQuery: $(JS的对象)
        * JQuery-->JS: JQ对象.get(0), JQ对象[0]
#JQuery的选择器：(*****)
    * 基本选择器：
        * ID选择器，类选择器，元素选择器，通配符选择器，选择器并列.
    * 层级选择器：
        * 空格 ,> ,+ ,~
    * 过滤:
        * `:first`,`:last`,`:eq()`,`:even`,`:odd`...
    * 属性选择器:
        * `[属性名]`,`[属性名='属性值']`...
    * 表单选择器:
        * `:input`,`:text`,`:password`,`:radio`...
    * 可见性:
        *
    * 表单对象属性：
        * `:checked`,`:selected`,`:enable`,`:disable`
* JQuery实现效果:
    * `show()`:显示
    * `hide()`:隐藏
    * `slideDown()`:向下滑动
    * `slideUp()`:向上滑动
    * `fadeIn()`:褪色
    * `fadeOut()`:褪色
    * `animate()`:自定义
* JQuery样式操作:
    * `css()`;
* JQuery属性操作的方法:
    * `attr()`,`removeAttr()`,`prop()`,`removeProp()`,`html()`,`text()`,`val()`,`addClass()`,`removeClass()`
* JQuery文档处理:
    * `append()`,`appendTo()`,`insertBefore()`,`insertAfter()`,`remove()`,`clone()`,`replaceAll()`
* JQuery的事件:
    * `click()`,`change()`,`submit()`,`dblclick()`,`keyUp()`,`keyDown()`...
    * `toggler()`,`hover()`        ---进行事件的切换.
* 事件绑定
        * $().click(function(){});
        * onclick(function(){});
        * $().on('click','span',function(){});
* JQ的事件切换
        * toggle();                --单击事件的切换
        * hover();                --鼠标悬停的切换

## 重要单词
* 设置和获取
        1. 属性
                * `$("div").prop("属性名")`:获取      
                * `prop("属性名","属性值")`:设置,
                * `attr...`
        2. 表单值
                * `$("#a").val()`:获取
                * `val("")`:设置
        3. CSS样式
                * `css("")`:获取  
                * `css("","")`:设置
        4. html内容
                * `html("")` 传入纯文本或者是标签
        5. 类样式  
                * `addClass("已经存在的类名")`
                * `removeClass("")`
* dom操作
        1. 创建 `$("<option></option>")`
        2. 添加 `A.append(B)`
        3. 删除
                * `$().remove()`:会将自己删除  
                * `$().empty()`:只会删除子元素
        4. 遍历
                * `$.each(objects,function(index,element){});`
                * `$("").each(function(index,element){});`
                * `$("").each(function(){var index=... var element=...});`
* 事件
        1. `对象.on('事件名','span',function(){})`
        2. `this`代表触发事件的对象
        3. `click`,`dblclick`,`keydown`,`keyup`,`mouseenter`,`mouseleave`,`change`,`blur`,`focus`
        4. `find()`
                * `$("p").find("span")`
                * 搜索所有与指定表达式匹配的元素
                * 这个函数是找出正在处理的元素的后代元素的好方法
        5. `parent()`
            * `$("p").parent()`获取父元素
        6. `children()`
            * `$("div").children()`获取子元素
        7. `trigger()`:触发某个或某类元素中的事件
            * `$("input").trigger("focus");`
        8. `triggerHandler()`:触发某个元素中的事件
            * `$("input").triggerHandler("focus");
# BootStrap
* BootStrap可以在那些地方使用
*  BootStrap可以在那些地方使用:
    * BootStrap设计出响应式页面,由它设计页面可以在手机,PAD,PC都可以直接访问.
* BootStrap的全局CSS:
    * BootStrap的框架提供了一系列的CSS的样式.这些样式可以直接使用.
* 栅格系统:
    * Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
    * 使用.row样式定义栅格的行.
    * 定义列：.col-lg-n .col-md-n  .col-sm-n   .col-xs-n

--[石家庄校区]web阶段笔记--

#CSS&JS
#CSS：
* CSS的概述：层叠样式表.
    * 修饰HTML的页面.使页面与样式分离.
* CSS的语法：
    * 选择器{属性名:属性值;属性名:属性值;...}
* CSS的引入方式：
    * 行内样式：在html元素上使用style属性设置
    * 内部样式：在html中使用<style></style>进行设置
    * 外部样式：定义一个css文件,在html中引入该文件.<link href=”” type=”” rel=””/>
* CSS的选择器：(****)
    * 元素选择器:
    * ID选择器：
    * 类选择器：
    * 后代选择器：
    * 子元素选择器：
* CSS的样式：
    * 文本
    * 背景
    * 字体
    * 列表
* CSS的盒子模型：
    * 内边距：padding
    * 边框：border
    * 外边距：margin
* CSS的悬浮和定位：
    * 悬浮：float属性设置悬浮.
    * 清除悬浮：clear属性清除.
    * 定位：position属性设置定位.
        * 使用left和top属性控制位置.
    * display属性：控制元素的显示方式：
        * block--显示的, none--隐藏的,inline--显示到一行.



#JS:
* JS的概述：JavaScript运行在浏览器端脚本语言.
* JS的历史：由网景公司研发的.由ECMA组织统一标准:ECMAScript.
* JS的组成：ECMAScript，BOM，DOM.
* JS的语法：
    * JS的变量声明:
    * JS的数据类型：
        * 原始类型：undefined,boolean,string,number,null
        * 引用类型：
    * JS的运算符：
        * 与java中基本一致.有一个 === 类型与值都相同的情况下才会为true.
    * JS的语句：
        * 与Java中的语句一致.
* 简单的表单校验：
    * 正则的校验：使用String的match方法和正则中的test方法.
#JavaScript
#JavaScript:基本使用:
   * ECMAScript:
       * 变量：弱变量类型: var i;
       * 数据类型:原始类型和引用类型.
       * 语句
       * 运算符
       * 对象:
           * String,Boolean,Date,Math,Number,正则...
       * 全局函数:eval(),encodeURI(),encodeURIComponent(),decodeURI(),decodeURIComponent(),parseInt(),parseFloat()
   * BOM:浏览器对象.
       * window:
       * Navigator:
       * Screen:
       * History:
       * Location:
   * DOM：文档对象.
       * 获得元素:
           * document.getElementById(),document.getElementsByName(),document.getElementsByTagName();
       * 添加元素:
           * element.appendChild(),element,insertBefore();
       * 删除元素:
           * element.removeChild();
       * 创建元素:
           * document.createElement(),document.createTextNode();
       * 修改元素值:
           * innerHTML属性:
#JQuery(很重要)
## 主要的JQ操作
* 属性(prop(),attr())，
* 样式(css(),addClass(),removeClass(),show(),hide())，
* DOM(创建$("<a>百度</a>")，
* 添加append(),
* 删除remove(),empty()，
* each方法遍历数组
* 要使用JQuery,必须先引入Jquery的js文件
        * `<script src="../../js/jquery-1.11.3.min.js"></script>`
* 写出JQ的入口函数
        * `$(function(){});`
* JQ对象和DOM对象的转换
        * JQ对象里面实际上是Dom数组,我们操作JQuery对象,实际上就是操作里面的每一个元素
        * 只有被$()包裹的对象才是JQuery对象
        * JQuery=>dom  `$("div")[0];`
        * dom=>JQuery  `{dom对象};`
* JQuery完成显示和隐藏
        * show():
                1. jq对象.show();
                2. jq对象.show("slow");//slow,normal,fast
                3. jq对象.show(毫秒值);//1000
                4. jq对象.show(毫秒值,function(){});
        * hide():
                1. jq对象.hide();
                2. jq对象.hide("slow");//slow,normal,fast
                3. jq对象.hide(毫秒值);//1000
                4. jq对象.hide(毫秒值,function(){});
#JQ的选择器
        * 基本选择器
                * id选择器
                        * 用法:`$("#id")`
                * 类选择器
                        * 用法:`$(".类名")`
                * 元素选择器
                        * 用法:`$("元素名称")`
                * 并列选择器
                        * 用法:`$("选择器1,选择器2,选择器3,...")`
        * 层级选择器
                * 后代(子孙)选择器:使用空格        所有后代包含孙子及以下的元素
                * 子元素选择器:使用>        第一层的元素（儿子）
        * 基本过滤选择器
                * `:eq(index)`:匹配一个给定索引值的元素,**注意:**这里没有引号
                * `:even`:匹配所有索引值为偶数的元素，从 0 开始计数
                * `:odd`:匹配所有索引值为奇数的元素，从 0 开始计数
                * `:first`:获取第一个元素
                * `:last`:获取最后一个元素
        * 属性选择器
                * `input[type='']`
        * 表单选择器(认识就行)
                * :input
                * :text
                * :password
                * :radio
                * :checkbox
                * :submit
                * :image
                * :reset
                * :button
                * :file
                * :hidden
        * 表单属性选择器
                * :checked
#JQuery对属性的操作的方法
        * val();
                * 传入值表示赋值
                * 不传入值表示获取
        * attr();
            * 使用方法一：$(“”).attr(“src”);
            * 使用方法二：$(“”).attr(“src”,”test.jpg”);
            * 使用方法三：$(“”).attr({“src”:”test.jpg”,”width”:”100”});
        * removeAttr();
        * prop();新版本的方法.
            * 使用方法一：$(“”).prop(“src”);
            * 使用方法二：$(“”).prop(“src”,”test.jpg”);
            * 使用方法三：$(“”).prop({“src”:”test.jpg”,”width”:”100”});
        * removeProp();
        * addClass();
        * removeClass();
* 添加子元素
        * append();               
                * 在某个元素后添加内容
                * 如果添加的元素已经存在,那就变成移动了        
        * html();
                * 传入之表示,覆盖某个元素的内容
                * 不传入值表示,获取
        * appendTO();        ---将某个元素添加到另一个元素后.
* 删除子元素        
        * remove();                ---将某个元素移除.
* JQuery的遍历
        * `$.each(objects,function(index,element){});`
        * `$("").each(function(index,element){});`
* 如何获下拉框中选中的数据:selected
        * 表单选择器和表单属性选择器组合使用
        * `var options = $("#right").find('option:selected');`
* JQ的查找事件
        * find()
                * $("p").find("span")
                * 搜索所有与指定表达式匹配的元素
                * 这个函数是找出正在处理的元素的后代元素的好方法
        * parent()
                * `$("p").parent()`获取父元素
        * children()
                * `$("div").children()`获取子元素
* JQ的事件处理
        * trigger:触发某个或某类元素中的事件
                * `$("input").trigger("focus");`
        * triggerHandler:触发某个元素中的事件
                * `$("input").triggerHandler("focus");`
## 总结
* JQuery的概述：是一个轻量级的JavaScript的类库.对JS进行封装.
* 常见的JS的框架：
    * JQuery，ExtJS，DWR，Prototype...
* JQuery的使用:
    * 引入JQuery的JS.
    * `window.onload`和`$(document).ready(function(){})`;区别?
        * onload页面加载完成后才会执行.执行一次
        * ready在页面的DOM树绘制完成就会执行.执行多次.
    * JS对象与JQuery对象的转换.
        * JS-->JQuery: $(JS的对象)
        * JQuery-->JS: JQ对象.get(0), JQ对象[0]
#JQuery的选择器：(*****)
    * 基本选择器：
        * ID选择器，类选择器，元素选择器，通配符选择器，选择器并列.
    * 层级选择器：
        * 空格 ,> ,+ ,~
    * 过滤:
        * `:first`,`:last`,`:eq()`,`:even`,`:odd`...
    * 属性选择器:
        * `[属性名]`,`[属性名='属性值']`...
    * 表单选择器:
        * `:input`,`:text`,`:password`,`:radio`...
    * 可见性:
        *
    * 表单对象属性：
        * `:checked`,`:selected`,`:enable`,`:disable`
* JQuery实现效果:
    * `show()`:显示
    * `hide()`:隐藏
    * `slideDown()`:向下滑动
    * `slideUp()`:向上滑动
    * `fadeIn()`:褪色
    * `fadeOut()`:褪色
    * `animate()`:自定义
* JQuery样式操作:
    * `css()`;
* JQuery属性操作的方法:
    * `attr()`,`removeAttr()`,`prop()`,`removeProp()`,`html()`,`text()`,`val()`,`addClass()`,`removeClass()`
* JQuery文档处理:
    * `append()`,`appendTo()`,`insertBefore()`,`insertAfter()`,`remove()`,`clone()`,`replaceAll()`
* JQuery的事件:
    * `click()`,`change()`,`submit()`,`dblclick()`,`keyUp()`,`keyDown()`...
    * `toggler()`,`hover()`        ---进行事件的切换.
* 事件绑定
        * $().click(function(){});
        * onclick(function(){});
        * $().on('click','span',function(){});
* JQ的事件切换
        * toggle();                --单击事件的切换
        * hover();                --鼠标悬停的切换

## 重要单词
* 设置和获取
        1. 属性
                * `$("div").prop("属性名")`:获取      
                * `prop("属性名","属性值")`:设置,
                * `attr...`
        2. 表单值
                * `$("#a").val()`:获取
                * `val("")`:设置
        3. CSS样式
                * `css("")`:获取  
                * `css("","")`:设置
        4. html内容
                * `html("")` 传入纯文本或者是标签
        5. 类样式  
                * `addClass("已经存在的类名")`
                * `removeClass("")`
* dom操作
        1. 创建 `$("<option></option>")`
        2. 添加 `A.append(B)`
        3. 删除
                * `$().remove()`:会将自己删除  
                * `$().empty()`:只会删除子元素
        4. 遍历
                * `$.each(objects,function(index,element){});`
                * `$("").each(function(index,element){});`
                * `$("").each(function(){var index=... var element=...});`
* 事件
        1. `对象.on('事件名','span',function(){})`
        2. `this`代表触发事件的对象
        3. `click`,`dblclick`,`keydown`,`keyup`,`mouseenter`,`mouseleave`,`change`,`blur`,`focus`
        4. `find()`
                * `$("p").find("span")`
                * 搜索所有与指定表达式匹配的元素
                * 这个函数是找出正在处理的元素的后代元素的好方法
        5. `parent()`
            * `$("p").parent()`获取父元素
        6. `children()`
            * `$("div").children()`获取子元素
        7. `trigger()`:触发某个或某类元素中的事件
            * `$("input").trigger("focus");`
        8. `triggerHandler()`:触发某个元素中的事件
            * `$("input").triggerHandler("focus");
# BootStrap
* BootStrap可以在那些地方使用
*  BootStrap可以在那些地方使用:
    * BootStrap设计出响应式页面,由它设计页面可以在手机,PAD,PC都可以直接访问.
* BootStrap的全局CSS:
    * BootStrap的框架提供了一系列的CSS的样式.这些样式可以直接使用.
* 栅格系统:
    * Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
    * 使用.row样式定义栅格的行.
    * 定义列：.col-lg-n .col-md-n  .col-sm-n   .col-xs-n