Javascript分享笔记

Javascript

概念:

1.变量: 内存中一块存储区域,这块区域中的值是可以改变的,并且我们可以给这块区域取一个名字;

2.对象: 对象具有两大特性:1是静态特征2是其功能,当然具体到程序里面对象的静态特征称之为对象的属性,功能称之为对象的方法;

3.执行环境:

1. 全局执行环境: 全局执行环境是最外围的执行环境,关闭浏览器或退出浏览器才会被销毁,所有全局变量都是作为Window对象的属性和方法创建的,全局变量和方法(函数)都被视为window对象;

2.局部执行环境: 每个函数都有自己的执行环境,称为局部环境,函数执行时会创建函数执行环境,函数执行完毕会被销毁,在里面的函数和变量都是局部的;

// 执行环境:// 全局执行环境:// 1.在一个页面中,第一次载入JS代码时创建一个全局执行环境,// 全局执行环境是最外围的执行环境,在Web浏览器中，全局执行环境被认为是window对象。// 2.全局执行环境直到应用程序退出,也就是说关闭网页或浏览器时才会被销毁// 3.因此,所有的全局变量和函数都是作为window对象的属性和方法创建的.// 全局变量被视为window对象的属性,全局函数被视为window对象的方法
// 函数执行环境（局部执行环境）// 1.每个函数都有自己的执行环境,称为局部执行环境,// 2.函数执行时会创建函数的执行环境// 3.当执行环境中的代码被执行完毕后,该环境会被销毁,// 保存在其中所有的变量与函数也随之销毁.因此在函数里定义的函数和变量都是局部的

4.作用域:

1.局部作用域用{}存储一段代码,称之为代码块;

2.访问变量,先访问局部变量再访问全局变量,2个全局变量先访问局部的全局变量再访问全局的变量;

3.JS中没有块级作用域:if,for,while等都不视为对变量的作用域划分;

4.JS中只有在函数执行环境下,函数作用域才有作用域划分;

// 作用域// 作用域链:当代码在一个环境中执行时,就会形成一种叫做作用域链的东西,// 它的用途是保证对执行环境中有访问权限的变量和函数进行有序访问
// 变量查询:在变量查询过程中,首先在当前作用域内查找相关变量,没有的话继续沿着作用域链向上搜索在变量查询中,// 访问局部变量要比全局变量更快,因为不需要向上搜索作用域链,由近及远;
// 建议都使用var关键字声明变量
// 栈结构:先进后出,后进先出(数组的方法:push()压入,pop()弹出)
// 环境栈:每个函数被调用时都会创建自己的执行环境,当执行到这个函数时,函数的执行环境会被推到环境栈中去执行,而执行后又在环境栈中弹出(退出,当前执行环境销毁,把控制权交给上一级的执行环境,);

5.变量提升:

1.变量提升(Hoisting),也称为预解释,是JS中的一个重点;

2.变量提升是指在程序执行之前,先检查当前程序中所有代码,碰上关键字var/function就提前为其开辟内存空间;

3.而赋值操作要等到具体执行到该代码时才会进行赋值操作;

6.函数提升:

1.代码执行之前碰到function等关键字,同样开辟内存空间;

2.函数提升指的是将整个函数声明提升到最顶层,在执行之前就开辟内存空间存储函数声明;

3.使用function关键字声明函数,使用变量名创建函数,使用变量名创建的函数不会被提升;

7.内存泄露问题:

1.基于JS内存管理机制,建议更多的使用局部变量和局部对象来解决内存问题和性能优化;

2.解决方案:使用结束后将其设置为null来释放引用,这方法叫引用解除;

1.JS的几种常用调试,输出方式:

//JS常用几种输出方式,调试方式:
prompt( "一只小羊驼") ;   //1.prompt()用户可输入弹出框;
alert( '两只小羊驼') ;     //2.alert()弹出框,用户不可操作;
confirm( "三只小羊驼") ;   //3.confirm()弹出框,经常和判断语句一起使用;
var  a   =   '小明' ;
console. log(a) ;   //2.控制台打印指令,最常用;
document. write( '三只小羊驼') ;   //3.直接文本输出页面;
var  isNumber   =   isNaN(NaN) ;   //判断对象是否非数字,正确返回true;

console. log( typeof obj1) ; //检测类型,为对象类型
console. log(obj1 instanceof Object) ; //检测是否是某一个类型,布尔值true/false;

2.JS数据类型:

//JS的几种数据类型
var  string   =   '小明' ;     //字符串类型
var  number   =   10.8 ;   //数字类型;
var  isman   =  true ;   //布尔类型,判断true/false;
var  a ;     //undefind,定义未赋值;
var  b   =  null ;     //空类型;
var  c   =  [ 'a' , 1 , 'c' , 3]       //数组类型;
var  j   =   100 / 0 ;       //正负无穷Infinity
var  k   =  - 100 / 0 ;
console. log(k) ;
var  a1   =   'a' / 32 ;     //NAN形式
console. log(a1) ;
var  text   =   "你 \" 我 \" " ;     //转义序列
console. log(text) ;
\n       //  空格符

3.声明变量作用域及内存,递归函数变量提升等:

//  变量,作用域及内存**********************************:
//js变量的声明:
//1.先声明,再赋值:
var  name ;
name = "小明" ;
//2.声明,赋值同时进行:
var  name1   =   '小红' ;
//3.同时声明多个变量;
var  age   =   18 ,height   =   175 ;
//4.只声明,不赋值;
var  a   =   'null' ;

//  基础创建函数,function:
//  1.一个函数,代码块,定义函数;
function   a()  {
     console. log( '我就看一下') ;
}
a() ;

//  2.带参数的函数,传参;
function   b( name , age)  {
     console. log( 'hello' + name + ',') ;
     console. log( '今年' + age + '.') ;
}
b( '小明' , 18) ;

//  3.有返回值的函数,return;
function   c( name)  {
     return( 'hello' + name + '.') ;
}
var  a1   =   c( '小红') ;

//  4.匿名函数,匿名函数格式:
( function  ( c , d)  {
     var  add1   =   c + d ;
})( 10 , 10) ;
//  计算1-100的和:
( function  ()  {
     var  ad   = 1 ;
     for( var  i = 0 ;i <= 100 ;i ++)  {
         ad   =  ad +i ;
     }
     console. log(ad) ;
})() ;
//  案例2
var  st   =   81 ;
var  arr   =  [ 'beijing' , 'beijing' , 'beijing'] ;
var   set   =  function  ( num , arr1)  {
     num   = 1 ;
     arr[ 1]   =   'xiaohong' ;   //更改数组下标第一项
     document. write( '数值:' + num + '<br>') ;
     document. write( '数组:' +arr[ 1] + '<br>') ;
}
set(st ,arr) ;

//  5.递归函数在函数内部调用自己,return不管代码有没有执行都将结束函数的执行:
function   fun1()  {
     console. log( 'haha') ;
     //fun1(),在函数内部调用自己;
     return ;     //返回值,结束函数执行;
     console. log( 'hehe') ;   //return后这一步不会调用;
}
fun1() ;
//  求一个6的阶乘,6*5*4*3*2*1,5*(5-1)*(5-2)*(5-3)*(5-4);
function   nex( num1)  {
     if( num1 <= 1){
         return   1 ;     //如果num1<=1,那就在1返回结束函数;
     } else  {
         return   num1 *nex( num1 - 1) ;       //返回值,阶乘;
     }
}
var  num2   =   nex( 6) ;
document. write(num2) ;     //6*5*4*3*2*1结果为720;

//  1.简单数据类型作为参数传递:
//  声明全局变量,在程序任何位置都可以访问:
var  n   =   123 ;
function   fun1( num)  {         //参数:形参;
     //  num作为函数的参数相当于在函数内定义一个局部变量,只能在函数内部使用,出作用域就被销毁;
     num   =   200 ;
     //  在函数内部声明一个局部变量;
     var  b   =   10 ;
     console. log(b) ;
     //  在函数内部不带var定义为全局变量(不建议使用此种方式声明):
     c   =   300 ;
}
fun1(n) ;     //返回值
console. log( c) ;     //  可以获取到,但会造成内存泄漏;

//  2.引用类型作为参数传递:
//  如果函数内部直接对数组或对象类型进行修改,会直接映像到原对象或数组上;
function   fun2( obj)  {
     obj.name   =   '小明' ;
     obj.age   =   20 ;
     console. log( obj)
}
var  obj1   =  new  Object() ;
obj1.name   =   '小红' ;
obj1.age   =   18 ;
//  调用函数传递obj1作为参数
fun2(obj1) ;
console. log(obj1) ;     //  等于把obj的对象复制给了obj1;
//  引用类型作为参数传递:
function   fun3( obj)  {
     //  函数内部对于引用类型进行引用类型进行赋值操作,修改不会被映射到原数组或对象上,相当于在函数内部新创建了对象,进行赋值;
     obj   =  {
         name : '小王'
     } ;
     console. log( obj) ;
}
var  obj2   =  new  Object() ;
obj2.name   =   'text' ;
obj2.age   =   155 ;
//  调用函数传递obj2作为参数
fun3(obj2) ;     //  等于把obj2的值赋值给了fun3;
console. log(obj2) ;

//  执行环境#################################################################:
//  全局执行环境:
//  1.在一个页面中,第一次载入JS代码时创建一个全局执行环境,
//  全局执行环境是最外围的执行环境,在Web浏览器中，全局执行环境被认为是window对象。
//  2.全局执行环境直到应用程序退出,也就是说关闭网页或浏览器时才会被销毁
//  3.因此,所有的全局变量和函数都是作为window对象的属性和方法创建的.
//  全局变量被视为window对象的属性,全局函数被视为window对象的方法
//  函数执行环境（局部执行环境）
//  1.每个函数都有自己的执行环境,称为局部执行环境,
//  2.函数执行时会创建函数的执行环境
//  3.当执行环境中的代码被执行完毕后,该环境会被销毁,
//  保存在其中所有的变量与函数也随之销毁.因此在函数里定义的函数和变量都是局部的
//  1.不带参数:
var  num   =   10 ;   //  定义全局变量,在程序任何地方都可以访问;
function   fun1()  {
     //  使用关键字var表示在函数内部声明局部变量:
     var  n   = 200 ;
     console. log(n) ;
}
fun1() ;
//  2.带参数:
var  color   = 'red' ;
function   fun2( colorName)  {
     //  设置的为局部变量:
     colorName   =   'blue' ;
     console. log( colorName) ;
     console. log(color)
}
fun2(color) ;     //  把color传进fun2中;
//  作用域
//  作用域链:当代码在一个环境中执行时,就会形成一种叫做作用域链的东西,
//  它的用途是保证对执行环境中有访问权限的变量和函数进行有序访问
//
//  变量查询:在变量查询过程中,首先在当前作用域内查找相关变量,没有的话继续沿着作用域链向上搜索在变量查询中,
//  访问局部变量要比全局变量更快,因为不需要向上搜索作用域链
//
//  建议都使用var关键字声明变量
//
//  栈结构:先进后出,后进先出(数组的方法:push()压入,pop()弹出)
//
//  环境栈:每个函数被调用时都会创建自己的执行环境,当执行到这个函数时,函数的执行环境会被推到环境栈中去执行,而执行后又在环境栈中弹出(退出,当前执行环境销毁,把控制权交给上一级的执行环境);
//  函数嵌套
var  className   =   '学校' ;
var  h   = 200 ;
function   fun3()  {
     var  a = 100 ;
     function   fun4()  {
         var  start   = 10 ;
         h   = 100 ;
         console. log(className) ;
         console. log(a) ;
         console. log(start) ;
     }
     fun4() ;
}
fun3() ;
console. log(className) ;
console. log(h) ;     //  先访问局部再访问全局,2个全局变量局部的优先找到;

//  函数的作用域(局部作用域)  {}用来储存一段代码,称之为代码块
function   fun1()  {
     var  c   = 100 ;
     console. log(c) ;
}
//  js中没有块级作用域,if(){},for,while{},这些语句中的{}都不视为对变量的作用域划分,
//  只是用于设置循环或者条件语句
//  js中只有在函数执行环境下,函数作用域才有作用域划分;
if( true)  {
     var  a   = 10 ;
     console. log(a) ;
}
console. log( a) ;
for( var  i = 0 ;i < 10 ;i ++)  {
     var  b   = 200 ;
}
console. log(i) ;
console. log( b) ;

//  1.变量提升:
//  变量提升(Hoisting),也称为预解释,是JS中的一个重点;
//  变量提升是指在程序执行之前,先检查当前程序中所有代码,碰上关键字var/function就提前为其开辟内存空间;
//  而赋值操作要等到具体执行到该代码时才会进行赋值操作;
console. log( a) ;   //  undefined,预解析由上往下;
var  a ;             //  undefined,定义未赋值;
a   = 10 ;             //  赋值
//  console.log(a);
var  str   = '小明' ;
function   fun2()  {
     console. log(str) ;
     var  str   = '局部变量' ;
     console. log(str) ;
}
fun2() ;

function   fun3()  {

     fun4() ;
     //  只有使用函数声明方式创建的函数才会被提升
     function   fun4()  {
         console. log( 'hello  word') ;
     }
}
fun3() ;

//  2.函数提升,代码执行之前碰到function关键字,同样开辟内存空间,
//  函数提升指的是将整个函数声明提到最顶层,在执行之前就开辟内存空间存储函数声明
//  使用function关键字声明函数,使用变量名创建函数,使用变量名创建的函数不会被提升
//  但是fun6的变量提升;
//  function  fun5()  {
//      //  会被提升;
//  }
//  fun5();
fun6() ;
var   fun6   =  function  ()  {
     console. log( '函数6') ;
}
//  fun6()

