初入JavaWeb

JavaScript

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方法.

基本使用

    包含ECMAScript，BOM，DOM

     ECMAScript

          变量，

          原始数据类型和引用数据类型，

          语句，

          运算，

          对象

                    String，Boolean，Date，Math，Number，正则等

        BOM

               window

               Navigator

               Screen

               History

               Location

        DOM

               获取元素

document.getElementById(),Document.getElementByName(),Document.getElementByTagName()

                添加元素

                     element.appendChild(),element.insertBefore()

                 删除元素

                     element.removerChild()

                 创建元素

                     element.createElement(),Document.createTextNode();

                  修改元素值

                     innerHTML

JQuery

     概念：是以个JS的框架（类库），对传统的JS进行了封装

     在企业中通常使用JS框架进行开发，效率高，代码少，出错率低

     常用框架：

         JQuery，ExtJS，DWR，Prototype。。。

     基本使用

1.   引入JQuery的js

                                  i.          <script  src=”JQuery文件的路径”>

                                 ii.          Window.onload:等页面加载完后执行,只能执行一次

$(function(){})   :等DOM树绘制完成后执行,先window.onload一步,且可以被执行多次.$相当于JQuery

                               iii.          获得对象控制权

JS获得对象控制权

document.getElementById(“对象id”);

     JQuery

         $(“#对象id”)

     JS转JQ

         $(js对象);

     JQ转JS

         JQ对象[index]

         JQ对象.get(index)

JQ可以对获取的一组对象进行统一操作

JQ的效果操作

     show();显示

         使用对象一:JQ对象.show();

         使用对象二:JQ对象.show(“slow”);//slow,normal,fast

         使用对象三:JQ对象.show(毫秒值)

         使用对象四:JQ对象.show(毫秒值,function(){})

     hide():隐藏

         同上

     slideDown()向下

         同上

     slideUp():向上

         同上

     fadeIn():淡入

         同上，

     fadeout：淡出

         同上

                   JQuery的选择器

                       id选择器：

                            用法：$(“id“)

                       类选择器：

                            用法:$（”类名“）

                       元素选择器：

                            用法：$(“元素名“)

                       通配符选择器：

                            用法：$(“*”)

                       同级选择器：

                            用法：$(“选择器“，“选择器”…..)

Bootstrap

bootstrap（web前端css框架）

     基于HTML、css、javascript的,最大的好处就是使web开发更加的快捷了.提供了HTML和CSS规范,由动态css语言Less写成的.

     使用Bootstrap需要引入文件

         新的Bootstrap的核心文件

         <link rel=”stylesheet” href=”路径/ bootstrap.min.css”>

         可选的Bootstrap主题文件(一般不用引入)

         <link rel=”stylesheet” href=”路径/bootstrap-theme.min.css”>

         JQuery文件.务必在bootstrap.min.js之前引入

         <script src=”路径/jquery.min.js”></script>

         最新的Bootstrap核心的javascript文件

         <script scr = “存放路径/bootstrap.min.js”></script>

         还需要添加一个<meta>标签

              <meta name = “viewport” content=”width=device-width,initial-scale=1”>

     Bootstrap提供了一系列的css的样式,

         布局容器

              .container类用于固定宽度并支持响应式布局的容器

              .container-fluid类用于100%宽度,占据全部视口(viewport)的容器

         栅格系统

              可随这屏幕尺寸的增加,系统自动分为最多12列,包含了易于使用的预定义类,还有强大的mixin用于生成更具有语义的布局

              .row定义行

                   .col-lg-n .col-md-n .col-sm-n .col-xs-n 定义列

                  

初入JavaWeb

JavaScript

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方法.

基本使用

    包含ECMAScript，BOM，DOM

     ECMAScript

          变量，

          原始数据类型和引用数据类型，

          语句，

          运算，

          对象

                    String，Boolean，Date，Math，Number，正则等

        BOM

               window

               Navigator

               Screen

               History

               Location

        DOM

               获取元素

document.getElementById(),Document.getElementByName(),Document.getElementByTagName()

                添加元素

                     element.appendChild(),element.insertBefore()

                 删除元素

                     element.removerChild()

                 创建元素

                     element.createElement(),Document.createTextNode();

                  修改元素值

                     innerHTML

JQuery

     概念：是以个JS的框架（类库），对传统的JS进行了封装

     在企业中通常使用JS框架进行开发，效率高，代码少，出错率低

     常用框架：

         JQuery，ExtJS，DWR，Prototype。。。

     基本使用

1.   引入JQuery的js

                                  i.          <script  src=”JQuery文件的路径”>

                                 ii.          Window.onload:等页面加载完后执行,只能执行一次

$(function(){})   :等DOM树绘制完成后执行,先window.onload一步,且可以被执行多次.$相当于JQuery

                               iii.          获得对象控制权

JS获得对象控制权

document.getElementById(“对象id”);

     JQuery

         $(“#对象id”)

     JS转JQ

         $(js对象);

     JQ转JS

         JQ对象[index]

         JQ对象.get(index)

JQ可以对获取的一组对象进行统一操作

JQ的效果操作

     show();显示

         使用对象一:JQ对象.show();

         使用对象二:JQ对象.show(“slow”);//slow,normal,fast

         使用对象三:JQ对象.show(毫秒值)

         使用对象四:JQ对象.show(毫秒值,function(){})

     hide():隐藏

         同上

     slideDown()向下

         同上

     slideUp():向上

         同上

     fadeIn():淡入

         同上，

     fadeout：淡出

         同上

                   JQuery的选择器

                       id选择器：

                            用法：$(“id“)

                       类选择器：

                            用法:$（”类名“）

                       元素选择器：

                            用法：$(“元素名“)

                       通配符选择器：

                            用法：$(“*”)

                       同级选择器：

                            用法：$(“选择器“，“选择器”…..)

Bootstrap

bootstrap（web前端css框架）

     基于HTML、css、javascript的,最大的好处就是使web开发更加的快捷了.提供了HTML和CSS规范,由动态css语言Less写成的.

     使用Bootstrap需要引入文件

         新的Bootstrap的核心文件

         <link rel=”stylesheet” href=”路径/ bootstrap.min.css”>

         可选的Bootstrap主题文件(一般不用引入)

         <link rel=”stylesheet” href=”路径/bootstrap-theme.min.css”>

         JQuery文件.务必在bootstrap.min.js之前引入

         <script src=”路径/jquery.min.js”></script>

         最新的Bootstrap核心的javascript文件

         <script scr = “存放路径/bootstrap.min.js”></script>

         还需要添加一个<meta>标签

              <meta name = “viewport” content=”width=device-width,initial-scale=1”>

     Bootstrap提供了一系列的css的样式,

         布局容器

              .container类用于固定宽度并支持响应式布局的容器

              .container-fluid类用于100%宽度,占据全部视口(viewport)的容器

         栅格系统

              可随这屏幕尺寸的增加,系统自动分为最多12列,包含了易于使用的预定义类,还有强大的mixin用于生成更具有语义的布局

              .row定义行

                   .col-lg-n .col-md-n .col-sm-n .col-xs-n 定义列