Javascript与Jquery知识点

PHP 专栏收录该内容
3 篇文章 0 订阅

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.οnlοad=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 国内电话号码(0511-4405222、021-87888822):\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方法: 一般针对不同的元素 设置不同的操作

 

  

  • 0
    点赞
  • 0
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值