//  内存问题:
//  基于JS的内存管理机制,建议更多的使用局部变量与局部对象来解决内存问题和性能优化;
//  不可避免的使用全局对象时,需要手动的解除对象引用来优化性能;
//  声明一个全局对象
var  obj   =  new  Object() ;
obj.name   =   'txt' ;
//  添加一系列的属性方法:
//  完成相应功能后,不需要再使用obj,但是程序运行过程中obj还是占据内存空间,内存不友好;
console. log(obj) ;
//  解决方案:
//  就是一旦数据不再有用,那么将其设置为null来释放引用,这方法叫解除引用;
//  使用结束之后设置为null,结束obj的引用,等待回收;
obj   =  null ;
console. log(obj) ;   //  结果为null,释放成功;

//  arguments  对象:
function   fun( a , b)  {
     //  fun.length存储的是形参的长度
     console. log( fun.length) ;
     //  arguments  对象在函数内部;作用:保存函数的实际参数;
     console. log(arguments) ;     //  0,1  10,20
     console. log(arguments.length) ;
     //  想拿到30和40;
     console. log(arguments[ 1]) ;
     if( fun.length ==arguments.length){
         console. log( a + b) ;
     } else  {
         alert( '请传递正确的参数个数') ;
     }

}
fun( 10 , 20) ;
//  函数作为参数传递:
function   fun1()  {
     return  a + b ;
}

function   fun3( fn , a , b)  {
     //  执行传递过来的fun1;
     var  d   =   fn( a , b) ;
     console. log(d) ;
}
fun3( fun1 , 10 , 20)

//(搜索框案例)
var  sousuo   =  document. getElementById( 'inp') ;
var  la   =  document. querySelector( '#la') ;
sousuo.onfocus   =  function  (){     //获取焦点触发事件
     la.style.display   =   'none' ;
     la.style.color   =   'gray' ;
}
sousuo.onblur   =  function  (){   //失去焦点触发事件
     la.style.display   =   'inline' ;
}
案例二 :
var  ipt   =  document. querySelector( '#one') ;
//  自动获取光标:
//  ipt.focus();
//  当输入框激活光标样式:
ipt.onfocus   =  function  ()  {
     //  style,设置样式;
     //  判断用户是否是第一次输入
     if(ipt.value == "请输入..."){
         ipt.value   =   '' ;
         ipt.style.color   =   'grey' ;
     }
}
//  当输入框失去焦点时触发:
ipt.onblur   =  function  ()  {
     if(ipt.value == ''){
         ipt.value = '请输入...' ;
         ipt.style.color = '#CCCCCC' ;
     }
}
//  案例三:
var  ipt1   =  document. querySelector( '#ipt1') ;
var  ipt2   =  document. querySelector( '#ipt2') ;
ipt1. focus() ;     //自动获取焦点;
//  鼠标穿过
ipt2.onmouseover   =  function  ()  {
     this. select() ;
}
ipt1.onmouseover   =  function  ()  {
     this. select() ;
}

//  (简单案例div变色)
var  d   =  document. getElementById( 'd') ;
var  but   =  document. getElementById( 'but') ;
var  nex   =   0 ;
but.onclick   =  function  ()  {
     nex ++ ;
     d.style.background   =   'yellowgreen' ;
     if  (nex   %   2   ==   0)  {
         d.style.background   =   '#6666FF' ;
     }
     if  (nex   %   3   ==   0)  {
         alert( "你有毒") ;
     }
}

4. javascript的常用内置对象:

//  内置对象,概念,Math()对象算法里已整理:
//  1.String(字符串对象),获取字符串长度:
//  获取字符串长度:
var  string   =   'nimeia' ;
console. log(string.length) ;
//  转换为大写:
var  string1   =  string. toUpperCase() ;
//  转换为小写:
var  string2   =  string. toLowerCase() ;

//  2.Number对象:
var  number   =   12.345 ;
//  按指定位数保留,四舍五入:
//  var  n1  =  number.toPrecision(4);
//  按指定保留小数位,会四舍五入:
var  n2   =  number.toFixed( 1) ;

//  3.日期对象  Date()返回当前时间日期;
//  创建一个日期对象;
var  myDate   =  new  Date() ;     //默认存有当前时间
myDate. getFullYear() ;   //获取当前年份;
myDate. getMonth() ;   //获取当前月份;
myDate. getDay() ;   //获取当前周期;
ms   =  myDate. getMilliseconds() ;   //获取当前时间毫秒(ms);
s   =  myDate. getSeconds() ;   //获取当前时间秒(s),1s=1000ms;
m   =  myDate. getMinutes() ;   //获取当前时间分钟(m),1m=60s;
h   =  myDate. getHours() ;   //获取当前时间小时(h,1h=60m;
//  时钟角度运算:
miaozhen.style.transform   =   "rotate('+s*6+'deg)" ;   //1s=6度,旋转角度;
fenzhen.style.transform   =   "rotate('+s*6+'deg)" ;   //1s=6度,旋转角度;
shizhen.style.transform   =   "rotate('+s*6+'deg)" ;   //1s=30度,旋转角度;
//获取圆周率:
var  ar   =   Math.PI ;
console. log(ar) ;

5.JS的一些计算方式: 算数运算符,三目运算符,Math()对象取整函数;

//计算方式,八进制,十进制,十六进制;
1 * 8  的0 - 7次方     八进制
1 * 10  的0 - 9次方    十进制
1 * 16  的0 -f次方    十六进制

//运算符:
//赋值运算符'=';
var  add ;
add   =   1 + 1 ;

//算数运算符:小数点正常显示
var  a   =   1 + 1.5 ;   //加法
var  b   =   5 - 3 ;   //减法
var  c   =   1 * 1.5 ;   //乘法
var  d   =   10 / 3 ;   //除法

//复合运算符:
//++  --自增与自减
//++  --  在前本身先自增或自减1个单位
var  e   =   1 ;
var  f   =  ++e ;
//++  --  在后先赋值再自增或自减
var  g =   1 ;
var  h =  g ++ ;

//运算符连写  +=  -=  *=  /=:
var  i   =   5 ;
var  j   =   4 ;
j   +=  i ;     //j=j+i;

//取余
var  k   =   3 ;
var  l   =   8 ;
l   %=  k ;     //l=l%k;

//字符串运算符,字符串的拼接
var  m   =   '小明' ;
var  n   =   '小红' ;
var  o   =  m + '' +n ;

//为字符串类型混合拼接
var  p   =   '1' ;
var  q   =   '2' ;
var  r   =  p +q ;

//数字,字符串混合拼接,结果为字符串'11';
var  s   =   '1' ;
var  t   =   1 ;
var  u   =  s +t ;

//比较运算符:
var  v   =   10 ;
if(v > 2)  {
     console. log( '这就对了') ;
}
if(v < 2)  {
     console. log( '这就对了') ;
}
if(v >= 2)  {
     console. log( '这就对了') ;
}
if(v <= 2)  {
     console. log( '这就对了') ;
}
if(v == 2)  {     //==相等运算符
     console. log( '这就对了') ;
}
if(v != 2)  {     //!=不相等运算符
     console. log( '这就对了') ;
}
if(v === 2)  {     //严格等于运算符
     console. log( '这就对了') ;
}
if(v !== 2)  {     //!==非严格等于,数值类型必须相同
     console. log( '这就对了') ;
}

//类型转化:
//  1.判断变量的类型,typeof():
var  n0   =   123 ;
console. log( typeof(n0)) ;
//  2.将数字类型装换为字符串类型:String(),toString()十进制数字两种方式;
//  toString(2),toString(8),toString(16),转换为2,8,16进制;
var  n1   =   123 ;
//  var  n2  =  String(n1);
var  n2   =  n1. toString() ;
//  3.将字符串类型转化为数字类型:
var  n3   =   "saew" ;
var  n4   =  Number(n3) ;
//  取整parseInt:
var  a   =   100.03 ;
var  b   =   parseInt(a) ;
//  得到一个整数或实数:
var  c   =   parseFloat(a) ;
//4.将数字转化为布尔类型:
var  n5   =  Boolean() ;
console. log( typeof(n5) ,n5) ;

//取整函数Math对象:
//地板函数(向上,向下取整),Math.ceil(向上取整)/Math.floor(向下取整):
var  a   =   3.24 ;
var  b   =   Math. ceil(a) ;   //向上取整,结果为4;
var  c   =   Math. floor(a) ;   //向下取整,结果为3;
//返回几项中的最大值,Math.max():
var  a1   =   3.23 ;
var  b1   =   3.01 ;
var  c1   =   Math. max(a1 ,b1) ;
//获取0-1之间的随机数Math.random():
var  a2   =   Math. ceil( Math. random() * 10) ;   //随机生成0-10之间的数有小数点;
//计算X的Y次方,Math.pow();
var  b2   =   2 ;
var  c2   =   Math. pow(b2 , 2) ;   //2的次方,2*2结果为4;
//四舍五入取整,Math.round();
var  a3   =   3.62 ;
var  b3   =   Math. round(a3) ;   //小数点5以下舍去,5以上进一位;

//逻辑运算符  &&与  ||或  !非;
var  a   =   1 > 2 ;     //true
var  b   =   2 > 1 ;     //false
//  &&两者为真,结果为真  一个为假,结果为假
if  (a &&b)  {
     console. log( '这是对的') ;
}
//  ||两者为假,结果为真  一个为真,结果为假
if  (a ||b)  {
     console. log( '这是对的') ;
}
//  !取反,例:n1结果为false,!n1结果为true
if  ( !a &&b)  {
    console. log( '这是对的') ;
}
if  (a   ||  !b)  {   //一者为假结果真,!只能单方面改变
     console. log( '这是对的') ;
}

//三目运算符,  n1>n2?结果为真执行左边:结果为假执行右边   ;
var  n1   =   102 ;
var  n2   =   30 ;
n1   >  n2   ?   alert( 'true执行左边')   :   alert( 'false执行右边') ;

计算案例:

//简单运算案例:
//1.取余,1000天后是星期几?今天星期六,1000%7(142周,994天后的星期六余6天往后推算星期五)
var  number   =  (( 1000 % 7) + 6) % 7 ;
console. log( "1000天后是星期" +number) ;
//2.用户输入鸡蛋案例,20个鸡蛋一盒:
var  a   =   prompt( "请输入鸡蛋的数量") ;
var  b   =   Math. ceil(a / 20) ;       //向上取整Math.ceil();
console. log( "盒子的个数为" +b) ;
//  3.用户随便输入一个数,获取百  十  个位数:
var  a   =   prompt( "请输入一个三位数") ;
var  b   =  Number(a) ;   //先把用户字符串转换为数字
var  a1   =   parseInt(b / 100) ;   //取得百位数;
var  a2   =   parseInt(b % 100 / 10) ;   //取得十位数;
var  a3   =  b % 100 % 10 ;       //取得个位;
var  he   =  a1 + "," +a2 + "," +a3 ;   //数字输出会相加,需换成字符串连接
console. log(he) ;

6. 控制流程语句: if判断语句,switch比较语句,while/for循环语句 break立即退出所有循环 continue退出当前这项不完全退出;

//控制流程语句
//  if判断语句,满足条件时会执行代码块,不满足时会执行另一个代码块:
var  age   =   26 ;
if  (age   >   20)  {     //是否大于20,小于执行下面的代码,结果为真执行否则执行下面的;
     alert( '你可以看了') ;
} else  {
     alert( '不许看片') ;
}
//判断语句可以使一个表达式
var  a   =   10 ;
var  b   =   20 ;
if((a -b) > 10)  {
     alert( '运算错误') ;
}   else  {
     alert( '是小于十') ;
}
//多个判断语句组合使用:
var  a1   =   1 ;
var  b1   =   2 ;
if  (a1   ==   2){
     alert( '错误') ;
}   else  if  (b1   ==   1){
     alert( '错误') ;
}   else  {
     alert( '正确') ;
}

//  switch语句(比较语句),对比变量可以使数字也可以是字符串:
//  case条件值,break跳出当前循环,default结束整个switch语句;
var  n1   =   prompt( '请输入你想查询的天气') ;
switch  (n1)  {
     case   '晴天' :
         alert( "星期一,16号") ;
     break ;
     case   '小雨' :
         alert( "星期三,18号") ;
     break ;
     case   '多云' :
         alert( "星期二,17号") ;
     break ;
     default:
         alert( "没有你要查询的天气") ;
}

//  while  循环语句:
var  a   =   1 ;
while  (a <= 100)  {
     document. write( '数字:' +a + '<br>') ;
     a ++ ;
}
do  while语句先执行一次do的函数 ,再判断不满足再执行do里面的函数(先执行再判断) :
var  a1   =   1 ;
do  {
     document. write( '数字:' +a1 + '<br>') ;
     a1 ++ ;
}   while  (a1 <= 10) ;

//案例,随机产生一个数字,0-9之间,并且接受用户输入的数字,只能输入3次;
var  number   =   parseInt( Math. random() * 10) ;   //0-9之间随机数取整;
var  n1   =   1 ;
while  (n1 <= 3)  {
     var  int   =   prompt( '请输入0-9之间随机数') ;   //用户输入;
     var  int1   =  Number(int) ;   //用户输入字符串转换为数字;
     if  (number ==int1)  {
         alert( '答对了') ;
         //  n1=4;
     } else  {
         n1 ++ ;
     }
}

