Javascript与Jquery知识点

js简介

1 用途：制作页面交互效果
          如 轮播图的切换、Tab栏切换、地图、表单验证等

2 历史背景
   全称 javascript  与Java语言没关系
   javascript vbscript jscript

  脚本语言：嵌入在html中,由浏览器解析执行

3 javascript与ECMAscript的关系
   
    var i = 1;
   插座

    Javascript  actionscript(Flash)

  ECMAscript是制定标准的，js和as遵循这个标准

  ecmascript5
    新的事物或技术  关注 

4 js今天的历史重任
  2003之前, js做广告的
  2004年  Google ajax(用js实现)
  2007  js做移动端页面 
            三层标准

 
  2010 HTML5(canvas)
  2011 node.js 可以让我们开发服务器程序
         
     webapp (用web的技术开发app)
   成本节约、跨平台
   
     携程网 ios andriod wp   30*3
   
       3~4个人  app

js: 好学的语言，
 
js核心内容：  基础语法（重点） 变量 表达式 循环 函数 数组等
                         dom(重点)   js控制一些HTML元素
                         bom（了解）控制浏览器的一些东西

js的学习方法: 基础扎实--->
                         多品味别人的程序（思想、思路）
                             ----> 多写逻辑程序
************js知识点*********************
    js（除了node.js）是前台语言，由服务器把js文件传输到客户端
，由客户端的浏览器去解析执行
    后台语言（php/java等）数据的处理

  书写第一个js程序
1 js代码引入位置
  在head标签里面放入
     <script type="text/javascript">
      //js代码写在这对标签里面  
    </script>

2 alert("消息")；
  在浏览器中，弹出一个窗口
  console.log("信息")； 在控制台输出信息

3 语法规则
    a  JavaScript对换行、缩进、空格不敏感，但是书写的时候
要养成良好的代码风格（一行只写一条语句，适当地缩进等）
    b js语句是以分号作为结束标志
    c 这些符号都是英文

4 注释
    html的注释 <!-- 注释的内容 -->
    css的注释  /*注释的内容 */
    js的注释: 单行注释  //   sublime快捷键 ctrl+/
                     多行注释  /*  ...   */ sublime快捷键 ctrl+shift+/

5 直接量（常量）
     数字： 100  -15  12.3 等
    字符串： "hello"  "abc123"
      alert(10);//弹出数字10
     alert("10");//弹出字符串10
    判断错误
          alert(2016);
          alert("2016");
          alert(八十九);//错误 要加双引号
        
 6 变量（未知数）
      js声明变量  var z = 123;
                          var a = "中国";
     var叫关键字，定义变量
     z叫变量名  变量名符合一定规则
                       * 由数字、字母、下划线、$组成
                       * 不能以数字开头
                       * 不能是关键字 
                       * js区分大小写
    =  赋值号，上面代码含义就是把123值赋值给左边变量z

   保留字不能做变量名
 abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto
 implements、import、int、interface、long、native、package、
 private、protected、public、short、static、super、
 synchronized、throws、transient、volatile

   变量先定义后使用

7 typeof 判断数据的类型
   typeof 变量或表达式
   结果是number 表示是数值（整数或小数）
   .............string    表示是字符串

******************************************************************

1 alert("消息")；
 完整的语法 window.alert("消息");

2 console.log("信息");

3 confirm("...")；一般与if...else配合使用

4 prompt 接受用户输入信息，用户输入的信息都是字符串

5 document.write("....")；往网页中输出信息,而且参数可以放置标签

 undefined 表示变量未初始化
 b is not defined  b没有定义，这是报错的

 连字符和加号
+  加法
   1+2
+ 表示字符串连接
    数字+字符串，先把数字转成字符串，变成两个字符串连接

 "999"-111  即 999-111
 "999"-"111" 即 999-111
  "3ac"-"100"   NaN(not a number)  是一种数据类型

 % 求余（取模）
   15%2   1
   a%b  结果这个余数的符号和被除数一致

 + - *  /  %  ()

变量值的传递
    a = b;
  含义： 把变量b的值赋值给左边的变量a,但是b的值是不变的

乘方 Math.pow(3,4)； 表示3的4次方
       Math 数学对象
      pow 数学对象的方法
           对象.方法（参数）;
平方根  Math.sqrt(16);

 sin  cos

字符串如何转为数字
   parseInt("5"); //把字符串5转为数字5
   parse 转换
   parseInt(5.999);//结果是5
   parseInt("365天")；//365

  10.99+10.88

   parseFloat("10.99");//10.99

  作业 模拟小小计算器 （两数相 + - *   /）

 程序流程控制：
    顺序结构： 程序从上往下，一句句执行；
    条件结构：if   if-else等
     循环结构： while、for、do-while

1 if结构
   if(表达式) {
        表达式成立需要执行的语句；
   }
   执行流程： 先判断表达式真假，假如条件表达式为真，
大括号里面的语句就会被执行，否则大括号里的语句就
不会被执行
       if(a%2==0)
             alert(....);
       alert("over");
   假如没有加大括号，默认是下面的第一条语句作为if的语句，
初学者尽量养成加大括号的习惯

2 if-else
    if(条件) {
         语句1；
    } else {
         语句2；
    }

 条件为真，执行语句1，否则执行语句2

3 多分支语句
         90-100  优秀
        80-90  良好
        60-80 及格
           <60 去补考
  成绩需要用户去输入，对用户输入的成绩进行判断
  分析思路：1 利用prompt函数提示用户输入一个值，用
parseInt() 将值转化为数字
                      2 用一个变量 ，把这个数字保存起来
                      3 判读

*******************************************************************************

运算符：算术的运算
布尔值true false
var b ="true"//不是布尔值
关系运算符:
>>=<<=
==等于
===全等于
！=不等于
！==不全等于
关系运算符得到的结果是逻辑值，假如为真，则条件成立；
为假，则条件不成立

=赋值号一点等于的意思都没有
表示两个东西是否相等，千万不能用

==表示两个数是否相等还可以表示字符串是console.log（10==“10”）;//ture
 说明==不严格，把"10"转化为10然后比较 
     
   === 全等于
         console.log("56" === 56); //false
 console.log(56 === "56"); //false
 console.log("56" === "56"); //true
 console.log(56 === 56);  //true

 

            !=  对 ==取相反
            !== 对===取相反

             10！="10"    10=="10" 是true
             10!=="10"  10==="10" false
 

    console.log(3 != 8); //true
 console.log(3 != "3"); //false，因为3==”3”是true，所以反过来就是false。
 console.log(3 !== "3"); //true，应为3===”3”是false，所以反过来是true。

 逻辑运算符  &&  ||   ！
       &&  "并且"
       ||    "或"
        !   取反

             num>10&&num%2==0
             score<0|| score>100  

     10<a<30   a>10&&a<30

     10<a<30   先计算10<a 的结果，拿这个结果与30比较

     3<2<15  3<2&&2<15

流程控制结构: 顺序结构 条件结构  循环结构

    if(a>0)
   {
       if(a>100) {}
       else {}
   }
   else {}

嵌套：if语句又含有if结构

while  do-while  for

循环： 重复  
 
写一个程序： 在文档页面打印1-100

 for(表达式1; 表达式2；表达式3) {
       循环体
 }

 表达式1 一般用于定义循环变量 也可以省略
 表达式2 一般放的是循环条件
 表达式3 一般放的是循环变量变化
 大括号里的叫循环体（需要重复的语句）
  var i=1;
  for(;i<=100; i=i+1) {                                  
  document.write(i);                        
  document.write("<br/>");
               // document.write("这是第+“i”+")；   

 }

               
  草稿： i ---- 1
               1<=100 成立
               打印1和换行
               i ----- 2
               2<=100 成立
              打印2和换行
              i ---- 3
                    ...
               i --- 100
             100<=100
                 打印100和换行
             101<=100

******************************************************************
三种循环: while do-while for
 三种区别：语法规则不同，三种形式可相互替代
for循环：用的比较多，一般用于循环次数确定
  1 语法
       var sum = 0;
       for(var i=0; i<=100; i++) {
                 sum = sum + i;
       }
      alter(sum)
  2 执行流程

  3 练习
              求1~100之间所有的数的和、平均值
              求1~100之间所有的偶数的和、奇数的和
              本金10000元存入银行，年利率是千分之三，
  每过1年，将本金和利息相加作为新的本金，计算5
 年后，获得的本金是多少？
               有个人想知道，一年之内一对兔子能繁殖多少对？
于是就筑了一道围墙把一对兔子关在里面，已知一对兔子
每个月可以生一对小兔子，而一对小兔子从出生后第三个月
起每月生一对小兔子。假如一年内没有发生死亡现象。那么，
一对兔子一年内（12个月）能繁殖成多少对？
       兔子的规律为数列 1 1 2 3 5 8 13 21

     打印9*9乘法口诀表
     打印正方形
     打印直角三角形

     计算出1到100之间所有不能被3整除的整数的和大于等于2000
的数字

 while
    while(条件)
   {
      循环体；
   }

  1+2+...+10
  var sum = 0;
  for(var i=1; i<=10; i++) {
     sum = sum +i;
  }

    var sum = 0;
    var i = 1;
    while(i<=10) {
     sum += i;
    i++;
    }

  do {
      循环体
  } while(条件);  （注意这里有分号）

 1 do和while配合使用

    var sum = 0;
    var i = 1;
   do {
      sum = sum + i;
     i++;
  } while(i<=10);

  while与do-while的区别：
    while循环体有可能一次都不执行
    do-while 至少执行一次循环体

 break与continue

1 break用于循环，跳出循环
例子：1 3 5 7 9 ...  101
 for(var i=1; i>0 ;i+=2) {
  if(i>101)
   break;
  console.log(i);
 }