//  for循环语句,如果不满足条件就循环执行:
for( var  i = 0 ;i < 100 ;i ++)  {
     document. write(i + '只小鸭子' + '<br>') ;
}
//计算从0加到100的和;
var  a   =   0 ;
for( var  i1 = 0 ;i1 <= 100 ;i1 ++)  {
      a   =  a +i1 ;
}
console. log(a) ;
//将1-100之间所有是6的倍数的数字输出到控制台中:
for( var  i0 = 1 ;i0 <= 100 ;i0 ++){
     if(i0 % 6 == 0){
         console. log(i0) ;
     }
}
var  i2   = 1 ;
while  (i2 <= 100){
     if(i2 % 6 == 0){
         console. log(i2) ;
     }
     i2 ++ ;
}
//在页面中打印*三角形打印10行,循环嵌套方式:
for( var  a1 = 1 ;a1 <= 10 ;a1 ++)  {
     for( var  a2 = 1 ;a2 <=a1 ;a2 ++){
         document. write( '*' + ' \n ') ;
     }
     document. write( '<br>') ;
}
//  break,跳出循环语句,循环到6跳出循环后面不执行:
//  continue  仅仅是跳过本次循环,后面的循环继续执行:
var  k   =   0 ;
while  (k < 10){
     k ++ ;
     if  (k == 6){
         break ;
         //  continue;
     }
     console. log(k) ;
}
//  break,continue简单案例用户输入:
var  name   =   prompt( "请输入您的名字") ;
var  password   =   prompt( "请输入您的密码") ;
while  (name !== 'admin'   ||  password !== '3224'){     //或一个为假,结果为真就执行
     alert( '输入错误') ;
     name   =   prompt( "请输入您的名字") ;
     password   =   prompt( "请输入您的密码") ;
     if(name == 'admin'   &&  password == '3224'){     //与两个判断为真退出;
         alert( "登入成功") ;
         break ;
     } else  {
         continue ;     //否则就退出当前,继续循环;
     }
}

7.数组:

//数组:
//  1.创建数组的方式:
//  字面量创建,创建一个空数组:
var  arr   =  [] ;
var  arr1   =  [ 1 , 'a' , 4 , 'g'] ;     //创建数组时添加元素;
//  构造函数方式创建数组,通过创建对象的方式创建数组:
var  arr2   =  new  Array() ;
var  arr3   =  new  Array( 4 , 'f' , 3) ;     //创建数组时添加元素;
//  通过元素下标访问数组元素或添加元素;
var  arr4   =[] ;
arr4[ 0]   =   '小明' ;     //添加元素
arr4[ 0]   =   '小红' ;     //通过下标修改已有的元素
var  a   =  arr4[ 0] ;     //通过下标获取相对应的元素;

//  2.遍历数组,利用for循环:
var  arr5   =  [ '小明' , 5 , 6 , '小李' , '小王' , 9] ;
//  利用for循环遍历数组,第一种方式:
for( var  i = 0 ;i <arr5.length ;i ++)  {
     var  n   =  arr5[i] ;
     console. log(n) ;     //遍历成功;
}
//  for循环遍历  for  in,第二种方式:
var  m ;
for(m   in  arr5)  {
     var  n1   =  arr5[m] ;
     console. log(n1) ;
}

//  3.数组的常用操作:
var  chengshi   =  [ '北京' , '上海' , '南京' , '武汉'] ;
var  chengshi1   =  [ '广东' , '常州' , '南宁' , '成都'] ;
var  engLish   =  [ 'Tom' , 'Lili' , 'Han' , 'Boss'] ;
var  number   =  [ 40 , 20 , 13 , 54 , 78 , 65] ;
var  a1   =  [ '李明' , 9 , '王红' , 3 , '赵六' , 7] ;
//  合并  north.concat()
var  chengshis   =  chengshi. concat(chengshi1) ;
//  转换类型:  toString(字符串格式),join('?')把数据所有元素连成一个字符串;
var  string   =  chengshi. toString() ;
var  join   =  chengshi1. join( '?') ;
console. log( typeof(string)) ;
//  排序字母类型数组  indexOf(指定字符串值在字符串中最后出现的位置),lastIndexOf(在字符串中最后出现的位置);
var  one   =  chengshi. indexOf( '上海') ;
var  last   =  chengshi. lastIndexOf( '南京' , 3) ;
//  排序数字类型数组,sort(升序),reverse(降序);
//  字母升序,汉语按编码格式不按首字母大小排列,英语按字母大小;
var  eng1   =  engLish. sort() ;
//  字母降序,由大往小;
var  eng2   =  engLish. reverse() ;
//  数字升序:数字由小至大;
var  left   =  number. sort( function( a , b){ return   a - b}) ;
//  数字降序:数字由大至小;
var  right   =  number. reverse( function( a , b){ return   a - b}) ;
//  删除数组的第一个元素,并返回该元素,数组第一个元素被删除:
var  one   =  chengshi. shift() ;
//  删除数组的最后一个元素,并返回该元素,数组最后一个元素被删除:
var  last   =  chengshi. pop() ;
//  追加元素到数组的开端:
var  nex   =  chengshi. unshift( '西安') ;
//  追加元素到数组的末尾:
var  xin   =  chengshi. push( '浙江') ;
//  返回一个子数组,slice(chengshi,one);
console. log(chengshi) ;
//  按数值大小进行排序,需借助排序函数:
//  function(a,b){return  a-b}
//  输出数组内最大值,比较大小:
var  max   =   0 ;     //存储较大值;(比较结果)
var  arr   =  [ 3 , 20 , 23 , 45 , 13 , 67 , 89 , 68 , 5] ;
for( var  i = 0 ;i <arr.length ;i ++)  {
     //比较大小,由小往大开始比较,最后为最大值:
     if(arr[i] >max)  {
         max   =  arr[i] ;
     }
}
console. log(max) ;

//  (数组遍历,取出所有的LI)
var  li   =  document. getElementsByTagName( 'li') ;
//(获取所有的li)
for( var  i = 0 ;i <li.length ;i ++){
     //(选择性更改LI中的内容)
     li[ 0].innerHTML   =   "hi" ;
}
//  案例一:股票案例;
//  //  获取所有的class;
//  function  nex  (ClassName){return  document.getElementsByClassName(ClassName)}
//  var  li  =  nex('li');
var  li   =document. querySelectorAll( 'li') ;
for( var  i = 0 ;i <li.length ;i ++){
     if(i % 2   ==   0){
         li[i].style.backgroundColor   =   "#EEEEEE" ;
     } else{
         li[i].style.backgroundColor   =   '#DCDCDC' ;
     }
     li[i]. onmouseover   =  function  (){
         this.className   =   "yanse" ;
     }
     li[i]. onmouseout   =  function  (){
         this.className   =   '' ;
     }
}

//  案例二:多选框.正选  反选择案例:
//  获取所的按钮:
var  buts   =  document. querySelector( '#top'). querySelectorAll( 'button') ;
//  获取所有的input:
var  ipts   =  document. querySelector( '#bottom'). querySelectorAll( 'input') ;
//  封装函数:
function   all( dm)  {
     for( var  i = 0 ;i <ipts.length ;i ++){
         ipts[i].checked   =   dm ;
     }
}
buts[ 0]. onclick   =  function  ()  {
     all( true) ;
}
buts[ 1]. onclick   =  function  ()  {
     all( false) ;
}
buts[ 2]. onclick   =  function  ()  {
     for( var  i = 0 ;i <ipts.length ;i ++){
         //  三目运算符里面的值可以是表达式,可以是具体值
         ipts[i].checked   ==  true?ipts[i].checked   =  false  :  ipts[i].checked   =  true ;
     }
}

遍历数组案例:

< ul>
     < li> 你是</ li>
     < li> 忘记</ li>
     < li> 毒非</ li>
     < li> 都会结婚</ li>
</ ul>

//  (数组遍历,取出所有的LI)
var  li   =  document. getElementsByTagName( 'li') ;
//(获取所有的li)
for( var  i = 0 ;i <li.length ;i ++){
     //(选择性更改LI中的内容)
     li[ 0].innerHTML   =   "hi" ;
}

< div   class= "box">
     < ul>
         < li   class= "li">
             < span> 上证指数</ span>
             < span> 5678</ span>
             < span> 9-6</ span>
             < span> 50%</ span>
         li>
         < li   class= "li">
             < span> 上证指数</ span>
             < span> 5678</ span>
             < span> 9-6</ span>
             < span> 50%</ span>
         li>
         < li   class= "li">
             < span> 上证指数</ span>
             < span> 5678</ span>
             < span> 9-6</ span>
             < span> 50%</ span>
         li>
         < li   class= "li">
             < span> 上证指数</ span>
             < span> 5678</ span>
             < span> 9-6</ span>
             < span> 50%</ span>
         li>
         < li   class= "li">
             < span> 上证指数</ span>
             < span> 5678</ span>
             < span> 9-6</ span>
             < span> 50%</ span>
         li>
         < li   class= "li">
             < span> 上证指数</ span>
             < span> 5678</ span>
             < span> 9-6</ span>
             < span> 50%</ span>
         li>
         < li   class= "li">
             < span> 上证指数</ span>
             < span> 5678</ span>
             < span> 9-6</ span>
             < span> 50%</ span>
         li>
         < li   class= "li">
             < span> 上证指数</ span>
             < span> 5678</ span>
             < span> 9-6</ span>
             < span> 50%</ span>
         li>
         < li   class= "li">
             < span> 上证指数</ span>
             < span> 5678</ span>
             < span> 9-6</ span>
             < span> 50%</ span>
         li>

         < li   class= "li">
             < span> 上证指数</ span>
             < span> 5678</ span>
             < span> 9-6</ span>
             < span> 50%</ span>
         li>
     ul>
</ div>

//  案例一:股票案例;
//  //  获取所有的class;
//  function  nex  (ClassName){return  document.getElementsByClassName(ClassName)}
//  var  li  =  nex('li');
var  li   =document. querySelectorAll( 'li') ;
for( var  i = 0 ;i <li.length ;i ++){
     if(i % 2   ==   0){
         li[i].style.backgroundColor   =   "#EEEEEE" ;
     } else{
         li[i].style.backgroundColor   =   '#DCDCDC' ;
     }
     li[i]. onmouseover   =  function  (){
         this.className   =   "yanse" ;
     }
     li[i]. onmouseout   =  function  (){
         this.className   =   '' ;
     }
}

< div   id= "top">
     < button> 全选</ button>
     < button> 取消</ button>
     < button> 反选</ button>
</ div>
< div   id= "bottom">
     < ul>
         < li>< input   type= "checkbox"></ li>
         < li>< input   type= "checkbox"></ li>
         < li>< input   type= "checkbox"></ li>
         < li>< input   type= "checkbox"></ li>
         < li>< input   type= "checkbox"></ li>
         < li>< input   type= "checkbox"></ li>
         < li>< input   type= "checkbox"></ li>
         < li>< input   type= "checkbox"></ li>
         < li>< input   type= "checkbox"></ li>
         < li>< input   type= "checkbox"></ li>
         < li>< input   type= "checkbox"></ li>
         < li>< input   type= "checkbox"></ li>
     ul>
</ div>

//  案例二:多选框.正选  反选择案例:
//  获取所的按钮:
var  buts   =  document. querySelector( '#top'). querySelectorAll( 'button') ;
//  获取所有的input:
var  ipts   =  document. querySelector( '#bottom'). querySelectorAll( 'input') ;
//  封装函数:
function   all( dm)  {
     for( var  i = 0 ;i <ipts.length ;i ++){
         ipts[i].checked   =   dm ;
     }
}
buts[ 0]. onclick   =  function  ()  {
     all( true) ;
}
buts[ 1]. onclick   =  function  ()  {
     all( false) ;
}
buts[ 2]. onclick   =  function  ()  {
     for( var  i = 0 ;i <ipts.length ;i ++){
         //  三目运算符里面的值可以是表达式,可以是具体值
         ipts[i].checked   ==  true?ipts[i].checked   =  false  :  ipts[i].checked   =  true ;
     }
}

10.简单节点DOM操作: X. innerHTML(‘修改文本内容’)

//  DOM操作:

//DOM操作   :就是获取某个元素
//  获取ID
var  div   =   document.getElementById( 'one') ;
console.log(div) ;
//  获取属性(标签)
var  nodeList   =  document.getElementsByTagName( 'div') ;
console.log(nodeList[ 0]) ;
//根据name属性值获取对应元素,IE浏览器认为只有表单控件的name属性是合法的
var  inputs   =   document.getElementsByName( 'sex') ;
console.log(inputs[ 0]) ;
//这个需要注意.这个地方获取不到
var  inputs   =   document.getElementsByName( 'one') ;
console.log(inputs[ 0]) ;
1.  d.style.left = 200 + 'px' ;位置往左移动200px ;
2.  ipt.focus() ; this.select() ;自动获取光标 ;
3.  获取所有的Classsname :function  nex  (ClassName){ return  document.getElementsByClassName(ClassName)}

< div   class= "box"  >
     
     发送信息：< textarea   rows= "10"   id= "one"></ textarea>
     < button> 发送</ button>
</ div>

/*DOM操作:*/
/*发送信息案例:###########*/
. box{
     margin:   100 px  auto ;
     width:   600 px ;
     /*height:  200px;*/
     border:   1 px  solid   #333 ;
}
textarea{
     width:   450 px ;
     resize:   none ; /*防止用户拖动  */
}
. box   li{
     width:   450 px ;
     line-height:   30 px ;
     border-bottom:   1 px   dashed   #ccc ;
     margin-left:   80 px ;
     list-style:   none ;
}
a{
     text-decoration:   none ;
     float:   right ;
}

//  发送消息案例:
//  第一步拿到textarea,从而拿到输入的内容
var  txt   =  document.getElementsByTagName( "textarea")[ 0] ;
var  but   =  document.getElementsByTagName( 'button')[ 0] ;
//  第二步生成一个ul,createElement创建一个DOM节点;
var  ul   =  document.createElement( 'ul') ;
txt.parentNode.appendChild(ul) ;     //txt.parentNode:返回txt的父节点,appendChild在它后面添加ul节点
//  button的点击事件(发送消息)
but.onclick   =  function  ()  {
     //  点击按钮如果输入为空,弹出输入框提示输入,输出;
     if  (txt.value   ==   "")  {
         alert( '请输入信息再发送') ;
         return ;
     }
     //创建li赋值为newLi
     var  newLi   =  document.createElement( 'li') ;
     //  li标签的内容等于文本框中的内容+删除链接
     newLi.innerHTML   =  txt.value   +   "<a  href  =  'javascript:;'  style='text-decoration:none'>删除" ;
     //  children获取ul中的所有的子节点,但是不包含空格符和换行符
     var  lis   =  ul.children ;
     //  点击发送之后将文本框内容清空
     txt.value   =   "" ;
     //将newLi添加到ul上
     //  ul.appendChild(newLi);
     //  如果ul的子元素为0;
     if  (lis.length   ==   0)  {
         //  在ul中添加子元素li
         ul.appendChild(newLi) ;
     }   else  {
         //  否则在ul之前插入新的li为ul的第一个子元素
         ul.insertBefore(newLi ,  lis[ 0]) ;
     }
     //  删除信息
     //  获取所有的a节点
     var  aa   =  document.getElementsByTagName( "a") ;
     console.log(aa) ;
     //  如果小于a的长度自增;
     for  ( var  i   =   0 ;  i   <  aa.length ;  i ++)  {
         //通过遍历给每一个标签绑定一个删除事件
         aa[i].onclick   =  function  ()  {
             //  当a点击移除当前a节点的父节点li
             ul.removeChild( this.parentNode) ;
         }
     }
}

//  获取元素
var  div   =   document.getElementById( 'one') ;
//  console.log(div.id);
div.id   =   'two' ;
//  console.log(div.id);
//  console.log(div.title);
div.title   =   'it  is  div' ;
//  console.log(div.className);
//  div.className  =  'div1';
var  style   =   div.style ;
console.log(style) ;
style.backgroundColor   =   'pink' ;
//获取属性值,需要传递一个参数:属性名字符串
var  id1   =   div.getAttribute( 'id') ;
console.log(id1) ;

var  t1   =   div.getAttribute( 'title') ;
console.log(t1) ;

var  s1   =   div.getAttribute( 'style') ;
console.log(s1) ;
//  因为ie浏览器不识别class,他只识别className,所以我们在获取class属性值得时候,就必须做判断
if  (div.getAttribute( 'class') ===null){
     //  IE浏览器
     console.log(div.getAttribute( 'className')) ;
} else  {
     //  正常浏览器(主流浏览器)
     console.log(div.getAttribute( 'class')) ;
}

var  id1   =  document.getElementById( 'id1') ;
console.log(id1.hun) ;
console.log(id1.getAttribute( 'hun')) ;
//setAttribute(属性名,属性值):设置某一个属性值
div.setAttribute( 'title' , 'itisdiv') ;
console.log(div.getAttribute( 'title')) ;

div.setAttribute( 'style' , 'background-color:blue;width:100px') ;

div.removeAttribute( 'style') ;

//获取属性值,需要传递一个参数:属性名字符串
     var  id1   =   div. getAttribute( 'id') ;   //获取div的ID属性值;
     console. log(id1) ;
     var  t1   =   div. getAttribute( 'title') ;   //  获取div的title属性值
     console. log(t1) ;
     var  s1   =   div. getAttribute( 'style') ;   //  获取div的style样式属性值;
     console. log(s1) ;
     //  因为ie浏览器不识别class,他只识别className,所以我们在获取class属性值得时候,就必须做判断
     if  (div. getAttribute( 'class') ===null){
         //  IE浏览器
         console. log(div. getAttribute( 'className')) ;
     } else  {
         //  正常浏览器(主流浏览器)
         console. log(div. getAttribute( 'class')) ;
     }
     var  id1   =  document. getElementById( 'id1') ;
     console. log(id1.hun) ;
     console. log(id1. getAttribute( 'hun')) ;
     //setAttribute(属性名,属性值):设置某一个属性值
     div. setAttribute( 'title' , 'itisdiv') ;
     console. log(div. getAttribute( 'title')) ;
     div. setAttribute( 'style' , 'background-color:blue;width:100px') ;
     div. removeAttribute( 'style') ;
     //  获取元素节点
     var  div   =   document. getElementsByTagName( 'div')[ 0] ;
     //  获取所有的子节点
     var  childs   =   div.childNodes ;
     //  console.log(childs);
     //  获取第一个子节点
     console. log(div. children)         //  获取当前元素的所有子节点;
     console. log()
     console. log()
     console. log()
     console. log(  div.childNodes[ 0]) ;
     console. log(  div.firstChild) ;     //  获取当前标签节点的第一个子节点;
     console. log(  div.lastChild) ;       //  获取当前标签节点的最后一个子节点;
     //  console.log(div.childNodes[div.childNodes.length-1]);
     console. log(div.ownerDocument) ;   //  获取当前文档的根节点,相当于document
     console. log(div.parentNode) ;     //  获取当前节点的父节点
     console. log(div.previousSibling) ;   //  获取当前节点的前一个同级节点;
     console. log(div.nextSibling) ;       //  获取当前节点的下一个同级节点
     console. log(div.attributes) ;       //  获取当前节点所有的属性节点集合
     console. log(div.attributes[ 0]) ;   //  获取当前节点的第一个属性节点
     //  节点的增删改查:
     //  获取body;
     var  body   =  document. getElementsByTagName( 'body')[ 0] ;
     //  createElement  创建DOM节点;
     var  h1   =  document. createElement( 'h1') ;
     //  appendChild()向某个元素节点之后添加子节点  将创建出来的节点h1,添加到body中
     body. appendChild(h1) ;
     //  createTextNode:创建文本节点(文本内容)
     body. createTextNode( '现在很穷,再不上班吃不起饭') ;
     //  insertBefore()在已有的子节点前插入一个新的子节点   有两个参数,第一个插入的新节点,第二个旧节点
     body. insertBefore(p ,h1) ;
     //  replaceChild()将body中的p标签替换为lable标签,有两个参数(新,旧)同上;
     body. replaceChild(label ,p) ;
     //  parentNode  返回当前节点的父节点;
     console. log(label.parentNode) ;
     //  cloneNode  克隆节点,复制所有的属性和值给某个元素
     var  newLabel   =   label. cloneNode( true) ;
     body. appendChild(newLabel) ;
     //  removeChild  移除节点
     body. removeChild(newLabel) ;
     //  合并同级节点,normalize  方法合并相邻的文本节点并删除空的文本节
     p. normalize() ;
     //  splitText()  拆分,切割文本节点;
     p. splitText( 4) ;
     //  deleteData(起始位置,删除长度)  删除文本节点;
     p. deleteData( 4 , 5) ;
     //  appendData(...)  向文本节点中添加字符串;
     p. appendData( "添加") ;
     //  insertData(插入位置,内容)  在文本节点插入文本内容;
     p. insertData( 2 , '我') ;
     //  replaceData(替换位置,替换字符长度,替换内容)  替换文本中内容;
     p. replaceData( 3 , 6 , '我的字符内容') ;
     //   splitText(分割文本位置)  分割文本;
     p. splitText( 2) ;
     //   substringData(提取位置,提取长度)  提取文本内容;
     p. substringData( 2 , 6) ;

     //  childNodes  返回子节点中的内容带空格,清除空白;
     var  div   =   document. getElementById( 'one') ;
     console. log(div.childNodes) ;   //  5
//       div.childNodes
     //筛选掉空白节点    空白节点也属于文本
     function   filertNodeSpace( childNode){
         var  arr   =  [] ;
         //遍历子节点
         for( var  i   = 0 ;i < childNode.length ;i ++){
             //判断是否是空白符或者换行符
             if  ( childNode[i].nodeType   === 3   &&   /^\s+$/. test( childNode[i].nodeValue)){
                 continue ;
             }
             arr. push( childNode[i]) ;
         }
         return  arr ;
     }
     var  arry   =   filertNodeSpace(div.childNodes) ;
     console. log(arry) ;

//  数字类型DOM操作:
var  n1   =   10.325 ;
//  获取数字类型整数;
parseInt(n1) ;
//  获取百位;
parseInt(n1 / 100) ;
//  获取十位;
parseInt(n1 % 100 / 10) ;
//  获取个位;
parseInt(n1 % 10) ;
//  获取上一次左边定位的值取整;
parseInt(list.style.left) ;
//  替换文本内容:
n1.innerHTML   =   'abc' ;

<input type= "text" >
<button id= "but" >点击发送 </button>

//  点击发送倒计时案例
var  but  =   document. getElementById( 'but') ;
but. onclick  =   function(){
   var  count  =   5 ;
   var  that  =   this ;   //将this存储到that
   var   timer  =   setInterval( changCount , 1000) ;
     this. disabled  =   true ;
     function   changCount(){
         count-- ;
         if(count  >=   0){
             that. innerHTML  =   '还剩'+count+ '秒' ;
             console. log( this) ;
         } else  {
             that. innerHTML  =   '点击发送' ;
             clearInterval(timer) ;   //关闭定时器
             that. disabled  =   false ;
         }
     }
}

<img src= "images/img.jpg" id= "image" />

/*图片随鼠标位置移动*/
#image{
     width:   80 px ;
     height:   80 px ;
     position:   absolute ;
     top:   0 ;
     left:   0 ;
}

//  图片随鼠标位置移动
var  image1  =   document. getElementById( "image") ;
var  leaderX  =   0 ;   var  targetX  =   0 ;   //x
     var  leaderY  =   0 ;   var  targetY  =   0 ;     //y
document. onclick  =   function(event){
     var  event1  =  event  ||   window. event ;
     targetX  =  event1. clientX  -  image1. offsetWidth/ 2 ;
     targetY  =  event1. clientY  -  image1. offsetHeight/ 2 ;
}
//缓冲动画
     setInterval( function(){
        leaderX  =  leaderX  +  (targetX  -  leaderX)/ 10 ;
         leaderY  =  leaderY  +  (targetY  -  leaderY)/ 10 ;
         image1. style. left  =  leaderX  +   "px" ;   //X上的动画
         image1. style. top   =  leaderY  +   "px" ;   //y上的动画
     } , 20) ;

10.鼠标绑定事件:

//  //  事件绑定:
//  1.窗口事件  window.onload:打开网页执行;  window.onunload:离开网页执行;  window.location.href:窗口页面跳转执行;
//  事件的三要素:  事件源.事件  =  事件处理程序,要产生行为,先要找到对象(事件源);
//  2.鼠标绑定事件:
//  onclick:鼠标点击触发事件;  ondblclick:鼠标双击触发事件;
//  onmousedown:鼠标按下时触发事件;  onmouseup:鼠标按钮松开触发事件;
//  onmouseover:鼠标悬浮于目标上触发事件;  onmouseout:鼠标离开触发事件;
//  onmouseenter:鼠标穿过目标触发事件;onmouseleave:鼠标离开触发事件;
//  onmousewheel:鼠标滚轮滚动时触发事件;  onclientX(),  onclientY():指定鼠标在窗口中的坐标;
//  3.表单中的绑定事件:
//  onchange:当用户输入框输入内容失去焦点时触发事件,切换下拉列表时也执行;  onsubmit:当form表单提交时触发;
//  onreset:当重置按钮按下时触发事件;  onselect:当文本框内容被选中时触发;
//  onfocus:当输入框获取焦点时触发;  onblur:当输入框失去焦点时触发;  oninput:当输入框输入内容时触发(获取输入框内容);
//  4.键盘事件:
//  onkeydown:当键盘被按下时触发;  onkeypress:当键盘按下又松开时触发;
//  onkeyup:当键盘松开时触发;  onkeycode():指定按下或释放的键是哪个;
//  5.图像事件:  onabort当图像加载失败时触发;

< input type= "button" value= "请点击" id= "one">
< input type= "button" value= "请点击" id= "two">

//  1.鼠标click事件,两种方式::
var  ipt1   =  document. querySelector( '#one') ;
//  添加鼠标点击事件:
ipt1. addEventListener( 'click' , function()  {
     alert( '我就尝试下') ;
} , false) ;   //false没有禁止项;
//  移除事件:
ipt1. removeEventListener( 'click' , function  ()  {
     alert( '我就试下') ;
}) ;
//第二种常规:
ipt1.onclick   =function  ()  {
     alert( '我尝试下') ;
}