2 continue只能用于循环，提前结束本次，接着下一次循环
   switch(表达式或变量) {
         case  常量：语句；
          case  常量：语句；
         case  常量：语句；
         default： 语句；
   }
例子：for(var i=1; i<10;i++) {
  if(i%2==0)
   break;
  console.log(i);
 }

3.switch执行流程: 先算表达式或变量的值 ，拿这个值找相对应的
case,假如找到匹配的，就从该case后面语句执行，直到遇到break
或者switch的结尾，假如找不到匹配的case,就执行default.

例子：var a = 6;
 switch(a) { 
  case 1:a++;
  case 2: a*3;
  case 3: a-=6;
          break;
  default: a=a%2;
 }
 alert(a);//-3

 1000天后 是周几b

  num = 1000%7;
  switch(num) {
       case 0: alert...
       case 1: ...
 }

数组 ：
 1 引入： 解决的是一组数据
          var num = "张三";
          num = "李四";
      一组数据
2 数组定义
     方式一 var arr = new Array();//通过new来创建
     方式二 var arr2 = [];

例子：定义了一个数组 数组名为arr
 var arr = new Array();
 arr[0] = 12;//给数组中第一个元素赋值
 arr[1] = "abc";
 alert(arr.length);

 var arr2 = [];
 arr2[0] = "123";
 arr2[1] = 10;
 arr2[2] = 20;
 var arr2 = [10,20,30];//整体赋值
 alert(arr2.length);
 var arr = [1,2,3,4,5,6,7,8,9,10,20,30];
 var arr = new Array(1,2,3,4,5,6);
 alert(arr[0]);
 alert(arr[1]);
 alert(arr[2]);
 alert(arr[3]);
 遍历数组
 for(var i=0; i<=arr.length-1; i++) {
  console.log(arr[i]);
 }

3 数组元素如何表示
        数组名[角标或下标]
        角标从0开始计数 最大值为length-1
        arr[0] 代表数组中第一个元素
        arr[1] 代表数组中第二个元素

4 数组的长度（数组元素的个数）
      arr.length;//代表arr数组的长度  

5 数组的遍历（对每一个数组元素进行访问）

 计算10 20 30 40 50 60 70 的和与平均值
    var sum = 0 , avg;
    var arr = [10,20,30,40,50,60,70];
     for(var i=0; i<arr.length; i++) {
      sum = sum + arr[i];
     }
     avg = sum/arr.length;
     alert("和"+sum+"平均值"+avg);

***************************************************

js 基本语法+DOM（如何用js操作html的元素）+BOM（了解）
函数
      目标 1.掌握基本语法
           2.用函数解决问题
 一段代码反复被使用，造成代码度高
 函数：为了提高代码的复用性，对一段js代码进行封装，可被反复使用被调用
      //src="myfunc.js"外联
       //定义一个函数
 例子：  function getSum(){
         var sum=0;
         for(var i=1; i<=100; i++){
         sum+=i;}
         alert(sum);
          }
//完整定义函数
function 名字（参数1，参数2，。。。）{
//函数体
}
//2 调用函数 函数名（参数）；
getSum（）

//定义一个函数，函数的功能求n-m之间所有的数的和
//函数的定义，规定了两个参数n,m这叫形式参数（形参）
解： function getSum(n,m){
         var sum=0;
         for(var i=n; i<=m; i++){发·
           sum+=i;}
           alert(sum);
          }
function add(x,y)
//求10-20之间的和
//函数调用，10,20叫做实际参数（实参）
//实参传递给形参，一一对应
getSum（10,20）；
getSum（100,1000）；

//求两个数的和
//通过return把值返回，return还有一个作用，提前结束函数调用
解： function add(x,y){
         //在函数內部定义的变量叫局部变量，只在函数内部有效
         var result=x+y;
         return result;//返回值
          
          }
           alert(add（3,2）);

 

函数递归：自己调用自己

例子：
function fun(n){
if(n==1)
     return 1;
else 
     return+fun(n-1);
alert(fun(6));
}
fun(6)开始调用函数，n获得6，返回6+fun（5）----->
接下来执行fun（5）n获得5，返回5+fun（4）------->
.........fun（4）n获得4，返回4+fun（3）------->        
.........fun（3）n获得3，返回3+fun（2）------->
 执行fun(2)   n获得2   返回2+fun(1) 3
 fun(1)  的值1

  alert("消息")； //程序阻塞
  window.alert("消息")；

  console.log("...")

 Dom操作

  js控制结构和样式，首先要找到对象

  1 获取元素（标签、标记、节点）的方法
       getElementById("id");

   让id为demo的p元素，设置它的高度为200px

变量的作用域：全局变量和局部变量
  **全局变量：
    1. 在最外层声明的变量。
    2. 在函数体内部，但是没有声明var 的变量也是全局变量
 
 **局部变量：在函数体内部,通过var声明的变量,该局部变量的有效
范围在右括号之前用

 在函数体内部，没有var声明的变量，并且外面也没有定义，
 这个变量也是全局变量

例子：
var a=b=4;
function(){
  var a=10;
 alert(a);//内部输出10
}
fun();
alert(a);//外部输出值4

事件三要素：
   事件源：一般是个名词，表示事件的来源

   具体的事件（行为或动作）：单双击鼠标悬停等

   事件处理程序:当事情发生，做什么？

打开开关，灯亮了
   事件源：开关
   事件：打开
   事件程序：灯亮了
   事件源.事件=function（）{
//事件处理程序
}

                      onclick            鼠标单击
                      onmouseover  鼠标悬停
                      onmouseout   鼠标离开

做网页的特效：先写结构样式，后写js

元素的显示或隐藏
display：none   隐藏
display：block  显示
visibility：hidden  //也可以表示隐藏，元素所占位置还保留
visibility：visible  //表示显示

overflow：hidden  //让多余的内容隐藏

js入口函数
      window.onload=function(){
           //窗口加载完成执行里面的代码
      }
找元素的方法 document.getElementById("id值")

 

透明度颜色： 
 rgb(255,12,30)
 rgba(红,绿,蓝，透明度)

 获取body元素   document.body

js数据类型
  1 字符串 “123" 'zxc'
  2 数值型  12  1.23  -25
  3 布尔值  true或false
  4 object  比如 var a=null;//a是一个对象类型
  5 undefined 表示该变量定义但未赋值

  NaN属于number类型
  利用string()转换成字符串
  数值型转换成布尔值直接加两个“！”
   var a = 123;
  
  数值型转布尔值 1  ！！数值  2. 利用 Boolean() 
 false、undefined 、null、0、””  为 false
 true、1、”somestring”、[Object]  为 true

  Number()  转为数字

作业 1 用两种方法实现鼠标展示效果
         2 获取失去焦点案例 
         3 表单验证

 
获取表单的值
 tex.value txt这个表单的值

onfocus获取焦点
onblur失去焦点
 
***************************************************
   innerHTML  
更换 盒子里面的内容    文字 标签都换.
  document.getElemnetById("box").innerHTML = "me";
  <div id="box">
         wenzi
         <p></p>
 </div>
表单更换内容
 Input.value
    
  <input type="text" value=""  id="txt"/>
    var txt = doc......;
    对象.属性   txt.value;
  <div  id="box" style="width:500px"></div>
 
var box = doc....;
box.style.width = "500px"; 就相当于给div加行内样式
     
isNaN    nan 不是一个数字    is 是   是 不是一个数字
isNaN(“12”)   如果里面的不是个数字 返回 true   否则返回false
className    类名

 

封装查找元素方法
  function  $(id) {
       return document.getElementById(id);
  }

函数进一步学习：
 
1 函数是由事件驱动或者被调用执行的可重复使用的代码

2 函数和变量一样，要想使用，先声明
      1 自定义函数
                function fun(参数1，参数2，。。。) {
                       //函数体
                  }
     2 函数直接量声明

     3 new Function方式

3 函数参数
        函数名.length  得到形参个数
       arguments.length  得到实参个数

变量提升（提升声明，不提升赋值）
     在函数内部通过var声明的变量，无论这个变量在什么位置定义
，都 先把声明放在前面，赋值放在定义的位置

找元素：
   1 通过id的值
                 getElementById("div1")
     function  $(id) {
       return document.getElementById(id);
    }

  2 通过标签名
                getElementsByTagName("p");
   结果是页面中所有的p元素组成的集合，，哪怕是一个元素，类似一个数组
   要操作具体的P,用数组相关知识即可

 判断用户输入事件 oninput
   正常浏览器支持oninput事件
   ie 6 78  支持onpropertychange 
  处理思路：先写正常，后写兼容
  
仿淘宝搜索框
   1 布局 把文字放到一个盒子，不是通过value,控制盒子的显示和隐藏
   2 兼容处理
 
  txt.onfocus = fun....

两个关于表单的小方法
  1 自动获取焦点  focus（）
 
  h5 视频音频  canvas  svg  ..

两个表单小方法

 1 自动获取焦点  focus（）

     select() ；

  2 自动选择  select()

 

 

 通过标签名获取元素
    getElementsByTagName("标签名");

 txt.focus(); //自动获得焦点
  this.select(); //选择

 php  函数

 

 通过标签名获取元素
 getElementsByTagName("标签名");

 txt.focus(); //自动获得焦点
  this.select(); //选择

 php  函数
两个关于表单的小方法
1 自动获取焦点 focus（）
    select();

h5视频音频 canvas svg..
1 3 5 7 9 浅灰
2 4 6 8 10 深灰

var ps  = document.getElementsByTagName("p");
ps[0].innerHTML = "111";

css样式的权重排序
    行内式>id选择器>类>标签>*>继承>默认样式