< form   action= "js练习.php"   onsubmit= "console. log( '哈哈') "   onreset= "console. log( '重置了') ">
     < input   type= "button"   value= "请点击"   onclick= "console. log( '点击事件') ">
     < input   type= "text"   placeholder= "请输入1"   onchange= "console. log( '文本框下拉事件') ">
     < input   type= "submit"   value= "提交"  >
     < input   type= "reset"   value= "重置">
     < select   onchange= "console. log( '下拉事件触发了') ">
         < option> 湖南</ option>
         < option> 山西</ option>
         < option> 广东</ option>
     select>
     < input   type= "text"   placeholder= "请输入2"   onselect= "console. log( '文本被选中时触发') ">
     < input   type= "text"   placeholder= "请输入3"   onfocus= "console. log( '获取焦点') ">
     < input   type= "text"   placeholder= "请输入4"   onblur= "console. log( '失去焦点') ">
     
     < input   type= "text"   onkeydown= "console. log( '键盘被按下') ">
     < input   type= "text"   onkeypress= "console. log( '键盘被按下又松开,中文无效') ">
     < input   type= "text"   onkeyup= "console. log( '键盘松开') ">
     < input   type= "text"   onkeycode= "console.log('键盘哪个键被按下了')">
</ form>

< input type= "button" value= "点击" id= "but">

//  2.事件监听不会出现覆盖现象每个绑事件都会被触发,用以处理多个绑定事件:
var  but   =  document. querySelector( '#but') ;
//  console.log(but);
function   one()  {
     console. log( '第一次点击') ;
}
function   two()  {
     console. log( '第二次点击') ;
}
function   three()  {
     console. log( '第三次点击') ;
}
//  使用绑定事件监听函数,DOM对象(元素).addEventListener(事件名称,处理函数,false)
//  前缀加on不触发事件,例:'onclick';兼容IE8及以下版本:but.attachEvent('onclick',one);
but. addEventListener( 'click' , one , false) ;
but. addEventListener( 'click' , two , false) ;
but. addEventListener( 'click' , three , false) ;

< input type= "text" id= "tet" value= "请输入..."/>
< button id= "but"> 查询信息</ button>

//  点击查询案例:
//传谁的id就获得谁
function   fun( id){ return  document. getElementById( id) ;} //就是用来获取元素的
fun( "but"). onclick   =  function(){
     if( fun( "tet").value   ==   "班长"){
         alert( "恭喜查询成功") ;
     } else{
         alert( "没有此人") ;
     }
}

< div   id= "box">
     < ul>
         < li   id= "l1">< img   src= "images/01.jpg"></ li>
         < li   id= "l2">< img   src= "images/02.jpg"></ li>
         < li   id= "l3">< img   src= "images/03.jpg"></ li>
         < li   id= "l4">< img   src= "images/04.jpg"></ li>
         < li   id= "l5">< img   src= "images/05.jpg"></ li>
     ul>
</ div>
< div   id= "box1">
     < input   type= "text"   value= "请搜索"   id= "sousuo">
     < button   id= "bt"></ button>
</ div>

//  (鼠标悬浮放大案例)
var  box   =  document. getElementById( "box") ;
//  console.log(box);
function   nex( liid , bg){
     var  dian   =  document. getElementById( liid) ;
     dian.onmouseover   =  function  (){
       box.style.backgroundImage   =   bg ;
     }
}
nex( 'l1' , "url(images/01big.jpg)") ;
nex( 'l2' , "url(images/02big.jpg)") ;
nex( 'l3' , "url(images/03big.jpg)") ;
nex( 'l4' , "url(images/04big.jpg)") ;
nex( 'l5' , "url(images/05big.jpg)") ;

< input type= "text" id= "tet" value= "请输入..."/>
< button id= "but"> 查询信息</ button>

//  点击查询案例:
传谁的id就获得谁
function   fun( id){ return  document. getElementById( id) ;} //就是用来获取元素的
fun( "but"). onclick   =  function(){
     if( fun( "tet").value   ==   "班长"){
         alert( "恭喜查询成功") ;
     } else{
         alert( "没有此人") ;
     }
}

< select   id= "select">
        < option   value= "1"> 春天</ option>
        < option   value= "2"> 夏天</ option>
        < option   value= "3"> 秋天</ option>
        < option   value= "4"> 冬天</ option>
</ select>

   //  取得元素
var   select   =   document. getElementById( 'select') ;
   //  绑定下拉事件
   select. onchange   =  function(){
   //  alert('改天了');
       switch  ( this.value){
           case   '1' :
               document.body.style.backgroundImage   =   "url(春夏秋冬/春天.jpg)"
               break ;
           case   '2' :
               document.body.style.backgroundImage   =   "url(春夏秋冬/夏天.jpg)"
               break ;
           case   '3' :
               document.body.style.backgroundImage   =   "url(春夏秋冬/秋天.jpg)"
               break ;
           case   '4' :
               document.body.style.backgroundImage   =   "url(春夏秋冬/冬天.jpg)"
               break ;
         }
    }

12.命名空间,多个JS文件调用:

< script type= "text/javascript" src= "./junjun.js"></ script>
< script type= "text/javascript" src= "./tianju.js"></ script>
a.hanshu1();b.hanshu1();

13.定时器:

< div   id= "box">
     < button   class= "stop"> 点击时间停止</ button>
     < div   class= "time"></ div>
</ div>

//  定时器:  d.style.left=200+'px';(左边位置挪动200px).
//  一次调用setTimeout(),过一段时间做某件事;
function   eat( nexter)  {
     document. write( '吃饭' + '<br>') ;
     document. write( nexter) ;
}
var  cleartime   =   setTimeout( eat , 3000) ;   //(调用对象,延迟时间)
//  setTimeout(eat('开始调用'),5000);    //代入

//  清除定时器;
clearTimeout(clearring) ;

//  清除定时器案例:
var  d   =  document. querySelector( '.time') ;
function   boom()  {
     document. write( '炸掉') ;
}
var  clearring   =   setTimeout( boom , 5000) ;
d.onclick   =  function  ()  {
     clearTimeout(clearring) ;
}

//  循环调用,setInterval,每间隔多少时间调用一次;
var  d   =  document. querySelector( '.time') ;
//
//  var  a  =  setInterval(function  ()  {
//      document.write('洗刷刷'+'
');
//  },1000);
setInterval( function  ()  {
     d.style.left   =   200 + 'px' ;
} , 3000) ;
清除倒计时 :toLocaleTimeString() ,根据本地时间把Date对象的时间部分转化为字符串 ;
function   myTimer()  {
     var  d   =  new  Date() ;
     var  time   =  d. toLocaleTimeString() ;
     document. querySelector( '.time').innerHTML   =  time ;
}
var  a   =   setInterval( function  ()  {
     myTimer() ;
} , 1000) ;
//  //  点击停止:
var  stop   =  document. querySelector( '.stop') ;
stop.onclick   =  function  ()  {
     clearTimeout(a) ;
}

< div   id= "box">
     
     < div   id= "box1"   style= " left:   - 360 px ; ">
         < img   src= "images/01big.jpg"   alt= "">
         < img   src= "images/02big.jpg"   alt= "">
         < img   src= "images/03big.jpg"   alt= "">
         < img   src= "images/04big.jpg"   alt= "">
         < img   src= "images/05big.jpg"   alt= "">
         < img   src= "images/01big.jpg"   alt= "">
     div>
     
     < div   id= "buttons">
         < span   index= "1"   class= "one"></ span>
         < span   index= "2"></ span>
         < span   index= "3"></ span>
         < span   index= "4"></ span>
         < span   index= "5"></ span>
     div>
     
     < a   href= "javascript:;"   id= "left"   class= "but"> <</ a>
     < a   href= "javascript:;"   id= "right"   class= "but"> ></ a>
</ div>

//  轮播图案例##############################################################:
//  多图大盒子
var  list   =  document. querySelector( "#box1") ;
//  左边控件
var  prev   =  document. querySelector( "#left") ;
//  右边控件
var  next   =  document. querySelector( "#right") ;

//  为切换按钮绑定事件,点击按钮调用切换图片的功能实现函数
prev.onclick   =  function(){
     animation( 360) ;
}
//  点击按钮调用切换图片的功能实现函数
next.onclick   =  function(){
     animation( - 360) ;
}
//  当点击切换按钮时执行的功能
function   animation( offset){
     //获取上一次的定位的值(list.style.left的值为字符串类型)
     var  left   =   parseInt(list.style.left) ;   //-600
     //  计算新的需要设置的定位值
     var  newLeft   =  left   +   offset ;
     //  list.style.left需要设置字符串,使用js给元素设置属性
     list.style.left   =  newLeft   +   "px" ;
     //判断左右极限位置做特殊设置,当切换到第七张显示时回到第二张
     if  (newLeft <- 1800)  {
         list.style.left   =  - 360   +   "px" ;
     }
     //  当切换到第一张显示时回到第六张
     if  (newLeft >- 360)  {
         list.style.left   =  - 1800   +   "px" ;
     }
}

//-----------------定时器轮播
var  timer ;
function   play(){
     timer   =  window. setInterval( function(){
         animation( - 360)
     } , 2000)
}
play() ;
//-------------------  光标悬停
var  container   =  document. querySelector( '#box') ;
function   stop()  {
     window. clearInterval(timer) ;
}
container.onmouseover   =   stop ;
container.onmouseout   =   play ;
//  切换图片显示,小圆圈同步:
var  buttons   =  document. querySelector( '#buttons'). querySelectorAll( 'span') ;
console. log(buttons) ;
var  index   =   1 ;
function   buttonsShow()  {
     //这里需要清除之前的样式
     for  ( var  i   =   0 ;  i   <  buttons.length ;  i ++)  {
         if  (buttons[i].className   ==   'one')  {
             buttons[i].className   =   '' ;
         }
     }
     //数组从0开始，故index需要-1
     buttons[index   -   1].className   =   'one' ;
}
prev.onclick   =  function()  {
     index   -=   1 ;
     if  (index   <   1)  {
         index   =   5 ;
     }
     buttonsShow() ;
     animation( 360) ;
}
next.onclick   =  function()  {
     //由于上边定时器的作用，index会一直递增下去，我们只有5个小圆点，所以需要做出判断
     index   +=   1 ;
     if  (index   >   5)  {
         index   =   1 ;
     }
     buttonsShow() ;
     animation( - 360) ;
}
//  ===========点击小圆圈同步图片
for  ( var  i   =   0 ;  i   <  buttons.length ;  i ++)  {
     //  这里使用的是匿名函数立即执行，（使用闭包）
     ( function( i)  {
         buttons[ i]. onclick   =  function()  {
             var  clickIndex   =   parseInt( this. getAttribute( 'index')) ;
             var  offset   =   360   *  (index   -  clickIndex) ;
             animation(offset) ;
             index   =  clickIndex ;
             buttonsShow() ;
         }
     })(i) ;
}

< div   id= "one">
     < ul>
         < li>< img   src= "04.jpg"></ li>
         < li>< img   src= "01.jpg"></ li>
         < li>< img   src= "02.jpg"></ li>
         < li>< img   src= "03.jpg"></ li>
         < li>< img   src= "04.jpg"></ li>
         < li>< img   src= "01.jpg"></ li>
     ul>
</ div>

/*滚动轮播图案例:*/
#one{
     width:   600 px ;
     height:   200 px ;
     margin:   100 px  auto ;
     position:   relative ;
     overflow:   hidden ;
}
ul  li{
     list-style:   none ;
     float:   left ;
}
ul{
     position:   absolute ;
     width:   300 % ;
}
. yuan{
     position:   absolute ;
     left:   50 % ;
     margin-left:   - 50 px ;
     bottom:   10 px ;
}
. yuan   span{
     float:   left ;
     width:   18 px ;
     height:   18 px ;
     background-color:   pink ;
     text-align:   center ;
     line-height:   18 px ;
     margin-right: 10 px ;
     border-radius:   50 % ;
     cursor:   pointer ;
}
. zuo   span{
     width: 38 px ;
     height:   38 px ;
     position:   absolute ;
     background:   #000 ;
     cursor:   pointer ;
     color:   #ffffff ;
     line-height:   38 px ;
     text-align:   center ;
     font-family:   '黑体' ;
     font-size:   30 px ;
     opacity:   0.3 ;
     border:   1 px  solid   #ffffff ;
     left:   5 px ;
     top  : 50 % ;
}
. you   span{
     width: 38 px ;
     height:   38 px ;
     position:   absolute ;
     background:   #000 ;
     cursor:   pointer ;
     color:   #ffffff ;
     line-height:   38 px ;
     text-align:   center ;
     font-family:   '黑体' ;
     font-size:   30 px ;
     opacity:   0.3 ;
     border:   1 px  solid   #ffffff ;
     right:   5 px ;
     top  : 50 % ;
}

//  获取所有的属性:
function  nex(TagName)  { return  document.getElementsByTagName(TagName)}
var  ul   =  nex( 'ul')[ 0] ;       //  第一个UL
var  div   =  nex( 'div')[ 0] ;     //  第一个DIV
var  img   =  nex( 'img') ;         //  所有的图片....
//  定时器10毫秒调用一次,clock名字;
time   =  setInterval(clock , 10) ;
//  起始位置为0:
var  le   =   0 ;
function  clock()  {
     le -- ;
     if  (le <=- 1200){
         //  (定了起始位置,如果小于1200的话就归0位)
         le   =   0 ;
     }
     //  ul的左边位置=le的长度;
     ul.style.left   =  le   +   "px" ;
}
//  鼠标放入图片盒子停止定时器:
div.onmouseover   =  function  ()  {
     clearInterval(time) ;
}
//  鼠标移出调用定时器
div.onmouseout   =  function  ()  {
     time   =  setInterval(clock , 10) ;
}
//  (创建个div盒子)
var  newBox   =  document.createElement( 'div') ;
//  console.log(newBox);
//  (设置小圆点的元素节点属性)
newBox.setAttribute( 'class' , 'yuan') ;
//  (把div添加到主盒子中,把放圆的盒子放入主盒子中)
div.appendChild(newBox) ;
for  ( var  i = 0 ;i <img.length ;i ++){
     //  (创建span元素节点)
     var  span   =  document.createElement( 'span') ;
     //  (每次循环给span添加文字,从1开始)
     span.innerHTML   =  i   +   1 ;
     //  (把span插入新的div中)
     newBox.appendChild(span) ;
}
//  创建2个div,作为左右箭头:
var  newBox1   =  document.createElement( 'div') ;
var  newBox2   =  document.createElement( 'div') ;
//  放入图片盒子中
div.appendChild(newBox1) ;
div.appendChild(newBox2) ;
//  给2个DIV添加样式:
newBox1.setAttribute( 'class' , 'zuo') ;
newBox2.setAttribute( 'class' , 'you') ;
//  创建2两个span标签
var  span1   =  document.createElement( 'span') ;
var  span2   =  document.createElement( 'span') ;
//  放入左右div中
newBox1.appendChild(span1) ;
newBox2.appendChild(span2) ;
//  左右span内容为左右箭头:
span1.innerHTML   =   "<" ;
span2.innerHTML   =   ">" ;

<div   class= "father" >
    <div   class= "clock-h"   id= "div-h" ></div>
    <div   class= "clock-m"   id= "div-m" ></div>
    <div   class= "clock-s"   id= "div-s" ></div>
</div>

/*定时器案例*/
div. father{
     width: 600 px ;
     height:   600 px ;
     background: url( images/clock.jpg)   no-repeat ;
     margin:   10 px  auto ;
     position:   relative ;
}
. father   div. clock-h{
     background:   url( images/hour.png)   no-repeat  center  center ;
}
. father   div. clock-m{
     background:   url( images/minute.png)   no-repeat  center  center ;
}
. father   div. clock-s{
     background: url( images/second.png)   no-repeat  center  center ;
}
. father   div{
     height:   100% ;
     width:   100% ;
     position:   absolute ;
     left:   0 ;
     top:   0 ;
}
. test{
     height:   100 px ;
     background-color:   red ;
}

//  定时器案例,获取时钟div
var  hour  =   document. getElementById( "div-h") ;
var  minute  =   document. getElementById( "div-m") ;
var  second  =   document. getElementById( "div-s") ;
     var  ms= 0 ,s= 0 ,m= 0 ,h= 0 ;
     //设置定时器，时间的取值单位为毫秒
    //需要设置两个参数  第一个参数为需要执行的操作   第二个参数为调用的间隔时间
     var   test  =   function(){
     //  根据当前的小时数  分钟数  秒数  计算出指针相对应的旋转角度
    //获取当前时间
     var  date  =   new  Date() ;
     //  console.log(date);
       ms  =  date. getMilliseconds() ;
     //获取当前的秒钟  精确到0.1秒
     s  =  date. getSeconds()  +  ms/ 1000 ;
     //获取当前的分钟  精确到0.1分
     m  =  date. getMinutes()  +  s/ 60 ;
     //获取当前的小时  精确到分钟
     h  =  date. getHours()  +  m/ 60 ;
     hour. style. transform  =   "rotate("+  h* 30  + "deg)" ;
     minute. style. transform  =   "rotate("+  m* 6  + "deg)" ;
     second. style. transform  =   "rotate("+  s* 6  + "deg)" ;
     console. log(s) ;
     }
     setInterval( test , 1000) ;

<div id= "demo" ></div>

//  网页倒计时案例
var  demo  =   document. getElementById( 'demo') ;
var  count  =   5 ;
setInterval( goIndex , 1000) ; //只调用一次
function   goIndex(){
     count-- ;
     demo. innerHTML  =   "<a  href='http://www.baidu.com'>本页面将在"+count+ "秒之后跳转</a>"
     if  (count<= 0){
         //跳转页面(自动跳转)    window.location窗口事件
         window. location. href  =   'http://www.baidu.com' ;
     }
}

14.对象Object :

//  创建对象:
//  对象具有两大特性:1.静态特征;  2.是其功能,具体到程序里面对象的静态特征称之为对象的属性,功能称之为对象的方法;
//  1.字面量创建对象,使用new关键字生成一个对象,newObject():
var  myDate   =  new  Object() ;
//  设置对象的属性,通过点语法设置对象的属性,这里点语法表示setter方法(设置器方法)
myDate.name   =   '小明' ;
myDate.age   =   20 ;
//  访问属性,通过点语法获取对象的属性:
var  name   =  myDate.name ;
//  console.log(name);
document. write( 'hello' +myDate.name + '<br>' + 'yourage:' +myDate.age) ;

//  对象字面量创建:
var  myDate1   =  {
     //  创建对象时添加属性方法:添加属性  属性名:属性值  通过字段定义;
     name :   '小王' ,
     age :   18 ,
     //  用字符串定义属性名
     'love' :   '小郑' ,
     //  在对象中定义方法:  方法名:函数;
     loves :function  ()  {
         console. log( 'hello' +this.name + '.') ;
         console. log( 'age:' +this.age + '.') ;
         console. log( 'love:' +this.love + '.') ;
     }
} ;
//  更改里面的属性,两种方法:
myDate1.name   =   '小红' ;
myDate1[ 'love']   =   '小李' ;
//  对象中定义方法的返回值:
myDate1. loves() ;
//  给对象添加新的属性:
myDate1.xin   =   '新属性' ;
//  给对象添加新的方法:
myDate1. xin1   =  function  ()  {
     console. log( 'hello' +this.name + '.') ;   //没显示,没报错;
}
//  检查对象是否拥有某个属性,in:
var  hasname   =   'name'   in  myDate1 ;   //返回布尔值;
console. log(hasname) ;
console. log(myDate1) ;     //打印为Obect对象格式;
//  删除属性或者方法
delete  myDate1.xin1 ;
var  hasname1   =   'xin1'   in  myDate1 ;   //返回布尔值;
console. log(hasname1) ;
//  基本数据类型  不能动态的添加属性方法;
var  n1   =   100 ;
n1.name   =   '基本数据类型' ;
console. log(n1.name) ;     //  结果为:undefined

//  复制基本类型与引用类型的区别:
//  复制简单数据类型
var  a   =   100 ;
var  b   =  a ;
a   =  a + 50 ;
console. log(a ,b) ;
//  复制引用数据类型:
var  copy   =  new  Object() ;
copy.name   =   '王宝强' ;
//  复制操作将copy的内存地址赋给copy1;
//  copy,copy1  两个变量存放的是同一个对象的内存地址,都去引用同一个对象,一旦发生修改就会全部修改;
var  copy1   =  copy ;
console. log(copy ,copy1) ;
copy1.name   =   '马蓉' ;
console. log(copy ,copy1) ;   //  copy1对象修改内容,copy对象的内容也被修改了;

//  变量的类型检测:
var  a1 = 1 ,b1 = '检测' ,c =true ,d =undefined ,e =null ;
var  f   =  new  Object() ;
var  g   =  [ 1 , 2 , 3] ;
console. log( typeof(a1)) ;
console. log( typeof(b1)) ;
console. log( typeof(c)) ;
console. log( typeof(d)) ;
console. log( typeof(e)) ;
console. log( typeof(f)) ;     //  自定义对象;
console. log( typeof(g)) ;     //  数组对象;
//  创建正则对象
var  h   =  new  RegExp() ;
//  创建字符串对象
var  i   =  new  String() ;
//  创建数字对象
var  j   =  new  Number() ;
console. log(h) ;
console. log(i) ;
console. log(j) ;
//  判断不同对象类型:instanceof  object/Array,判断对象时否为对象/数组,布尔类型;
console. log(f   instanceof  Object) ;
console. log(g   instanceof  Array) ;
console. log(h   instanceof  RegExp) ;
console. log(i   instanceof  String) ;
console. log(j   instanceof  Number) ;

//  工厂模式:封装函数,多次调用,解决代码沉余问题,创建的是一类对象,泛指;
function   creatStudent( name , age , class1){
     var  obj   =  {}
     obj.name   =   name ;
     obj.age   =   age ;
     obj.class1   =   class1 ;
     obj. study   =  function  (){
         console. log( this.name +this.age +this.class1 + '认真搞学习') ;
     }
     return  obj ;
}
//实例化具体的对象
var  obj1   =   creatStudent( '小王' , 18 , '1班') ;
var  obj2   =   creatStudent( '小王他哥' , 19 , '2班') ;
var  obj3   =   creatStudent( '小王他大哥' , 20 , '3班') ;
obj1.study() ;
obj2.study() ;
obj3.study() ;
console. log( typeof  obj1) ;   //检测类型,为对象类型
console. log(obj1   instanceof  Object) ; //检测是否是某一个类型,布尔值true/false;

//  构造函数:
//  构造函数
//  注意点:构造函数的函数名必须大写(用来和普通函数区分)
function   Student( name , age){
     //  var  obj  =  new  Object()//内部已经帮我们做了
     this.name   =   name ;
     this.age   =   age ;
     this. sing   =  function  (){
         console. log( this.name   +  this.age   + '会唱五环之歌') ;
     }
     //  return  obj;   //内部已经帮我们做了
}
//具体实例化对象
var  s1   =    new   Student( '小明' , 8) ;
var  s2   =    new   Student( '小红' , 9) ;
console. log(s1   instanceof   Student)   //
s1.sing() ;
s2.sing() ;

//通过构造函数创建老师类
function   Teacher( name , age){
     //  这里面的this:当我们在实例化对象的时候,这里面的this就指向当前实例化的那个对象
     //  var  obj  =  new  Object()//内部已经帮我们做了
     this.name   =   name ;
     this.age   =   age ;
     this. sing   =  function  (){
         console. log( this.name   +  this.age   + '会唱五环之歌') ;
     }
     //  return  obj;   //内部已经帮我们做了
}
var  laowang   =   new   Teacher( '王老师' , 30) ;
var  xiaowang   =  new   Teacher( '老王' , 28) ;
console. log(laowang) ;
console. log(xiaowang) ;
console. log(laowang   instanceof   Student) ;

//  单例模式:
//  什么是单例:   类型  ---->实例对象(唯一一种)
//  汽车(类)----->
//  什么是单例:使用单例模式创建的对象在程序中有且只有一种,
var  box   =  ( function(){
     function   Car  (){}     //局部的构造函数,外界不能拿到这个构造函数
     var  c   =   new   Car() ;   //根据类型实例化对象
     c.name   =   '玛莎拉蒂' ;
     c. run   =function(){
         console. log( '这是一辆汽车,可以跑') ;
     }
     return  c ;
})() ;
//  new  Car();  //外界不能实例化Car
box.name ;
box. run() ;

//  访问私有变量;
( function  (){
     //创建私有变量
     var   a =   200 ;
     function   f1(){
         return  a ;
     }
     //  function  Box(){}    //这样写是局部的
     Box   =  function  (){} ;   //Box会被视为全局变量
     //创建公开访问的方法
     Box.prototype. publick   =  function(){
         return   f1() ;
     }
     Box.prototype. setA   =  function( num){
         a   =   num ;
     }
})()
var  b1   =  new  Box() ;
console. log(b1.publick()) ;   //200
b1.setA( 200) ;
console. log(b1.publick()) ;   //200
var  b2   =  new  Box() ;
console. log(b2.publick())   //200     a现在变成静态属性

//  演奏案例:
//  乐器:  钢琴,小提琴   属性:价格
//  演奏家:演奏乐器
//  演奏家可以使用各种乐器,  实现输入1:演奏家演奏钢琴,输入2:演奏家演奏小提琴
//  乐器类
function   Insturn( name , price){
     this.name   =   name ;
     this.price   =   price ;
}
//人类
function   Performer(){
     this. play   =  function  ( insturn){
         alert( '演奏家演奏的' + insturn.name +   '价格为' + insturn.price) ;
     }
}
function   Paion( name , price){
     Insturn. call( this , name , price) ;   //对象冒充
}
function   Violin( name , price){
     Insturn. call( this , name , price) ;   //对象冒充
}
//创建实例对象
var  actor   =  new   Performer() ;
//  var  paino  =   new  Insturn('钢琴',  2000);
//  var  violin  =   new  Insturn('小提琴',  2000);
var  p   =  new   Paion( '钢琴' ,   2000) ;
var  v   =  new   Violin( '小提琴' ,   1000) ;
//实现演奏
var  choice =   prompt( '请输入1(演奏钢琴)或输入2(演奏小提琴)') ;
if  (choice   ==   '1'){
     actor. play(p)
} else  if(choice   ==   '2'){
     actor. play(v)
}

15.原型:

//  原型:
//  什么是原型:在js中所有的函数(构造函数,普通函数....),都有一个prototype属性,
//  这个属性引用了一个对象，即原型对象，也简称原型,也就是说通过这个属性可以访问到函数上面的原型对象
//  原型的特点:  如果在原型上添加了属性和方法,那么实例化出来的所有实例对象,都有原型上的属性和方法,并且一模一样,这样通过
//  原型对象就实现了数据共享,这是最大的有点也是最大的缺点
function   Student( name){
     this.name   =   name ;
}
//在构造函数的原型上添加属性,prototype  属性使您有能力向对象添加属性和方法。
Student.prototype.name   =   '老王' ;
Student.prototype.age   =   18 ;
//在构造函数的原型上添加方法
Student.prototype. sing   =  function  (){
     console. log( this.name +this.age + "五环之歌") ;
}
console. log( Student.prototype) ;   //Student.prototype:通过函数名访问原型
var  s1   =   new   Student() ;
var  s2   =   new   Student() ;
var  s3   =   new   Student( '小王') ;   //如果属性里面有,就直接返回,不回去原型上找
console. log(s3.name) ;
console. log(s3.age) ; //如果在类的属性没有找到某一个属性,就会去这个类的原型上找