封装一个函数，求数组的平均值

三目运算符    ？：   a+b

    表达式1？表达式2: 表达式3
计算流程：先算表达式1，假如表达式1为真，计算表2，
表2的结果就是整个表达式的结果，否则，计算表3，
表3的结果就是整个表达式的结果

     max == a>b?a:b

 checked

排他思想： 先干掉其他所有，最后剩下自己一个再处理

变量和属性
    变量：独立，自由自在，在有效范围内，大家都可以用
属性和方法：
     属于某个对象的，
         对象.属性或对象.方法（）
    Math.pow(a,b);
 

*******************10:36 2016/12/05
下拉菜单事件 onchange
例子：
<select id="seasons" nam="">
<option id="spring">春</option>
<option id="summer">夏</option>
</select>
var sea=doc.....ById("seasons")
sea.onchage=function(){
var val=this.value;
switch{
      case "spring":
      doc.....
      case "summer":
      doc.....
}
}
数组的常用方法
     *添加元素： arr.push(12);
      push（）方法在数组的末尾添加一个或多个元素，
 返回的是数组的长度
      unshift() 从数组的前面放入元素
   *删除元素
        pop()    移除最后一个元素
        shift()   移除第一个元素
    *数组的连接
        concat()  该方法用于连接两个或多个数组,不会改变
  原来的数组，返回的是连接的数组的一个副本
      * 把数组转为字符串
        join()  作用是将数组各个元素是通过指定的分隔符
   进行连接成为一个字符串
         语法 arrayObject.join(separator)

        把字符串转为数组 “abc-def-ghi”.split()
        split()  split() 方法用于把一个字符串分割成字符串数组

js三大部分 ECMAscript  DOM  BOM
 
  ECMAscript  规定了语法和对象
           
 
  DOM（学习的重点） 文档对象模型
       处理网页内容的方法和接口

  BOM 浏览器对象模型  兼容 性  了解即可
               window.alert("aa");

 DOM 为文档提供了结构化表示，
        并定义了如何通过脚本来访问文档结构。

  节点（标签，元素，标记）

    元素节点： 每一个HTML标签
    文字节点： 标签中的文字
    属性节点：标签的属性   

  访问节点
       getElementById()   id 访问节点
       getElementsByTagName()    标签访问节点

       getElementsByClassName()  类名 兼容性问题，主流
浏览器识别，ie6,7,8不识别这个方法
      要想任何浏览器都识别这个方法，需要自己封装
 ***封装自己的类
  思想：我们要取出所有的盒子，利用遍历，根据每一个
className判断，相等就留下来

  

作业
   1 上课的案例全部掌握
  

   2 独立封装getClass()方法，用ie 7 8 测试 其他浏览器
     假如类名为 “demo test” 如何修改代码 让它也支持
        多个类名中含有demo的这种情况
1 做一个类似于昨天点击按钮，相应的盒子显示的作业
   要求： 鼠标放到按钮上，相应的内容（自由发挥）显示
               分新闻，体育，娱乐，八卦四个部分
                鼠标放到新闻上，下面新闻部分出现
                 鼠标放到体育上，下面体育部分出现等
    外观尽量做的漂亮点

2  完成下拉菜单春夏秋冬背景色切换

******************************09:15 2016/12/06
父节点 parentNode
兄弟节点
     下一个兄弟
      nextSibling   ie6 7 8 识别
      nextElementSibling其他浏览器识别
兼容处理 one.nexElementSibling || one.nextSibling
上一个兄弟与下一个兄弟同理
    preivusSibling
    preivusElementSibling
子节点（不常用）
    firstchild  第一个孩子 ie6 7 8识别
    firstElementChild 正常浏览器识别（空格也算）
    lastChild
    lastElementChild
孩子节点（重点）
    childNodes 选出全部的孩子
    childNodes:标准属性，它返回指定元素的子元素集合
    包括html节点，所有属性，文本节点（嫡出）
    缺点：FF、chrome或ie高版把换行也看成子节点，ie6 7 8不会把    换行当成孩子，利用nodeType==1获取元素节点
   <div>
       文字
      <p></>
      <div></div>
   </div>
    children选择所有的孩子，仅仅选择的是元素节点（）
  优1只有元素节点被你选中2无浏览器兼容问题
  注意事项：ie678会把注释当节点，只要避免开即可
  <ul>
    <li>111</li>
    <li>111</li>
    <li>111</li>
  </ul>
 dom节点操作：新建节点 插入节点 删除节点 克隆节点等
新建节点
    var newLi=document.createElement("li");

插入节点
    ul.appendChild(newLi);
  1.appendChild();  添加孩子   append添加的意思
  意思：添加孩子     放到盒子的最后面
  2.insertBefore
     insertBefore(插入的节点，参照节点)子节点 添加孩子
     insertBefore(test,null);

移除节点：removeChild();
 
克隆节点cloneNode("true"或“flase”)
     true//深层复制，不仅仅复制本身，连它的孩子也一起复制。
     flase//浅层复制，只复制本身，不复制孩子。

********************************************************************16:02 2016/12/08
var date = new Date();
date.getTime();
date.valueOf();

date.getDate();
date.getDay(); 0-6

定时器:
    我们有时候需要让某个代码每隔一段时间执行一次
   setInterval("执行的函数",时间)

 setInterval(“fun()”,1000)     可以用

   window.setInterval()
   window.alert()

  倒计时： 离2017年元旦还剩？天？时？分？秒

   思路   getTime()见案例代码

定义自己的日子
  var endTime = new Date(“2015/12/12”); 
  如果date 括号里面写日期  就是 自己定义的时间 
  如果 date括号里面不写日期 ， 就是当前时间 。
  new Date(“2015/12/12 17:30:00”);
  日期和时分秒中间 有空格隔开  

  -moz-属性名
  -ms-属性名
  -wewbkit-transform

  11:46:30

作业1  距离2017春节（农历）倒计时
    显示格式：离2017年元旦还剩05天05时08分06秒
作业2  闹钟
作业3 5秒后跳转到百度
  window.location.href = "网址"

bom  动画  轮播图 。。。

1.4  日期函数  ( Date() )
 这个函数 （对象） 可以设置我们本地 日期。   年月日 时分秒 
1.4.1  声明日期
  var  date = new Date();
  创造声明一个新的日期函数   赋值给了  date
   var arr = new Array(); 
1.4.2  使用函数
  得到 毫秒数    ms        s   m   h   
  从 1970  年1 月1号      unix      32位      68年    
  2038     千年虫       64 位   
  var  date = new Date();  
  date.getTime();
  date.valueOf();        得到 距离 1970年的毫秒数    
 var date  = new Date();  // 声明
console.log(date.getTime());  // 提倡使用的
console.log(date.valueOf());

// 直接使用
console.log(Date.now());
console.log(+new Date());
  
1.5 常用的日期的方法  
获取日期和时间
getDate()                  获取日 1-31
getDay ()                  获取星期 0-6     
getMonth ()                获取月  0-11
getFullYear ()             获取完整年份（浏览器都支持）
getHours ()                获取小时 0-23
getMinutes ()                获取分钟 0-59
getSeconds ()                获取秒  0-59
getMilliseconds ()            获取当前的毫秒
getTime ()        返回累计毫秒数(从1970/1/1午夜)

 如果是上午  ，我打开页面   页面中显示的是
  上午好，好好学习     显示的是上午的图片  
 如果是下午  我打开页面   页面中显示的是
  下午好，天天向上     显示的是下午的图片  
  根据当前的小时来判断     if 
    
1.6 定时器
 
很多情况下，一些操作不需要人工干预， 代码自己会不断的去执行 。
而且 会有 时间的绑定  。  比如每隔 5秒钟就去执行一次事件。
   我们可以设定时间   让某个动作不断的去执行 。 这个我们再js 里面用定时器来表示。
   window.setInterval(“执行的函数”,间隔时间)
       正确的写法:
        setInterval(fun, 1000);      1000 ms   毫秒

        每隔1秒钟，就去执行一次 fun 这个函数. 
        setInterval(“fun()”,1000)     可以用
        setInterval( function(){} , 1000 ) 
        setInterval(fun(),1000)  错误的 
  
    

  定时器 特别的像  for 循环，但是我 的定时器最大的特点在于， 自动，可以设定时间。
1.7   倒计时
好比，今年你多大了  ？  
 2015  -   1990          25    
我们要计算的 倒计时  
有一个最终时间      12月12日
有一个现在时间      11月 13日
倒计时 =  用 将来的时间  -   现在的时间 
问题：    用 毫秒减去      现在距离 1970年1   
                           将来时间 距离 1970 毫秒数 
用将来的毫秒数 -  现在的毫秒数   不断转换就可以了
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            font-size:30px;
            text-align: center;
            color:red;
        }
    </style>
    <script>
        window.onload = function(){
            var demo = document.getElementById("demo");
            var endTime = new Date("2015/12/12 17:30:00"); // 最终时间
            setInterval(clock,1000); // 开启定时器
            function clock(){
                var nowTime = new Date(); // 一定是要获取最新的时间
                //  console.log(nowTime.getTime());  获得自己的毫秒
                var second = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
                // 用将来的时间毫秒 -  现在的毫秒  / 1000 得到的 还剩下的秒  可能处不断 取整
               // console.log(second);
                 // 一小时 3600 秒
                // second / 3600  一共的小时数  /24   天数
                var d = parseInt(second / 3600 / 24);  //天数
                //console.log(d);
                var h = parseInt(second / 3600  % 24)  // 小时
               // console.log(h);
                var m = parseInt(second / 60  % 60);
                //console.log(m);
                var s = parseInt(second % 60); // 当前的秒
                console.log(s);
               /* if(d<10)
                {
                    d = "0" + d;
                }*/
                d<10 ? d="0"+d : d;
                h<10 ? h="0"+h : h;
                m<10 ? m="0"+m : m;
                s<10 ? s="0"+s : s;
                demo.innerHTML = "距离抢购时间还剩: "+d+"天 "+h+"小时 "+m+"分钟 "+s+"秒";
            }
        }
    </script>