//  使用构造函数
function   Student( name , age){
     this.name   =   name ;   //实例化属性
     this.age   =   age ;
     this. study   =  function  (){
         console. log( '好好学习') ;
     }
}
//在原型上添加属性
Student.prototype.schoolname   =   9 ;
//根据指定类型创建具体的对象=====>实例化对象
//只要是通过构造函数实例化出的对象,都会访问过该构造函数的原型
var  s1   =   new   Student( '老王' , 20) ;
//原型对象:每一个函数都有原型
console. log(   Student.prototype) ;   //通过prototype属性访问原型对象
console. log(  s1. __proto__) ;
console. log(  s1.constructor) ;   //这样访问可以拿到当前的构造函数
console. log( Student.prototype. isPrototypeOf(s1)) ;
function   Teacher  ( height){
     this.height   =   height ;
} ;
//创建一个构造函数
//在构造函数的原型上面添加属性和方法
Teacher.prototype.name   =   'Lee' ;
Teacher.prototype.age   =   18 ;
Teacher.prototype. run   =  function(){
     console. log( '开始跑') ;
}
var  t1   =   new   Teacher() ;
var  t2   =   new   Teacher() ;
console. log(t1.name) ;
//在外面给t1对象,另外添加一个name属性
t1.name   =   'Hi' ;
delete  t1.name ;
console. log(t1.name) ;   //就近打印出来的是Hi
console. log(t2.name) ;
//hasOwnProperty:用来判断某一个属性是在实例属性还是在原型对象上,如果在实例属性上就返回true,反之就是false
console. log(t2. hasOwnProperty( 'height')) ;
var  obj   ={
     name : 'li' ,
     age : 18
}

//  字面量方式创建原型:
function   Student  (){}
//通过字面量的方式给原型添加属性
Student.prototype   ={
     name : 'Li' ,
     age : 18 ,
     //由于{}相当于已经创建了一个新的Object类型的对象,需要我们手动将当前的原型指向当前的构造函数
     constructor : Student
}
Student.prototype.name   =   'Li' ;
var  s1   =   new   Student() ;
var  s2   =   new   Student() ;
console. log(s1.name) ; //undefined
console. log(s2.name) ; //undefined
console. log(s1.height) ;
//内置引用型,也有原型
var  arry   =    new   Array() ;
console. log( typeof  arry) ;
console. log(String.prototype) ; //如果可以访问到,说明内置型也有也有原型
console. log(Array.prototype. sort) ;
console. log(String.prototype. substring) ;
//给String的原型上手动添加了一个方法(一般不这样做,有风险)
String.prototype. addstring   =  function(){
     console. log( '被添加了') ;
}
console. log( 'LILI'.addstring) ;

//  汽车案例:
//  创建汽车类型(品牌,排量,开始,停止)
function   Car  ( brand , displacment){
     //实例化属性
     this.brand   =   brand ;
     this.displacment   =   displacment ;
}
//车子启动和停止的方法添加到原型上(因为这两个方法是所有的实例对象都要有的属性)
Car.prototype. start   =  function  (){
     console. log( '排量为' +  this.displacment   + '的'   +  this.brand + '小汽车启动了') ;
}
Car.prototype. stop   =  function(){
     console. log( '排量为' +  this.displacment   + '的'   +  this.brand + '小汽车停止了') ;
}
//通过类创建具体的实例对象
var  ms   =   new   Car( '玛莎拉蒂' , 2.0) ;
ms.start() ;
ms. stop() ;
//创建车灯对象
function   Lamp(){
     this. open   =  function  (){
         console. log( '车灯打开了') ;
     }
     this. close   =  function(){
         console. log( '车灯关闭了') ;
     }
}
var  lamp   =   new   Lamp() ;
lamp. open() ;
lamp. close() ;

function   Car2  ( brand , displacment , lamp){
     this.brand   =   brand ;
     this.displacment   =   displacment ;
     this.lamp   =   lamp ;
     this. start   =  function  (){
         this.lamp. open() ;
         console. log( '排量为' +  this.displacment   + '的'   +  this.brand + '小汽车车灯打开了然后启动了') ;
     }
     this. stop   =  function  (){
         this.lamp. close() ;
         console. log( '排量为' +  this.displacment   + '的'   +  this.brand + '车灯关了小汽车停止了') ;
     }
}
var  c2   =   new   Car2( '法拉利' , 2.0 , Lamp) ;
c2.start() ;
c2. stop() ;

//  原型链的继承:
//继承:一个对象继承与另外一个对象,同时继承了他的属性和方法
//被继承类型(父类型)和继承类型(子类型)
function   Parent( name , age){
     this.name   =   name ;
     this.age   =   age ;
     this. sleep   =  function  (){
         console. log( "睡觉")
     }
}
function   Son1  ( height){
     this.height   =   height ;
}
//  new  Parent()就是创建了一个实例对象,因为实例对象本身带有属性和方法,然后交给Son的原型
Son1.prototype   =  new   Parent( '小黄' , 40) ;
var  s1   =   new   Son1( 185) ;
console. log(s1.name) ;
console. log(s1.age) ;
s1.sleep() ;
function   Son2(){
}
Son2.prototype   =   new   Son1( 186) ;
var  s2   =  new   Son2() ;
console. log(s2.name) ;
console. log(s2.age) ;
s2.sleep() ;
console. log(s1   instanceof   Parent) ;   //ture
console. log(s1   instanceof   Son1) ;     //ture
console. log(s2   instanceof   Parent) ;     //ture
console. log(s2   instanceof   Son1) ;     //ture
console. log(s1   instanceof   Son2) ;     //false

//  组合继承:
function   Parent( name , age){
     this.name   =   name ;
     this.age   =   age ;
}
//  prototype向对象添加属性和方法;
Parent.prototype.sleep(){
     console. log( '睡觉了') ;
}
function   Son( name , age){
     //使用对象冒充,用对象Parent替换当前对象apply();
     Parent. apply( this ,[ name , age]) ;
}
//原型链继承
Son.prototype   =  new   Parent() ;
//组合继承可以实现个性化(对象冒充)   //原型链继承实现共享
var  xiao   =   new   Son( '小明' , 17) ;   //
var  did   =    new   son( '小明弟弟' , 16) ;

15.闭包与匿名函数:

//  闭包与匿名函数:
//  匿名函数:就是没有名字的函数
//  闭包:  是一种特殊的匿名函数,能够访问另一个函数作用域中变量的函数;
//  声明普通函数
function   sun( a ,   b)  {
     return   a   +   b ;
}
var  he   =   sun( 10 , 10) ;
console. log(he) ;
//  声明匿名函数
//  直接将匿名函数放在程序中会报错
//  function  (){
//      return  1;
//  }
//  解决的第一种办法：使用直接量来接收
var   f1   =  function  (){
     var  a =   100 ;
     return  a ;
} ;
f1() ;
console. log( f1) ;
//  解决的第二种办法：匿名函数的自我执行
( function  (){
     console. log( "匿名函数自执行") ;
})() ;
//匿名函数的传递参数问题
( function  ( a , b){
     console. log( a + b) ;
     console. log( this) ;
})( 10 , 20) ;
//  闭包:  是一种特殊的匿名函数,能够访问另一个函数作用域中变量的函数;
//  function  fa(){
//      var  a  =  100;
//      (function  (){
//          alert(++a);
//      })();
//  }
//  fa();
function   fun(){
     var  a   =   100 ;
     var  b   =   200 ;
     return  function  (){
         console. log(a ,b) ;
         return  a +b ;
     }
}
console. log( fun()) ;
console. log( fun()()) ;   //输出内层函数执行的结果,100  200     300;

function   fd(){
     var  a   =   100 ;
     return  function  (){
         ++a ;
         return  a ;
     }
}
var  box   =   fd() ;
console. log(box()) ;
console. log(box()) ;
console. log(box()) ;

< button   id= "but1">
     向前跑
</ button>
< button   id= "but2">
     向后跑
</ button>
< div   id= "box"></ div>

//  闭包案例,点击div移动:
var  but1   =  document. getElementById( 'but1') ;
var  but2   =  document. getElementById( 'but2') ;
var  div   =  document. getElementById( 'box') ;
function   move  (){
     return  function(){
         div.style.left   =  div.offsetLeft   + 30 + 'px' ;
     }
}
var  demo   =   move() ;
but1.onclick   =  demo ;

function   move2  (){
     return  function(){
         div.style.left   =  div.offsetLeft   +  ( - 30)   + 'px' ;
     }
}
var  demo2   =   move2() ;
but2.onclick   =  demo2 ;

//  循环闭包:
function   box(){
     var  arr   =  [] ;
     for  ( var  i   =   0 ;i < 5 ;i ++)  {
         arr[i]   =  ( function  (){
             return  function  (){
                 return  i ;
             } ;
         })() ;
     }
     return  arr ;
}
var  b   =   box() ;
console. log(b) ;
for  (   var  i   =   0 ;i   <  b.length ;i ++)  {
     console. log(b[i]()) ;
}

//  闭包中的this:
var  name   =   "THE  window" ;
var  obj   =  {
     name :   'THE  obj' ,
     getFunction   :  function  (){
         console. log( this.name) ;   //'THE  obj'
         return  function  (){
             console. log( this) ;   //obj2
             return  this.name ;   //'the  obj2'
         }
     }
}
var  obj2   =  {name   :   'the  obj2'}
//  apply()用一个对象替换当前对象:
console. log(obj. getFunction(). apply(obj2)) ;

16.排他思想:

< button> 排他思想</ button>
< button> 排他思想</ button>
< button> 排他思想</ button>
< button> 排他思想</ button>

/*排他思想:*/
. one{
     background-color:   red ;
}
button{
     height:   50 px ;
     outline:   none ;
}

//  排他思想:
//取得所有的button
var  buts   =  document. getElementsByTagName( "button") ;
//通过循环拿到每一个button
for  ( var  i   =   0 ;i <buts.length ;i ++)  {
     buts[i]. onclick   =  function(){
         for  ( var  j   =   0 ;j <buts.length ;j ++)  {
             buts[j].className   =   '' ;
         }
         this.className   =   'one' ;
     }
}

< div   id= "box">
     < div   id= "libox">
         < ul>
             < li> 新闻</ li>
             < li> 体育</ li>
             < li> 娱乐</ li>
             < li> 笑话</ li>
         ul>
     div>
     < p> 新闻版块</ p>
     < p> 体育版块</ p>
     < p> 娱乐版块</ p>
     < p> 笑话版块</ p>
</ div>

/*排他思想,内容切换*/
#box{
     width:   400 px ;
     height:   370 px ;
     margin:   100 px  auto ;
     overflow-y:   hidden ;
     /*background-color:  skyblue;*/
}
#libox{
     width:   400 px ;
     height:   35 px ;
     background-color:   #008080 ;
}
#libox   li{
     height:   35 px ;
     width:   100 px ;
     list-style:   none ;
     float:   left ;
     text-align:   center ;
     line-height:   35 px ;
}
#box   p{
     width:   400 px ;
     height:   335 px ;
     font:   700  35 px / 335 px   'sinsong' ;
     text-align:   center ;
     background-color:   #008040 ;
}

//  排他思想,内容切换:
//  (获取所有所需属性)
function   nex  ( TagName){ return  document. getElementsByTagName( TagName)}
//  console.log(nex);
//  (获取所有li)
var  li   =   nex( 'li') ;
//  (获取所有的p)
var   p   =   nex( 'p') ;
//  (取出所有的li遍历)
for( var  i = 0 ;i <li.length ;i ++){
     //  (获取每一个li)
     li[i].index   =  i ;
     //  (当指针悬浮在li标签上的时候)
     li[i]. onmouseover   =  function  (){
         for( var  j = 0 ;j <p.length ;j ++){
             p[j].style.display   =   'none' ;
             li[j].style.background   =   '#008080' ;
         }
         p[ this. index].style.display   =   'block' ;
         li[ this. index].style.background   =   '#008040' ;
     }
}

//  screen对象  left/top/x/y,不支持火狐;
screenLeft /screenTop  返回相当于屏幕X和Y的坐标 ;
//  不支持IE
screenX /screenY  返回相当于屏幕X和Y坐标 ;