</head>
<body>
<div id="demo"></div>
</body>

1.7.1 定义自己的日子
  var endTime = new Date(“2015/12/12”); 
  如果date 括号里面写日期  就是 自己定义的时间 
  如果 date括号里面不写日期 ， 就是当前时间 。
  new Date(“2015/12/12 17:30:00”);
  日期和时分秒中间 有空格隔开 
 

*************************************************************************************10:33 2016/12/09
定时器：setInterval("fun()",1000);
                setInterval(function(){
                        //代码
                    },2000)

      function  fun() {
          //代码
      }

  100

  时钟旋转度数的确定

       时针度数如何确定？每一小时转30度
                                          每分钟转6度
   xhtml
       11:30:40  11.5  

 *关闭定时器  clearInterval(定时器)
 *按钮不可用  用disabled属性
 *单标签的值一般用value获取 如input
       <button></button>   innerHTML 获取button的值
  *this指的是事件源或者函数调用者

定时器之setTimeout() ;

    setTimeout("fun()",1000);//1s后执行fun函数，只执行一次
    setInterval("fun()",1000);//每隔1000毫秒执行一次fun函数

 如何用setTimeout模拟setInterval功能

 函数递归： 函数自己调用自己

深层次看待定时器区别
   setInterval是排队执行的
  间隔时间1s,而程序代码执行需要2s,上次没执行完的代码先执行完，
立即下一次执行

    1s开始执行第一次代码   3s后执行完
    2s.....................二。。。。，上次没执行的完继续执行

  setTimeout("fun()",1000); 3s
 setTimeout("fun()",1000)
介绍下arguments对象
   1 arguments.length  获取实参的个数
   2 arguments.callee;   
     返回的是正在执行的函数
  字符串：
     1 用双引号或单引号引起来的一组字符
     2 其他非字符串如何转成字符串
          2+"abc"---->"2abc"  3+""---->"3"
          String(10)结果就是  "10"
          toString()   10.toString(2)
     3 常用方法
        charAt(位置)； 返回的是字符串对应位置的那个字符
        charCodeAt (位置)  获取相应位置字符unicode编码
        split()    "abc-def-123".split("-") 结果 ["abc","def","123"] 字符串分割
        contact() 字符串连接
        自学 indexof() substr() substring()

        'a' ----  97   'z'
        'A' ---- 65
        '0' ----  48

  **********************************************************************************810:55 2016/12/12

字符串：
      123+""
      String(124);
      100.toString(); //打印100的十进制形式（字符串）
      100.toString(2);
   
     "abcdef".charAt(2); //c
    "1asc34".charCodeAt(0)

   indexof("字符")
       从字符串中最左边开始数，找到第一次出现的位置，
假如函数返回值是-1,代表找不到该字符
   lastIndexof("字符")  从后面开始数

  前台有时候需要给后台传网址，网址中一般有一些特殊的符号，