17.正则表达式:

     //  正则表达式,对文本进行检测,是一个描述字符模式的对象,RegExp表示符;
     //  第一个参数使我们要匹配的字符;第二个参数是要匹配的模式
     //  第一种:通过new关键字创建
     var  reg1   =  new  RegExp( 'W' , 'g') ;
     //  第二种:通过字面量的方式创建一般用这种,用两个反斜杠,斜杠中间为匹配字符
     //  匹配模式在后面;
     //  i表示忽略大小写;   g表示全局匹配
     var  reg2   =   /e/ig ;
     //  正则表达式有两种测试方法
     //  test():测试是否匹配返回  true或false
     //  ese();执行匹配搜索,成功返回相关信息,失败返回null;

     //  string字符串类型有4种正则表达式方法:
     //  返回所有匹配到的结果;
     var  s   =   'hello' ;
     var  n   =   /e/ig ;
     console.log( /e/ig.test(s)) ;
     //  1.match(表达式)返回所有匹配到的内容;
     var  n1   =  s.match(n) ;
     console.log(n1) ;
     //  2.replace(表达式,替换内容)  替换匹配到的字符;
     var  s1   =  s.replace(n , 'a') ;
     console.log(s1) ;
     //  3.search(正则表达式)返回字符串中被匹配到的第一个字符的位置,如果没找到就返回-1;
     var  n2   =  s.search(n) ;
     console.log(n2) ;
     //  4.以被匹配到的字符为分隔符,分割为数组,原数组不受影响;
     var  s2   =  s.split(n) ;
     console.log(s2) ;

     //  正则表达式的RegExp静态属性,ipput;
     input            简写 :$_  当前被匹配的字符串 ;
     lastMatch        简写 :$ &  最后一个匹配字符串 ;
     lastParen        简写 :$ +  最后一对圆括号内的匹配字符串 ;
     //  leftContext      简写:$`  最后一次匹配左边的字符串;
     rightContext     简写 :$ '  在上次匹配之后右边的字符串;

     //  正则表达式重点:元字符,出了特殊字符使用多次外其他字符默认使用一次;
     //  /...../反斜杠后元字符将失去其特殊含义,变成普通字符;
     //  元字符:  以^开头以$结尾;
         //  {3}表示刚好只能放3个;
         //  检查邮政编码,有6位第一位不能为0;
               /i   :  忽略大小写 ;
               /g   :  全文查找出现的所有匹配字符 ;
               /m   :  多行查找 ;
               /gi   :  全文查找 ,忽略大小写 ;
               /ig   :  全文查找 ,忽略大小写 ;
                 .   :  匹配除换行符外的任意字符 ;
         [a -z0 - 9]   :  匹配括号中的字符集中的任意字符 ;
         [ ^a -z0 - 9]   :  匹配任意不在字符集中的字符 ;
               \d   :  匹配数字 ;
                 g   :  执行全局匹配 ;
               \D   :  匹配非数字 ;
               \w   :  匹配字母和数字及_ ;
               \W   :  匹配非字母和数字及_ ;
               \o   :  匹配null字符 ;
               \b   :  文本开头匹配是否到边界 ;
               \f   :  匹配进制字符 ,$1 -$99文本 ;
               \n   :  匹配换行符 ;
               \r   :  匹配回车字符 ;
               \t   :  匹配制表符 ;
               \s   :  匹配空白字符 ,空格  制表符和换行符 ;
               \S   :  匹配非空白字符 ;
         //  匹配重复字符:
               x ?  :  匹配0个或1个x ;
               x *  :  匹配0个或任意多个x ;
               x +  :  匹配至少1个x ;
           (xyz) +  :  匹配至少1个xyz ;
           x{m ,n}   :  匹配至少m个最多n个x ;
this/where /logo   :  匹配this  where或logo中的任意一个 ;

//  正则表达式的静态属性:
var  reg1   =   /google/ig ;
var  reg2   =   /g/ig ;
var  str   =   'This  is  google' ;
var  str2   =   'this  is  world' ;
console.log(reg1.test(str)) ;   //必须匹配一次,返回布尔值;全局匹配str中是否有字符串'google'
console.log(reg2.exec(str2)) ;   //  返回具体位置,失败为null,全局匹配str2中是否有g,结果为null
console.log(reg1.test(str2)) ;   //  全局匹配str2中是否有字符串google,false
console.log(reg2.exec(str)) ;     //  str中是否有字符串'g',返回字符串具体位置
console.log(RegExp.input ,RegExp.$_) ;       //拿到当前被匹配的字符串,如果是多次匹配,拿到的是第一次
console.log(RegExp[ '$&']) ;         //lastMatch多次匹配,拿到的是最后一次匹配的字符,匹配的是g

var  reg1   =   /l/ig ;
var  str   =   'hello  world  blue' ;
console. log(reg1.lastIndex) ;   //整数，代表下次匹配将从哪个字符位置开始
reg1.lastIndex   =   0 ;     //强行重新开始(用的不多)

//1.元字符都带有一定的特定含义;2.给元字符加上/,他就失去了意义,就是表示一个普通的字符
var  str   =   '_Bl123l06A这是一个界面很low的网站' ;
var  reg1   =   /./ig ;   //.:匹配除换行符外的任意字符
var  reg2   =   /[a-z0-9]/g ;   //匹配括号中的字符集中的任意字符,只能匹配一个
var  reg3   =   /[^A-Z0-9]/ ;   //匹配非括号中的字符集中的任意字符,只能匹配一个
var  reg4   =   /\d/ ;         //匹配数字
var  reg5   =   /\D/ ;       //匹配非数字，同[^0-9]相同
var  reg6   =   /\w/ ;       //匹配字母和数字及_
var  reg7   =   /\W/ ;       //匹配非字母和数字及_
console. log(reg1. exec(str)) ;
console. log(reg2. exec(str)) ;
console. log(reg3. exec(str)) ;
console. log(reg4. exec(str)) ;
console. log(reg5. exec(str)) ;
console. log(reg6. exec(str)) ;
console. log(reg7. exec(str)) ;
var  reg1   =   /k[0-9]?/ ;     //x?:匹配0个或1个x
var  str   =   'lk8ll' ;
console. log(reg1. exec(str)) ;
var  reg2   =   /[a-z]*/ ;       //x*:匹配0个或任意多个x
var  str1   = 'lelloworld' ;
console. log(reg2. exec(str1)) ;
var  reg3   =   /abc+bnh/         //X+:匹配至少一个x
var  str3   =   'nhabbnhkkk' ;
console. log(reg3. exec(str3)) ;
var  reg4   =   /g(og)+le/ ;     //()括起来就代表一个整体
var  str4   =   'gogle' ;
console. log(reg4. exec(str4)) ;
var  reg5   =   /[0-9]{4,11}/           //x{m,n}  匹配最少m个、最多n个x
var  str5   =   '123456767' ;
console. log(reg5. test(str5)) ;
var  reg6   =   /google|baidu/         //this|where|logo:匹配this或where或logo中任意一个
var  str6   =   '谷歌baidu很牛逼' ;
console. log(reg6. exec(str6)) ;

var  reg  =   /g...gle/ ;
var  str  =   'google' ;
console.log(reg.test(str)) ;
//.匹配除换行符外的任意字符,*匹配0个或多个g;
var  reg  =   /g.*/ ;
var  str  =   'google' ;
console.log(reg.exec(str)) ;
//  g  a-zA-Z任意多个gle  ggle
var  reg  =   /g[a-zA-Z_]*gle/ ;
var  str  =   'g123ggle' ;
console.log(reg.exec(str)) ;
//  匹配gg  不在0-9中匹配任意多个,gle  null;
var  reg  =   /gg[^0-9]*gle/ ;
var  str  =   'google' ;
console.log(reg.exec(str)) ;
//  a-z  A-Z至少匹配一个;
var  reg  =   /[a-z][A-Z]+/ ;
var  str  =   'gOoGLE' ;
console.log(reg.exec(str)) ;
//  匹配数字字母以及_匹配0个或任意多个  gle
var  reg  =   /\W*gle/ ;
var  str  =   'google' ;
console.log(reg.exec(str)) ;
//  google  匹配数字0个或任意多个;
var  reg  =   /google\d*/ ;
var  str  =   'google' ;
console.log(reg.exec(str)) ;
//  匹配非数字至少4个最多8个;
var  reg  =   /\D{4,8}/ ;
var  str  =   'goo&()_' ;
console.log(reg.exec(str)) ;
//  goo匹配空白字符,空格  制表符和换行符0个或任意多个;
var  reg  =   /goo\s*gle/ ;
var  str  =   'goo \n       gle' ;
console.log(reg.exec(str)) ;
//  匹配至少2个最多3个google,至少1个a-z  ha;
var  reg  =   /(google){2,3}[a-z]+ha/ ;
var  str  =   'googlegoogleaha' ;
console.log(reg.exec(str)) ;
//^不在[]里面表示以某某开头   $表示以某某结尾,googl  0-9匹配0个或任意多个,a-z匹配0个或任意多个;
var  reg1  =   /^googl[0-9]*[a-z]*$/
var  str1  =   'googl123a' ;
console.log(reg1.exec(str1)) ;
//  \b文本开头是否到边界,google;
var  reg2  =   /\bgoogle/ ;
var  str2  =   'google' ;
console.log(reg2.exec(str2)) ;
//{4}表示就是4个;{4,}表示至少四个,匹配至少1个a-z,匹配空白字符,空格  制表符和换行符,匹配4个0-9;
var  reg3  =   /^[a-z]+\s[0-9]{8}$/i ;
var  str3  =   'google  20124567' ;
console.log(reg3.exec(str3)) ;
//  匹配至少1个a-z,忽略大小写;
var  reg4  =   /^[a-z]+/i ;
var  str4  =   'google  2012' ;
console.log(reg4.exec(str4)) ;
//匹配邮政编码,邮政编码是6位,第一位不能为0
var  reg5  =   /^[1-9][0-9]{5}$/ ;
var  str5  =   '241234' ;
console.log(reg5.exec(str5)) ;
//  放置压缩文件,匹配字母和数字以及_,匹配除换行符外的任意字符,三种压缩格式zip|rar|gz;
var  reg6  =   /^\w+\.(zip|rar|gz)/ ;
var  str6  =   '109.zip' ;
console.log(reg6.exec(str6)) ;
//  0-9匹配0个或任意多个至少匹配1个oo,匹配除换行符外的任意字符,匹配至少一个gle;
//如果有分组,那么用exec就会将分组的内容也打印出来
var  reg7  =   /[0-9]*(oo)\.(gle)/
var  str7  =   '223oo.gle' ;
console.log(reg7.exec(str7)) ;
//[email protected]    [email protected]
//  0-9  a-z匹配至少1个@0-9  a-z至少匹配一个,匹配除换行符外的任意字符,匹配a-z至少2个最多3个;
var  reg8  =   /^[0-9a-z_]+@[0-9a-z_]+\.[a-z]{2,3}$/ ;
var  str8  =   '[email protected]' ;
console.log(reg8.exec(str8)) ;

17.BOM节点操作:

//  BOM操作:
//  BOM没有标准,BOM本身缺少规范;浏览器共有的对象就是规范;window对象处于javascript最顶层;
//  prompt弹出框,提示文本;
     prompt( '我就尝试下') ;
//  alert  弹出框,警告框;
     alert( '这是一个警告框') ;
//  confirm确认操作;
     confirm( '请确认') ;
//  window.print  调出打印机;
     window. print( '调出打印机') ;

//  open打开一个新的窗口,携带参数第一个是要打开的URL,第二个参数给打开的窗口起的名称;
//  也可以设置宽高,上  左位置;
     window. open( 'http://www.baidu.com' , '这是窗口' , 'width=200px,height=100px,top=20px,left=10px') ;
//  screenLeft,screenTopa拿到屏幕左边和上面的距离,火狐支持;
//  火狐支持screenX和screenY这两种格式;
     var  a  =   window. screenLeft ;
     var  b  =   window. screenTop ;
     var  c  =   window.screenX ;
     var  d  =   window.screenY ;
//  兼容版本:
     var  e  =  ( typeof   screenLeft  ==   'number')  ?   screenLeft  :  screenX ;
     var  f  =  ( typeof   screenTop  ==   'numeber')  ?   screenTop  :  screenY ;
     var  g  =   x+ '+'+ y ;
//  获取窗口大小,高度带有状态栏,这些属性不兼容IE;
     console. log( innerWidth) ;
     console. log( innerHeight) ;
     console. log( outerWidth) ;
     console. log( outerHeight) ;

//  兼容IE
     console. log( documentElement. clientWidth) ;
     console. log( documentElement. clientHeight) ;
//  超时调用,处处某段时间间隔就调用一次
     var  num  =   0 ;
     var  timer  =   setInterval( function  ()  {
         num++ ;
         document.write(num) ;
         if(num  ==   '5'){
             //  关闭定时器;
             clearInterval(timer) ;
         }
     } , 1000) ;
     console. log(timer) ;
//  location  port端口号,assign网页重定向,reload重源头加载,replace替换当前的网址,reload一直加载;
     location.assign( 'http://www.baidu.com') ;
     location. replace( 'http://www.guge.com') ;
     location.reload() ;
     location.port( 80) ;

//  封装元素的访问方式:
     //  类名封装;
     function   getClass(classname)  {
         //  返回数组;
         var  arr  =  [] ;
         //  获取所有的元素;
         var  dom  =  document.getElementsByTagName( '*') ;
         //  遍历获取每一个元素;
         for( var  i= 0 ;i<dom.length ;i++){
             //  分割每一个类名,并转换为数组,split('')拆分;
             var  texarr  =  dom[i].className.split( '') ;
             for( var  j  = 0 ;j<texarr.length ;j++){
                 //  遍历拆分的数组;
                 if(texarr[j]  ==  classname){
                     //  每一个拆分的classname转换为数组;
                     arr. push(dom[i]) ;
                 }
             }
         }
         return  arr ;       //  输出数组;
     }

//  通用封装:
     function   $(str)  {
         //  储存了参数str中的第一个字符;
         var  s  =  str. charAt( 0) ;
         //  储存了前缀以后的所有字符:
         var  ss  =  str. substr( 1) ;
         switch(s){
             case   '#':
                 return  document. getElementById(ss) ;
                 break ;
             case   '.':
                 return   getClass(ss) ;
                 break ;
             default:
                 return  document.getElementsByTagName(str) ;
                 break ;
         }
     }
     $( '#demo').style. background  =   'red' ;
     var  divone  =   $( '.one') ;
     console. log(divone) ;
     for( var  i= 0 ;i<divone. length ;i++){
         divone[i].style. backgroundcolor  =   'red' ;
     }
     $( '#but').style. backgroundColor  =   'yellow' ;

猜你喜欢