后台不能直接识别，一般用encodeURIComponent() 方法对网址
进行编码后提交给后台，后台可以进行解码
 
   encodeURIComponent() 函数可把字符串作为 URI 组件进行编码
   decodeURIComponent() 函数可把字符串作为 URI 组件进行解码

 concat() 连接字符串
 "123".concat("456");//"123456"

  slice(4);//表示从第四个位置开始，一直取到最后

  slice(4,8);//从第四个位置开始，截取到第八个位置结束，
  不包括第八个位置

    substr(3)与slice(3)一样
    substr(3,8)与slice(3,8)的区别

     substr(-1)  少用   ie678 报错 。 尽量少用

   substring用法与slice基本一样，有一点不同 substring（8,3）会
   始终把最小的值作为开始位置

     保留小数位数
      122340.12345    122340.12
      indexOf(".")+3
      substr(0,长度）
         3.1415926
     console.log(parseInt(PI*100) /100); 

     123.456.toFixed(2);// 保留两位小数，四舍五入

     1 toUpperCase，转换为大写（参数： 无）
     2 toLowerCase，转换为小写（参数：无）

********************************************************************************************09:25 2016/12/13
无缝滚动
动画：
leader ：0   target : 400px
 leader = leader + (target - leader ) /10 ;（匀速运动的公式）
             
leader = 40   style.left = leader;
leader = 40 + 36
leader = 76 + 32.4

    lis[0].index = 0;
    lis[1].index = 1
    ...
   lis[4].index = 4

  放到1   ul.style.left = "0px"
  ....    2   ul.style.left = "-490px"
 ......3                            -980px

仿jquery选择器

id  class 标签名
jquery中的选择器
$(“#demo”）查找id为demo

*************************************************************************************09:05 2016/12/14
offset家族
offset 本意为偏移量，位移，表示自己的
offset家族提供js获取元素的尺寸一系列属性或者方法
1  offsetWidth与offsetHeight
    box.style.width  只能获取行内的样式属性
    box.offsetWidth 可以获取盒子的宽度，无论是行内式或者内联式
    都可以获取
     offsetWidth = width + padding  + border(属性+内边距+边框)
    offsetHeight = height+padding+border ,高度随时监测
2 offsetLeft 与offsetTop
   offsetLeft: 返回距离上级盒子（最近的带有定位）
   左边的位置
   说明：假如该元素的父级没有定位，则以body作为参考
    leader : 0+ 8.3
    leader: 0+8.3+7.333

    i=0    0
    i=1    83*1
    i=2   83*index

3 offsetParent ：表示该元素的最近的定位了父辈元素，
    假如父辈中没有任何定位的元素，结果就是body
    parentNode 表示的是亲父亲

4 style.left与offsetLeft区别
   *一个盒子一定要定位，才能用style.left
   offsetLeft  可以返回没有定位盒子的距离左侧的位置。
   * style.left的结果是带px单位的，offsetLeft不带单位
   * offsetTop 只读，而 style.left 可读写。

***************************************************************************************************09:08 2016/12/15
event对象
btn.onclick = function(event) {  语句 }

event事件对象，封装了一些关于事件的信息
 一般浏览器支持event,ie 6 7 8  是window.event
兼容处理  var

  对象.属性  对象.方法（）

 Math.PI   Math.pow(2,3)

 event对象的属性
     pageX  pageY      相对于网页的水平位置
     ie 6 7 8 对pageX与pageY不识别
    clientX  clientY    可视区域的水平位置
    screenX   screenY  光标相对于屏幕的水平位置

 277*207 等比例

 277:207 = 277*0.4:207*0.4

   onmouseup       当鼠标弹起  
   onmousedown     当鼠标按下的时候 

  div.onmouseover      和    div.onmousemove   区别 
      他们相同点   都是 经过  div 才会触发
      div.onmouseover    只触发一次
      div.onmousemove   每移动一像素，就会触发一次

   onmouseup       当鼠标弹起  
   onmousedown     当鼠标按下的时候 
   1.拖动 原理 ==   鼠标按下  接着 移动鼠标 。
   bar.onmousedown = function(){
            document.onmousemove = function(){
                
            }
}

*****************************************************************************************10:44 2016/12/16

document.title   表示页面的标题
document.head  访问head节点
document.body  访问body节点
document.documentElement;

  document.body.onclick  = function() {}

 scrollTop  被卷去的头部  它就是当你滑动滚轮浏览网页的时 上方的距离
 scrollLeft
  
    window.onscroll = function() { 页面滚动语句  }

  谷歌浏览器 和没有声明 DTD  <DOCTYPE > ： 
  document.body.scrollTop; 
火狐 和其他浏览器  
  document.documentElement.scrollTop;
 ie9+  和 最新浏览器   都认识
  window.pageXOffset;     pageYOffset  （scrollTop）

  window.scrollTo(xpos,ypos);
  window.scrollTo(0,15)

***************************************************************************10:30 2016/12/19
json 一种轻量级的数据交换格式，js的一种对象表示法

会员注册   
   姓名： 苏轼
   年龄：900
   职业：IT

  var myjoson = {name: "苏轼",age:"900",job:"it"};
  var myjoson = {k:v,k:v,k:v,...}

 scrollTo(x,y)     window.scrollTo(0,100);

xpos 必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
ypos必需。要在窗口文档显示区左上角显示的文档的 y 坐标
因为我们的网页大部分都没有水平滚动条，所以，这个x 不太常用。
 
   client家族
      offsetWidth : padding + border + width
     clientWidth: width + padding  不含边框

  检测屏幕的可视区域（宽，高）
  ie9+  window.innerWidth
 标准模式  document.documentElement.clientWidth
 怪异模式
document.body.clientWidth

   window.onload  window.onscroll
   window.onresize  = function() {
      
  }
事件会在窗口或者框架调整大小时发生

要求：
  当我们的页面宽度大于 960 像素的时候   页面颜色是红色
  当我们的页面宽度 大于 640 小于 960    页面的颜色是 绿色
  剩下的颜色是  蓝色

检测屏幕的分辨率
    window.screen.width

************************************************************************10:38 2016/12/20
事件冒泡：
      当一个元素上的事件被触发，同样的事件会在
这个元素的所有祖先元素上触发，这种过程叫事件
冒泡

  顺序  ie6  button->body->html->document
            其他浏览器 button->body->html->document->window

 取消或阻止冒泡

    标准浏览器 和  ie浏览器
    w3c的方法是event.stopPropagation()  
   ie  event.cancelBubble = true
    var event = event || window.event;
     if(event && event.stopPropagation)
         {
             event.stopPropagation();  //  w3c 标准
         }
         else
          {
              event.cancelBubble = true;  // ie 678  ie浏览器
   }

判断当前对象
   火狐 谷歌 等   event.target.id 
   ie 678          event.srcElement.id
    var  obj_id =  event.target.id  ||event.srcElement.id

  var targetId = event.target ? event.target.id : event.srcElement.id;

json:
   1 js的一种对象表示法，一般用于数据传输 
       var myjson = {width:200,height: 300};
  2 访问
        myjson.属性名
 
 3 遍历  for in 见案例

**************************************************************************13:37 2016/12/22
☆正则表达式

1.1. 正则表达式
正则表达式在网络上有很多资料和工具，用的时候直接在网上搜即可
1.1.1. 声明和使用
@正则的声明和使用
通过构造函数定义
var 变量名= new RegExp(/表达式/);
通过直接量定义（简单方便，我们一般用这个）
var 变量名= /表达式/;
常用方法，可用于检测传入的字符串是否符合该规则并返回布尔值
exp.test("要检测的字符串")
1.1.2. 预定义类
@预定义类和转义符
 . [^\n\r] 除了换行和回车之外的任意字符
 \d [0-9]  数字字符digit
 \D [^0-9] 非数字字符
 \w [a-zA-Z0-9_] 单词字符(所有的字母数字和_) word
 \W [^a-zA-Z0-9_] 非单词字符
 \s [\f\r\n\t\v] 不可见字符 space
 \S [^\f\r\n\t\v] 可见字符
转义符
\f 表示换页 form feed
\t 表示水平制表符 table
\v 表示垂直制表符 vertical table
 

\r,\n,\r\n的区别
在万恶的旧社会，打字机换行（\n newline）之后只会下移一行，需要回到一行的开头（\r return）才能继续打字
老式的操作系统也继承了打字机的这一特性，但用户换行之后一般都是要回到开头的，因此新式的操作系统为了方便将键盘上的Enter键的含义修改为\r\n或者直接将\n的含义改为“移动到下一行的开头”。
说到转义字符你有没有想起HTML的转义字符呢？（字符实体）

 

@基本语法补充
| 表示或 或的优先级最低 可以通过()提升优先级

1.1.3. 字符类
@字符类
简单类[abc] 表示该位置可以出现的字符
负向类[^abc] 表示该位置不可以出现的字符
范围类[a-e]  表示该位置可以出现的字符的范围
组合类[a-xA-E0-9] 范围类的组合
@验证密码强度
1.1.4. 边界 量词 括号
@边界
^ 会匹配行或者字符串的起始位置
^只有在[]内才表示非 在外边表示开始
$ 会匹配行或字符串的结尾位置
^$在一起 表示必须是这个（精确匹配）
@量词
 "*" 重复零次或更多 x>=0
 "+" 重复一次或更多次 x>=1
 "?" 重复零次或一次  x=(0||1)
{n} n次 x=n
{n,} 重复n次或更多  x>=n
{n,m} 重复出现的次数比n多但比m少 n<=x<=m
@括号总结
()表示一组
[]表示一个字符的位置
{}表示次数
@验证座机
@验证姓名
@完整版表单验证

1.1.5. 常见项目的匹配
常见项目的匹配网上有很多（例如搜索常用正则表达式大全），无需记忆，能看懂即可
匹配国内电话号码：
/^0\d{2,3}-\d{7,8}$/
匹配姓名：
/^[\u4e00-\u9fa5]{2,}$/
匹配腾讯QQ号：
/^[1-9]\d{4,10}$/
匹配手机号：
/^(13[0-9]|14[57]|15[0-9]|18[0-9])\d{8}$/
匹配邮箱：
/^\w+([+-.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
 
1.1.6. 封装自己的trim方法
@replace() 方法
格式:
字符串对象.replace(正则式或字符串，替换的目标字符)
返回值:
替换后的新字符串

 

@封装自己的trim()方法
    function trim(str) {
        return str.replace(/^\s+/,"").replace(/\s+$/,"");
}
    function trim(str) {
        return str.replace(/^\s+|\s+$/,"");
    }
@使用trim()方法检测用户输入

 

正则表达式的常见匹配模式
g 全局模式（Global），在匹配时查找所有字符串，而非发现一个就停止
i 忽略大小写模式（IgnoreCase），在匹配时忽略大小写

@其他正则方法
RegExp   对象方法
test 检索字符串中指定的值。返回 true 或 false。
exec 检索字符串中指定的值。返回一个数组包括：值、位置、输入的文本。
String      对象的方法
match 找到一个或多个正则表达式的匹配。
replace 替换与正则表达式匹配的子串。
onblur     事件失去焦点
onkeyup   键盘弹起

 

一、校验数字的表达式
 1 数字：^[0-9]*$
 2 n位的数字：^\d{n}$
 3 至少n位的数字：^\d{n,}$
 4 m-n位的数字：^\d{m,n}$
 5 零和非零开头的数字：^(0|[1-9][0-9]*)$
 6 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$
 7 带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})?$
 8 正数、负数、和小数：^(\-|\+)?\d+(\.\d+)?$
 9 有两位小数的正实数：^[0-9]+(.[0-9]{2})?$
10 有1~3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$
11 非零的正整数：^[1-9]\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^\+?[1-9][0-9]*$
12 非零的负整数：^\-[1-9][]0-9"*$ 或 ^-[1-9]\d*$
13 非负整数：^\d+$ 或 ^[1-9]\d*|0$
14 非正整数：^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$
15 非负浮点数：^\d+(\.\d+)?$ 或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$
16 非正浮点数：^((-\d+(\.\d+)?)|(0+(\.0+)?))$ 或 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$
17 正浮点数：^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ 或 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
18 负浮点数：^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ 或 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
19 浮点数：^(-?\d+)(\.\d+)?$ 或 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$
二、校验字符的表达式
 1 汉字：^[\u4e00-\u9fa5]{0,}$
 2 英文和数字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
 3 长度为3-20的所有字符：^.{3,20}$
 4 由26个英文字母组成的字符串：^[A-Za-z]+$
 5 由26个大写英文字母组成的字符串：^[A-Z]+$
 6 由26个小写英文字母组成的字符串：^[a-z]+$
 7 由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$
 8 由数字、26个英文字母或者下划线组成的字符串：^\w+$ 或 ^\w{3,20}$
 9 中文、英文、数字包括下划线：^[\u4E00-\u9FA5A-Za-z0-9_]+$
10 中文、英文、数字但不包括下划线等符号：^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$
11 可以输入含有^%&',;=?$\"等字符：[^%&',;=?$\x22]+
12 禁止输入含有~的字符：[^~\x22]+
三、特殊需求表达式
 1 Email地址：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

 2 域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?

 3 InternetURL：[a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$

 4 手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$

 5 电话号码("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX)：^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$

 6 国内电话号码[phone])：\d{3}-\d{8}|\d{4}-\d{7}

 7 身份证号(15位、18位数字)：^\d{15}|\d{18}$

 8 短身份证号码(数字、字母x结尾)：^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$

 9 帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$

10 密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^[a-zA-Z]\w{5,17}$

11 强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$ 

12 日期格式：^\d{4}-\d{1,2}-\d{1,2}

13 一年的12个月(01～09和1～12)：^(0?[1-9]|1[0-2])$

14 一个月的31天(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$
15 钱的输入格式：
16    1.有四种钱的表示形式我们可以接受:"10000.00" 和 "10,000.00", 和没有 "分" 的 "10000" 和 "10,000"：^[1-9][0-9]*$
17    2.这表示任意一个不以0开头的数字,但是,这也意味着一个字符"0"不通过,所以我们采用下面的形式：^(0|[1-9][0-9]*)$
18    3.一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号：^(0|-?[1-9][0-9]*)$
19    4.这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把负号的也去掉,因为钱总不能是负的吧.下面我们要加的是说明可能的小数部分：^[0-9]+(.[0-9]+)?$
20    5.必须说明的是,小数点后面至少应该有1位数,所以"10."是不通过的,但是 "10" 和 "10.2" 是通过的：^[0-9]+(.[0-9]{2})?$
21    6.这样我们规定小数点后面必须有两位,如果你认为太苛刻了,可以这样：^[0-9]+(.[0-9]{1,2})?$
22    7.这样就允许用户只写一位小数.下面我们该考虑数字中的逗号了,我们可以这样：^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$
23    8.1到3个数字,后面跟着任意个 逗号+3个数字,逗号成为可选,而不是必须：^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$
24    备注：这就是最终结果了,别忘了"+"可以用"*"替代如果你觉得空字符串也可以接受的话(奇怪,为什么?)最后,别忘了在用函数时去掉去掉那个反斜杠,一般的错误都在这里
25 xml文件：^([a-zA-Z]+-?)+[a-zA-Z0-9]+\\.[x|X][m|M][l|L]$
26 中文字符的正则表达式：[\u4e00-\u9fa5]
27 双字节字符：[^\x00-\xff]    (包括汉字在内，可以用来计算字符串的长度(一个双字节字符长度计2，ASCII字符计1))
28 空白行的正则表达式：\n\s*\r    (可以用来删除空白行)
29 HTML标记的正则表达式：<(\S*?)[^>]*>.*?</\1>|<.*? />    (网上流传的版本太糟糕，上面这个也仅仅能部分，对于复杂的嵌套标记依旧无能为力)
30 首尾空白字符的正则表达式：^\s*|\s*$或(^\s*)|(\s*$)    (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式)
31 腾讯QQ号：[1-9][0-9]{4,}    (腾讯QQ号从10000开始)
32 中国邮政编码：[1-9]\d{5}(?!\d)    (中国邮政编码为6位数字)
33 IP地址：\d+\.\d+\.\d+\.\d+    (提取IP地址时有用)

 

取名用字有限制

对于公民取名用字，应当在一定前提下予以必要的限制。
《条例》规定：姓名不得含有下列内容：
1、损害国家或者民族尊严的;2、违背民族良俗的;3、容易引起公众不良反应或者误解的。
　　
考虑到我国姓名所用字数中单姓的通常为二至三个汉字、复姓或者采用父母双方姓氏的多为三至四个汉字，

《条例》规定：除使用民族文字或者书写、译写汉字的以外，姓名用字应当在两个汉字以上、六个汉字以下。
比如：丈夫姓郑，老婆姓付，他们就可以给孩子取名“郑付贝克汉姆”。
　　
《条例》规定，姓名不得使用或者含有下列文字、字母、数字、符号：1.已简化的繁体字;2.已淘汰的异体字，但姓氏中的异体字除外;3.自造字;4.外国文字;5.汉语拼音字母;6.阿拉伯数字;7.符号;8.其他超出规范的汉字和少数民族文字范围以外的字样。
根据以上的规定，不能带有像大爷，你爹，爷爷之类的可以当名字，也不可以毛泽东字样的名字

*******************************************************************09:08 2016/12/23

 

申明：在使用jquery时候一定要先引用：jquery文件<script type="text/javascript" src="jquery-1.7.js"></script>放在头部部分

jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。

$("p").css("background-color","red");

 

drop  下降
ondrop  放置
ondropstart
allowDrop  决定是否允许拖放

 

 

 

 

 

 

 

***************************************************************************09:12 2016/12/27

Jquery
  内容：jquery设计细想和理念
  目标：使用jquery实现常见的效果
  官网：http://jquery.com
      W3school:…..
  基本安排：选择器 DOM操作 事件 扩展 项目实战
   参考教材： 锋利的jquery

Jquery的使用和jquery选择器

innerHTML : 基本浏览器都支持
innerText: 有的版本firefox不支持，最新的版本FF也支持

原生js遇到的一些问题
    1 代码繁琐，不简洁
    2 window.onload会发生事件覆盖，在代码中只能出现一次
    3 容错性差
    4 兼容性考虑比较多

Jquery就是解决以上问题
1 基本使用
  a  Jquery是js的一个库，把我们开发过程中常见的功能进行了封装，放在一个文件里,这个文件就是库文件
  b jquery 1.xx   ie6+
         2.xx   ie9+
 
  C 使用 三部曲
   ※I 引入文件(引包)
   jquery-1.12.2.js
   jquery-1.12.2.min.js 压缩版 体积更小
  <script src="jquery-1.12.2.js"></script>

  引包中可能出现的问题：
   没有引入或者路劲写错

※ 2 写入口函数
   $(document).ready(function() {
    //3 功能代码
});

※2  jquery入口函数
 第一种：文档准备好了，之后执行相应的代码
  $(document).ready(
   function() {
      //代码
}
);

※第二种 第一种的简写形式
  $(function() {});

Jquery入口函数与js入口函数区别
Js入口函数
Window.onload  = function() {};
区别1 js入口函数只能写一次，jquery入口函数可以出现多次
      2 执行时机不同
  Js的入口函数。必须页面文档、js文件、图片文件等所有资源加载完执行
Jquery入口函数，只要dom加载完就执行，不必等到图片或者其他文件加载完才执行

Jquery的语法
$

Jquery方式：$("#btn") 查找id属性为btn的元素
Js方式:document.getElmentById(“btn”);

$(“#btn”).click(
  function() {}
);
Document.getElmentById(“btn”).onclick = function(){};

Jquery还提供一个变量 jQuery
jQuery(document).ready(
   function() {}
);

jQuery(function() {});

jQuery函数跟$函数的关系：jQuery ===$;
jquery对象和dom对象的相互转换
1 dom对象
 var btn =
document.getElementById(“btn”);
btn.onclick = function() {};
2 jquery对象
 $(“#btn”).click(function() {});

3 转换
 DOM对象如何转jquery对象
  $(dom对象)   $(btn)
Jquery对象如何转成DOM对象
$("#btn")[0] 或$("#btn").get(0)
为什么要使用jQuery选择器
JS提供的选择DOM元素的方法
考虑兼容性的话，js里面提供的选择DOM的方法只有两个：
JavaScript选择元素的方法：
document.getElementById(); 通过id属性获取指定元素
返回唯一的DOM对象
document.getElementsByTagName(); 通过标签名获取指定元素
返回DOM对象数组（即使只有一个元素）
正是因为js提供的选择DOM的方法太少了，满足不了我们平时开发的需要，所以，我们可以使用jQuery选择器来弥补这方面的不足。

1.1.1 什么是jQuery选择器
jQuery选择器是jQuery强大的体现，它提供了一组方法，让我们更加方便的获取到页面中的元素。（联想：CSS选择符）

1.2 强大的jQuery选择器（重点）
强大的原因：jQuery实现了从CSS1到CSS3所有的选择器以及其他常用的选择器。
各种选择器之间可以相互代替，所以，平时真正用到的只是最常用的选择器。

1.2.1 基本选择器（重点）
符号(名称) 说明 用法
# Id选择器 $(“#btnShow”).css(“color”, “red”);
选择id为btnShow的一个元素（返回值为jQuery对象，下同）
. 类选择器 $(“.liItem”).css(“color”, “red”);
选择含有类liItem的所有元素
element 标签选择器 $(“li”).css(“color”, “red”);
选择标签名为li的所有元素

1.2.2 层级选择器（重点）、基本过滤选择器
符号(名称) 说明 用法
层级选择器
空格 后代选择器 $(“#j_wrap li”).css(“color”, “red”);
选择id为j_wrap的元素的所有后代元素li
> 子代选择器 $(“#j_wrap > ul > li”).css(“color”, “red”);
选择id为j_wrap的元素的所有子元素ul的所有子元素li
基本过滤选择器
:eq(index) 选择匹配到的元素中索引号为index的一个元素，index从0开始 $(“li:eq(2)”).css(“color”, ”red”);
选择li元素中索引号为2的一个元素
:odd 选择匹配到的元素中索引号为奇数的所有元素，index从0开始 $(“li:odd”).css(“color”, “red”);
选择li元素中索引号为奇数的所有元素
:even 选择匹配到的元素中索引号为偶数的所有元素，index从0开始 $(“li:odd”).css(“color”, “red”);
选择li元素中索引号为偶数的所有元素

1.2.3 筛选选择器（方法）（重点）
符号(名称) 说明 用法
find(selector) 查找指定元素的所有后代元素（子子孙孙） $(“#j_wrap”).find(“li”).css(“color”, “red”);
选择id为j_wrap的所有后代元素li
children() 查找指定元素的直接子元素（亲儿子元素） $(“#j_wrap”).children(“ul”).css(“color”, “red”);
选择id为j_wrap的所有子代元素ul
siblings() 查找所有兄弟元素（不包括自己） $(“#j_liItem”).siblings().css(“color”, “red”);
选择id为j_liItem的所有兄弟元素
parent() 查找父元素（亲的） $(“#j_liItem”).parent(“ul”).css(“color”, “red”);
选择id为j_liItem的父元素
eq(index) 查找指定元素的第index个元素，index是索引号，从0开始 $(“li”).eq(2).css(“color”, “red”);
选择所有li元素中的第二个

************************************************09:07 2016/12/28
一  样式操作
   1  样式属性  css()
   2  类操作 
      addClass(类名)  添加类
      removeClass(类名，不带参数的时候，移除所有的类)  移除类 
      hasClass(类名)   判断是否有类
      toggleClass(类名)   切换类样式 
     
二  动画
    1  提供的标准
       show/hide方法
       show方法
      作用：让元素展示出来

         $("div").show(); 等价于 $("div").css("display","block");
         $("div").show(1000);//1000 毫秒 指的是动画执行时长
         $("div").show("fast/normal/slow");//分别对应200 400  600
         $("div").show("normal",function(){
                         alert("动画执行完执行");
                    });
       hide方法
      作用： 让元素隐藏
      参考show方法
      滑入滑出动画
     1滑入动画效果（联想：生活中的卷帘门）
   作用：让元素以下拉动画效果展示出来
   $(selector).slideDown(speed,callback);
    2滑出动画效果（联想：生活中的卷帘门）
   作用：让元素以上拉动画效果隐藏出来
   $(selector).slideUp(speed,callback);
  3 切换 slideToggle(2000,function() {})
 
    淡入/淡出效果
   
  jquery提供的动画，从改变宽高、透明度来实现的，
而且这几个属性值去掉单位后，就是一个数字
   
   2 自定义动画
   注意：
   所有能够执行动画的属性必须只有一个数字类型的值。
   自定义动画animate({}, 时长, callback)
  
   3 停止动画
     stop() 与stop(true,true)等价 
        第一个true表示后续的动画不会执行
       如果参数jumpToEnd被设置为true，那么当前动画会停止,false
  表示立刻执行完当前这个动画
 
     html5 css3  bootstrap
   ************************************************************** 
1.5.1 隐藏显示动画
1 show方法
作用：让匹配的元素展示出来

// 用法一：
// 参数为数值类型，表示：执行动画时长
/* 单位为：毫秒（ms），参数2000表示动画执行时长为2000毫秒，即2秒钟 */
$(selector).show(2000);

// 用法二：
// 参数为字符串类型，是jQuery预设的值，共有三个，分别是：slow、normal、fast
/* 跟用法一的对应关系为： */
/* slow：600ms、normal：400ms、fast：200ms */
$(selector).show(“slow”);

// 用法三：
// 参数一可以是数值类型或者字符串类型
// 参数二表示：动画执行完后立即执行的回调函数
$(selector).show(2000, function() {});

// 用法四：
// 不带参数，作用等同于 css(“display”, ”block”)
/* 注意：此时没有动画效果 */
$(selector).show();

注意：
jQuery预设的三组动画效果的语法几乎一致：参数可以有两个，第一个是动画的执行时长，第二个是动画执行完成后的回调函数。
第一个参数可以是：指定字符或者毫秒数

2 hide方法
作用：让匹配元素隐藏掉
用法参考show方法
$(selector).hide(1000);
$(selector).hide(“slow”);
$(selector).hide(1000, function(){});
$(selector).hide();

1.5.2 滑入滑出动画
1滑入动画效果（联想：生活中的卷帘门）
作用：让元素以下拉动画效果展示出来
$(selector).slideDown(speed,callback);

注意：省略参数或者传入不合法的字符串，那么则使用默认值：400毫秒（同样适用于fadeIn/slideDown/slideUp）
$(selector).slideDown();

2 滑出动画效果
作用：让元素以上拉动画效果隐藏起来
$(selector).slideUp(speed,callback);

3滑入滑出切换动画效果
$(selector).slideToggle(speed,callback);
参数等同与1.5.1 隐藏和显示
1.5.3 淡入淡出动画
1 淡入动画效果
作用：让元素以淡淡的进入视线的方式展示出来
$(selector).fadeIn(speed, callback);
2 淡出动画效果
作用：让元素以渐渐消失的方式隐藏起来
$(selector).fadeOut(1000);
3淡入淡出切换动画效果
作用：通过改变不透明度，切换匹配元素的显示或隐藏状态
$(selector).fadeToggle('fast',function(){});
参数等同与1.5.1 隐藏和显示

4改变不透明度到某个值
与淡入淡出的区别：淡入淡出只能控制元素的不透明度从 完全不透明 到完全透明；而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的！
作用：调节匹配元素的不透明度
// 用法有别于其他动画效果
// 第一个参数表示：时长
// 第二个参数表示：不透明度值，取值范围：0-1
$(selector).fadeTo(1000, .5); //  0全透，1全不透

// 第一个参数为0，此时作用相当于：.css(“opacity”, .5);
$(selector).fadeTo(0, .5);

jQuery提供的动画使用方法总结：
 

有规律的体现：
jQuery提供的这几个动画效果控制的CSS属性包括：高度、宽度、不透明度。{height:400px; width:300px; opacity:.4;}
这三个CSS属性的共性是：属性值只有一个，并且这个值是数值（去掉单位后）。

1.5.4 自定义动画
注意：所有能够执行动画的属性必须只有一个数字类型的值。
比如：要改变字体大小，要使用：fontSize（font-size），不要使用：font

动画支持的属性：
 http://www.w3school.com.cn/jquery/effect_animate.asp

作用：执行一组CSS属性的自定义动画
// 第一个参数表示：要执行动画的CSS属性（必选）
// 第二个参数表示：执行动画时长（可选）
// 第三个参数表示：动画执行完后立即执行的回调函数（可选）
$(selector).animate({params},speed,callback);

1.5.5 停止动画
stop()
作用：停止当前正在执行的动画
为什么要停止动画？
如果一个以上的动画方法在同一个元素上调用，那么对这个元素来说，后面的动画将被放到效果队列中。这样就形成了动画队列。（联想：排队进站）
动画队列里面的动画不会执行，直到第一个动画执行完成。
// 第一个参数表示是否清空所有的后续动画
// 第二个参数表示是否立即执行完当前正在执行的动画
$(selector).stop(clearQueue,jumpToEnd);

解释：
当调用stop()方法后，队列里面的下一个动画将会立即开始。但是，如果参数clearQueue被设置为true，那么队列面剩余的动画就被删除了，并且永远也不会执行。
如果参数jumpToEnd被设置为true，那么当前动画会停止，但是参与动画的每一个CSS属性将被立即设置为它们的目标值。比如：slideUp()方法，那么元素会立即隐藏掉。如果存在回调函数，那么回调函数也会立即执行。

注意：如果元素动画还没有执行完，此时调用sotp()方法，那么动画将会停止。并且动画没有执行完成，那么回调函数也不会被执行。

常用方式：
$(selector).stop();

1.6 jQuery节点操作
1.6.1 动态创建元素
// $()函数的另外一个作用：动态创建元素
var $spanNode = $(“<span>我是一个span元素</span>”);
 
1.6.2 添加元素（重点）
在元素的最后一个子元素后面追加元素：
append()（重点）
作用：在被选元素内部的最后一个子元素（或内容）后面插入内容（页面中存在或者创建出来的元素都可以）
如果是页面中存在的元素，那么调用append()后，会把这个元素从原先的位置移除，然后再插入到新的位置。
  如果是给多个目标追加一个元素，那么append()方法的内部会复制多份这个元素，然后追加到多个目标里面去。（最好不要这么做）
常用参数：htmlString 或者 jQuery对象

// 在$(selector)中追加$node
$(selector).append($node);
// 在$(selector)中追加div元素，参数为htmlString
$(selector).append('<div></div>');

（了解）不常用操作：（用法跟append()方法基本一致）
1 appendTo()
作用：同append()，区别是：把$(selector)追加到node中去
$(selector).appendTo(node);

2 prepend()
作用：在元素的第一个子元素前面追加内容或节点
$(selector).prepend(node);

3 after()
作用：在被选元素之后，作为兄弟元素插入内容或节点
$(selector).after(node);

4 before()
作用：在被选元素之前，作为兄弟元素插入内容或节点
$(selector).before(node);
1.6.3 html创建元素（推荐使用，重点）
作用：设置或返回所选元素的html内容（包括 HTML 标记）
设置内容的时候，如果是html标记，会动态创建元素，此时作用跟js里面的 innerHTML属性相同
// 动态创建元素
$(selector).html(‘<span>传智播客</span>’);
// 获取html内容
$(selector).html();

1.6.4 清空元素
// 清空指定元素的所有子元素（光杆司令）
// 没有参数
$(selector).empty();
$(selector).html(“”);
// “自杀” 把自己（包括所有内部元素）从文档中删除掉
$(selector).remove();

1.6.5 复制元素
作用：复制匹配的元素
// 复制$(selector)所匹配到的元素
// 返回值为复制的新元素
$(selector).clone();

总结：
 推荐使用html(“<span></span>”)方法来创建元素或者html(“”)清空元素
1.7 操作form表单（重点）
1.7.1 属性操作
设置属性：
// 第一个参数表示：要设置的属性名称
// 第二个参数表示：改属性名称对应的值
$(selector).attr(“title”, “传智播客”);

获取属性：
// 参数为：要获取的属性的名称，改操作会返回指定属性对应的值
$(selector).attr(“title”);
此时，返回指定属性的值

移除属性：
// 参数为：要移除的属性的名称
$(selector).removeAttr(“title”);

注意：checked、selected、disabled要使用.prop()方法。
prop方法通常用来影响DOM元素的动态状态，而不是改变的HTML属性。例如：input和button的disabled特性，以及checkbox的checked特性。
细节参考：http://api.jquery.com/prop/

1.7.2 值和内容
val()方法：
作用：设置或返回表单元素的值，例如：input,select,textarea的值
// 获取匹配元素的值，只匹配第一个元素
$(selector).val();
// 设置所有匹配到的元素的值
$(selector).val(“具体值”);

text() 方法:
作用：设置或获取匹配元素的文本内容
//获取操作不带参数（注意：这时候会把所有匹配到的元素内容拼接为一个字符串，不同于其他获取操作！）
$(selector).text();
//设置操作带参数，参数表示要设置的文本内容
$(selector).text(“我是内容”);

1.8 尺寸位置操作
1.8.1 高度和宽度操作
高度操作height() ：
作用：设置或获取匹配元素的高度值
//带参数表示设置高度
$(selector).height(200);
//不带参数获取高度
$(selector).height();
宽度操作width() ：
作用：设置或获取匹配元素的宽度值
//带参数表示设置宽度
//不带参数获取宽度
$(selector).width(200);
css()获取高度和height获取高度的区别？
 
1.8.2 坐标值操作
offset()
作用：获取或设置元素相对于文档左上角的位置
// 无参数表示获取，返回值为：{left:num, top:num}，值是相对于document的位置
$(selector).offset();
// 有参数表示设置，参数推荐使用数值类型
$(selector).offset({left:100, top: 150});

注意点：设置offset后，如果元素没有定位(默认值：static)，则被修改为relative

scrollTop()
作用：获取或者设置元素垂直方向滚动的位置
// 无参数表示获取偏移
$(selector).scrollTop();

// 有参数表示设置偏移，参数为数值类型
$(selector).scrollTop(100);

scrollLeft()
作用：获取或者设置元素水平方向滚动的位置
$(selector).scrollLeft(100);

对scrollTop的理解：
垂直滚动条位置 是可滚动区域 在 可视区域上方的 被隐藏区域的高度。
如果滚动条在最上方没有滚动 或者 当前元素没有出现滚动条，那么这个距离为0
 
**********************************10:11 2016/12/29
this  dom对象---->jquery对象
       $(this).index();//返回的是当前元素的索引值 0
***********************
jquery操作表单
     属性操作 ：设置属性 attr("属性名","属性值")；
                                $("div").attr(
          {
           title:"我是悬停文本",
           id:"box1"
          }
           );

                          获取属性
                              $(selector).attr("title");
                          移除属性
                             $(selector).removeAttr(“title”);
   注意：checked、selected、disabled要使用.prop()方法。

            <input type="checkbox" checked="checked"/>
                  $("input").attr("checked",false);
                  一般用  $("input").prop("checked",false);
   值和内容
     val()方法
        作用：设置或返回表单元素的值，
        例如：input,select,textarea的值
    text() 方法
        作用：设置或获取匹配元素的文本内容

jquery 尺寸位置操作
       高度操作height()  不带单位 300
       $("div").css("height");//300px
       宽度操作width()
    
   Math.floor   函数取整数
   Math.random   随机切换

*******************************09:02 2016/12/30
bind方式（不推荐，1.7以后的jQuery版本被on取代）
作用：给匹配到的元素直接绑定事件
// 绑定单击事件处理程序
第一个参数：事件类型
第二个参数：事件处理程序
$("p").bind("click mouseenter", function(e){
    //事件响应方法
});
比简单事件绑定方式的优势：
1． 可以同时绑定多个事件，比如：bind(“mouseenter  mouseleave”, function(){})
缺点：要绑定事件的元素必须存在文档中。

3 delegate方式（特点：性能高，支持动态创建的元素）
作用：给匹配到的元素绑定事件，对支持动态创建的元素有效
// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数
$(".parentBox").delegate("p", "click", function(){
    //为 .parentBox下面的所有的p标签绑定事件
});
与前两种方式最大的优势：减少事件绑定次数提高效率，支持动态创建出来的元素绑定事件！

1.3.2 on方式（最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用的方式）（重点）
jQuery1.7版本后，jQuery用on统一了所有的事件处理的方法
作用：给匹配的元素绑定事件，包括了上面所有绑定事件方式的优点
语法：
// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用
// 第四个参数：handler，事件处理函数
$(selector).on(events[,selector][,data],handler);

// 表示给$(selector)绑定事件，当必须是它的内部元素span才能执行这个事件
$(selector).on( "click",“span”, function() {});

// 绑定多个事件
// 表示给$(selector)匹配的元素绑定单击和鼠标进入事件
$(selector).on(“click mouseenter”, function(){});

第一组:
css("height","500px")     ---->js的style属性
 
attr()/removeAtrr()  ----->js setAttribute()/getAttribute()
 
prop()   prop("checked",true)
一个参数表示获取  两个参数表示设置
  $("div").css({
width:"";
height:"";  
})

第二组：
html()   ---->js:innerHTML
val()   ---->js:value    input/select/textarea的值
text()   -----js:innerText | | textContent
没有参数的时候表示获取，有参数的表示设置。

第三组：
append()   -----js appendChild()
addClass()/removeClass()/hasClass()    ------>js: className

jquery  动画
show/hide  slideDown=滑入 /slideUp=滑出 /fadeIn=淡入 /fadeOut=淡出 /fadeTo（0,0.5） =淡入出的时间
show(1000,function(){ })
hide()
animate({
width:"";
height:"";
},200)

简单事件--->bind方式---->delegate--->on(重点)
简单事件绑定：
click(handler)     单击事件
blur(handler)     失去焦点事件
mouseenter(handler)   鼠标进入事件
mouseleave(handler)   鼠标离开事件
dbclick(handler)    双击事件
change(handler) 改变事件，如：文本框值改变，下来列表值改变等
focus(handler)     获得焦点事件
keydown(handler)    键盘按下事件

绑定事件:bind
比如：bind(“mouseenter  mouseleave”, function(){})
优点：可以同时绑定多个事件，缺点不能对动态创建的元素绑定
缺点：要绑定事件的元素必须存在文档中。
delegate：优点给匹配到的元素绑定事件，支持对动态的元素进行绑定
实现机制：事件冒泡

*****************************************18:57 2016/12/31

1.3.3 事件解绑

? unbind() 方式
作用：解绑 bind方式绑定的事件
$(selector).unbind(); //解绑所有的事件
$(selector).unbind(“click”); //解绑指定的事件

? undelegate() 方式
作用：解绑delegate方式绑定的事件
$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( “click” ); //解绑所有的click事件

off解绑on方式绑定的事件（重点）
// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off(“click”);
// 解绑所有代理的click事件，元素本身的事件不会被解绑
$(selector).off( “click”, “**” );

1.3.4 事件触发
简单事件触发
$(selector).click(); //触发 click事件
trigger方法触发事件
$(selector).trigger(“click”);
triggerHandler触发 事件响应方法，不触发浏览器行为
比如:文本框获得焦点的默认行为
$(selector).triggerHandler(“focus”);

1.3.5 jQuery事件对象介绍
event.data      传递给事件处理程序的额外数据
event.currentTarget    等同于this
event.pageX      鼠标相对于页面左边的位置
event.target      触发事件源，不一定===this
event.stopPropagation()； 阻止事件冒泡
event.preventDefault();  阻止默认行为
event.type      事件类型：click，dbclick…
event.which      鼠标的按键类型：左1 中2 右3
event.keyCode    键盘按键代码

return false; // 同时具有阻止冒泡和阻止默认行为的功能
this：哪个元素触发的事件，this就指向这个元素。
1.4 jQuery补充
1.4.1 链式编程
// 链式编程代码示例
$(“li”).parent(“ul”).parent(“div”).siblings(“div”).children(“div”).html(“内容”);
链式编程原理：return this;
通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this。

end(); // 结束当前链最近的一次过滤操作，并且返回匹配元素之前的一次状态。
1.4.2 隐式迭代
// 设置操作
$(“div”).css(“color”, “red”);

// 获取操作
$(“div”).css(“color”); // 返回第一个元素的值
隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。
如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。
1.4.3 each方法
有了隐式迭代，为什么还要使用each函数遍历？
大部分情况下是不需要使用each方法的，因为jQuery的隐式迭代特性。
如果要对每个元素做不同的处理，这时候就用到了each方法

作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数
// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素（DOM对象）
$(selector).each(function(index,element){});

1.4.4 多库共存（了解）
此处多库共存指的是：jQuery占用了$ 和jQuery这两个变量。当在同一个页面中引用了jQuery这个js库，并且引用的其他库（或者其他版本的jQuery库）中也用到了$或者jQuery这两个变量，那么，要保证每个库都能正常使用，这时候就有了多库共存的问题。

// 模拟另外的库使用了 $ 这个变量
// 此时，就与jQuery库产生了冲突
var $ = { name : “itecast” };

解决方式：
// 作用：让jQuery释放对$的控制权，让其他库能够使用$符号，达到多库共存的目的。此后，只能使用jQuery来调用jQuery提供的方法
 $.noConflict();

1.5 jQuery插件机制
jQuery这个js库，虽然功能强大，但也不是面面俱到包含所有的功能。
jQuery是通过插件的方式，来扩展它的功能：
当你需要某个插件的时候，你可以“安装”到jQuery上面，然后，使用。
当你不再需要这个插件，那你就可以从jQuery上“卸载”它。
（联想：手机软件，安装的app就好比插件，用的时候安装上，不用的时候卸载掉）
1.5.1 第三方插件
jQuery.color.js
 animate()自定义动画：不支持背景的动画效果
  animate动画支持的属性列表
使用步骤：
1. 引入jQuery文件
2. 引入插件
3. 使用插件
1.5.2 制作插件
如何创建jQuery插件：
http://learn.jquery.com/plugins/basic-plugin-creation/

全局jQuery函数扩展方法
$.pluginName = function() {};

jQuery对象扩展方法
$.fn. pluginName = function() {};

1.5.3 jQueryUI
使用场景：网站的管理后台

jQueryUI专指由jQuery官方维护的UI（用户接口）方向的插件。
官方API：http://api.jqueryui.com/category/all/
其他教程：jQueryUI教程
基本使用:
1. 引入jQueryUI的样式文件
2. 引入jQuery
3. 引入jQueryUI的js文件
4. 使用jQueryUI功能

******************************11:31 2017/01/03
  4种绑定方式 
          $("div").click(
              function() {}
          );
    
          bind  ---> delegate---->on  jquery1.7版本之后
                                                    zepto.js
   事件解绑
        unbind()  对通过bind方式绑定的事件进行解除绑定
                     参数设置  无参数的时候，表示解绑所有的事件
                                       有一个参数的时候 unbind("click")只解绑
                          单击事件
                                       unbind("click mouseenter");
      undelegate()  对通过delegate方式绑定的事件进行解除绑定
                        通过代理方式绑定，进行解绑时候要对父级元素进行解绑

       off

jquery事件内部用addEventListener/attachEvent实现
     
********************************09:57 2017/01/04
事件机制： 事件绑定  事件解绑  事件触发
事件触发：
      浏览器默认行为 1 超链接跳转 2 文本框获得焦点
      trigger("focus") 触发事件  默认触发浏览器的默认行为
  triggerHandler("focus") 触发事件  不触发浏览器的默认行为
     
jquery事件对象 
   1 复习js事件对象
           btn.onclick = function(event) {}
  2  $("#btn").on("click",function(event){}); 
 event常见属性与方法：
    altkey:false  
    bubbles: true
    clientX  clientY   以可视区域为参考
   offsetX offsetY 以自身左上角为参考
   pageX  pageY  以文档页面左上角为参考点
  screenX  screenY  以屏幕左上角为参考

   event.keyCode //   获取    

  keyDown  键盘按下事件
 
  target属性  表示真正触发事件的元素
  this
  currentTarget

  给子元素直接绑定或者给父级元素直接绑定时候
   this === currentTarget 指的是直接绑定的那个元素
   target 真正触发事件的元素

  特殊情况  通过代理绑定事件
    this 指的是触发事件的元素与target值一样

 event.stopPropagation()； 阻止事件冒泡
 event.preventDefault();  阻止默认行为

 return false 相当于既阻止默认行为又阻止事件冒泡
 点击按钮 跳转页面

  a链接模拟按钮

 data属性

 each方法： 一般针对不同的元素 设置不同的操作