细说javaScript入门学习

Javascript笔记

1.js基本语法

1.在html中使用js

• 嵌入式: 写在header中的标签内
• 引入式: 外部文件导入
• 行内式(内联式): 通过js事件写在标签内 按钮

2.基本语法

• 区分大小写
  • js 所有的一切都区分大小写
• 标识符
  • 不能以数字开头,可以由数字,字母,下划线,$ 组成

3.注释

• 单行注释: // 注释
• 多行注释: /* 多行注释 */

4.语句 (指令结束符)

• ; 或者 换行

5.关键字和保留字

关键字是保留的, 不能用作变量名或函数名

ECMAScript 关键字的完整列表:

完整列表
break	case	catch	continue	default
delete	do	else	finally	for
function	if	in	inseanceof	new
return	switch	this	throw	try
typeof	var	void	while	with

(1).变量

• var 变量名 = 值;
• var 变量名 = 值, 变量名 = 值, 变量名 = 值;
• var 变量名 = 变量名 = 变量名 = 值;

(2).数据类型

• 基本分类
  • 基本类型: string(子串) Number(数值) Boolean(布尔)
  • 符合类型: Ojbect(对象) array(数组)
  • 特殊类型: Null(空) undefined(未定义) function(函数)
• typeof() 返回一个值或变量的数据类型
• **typeof a ** 返回一个值或变量的数据类型

1.字符串类型

• 定义字符串 "" ''
• 不能是单引号 还是双引号,都可以解析转义字符, 都不能解析变量
• 字符串连接符 +

2.数值类型

• 数据的声明方式: 16进制/10进制/8进制/科学计数法

• 数值范围

  • 5e324 ~ 1.7976931348623157e+308
  • 超过范围会自动转换成infinity(正无穷) - infinity(负无穷)
  • 可以使用 isFinity()验证是不是无穷 , 超出范围不能参与运算

• NaN 类型

  • NaN是数值的特殊类型,标识Not a Number (不是一个数)
  • NaN 与任何数字操作,结果都是NaN
  • NaN与任何数都不相等,包括自己
  • 函数 isNaN() 判断是否是NaN

• Number() 类型转换

  • 将其他类型转为数值,转不成功则成NaN

	Number()	parseInt()	parseFloat()
整数123	数值123	数值123	数值123
浮点数123.456	数值123.456	数值123	数值123.456
字符串 ‘123’	数值123	数值123	数值123
字符串 ‘123.456’	数值123.456	数值123	数值123.456
字符串 ‘123abc’	NAN	数值123	数值123
空字符串 ‘’	0	NaN	NaN
字符串 ‘abcd’	NAN	NaN	NaN
布尔 ture / false	1 / 0	NaN	NaN
空 null	0	NaN	NaN
未定义变量 undefined	NaN	NaN	NaN

• 自动数据类型转换

	数字环境	字符串环境	布尔环境
数字类型	/	转为字符串	0转为false, 其余为ture
字符串类型	转换为字符串前的数字或NaN	/	转为true
空字符串	转换为0	/	转为false
字符串true	转为1	/	转为true
字符串false	转为0	/	转尔为flase
null	转为0	转为null	转为false
NaN	NaN	转为NaN	转为false
undefined	NaN	转为undefined	转为false
true	转为1	转为true	/
false	转为0	转为false	/

(3).运算符

• 算数运算符

  算数运算符	符号
  加法运算符	+
  减法运算符	-
  乘法运算符	*
  除法运算符	/
  摸运算符	%
  负号运算符	-
  正好运算符	+
  递增运算符	++
  递减运算符	–

• 关系运算符

  关系运算符
  赋值运算符	=
  相等运算符	==
  全等运算符	===
  不等运算符	!=
  不全等云端福	!==
  小于运算符	<
  大于运算符	>
  小于等于运算符	<=
  大于等于运算符	>=
  in运算符	判断一个值是否属于某个数组 或者一个属性是否是与一个对象
  instanceof	判断一个对象的示例是否属于某个对象
  字符串运算符	+连字符

• 逻辑运算符

  逻辑运算符
  逻辑与	&&
  逻辑或	||
  逻辑非	!

• 其他运算符

  其他运算符
  条件运算符	? :
  new运算符	new 对象类型
  void运算符	void运算符可以让操作数进行运算 但是却舍弃运算之后的结果
  typeof运算符	返回类型
  . 对象属性存取运算符	使用.来调用和设置对象的属性或者方法 obj.attr
  delete运算符	delete运算符可以用来删除变量/对象的属性/数组中的元素 delete运算符返回的是布尔值 delete 对象名 / delete 变量名 delete 对象名.属性 delete数组[索引]
  逗号运算符	var a = 1, b = 2; c = a + b , d = a - b;
  this运算符	this 代表的是当前对象

(4).其他语句

• 判断语句 if()...else
• 判断语句 switch
• 迭代语句 while
• 迭代语句 do-while
• 迭代语句 for
• 迭代语句 for-in
• 立即退出循环 break
• 跳过当前循环 continue

(5).输出

输出
console.log()	用于输出普通信息
console.info()	用于输出提示性信息
console.error()	用于输出错误信息
console.warn()	用于输出警示信息
console.debug()	用于输出调试信息
console.table()	用于对象信息
console.count()	用于计次输出
document.write()	将内容输出到html中
alert()	浏览器弹窗

(6).获取属型

获取一些属性
document.getElementById( );	获取页面中的一个元素 (通过 ID 名)
getElementsByTagName( );	获取页面中的一个元素 (通过 HTML标签)
getElementsByName( );
Element.style.color=value	获取或设置元素的css属性
Element.style.backgroundColor=value	获取或设置元素的css属性
innerHTML(双标签)	获取或设置元素标签的属性
style	HTML元素具有什么属性,当他变成JS对象后 该属性就会自动变成该对象

(7).定时函数

• 单次定时
  • 设置单次定时: var t1 = setTimeout( 'js代码' , 时间(毫秒) )
  • 清除单次定时: clearTimeout( t1 )
• 多次定时
  • setInterval( 'js代码' , 时间(毫秒))
  • clearInterval( )
• 写法
  • setTimeout('js 代码', time);
  • setTimeout(function(){jscode}, time)
  • setTimeout(funName, time)

2.函数

(1).函数的声明

• function关键字方式

  • function 函数名(形参){
        js 代码
    }
    

• 表达式方式

  • var 函数名 = function([形参]){
        js 代码
    }
    

• Function 构造函数方式

  • var 函数名 = new Function('形参','js代码');
    

(2).调用函数

• 加括号 调用函数
• 不加括号 引用函数

(3).JS函数特点

• 函数没有返回值, 默认返回undefined
• 函数可以重复定义

(4).JS函数中的参数

• 形参 - 实参
  • 实参个数 > 形参个数 (多余的参数会被忽略)
  • 形参个数 > 实参个数 (未赋值的参数,会自动赋值undefined)
• 参数默认值
  • 在函数内部, 判断参数是否为undefined
• 获取可变参数
  • arguments 获取所有的实参(数组对象)

(5).js中变量的作用域

• 在函数内部使用var 声明的是局部变量
• 在函数外部使用 var 声明的是全局变量
• 在函数 内外部 不使用var 声明的是全局变量

(6).JS的作用域链

函数的执行依赖于作用域, 作用域是在函数定义时决定的, 而不是调用时决定.

如果当前作用域里没有声明变量,则想上一层作用域里面找. 如果直到找到全局里,还未找到,则在执行函数时会报错.

(7).自执行函数 与 闭包

• 自执行函数
  • ( function(){console.log(1)} )( );
  • ( function(){console.log(2)} ( ) );

1. 这种写法的含义是 将函数声明 转换成 函数表达式，消除了JS引擎识别函数表达式 和 函数声明的歧义.
2. 告诉JS引擎 这是一个函数表达式，不是函数声明，并且可以在后面 加括号，立即执行 函数的内的代码.

• 闭包 (能够 读取其他函数内部变量 的函数)
  • 定义 : 在一个函数内部的函数
  • 特点: 在本质上,闭包就是将函数内部 和 函数外部 链接起来的一座挑梁
    • 读取函数内部的变量
    • **让这些变量的值始终保持在内存中 **

3.对象

(1).创建对象

• object 构造函数方式

  • var obj = new Object();
    

• JSON方式 ( 推荐 )

  • var obj = {p:v,p:v, funName: function(){....}};
    

• 自定义构造函数方式

  • function 函数名(){
        this.变量名 = 值;
        this.方法名 = function(){
            js 代码块;
        }
    }
    var obj = new 函数名;
    obj.方法名(); // 调用
    

• 匿名构造函数方式 ( 表达式 + 自定义构造函数 方式 )

  • var obj = new function(){
        this.变量名 = 值;
        this.方法名 = function(){
            js 代码块;
        }
    }
    

(2).原型 prototype

用于给一个构造函数, 添加属性 / 方法.

• 格式: 函数名.prototype.方法名() = function(){ js代码块 }
• ★★★可用于给 系统内置对象 添加方法! ★★★
• 模拟对象的继承性
• 给系统内置的对象 添加/修改 属性/方法

例:

function User() {
            this.name = '小明';
            this.getInfo = function() {
                document.write('hello');
            }
        }
var o1 = new User();
var o2 = new User();

User.prototype.getMsg = function() {
    document.write('Hi~ o(*￣▽￣*)ブ
');
}

(3).删除对象中的成员

用于删除对象中的 变量 / 方法

• 格式:
  • 删除变量 delete obj.变量名
  • 删除方法 delete obj.方法名 (不能加括号)

4.数组

(1).数组基本语法

1.数组的申明

• 构造函数:
  • 空数组 var 变量名 = new Array( );
  • 指定数组长度 var 变量名 = new Array( 10 );
  • 指定数组初始值 var 变量名 = new Array( xx,xx,xx );
• JSON方式:
  • 空数组: var 变量名 = [ ];
  • 定义数组: var 变量名 = [ xx,xx,xx ];

2.获取数组信息

• 获取数组长度: console.log ( 变量名.length );
• 获取数组类型: console.log ( typeof 变量名 );
• 获取对象的构造函数: console.log ( 变量名.constructor );

3.数组的特点

• 需要使用 push( ) 或者 [ ] 去追加数组的新元素
• JS的数组下标是连续的, 跳跃着赋值其他元素,中间的元素会自动影藏,并且赋值undefined
• JS只有 索引 数组,没有 关联数组

4.遍历数组

• 遍历页面中的元素数组对象

for (var i=0; i< list.length; i++){
    js 代码块;
}

• 遍历对象

 for (var i in obj){
     js 代码块 	
 }

5.数组属性

数组属性	功能
**不会改变原数组 : **
console.log ( 变量名.length );	获取数组的长度
console.log ( 变量名.concat( xx,xx,[ ],[ ] ) );	合并新数组
console.log ( 变量名.join ('--' ) );	将数组链接为字符串 (默认为逗号)
console.log ( 变量名.slice( 2,4 ));	从2到到4 不包含4
**会改变原数组的方法 : **
console.log ( 变量名.push ( ));	向数组最后一个位置,追加一个新元素, 返回新长度
console.log ( 变量名.pop ( ));	删除数组最后一个位置的元素,返回被删除元素
console.log ( 变量名.unshift ( ));	向数组首个位置追加一个新元素,返回新长度
console.log ( 变量名.shift ( ));	删除数组首个位置的元素,返回被删除元素
console.log ( 变量名.reverse ( ));	反转数组
console.log ( 变量名.sort ( ));	数组排序 ASCII规则

5.内置对象

(1).Boolean 布尔对象

• 直接赋值: var b = true;

  • Boolean 只有 true 和 false 两种情况

• 构造函数: var b = new Boolean( -10 );

• 转换函数: var b = Boolean( );

  • Boolean 除了0、-0、null、""、false、undefined 或 NaN 其他都为ture

(2).Number 数值对象

• JS可表示的最小值 Number.MIN_VALUE
• JS可表示的最大值Number.MAX_VALUE
• 将变量转为2/8/16/32进制 变量.toSrting( 2 );
• 限制小数位数 : 变量.toFixed( 2 );

(3).String 字串

1.声明

• 构造函数声明: var str = new String('.....');
  • 类型是对象
  • 声明的字符串 每个字符都被分配下标 且 有length长度
• 转换形式声明: var str = String( true );
• 直接赋值: var str = 'I am jingjing, I xuan you,do you zao? 上海!;

2.常用方法

子串常用方法	功能	返回值
str.length	输出字符串长度	长度
str.bold( )	输出加粗后的字符串
str.anchor(‘锚点名’)	加上锚点
str.charAt( 数字 )	取出这个下标的文本	取出的文本
str[ 数字 ]	取出这个下标的文本	取出的文本
str.indexOf(‘查询的字符’)	返回第一次出现指定字符的位置	找到则返回出现的位置下标,没有则返回-1
str.lastIndexOf(‘查询的字符’)	返回最后一次出现字符的位置	找到则返回出现的位置下标,没有则返回-1
substr(start,length)	截取字符串, 无指定长度则截取到末尾, 两个参数时,从参数1下标开始截取 向后参数2个字符 如果参数为负数则从后向前	截取出的字符串
substring(start,end)	截取字符串 两个参数时,从参数1下标截取到参数2下标 参数不支持负数	截取出的字符串
slice(start,end)	截取字符串 从start开始到end结束,不含end.可以有负值	截取出的字符串
str.toUpperCase( )	将字串转为大写	转换后的子串
str.toLowererCase( )	将子串转为小写	转换后的子串
str.replace( 字符/正则 ,替换的字符 )	替换子串 参数1可以是子串也可以是用于匹配的正则, 参数2位替换的子串	返回值为替换后的子串
str.match( 字符/ 正则 )	匹配第一个匹配到的结果	成功返回匹配到的结果, 失败返回null
str.search( 正则 )	正则验证 匹配	返回第一次出现的所有位置, 不匹配则返回-1
str.split( )	将子串切割为数组	返回切割后的子串

(4).RegExp 正则

正则是个对象 来自与构造方法.

1.声明

• var reg = new RegExp(模式,标记 ) (new一个RegExp正则得到一个正则对象)
  • 模式: 正则表达式文本
  • 标记: g 全部匹配, i忽略大小写 , gi匹配所有可能的值,忽略大小写

2.方法

• test( ) 匹配成功返回 ture 匹配失败返回false

var str = 'I am 123 abc';
var reg = new RegExp(/\d{3}/,'g');

console.log(reg.test(str));

• exec( ) 匹配输出较为详细的内容

var str = 'I am 123 abc';

console.log(/I am (\d{3}) abc/.exec(str));

输出:   ["I am 123 abc", "123", index: 0, input: "I am 123 abc", groups: undefined]
//输出为一个数组 下标为0的是匹配上的值, 下标为1的是子模式组里匹配上的东西
//input来自什么子串

• 匹配中文 /[\u4e000-\u9fa5]/

console.log(/[\u4e000-\u9fa5]/.exec('我们'));
console.log(/[\u4e000-\u9fa5]/.exec('哭'));

(5).Date时间

1.声明

• var date = new Date();

2.使用

• get 一套方法 获取
• set 一套方法 设置
• setUTC一套方法 设置格林威治
• to 一套方法 转换字符串

Date时间对象方法
getFullYear()	获取公元纪年
getMonth()+1	获取月份
getDay()	获取星期0~6
getDate()	获取日期
getHours()	获取小时
getMinutes()	获取分钟
getSeconds()	获取秒钟
getmilliseconds()	获取毫秒
getTime()	获取时间戳
getUTCHours()	获取格林威治时间
toString()	将对象转换子串形式
toUTCString()	将标准时间转为字符串
toLocaleString()	将本地时间转为字符串

(6).Math-数学

Math对象用于执行数学任务

使用Math

Math.属性 / 方法

Math属性

• PI π , 圆周率
• E 算术常量e

Math方法

• 绝对值

  abs( )

  console.log('abs: ' + Math.abs(10));		// 返回10
  console.log('abs: ' + Math.abs(-110));		// 返回110
  

• 平方根

  sqrt( )

  console.log('sqrt: ' + Math.sqrt(4));		// 返回 2
  console.log('sqrt: ' + Math.sqrt(25));		// 返回 5
  

• 最值 ( 至少要给一个值 , 否则会返回 infinity )

  max / min ( )

  console.log('最小值: ' + Math.min(44554,888,6644,848,9,5,2));		// 返回 44554
  console.log('最大值: ' + Math.max(44554,888,6644,848,9,5,2));		// 返回 2
  

• 取整

  舍去取整 floor( )

  console.log('舍去取整: ' + Math.floor(12.99));		// 返回 12
  

  进一取整 ceil( )

  console.log('进一取整: ' + Math.ceil(11.00000000001));		//返回12
  

  四舍五入取整 round( )

  console.log('四舍五入取整: ' + Math.round(11.6));		// 返回 12 
  console.log('四舍五入取整: ' + Math.round(11.4));		// 返回 11
  

  **注: **四舍五入不公平, 舍去的少, 进一的多, 因此引入 银行家的四舍六入, 奇进偶舍

  例子: 
  	四舍五入: 2.55 + 3.45 = 2.6 + 3.5 = 6.1
  	四舍六入: 2.55 + 3.45 = 2.6 + 3.4 = 6.0
  

• 伪随机数

  随机数规则
  1. 生成 min - max, 包含 min 但不含 max 的整数
  	parseInt(Math.random() * (max-min) + min, 10)
  2. 生成 min - max, 不包含 min 但包含 max 的整数
  	Math.floor(Math.random() * (max-min) + min) + 1
  3. 生成 min - max 不包含 min 和 max 的整数
  	Math.round(Math.random() * (max-min) + min + 1)
  4. 生成 min - max, 包含 min 和 max 的随机数
  	Math.round(Math.random() * (max-min) + min)
  	Math.floor(Math.random() * ((max-min) + 1 ) + min)
  
  

  • JS 随机产生 0-1 之间的小数, 可能随机到 0, 但绝不会随机到1

    document.write('随机数: ' + Math.random() + '
    ');
    

  • 0-9 之间的随机数

    document.write('0-9 随机数: ' + Math.floor(Math.random()*10) + '
    ');
    // 更完善
    document.write('0-9 随机数: ' + Math.floor(Math.random()*100000000%10) + '
    ');
    

  • 0-10 之间的随机数

    document.write('0-10 随机数: ' + Math.round(Math.random()*10)  + '
    ');
    // 更完善
    document.write('0-10 随机数: ' + Math.round(Math.random()*10000000%10) + '
    ');
    

封装一个随机数的函数

function rand(min, max){
    if (max === undefined) {
        max = min;
        min = 0;
    }
    if (typeof min !== 'number' || typeof max !== 'number') {
        console.error('rand: 请提供有效的数值!!');
    }
    return Math.floor(Math.random() * ((max-min) + 1 ) + min);
}

6.JS事件event

(1).JS事件的绑定

• **事件 **作为 元素的属性

<button onclick="alert('啊,好疼!')">   点击触发  </button>

• 事件 作为 元素对象的属性
  • element.event = function(){}
  • element.event = funName;

<button id="btn">  点击试试  </button>
<button id="btn1"> 点我试试2  </button>
<button onclick="test()">点我</button>
<script>
    //方法1   直接赋予
	var btn = document.getElementById('btn');
	btn.onclick = function(){
    	alert('弹窗');
	}
function test(){
  
}

	//方法2    引用
	function demo() {
        alert('戳死你!');
    }
    btn1.onclick = demo;
</script>

(2)事件监听(标准)

• 非IE : element.addEventListener('event',funName(也可以直接写方法()), false)
• IE: element.attachEvent('onevent',funName)
• 例:

<button id="jt">  点击(监听)  </button>
var jt = document.getElementById('jt');

    if (jt.addEventListener) {
        // 可用
        jt.addEventListener('click', fun1, false);
        jt.addEventListener('click', function(){
            alert('啊, 你又监听我!!!');
        }, false);
    } else {
        // 不可用 IE
        jt.attachEvent('onclick', function(){
            alert('啊, 你又监听我!!!');
        });
        jt.attachEvent('onclick', fun1);
    }


    function fun1(){
        alert('啊, 你监听我!!!');
    }

• 解绑事件
  • 非IE: Element.removeEventListener('event',funName,false);
  • IE: Element.detachEvent('event',funName);

(3)元素绑定事件以及this使用

• 给一组元素绑定事件

  • 元素标签内部: 绑定事件时,传入this,表示该元素对象自己

<button onclick="btn(this)">锄禾日当午</button>
function btn(obj){
   alert(obj.innerHTML);
}

• this 使用

  • 循环绑定事件时,获取触发事件的元素对象时,需要使用 this

<ul id="list">
    <li>小莉莉, 你宣我吗? 宣0</li>
    <li>小静静, 你宣我吗? 宣1</li>
</ul>

var lis = document.getElementById('list').getElementsByTagName('li');
    
for (var i = 0; i < lis.length; i++) {
    lis[i].onclick = function () {

        alert(this.innerHTML);
    }
}

(4).闭包 closure

1.在循环绑定事件时, 将循环变量保留下来时, 需要使用闭包

2.用一组元素去控制另一组元素时,就需要使用闭包

• 格式:

• for(...){
      (function(i,x,y){
          element.event = function (){
              // 使用 i,x,y
          }
      })(i,x,y);
  }
  

例:

<ul id="list">
    <li>小莉莉, 你宣我吗? 宣1</li>
    <li>小静静, 你宣我吗? 宣2</li>
</ul>
<div id="btns">
    <button>获取第1句话</button>
    <button>获取第2句话</button>
</div>

var lis = document.getElementById('list').getElementsByTagName('li');
    var btns = document.getElementById('btns').getElementsByTagName('button');
    
for (var i = 0; i < btns.length; i++) {
    (function(i){
        btns[i].onclick = function (){
            alert(lis[i].innerHTML);
        }
    })(i);
}

(5).鼠标常用事件

事件使用: 对象.onclick = function( ) {…}

鼠标事件	功能
onclick	单击事件
ondblclick	双击事件
oncontextmenu	右击事件 (return false 防止系统默认的菜单弹出)
onmouseover	鼠标指向触发
onmouseout	鼠标移开触发
onmousedown	鼠标按下触发(任意键)
onmouseup	鼠标松开触发
onmousemove	鼠标移动触发

(6).Event 事件对象

• 获取事件对象: var en = en ||window.event;

  • 基础格式:

  • 对象 . 事件 = function(en){ 
        var en = en ||window.event;
    }
    

• 特点: 获取的事件对象中有许多属性 .包括鼠标的坐标等

• 属性:

Event时间对象属性
en.x	鼠标x坐标
en.y	鼠标y坐标
en.button	鼠标的案件 0左键/1中键/2右键
en.offsetX	鼠标相对于 触发事件元素的 x 坐标
en.offsetY	鼠标相对于 触发事件元素的 y 坐标
e.keyCode	获取按键键码

(7).键盘事件

键盘事件	功能
onkeydown	按下按键时触发
onkeyup	松开按键时触发
onkeypress	按下并松开按键触发(JS高级事件) 无输出按键都不能触发(非打印) 方向键/大小写切换/ctrl/alt/shift/esc

• 使用:

对象元素.onkeydown = function(en){
	var en = en || window.event;
	// 按下该元素对象,触发 并 获取到事件中的元素属性
}

// onkeydown    按下按键触发
document.onkeydown = function(en) {
    var en = en || window.event;
    console.log(en.keyCode);
    document.body.style.backgroundColor = '#f90';
}		// 按下按键  页面背景色变为橙色

// onkeyup      松开按键触发
document.onkeyup = function() {
    document.body.style.backgroundColor = '#fff';
}		// 松开按键  页面背景色变回白色

// onkeypress   按下并松开按键触发(JS高级事件)
document.onkeypress = function(en) {
	var en = en || window.event;
	console.log(en.keyCode);
	document.body.style.backgroundColor = '#f90';
}		// 按下并松开按键  页面背景色变为橙色

(8) 表单事件

表单事件	功能
onsubmit	表单被提交时触发
onreset	表单被重置时触发
onfocus	获取焦点时触发
onblur	失去焦点时触发
onchange	改变表单控件的内容或状态时触发 input/textarea控件时,内容改变且失焦才会触发
oninput	非IE: 输入时触发( input/ textarea)
onpropertychange	IE(-9.0): 输入时触发(同上)
onselect	选取文本时触发(同上)

例1 : 限制输入140字的文本框 , 并实时检测当前文本框内的文字数量 :

搜索: <input type="text" id="s" value="请输入搜索内容..." placeholder="请输入搜索内容..." style="color:#ccc">

<h3>说点什么:</h3>
<textarea name="weibo" cols="30" rows="5" placeholder="请输入140字的内容..." onkeyup="ck(this)" maxlength="140"></textarea>
<p>您还能输入 <font color="#f00" size="6" id="ts">140</font> 个字</p>

<script>
	s.onfocus = function(){
    	this.value = '';
    	this.style.color = '#000';
	}

	var ts = document.getElementById('ts');
	var num = 140;
	function ck(obj) {
    	var str = obj.value;
    	var len = num - str.length;
    	ts.innerHTML = len;
	}

例2 : 在上面输入框输入的文字 , 在下面的 div 中实时显示出来 & 选取文本时触发 :

<style type="text/css">
    #content,#box{
        width: 600px;
        height: 50px;
        border: 1px solid #000;
        font-size: 30px;
    }
</style>
    
<input type="text" id="content">
<div id="box"></div>
    
<script>
    var input = document.getElementById('content');
    var div = document.getElementById('box');

    // 实时显示文字
    /*input.onchange = function(){
        div.innerHTML = input.value;
    }*/

    input.oninput = ck;				// IE的 输入时触发
    input.onpropertychange = ck;	// 非IE的 输入时触发

    function ck(){
        div.innerHTML = input.value;
    }
    
    input.onselect = function (){		// 选取文本时触发(input/textarea)
        alert('啊,我被选中了!');
    }
</script>

(9) 框架/对象事件

框架/ 对象事件	功能
onload	文档/图片/ 加载触发
onunload	文档关闭触发 IE
onbeforeunload	文档关闭触发 非IE 浏览器组织了关闭前的弹窗
onabort	图片加载过程中 中断触发
onerror	图片加载错误触发
onresize	窗口/框架大小变化时触发
onscroll	元素滚动条 在滚动式触发

<script>
    window.onload = function() {
        alert('文档加载完成了!');
        console.log('前'+box);
    }

    window.onbeforeunload = function (){
        alert('1234567890');	// 新版为固定提示, 不显示自定义弹框, 防止流氓网站
    }
</script>

(10).拷剪粘/以及音视频事件

拷剪粘事件
oncopy	拷贝内容时触发
oncut	剪切内容时触发
onpaste	粘贴内容时触发
音视频事件
onplay	音/视频开始 播放 时触发
onpause	音/视频 暂停 时触发
onended	音/视频 结束 时触发

(11).常用HTML元素属性

常用HTML元素属性
innerHTML	双标签之间的文本
offsetTop	当前元素相对于body或者一定为的父级元素的偏移量
offsetLeft	同上
scrollTop	当前元素左边缘或顶边缘 滚过的像素值
scrollLeft	同上
className	当前元素的class属性值
tagName	当前元素的标签名

7.BOM 浏览器对象模型

Browser Object Model

(1).对象的种类 和 基础信息

• 自定义对象
• 内置对象 : Array/String/Number/Bool/RegExp/Math/Date/G
• BOM 浏览器对象模型
• DOM 文档对象模型

(2).对象树(倒树状结构)

 									window
                       |
history  location   document   screen  navigator
                       |
                     html
                       |
                 head     body
                           |
                      p span div等...

(3).BOM对象

1.window 浏览器窗口

• 描述整个浏览器窗口
• 他是JS中所有对象的根对象
• 使用window属性或方法是,可以省略window的调用自定义对象/变量/函数都属于window
• 属性: 见手册
• 方法

window中的方法,	使用方法是window可省略
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式 多次定时
setTimeout()	在指定的毫秒数后调用函数或计算表达式 单次定时
clearInterval()	取消由 setInterval() 设置的定时 取消多次定时
clearTimeout()	取消由 setTimeout() 方法设置的定时 取消单次定时
弹框
alert()	警告框
confirm()	确认框
prompt()	输入框
窗口
open()	打开新窗口
close()	关闭自己打开过的窗口
print()	打印功能(相当于ctrl+p)
滚动条
scrollBy()	滚多少
scrollTo()	滚到那里去

2.history 历史记录*

• 方法

  history方法	功能
  history.back()	上一步
  history.forward()	下一步
  history.go( 数字/负的数字 )	上几步/下几步

• 一般使用

<button onclick="history.back()">上一步</button>
<button onclick="history.forward()">下一步</button>
<button onclick="history.go(2)">下2步</button>

3.location 地址栏相关

• 属性

  location 地址栏属性
  location.href	获取完整URL地址
  location.protocol	协议
  location.host	获取主机名和端口号
  location.hostname	获取主机名
  location.pathname	获取路径
  location.search	获取参数
  location.hash	获取锚点

• 方法

  location 方法	功能
  location.reload( )	刷新页面 重新加载当前文档。
  location.assign(’ 跳转的地址 ')	跳转 加载新的文档。
  location.replace(’ 替换的地址 ')	替换跳转的地址 用新的文档替换当前文档。

4.screen 对象-屏幕信息

screen对象包含有关客户端显示屏幕的信息

screen 对象
window.screen	对象包含有关客户端显示屏幕的信息
window.screen.height	客户端的屏幕高度
window.screen.width	客户端的屏幕宽度

5.navigator 浏览器信息

Navigator 对象包含有关浏览器的信息。

Navigator 浏览器信息
window.navigator	包含有关浏览器的信息
navigator.appVersion	浏览器的平台和版本信息
navigator.userAgent	发送给服务器的user-agent头信息

• 判读内核

  var browser = {
              versions: (function(){
                  var u = navigator.userAgent;
                  var app = navigator.appVersion;
                  return {
                      trident: u.indexOf('Trident')     > -1,                                   // IE内核
                      presto : u.indexOf('Presto')      > -1,                                   // Opera内核
                      webKit : u.indexOf('AppleWebKit') > -1,                                   // 苹果谷歌内核
                      gecko  : u.indexOf('Gecko')       > -1 && u.indexOf('KHTML') == -1,       // 火狐内核
                      mobile : !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/),  // 是否为移动端
                      ios    : !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),                      // ios终端
                      android: u.indexOf('Android')     > -1 || u.indexOf('Linux') > -1,        // android终端 或 uc浏览器
                      iPhone : u.indexOf('iPhone')      > -1 || u.indexOf('Mac') > -1,          // 是否为iPhone 或 QQHD浏览器
                      iPad   : u.indexOf('iPad')        > -1,                                   // 是否为iPad
                      webApp : u.indexOf('Safari')      == -1                                   // 是否为web应用程序,没有头部和底部
                  };
              })()
          }
  
          document.write('是否为移动端:' + browser.versions.mobile + '
  ');
          document.write('是否为ios端:' + browser.versions.ios + '
  ');
          document.write('是否为android终端:' + browser.versions.android + '
  ');
          document.write('是否为chrome浏览器:' + browser.versions.webKit + '
  ');
          document.write('是否为FireFox浏览器:' + browser.versions.gecko + '
  ');
  
  

8.DOM 文档对象模型

DOM 是 Document Object Model 文档对象模型

1.HTML DOM 2.XML DOM

1.HTML DOM 对象参考

(1).document对象

整个文档

• 属性

  document对象属性 ( 只读 )
  document.all	获取当前文档所有的标签
  document	当前文档的所有信息
  document.domain	获取域名
  document.URL	获取完整URL
  document.lastModified	获取文档最后一次修改时间
  document.referrer	获取上一个页面地址
  document对象属性 ( 可读 可写 )
  document.title	获取/设置标题
  doucument.cookie	获取/设置 cookie

cook

• 设置cookie
  • setcookie()
    • 参1 必填 设置cookie的name
    • 参2 cookie 的值
    • 参3 有效期 当前之间戳+多少秒 time()+60*60
    • 参4 路径 / 表示全部生效 指定路径,即该路径下文件生效
    • 参5 域名 www.qq.com mail.qq.com image.qq.com *.qq.com
    • 参6 是否加密
    • 参7 是否是通过http协议

(1).cookie 设置

document.cookie = 'sex = 0';

var d = new Date();
d.setTime(d.getTime() + 3600 * 1000);

document.cookie = 'sex = 0; path = /; expires = ' + d.toUTCString();

document.write('cookie: ' + document.cookie + '
');

(2).文字跑马灯效果

<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>[新消息]您下载的 CHD-655.ざいシ绝美.avi 已完成,请注意身体...title>
    <style type="text/css">style>
head>
<body>
    <h1>documenth1>
    <hr>

    <p id="msg1">蒹葭苍苍，白露为霜。所谓伊人，在水一方。p>
    <p id="msg2">蒹葭苍苍，白露为霜。所谓伊人，在水一方。p>
    <hr>

    <h2 id="show">h2>

    <script>
        // // 闪烁标题信息
        var mark = true;
        setInterval(function (){
            if (mark) {
                document.title = '[新消息] 隔壁老王发来5条消息..';
                mark = false;
            } else {
                document.title = '[　　　] 隔壁老王发来5条消息..';
                mark = true;
            }
        }, 500);

        setInterval(function (){
            // 获取title信息
            var str = document.title;
            // 取出首个字符
            var fstr = str.charAt(0);
            // 取出除了首个字符以外的剩余字符
            var estr = str.substr(1);
            // 将以上对调拼接,并写入title
            document.title = estr + fstr;

            //  替代方案1: 
            var msg1 = document.getElementById('msg1');
            var str1 = msg1.innerHTML;
            msg1.innerHTML = str1.substr(1) + str1[0];

            //  替代方案2: 
            var msg2 = document.getElementById('msg2');
            var str2 = msg2.innerHTML;
            var arr = str2.split(''); // 字串 转 数组
            arr.push(arr.shift());
            msg2.innerHTML = arr.join(''); // 数组 转 字串
            // console.log(arr);
        }, 500);

        var string = '日月D交S替D光阴转,垂死F病中惊D坐起';
        var i = 0; // 初始值
        // 跑马灯儿
        setInterval(function (){
            // 如果下标超过字串长度,则重置为0
            if (i >= string.length) {
                i = 0;
            }

            // 给每个被指定的字加样式
            document.getElementById('show').innerHTML = show(i, string);
            // console.log(string[i]);

            i++; // 增量
        }, 300);

        function show(i, str){
            // 给第 I个字加样式
            var tmp = str.substr(0, i); // 变前
            tmp += ''+str[i]+'';// 变中
            tmp += str.substr(i + 1);// 变后
            return tmp;
        }
    script> 
body>
html>

(2).form对象

(1).submit /reset 提交/重置

• 提交的写法

  • 方式1:

    <form action="1.php">
       username : 
       <input type="text" name="user" value="123456">
       <button type="submit">提交button>
    form>
    

  • 方式2:

    <form action="1.php" id="form-h5">
       username : <input type="text" name="user" value="123456">
    form>
    
    
    <button form="form-h5">提交button>
    
    

  • 方式3:

    <form action="1.php" name="myform">
       username : <input type="text" name="user" value="123456">
    form>
    
    <button onclick="document.myform.submit()">提交button>
    <button onclick="document.myform.reset()">重置button>
    
    

(3).image 对象

Image 对象代表嵌入的图像。

标签每出现一次，一个 Image 对象就会被创建。

image对象属性
元素对象.align	设置或返回内容对齐方式 (lenft-right-top-middle-bottom)
alt	设置或返回图片加载失败时显示内容
border	设置或返回图像边框
complete	返回浏览器是否已完成对图像的加载
height	设置或返回图片的高度
width	设置或返回图片的宽度
hspace	设置或返回图片左右的空白
vspace	设置或返回图片上下的空白
id	设置或返回图片的id
name	设置或返回图像的名称
src	设置或返回图像的URL
lowsrc	设置或返回指向图像的低分辨率版本URL

标准属性

className	设置或返回元素的class属性
title	设置或返回元素的title

对象事件句柄

事件句柄
onabort	加载失败时触发
onerror	加载发生错误时触发
onload	当图片加载完毕时触发

(4).anchor 对象–超链接

1.Anchor 对象表示 HTML 超链接。

2.在 HTML 文档中 标签每出现一次，就会创建 Anchor 对象。

3.锚可用于创建指向另一个文档的链接（通过 href 属性），或者创建文档内的书签（通过 name 属性）。

4.通过搜索 Document 对象中的 anchors[] 数组来访问锚，或者使用 document.getElementById()。

anchor对象属性
accessKey( 键盘按键 )	设置或返回一个连接的快捷键Alt+设置的按键
charset	设置或返回被连接资源的字符集
href	设置或返回被连接资源的URL
id	设置或返回一个连接的id
innerHTML	设置或返回一个连接的内容
name	设置或返回一个连接的名称
rel	设置或返回当前文档与目标URL之间的关系
rev	设置或返回目标URL与当前文档的关系 通常用来设置文档阅读顺序一类的
target	设置或返回在何处打开连接
type	设置或返回被连接资源的mime类型

标准属性http://www.biquge.tv/

标准属性
className	设置或返回元素的class属性
dir	设置或返回文本的方向
title	设置或返回元素的title

对象方法

对象方法
blur( )	把焦点移开
focus( )	给连接焦点

(5).base对象

base对象属性
href	设置或返回针对页面中所有连接的基准URL
id	设置或返回base元素的id
target	设置或返回页面中所有连接的打开方式

(6).canvas对象

例: 圆

c1(); // 调用输出画图
function c1() {
    var canvas =document.getElementById('c1');
    if (canvas == null) {
    return false;
}
    var context = canvas.getContext('2d');
    context.beginPath();
    context.arc(150, 150, 100, 0, Math.PI * 2, true);
    context.closePath();
    context.fillStyle = '#00f';
    context.fill();
}

例: 有趣图像

c2();// 调用输出画图
    function c2() {
        var canvas = document.getElementById('c2');
        if (canvas == null)
            return false;
        var context = canvas.getContext("2d");
        context.fillStyle = "#EEEEFF";
        context.fillRect(0, 0, 300, 300);
        var n = 0;
        var dx = 150;
        var dy = 150;
        var s = 100;
        context.beginPath();
        context.fillStyle = 'rgb(100,255,100)';
        context.strokeStyle = 'rgb(0,0,100)';
        var x = Math.sin(0);
        var y = Math.cos(0);
        var dig = Math.PI / 15 * 11;
        for (var i = 0; i < 30; i++) {
            var x = Math.sin(i * dig);
            var y = Math.cos(i * dig);
            context.lineTo(dx + x * s, dy + y * s);
        }
        context.closePath();
        context.fill();
        context.stroke();
    }

(7).Event对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

属性
onload	加载完成时触发
onunload	页面关闭时触发
onabort	图像的加载中断
onblur	元素失去焦点
onfocus	元素获得焦点触发
onchange	元素内容或状态被改变
onclick	点击时触发
ondblclick	双击时触发
onerror	加载文档或图片发生错误触发
onkeydown	按键时触发
onkeypress	按下并松开触发(按下就已经触发了)一般用于input和textarea
onkeyup	松开按键时触发
onmousedown	按下鼠标触发
onmousemove	鼠标移动时触发
onmouseout	鼠标从元素上移开时触发
onmouseover	鼠标移动到元素上时触发
onmouseup	松开鼠标时触发
onreset	点击重置时触发
onsubmit	提交时触发
onresize	窗口被改变大小时触发
onselect	文本被选中时触发

Event对象属性
en.x	鼠标x坐标
en.y	鼠标y坐标
en.button	鼠标的案件 0左键/1中键/2右键
en.offsetX	鼠标相对于 触发事件元素的 x 坐标
en.offsetY	鼠标相对于 触发事件元素的 y 坐标
e.keyCode	获取按键键码

(8).input系列对象

input对象方法
元素.blur( )	失去焦点时触发.
元素.focus( )	默认选中 打开页面直接获取到该元素的焦点
元素.select( )	选中效果 文本框内的文字就被全部选中了

• 复制文本框内的文字

 SS : <input type="text"  name="user" id="s">
    <hr>
    <button onclick="selectAll()">全选button>  
    <button onclick="copyAll()">全选 复制button>

    <button class="btn" data-clipboard-target="#content">复制(clip)button>

    <br>
    <textarea name="weibo" id="content" cols="40" rows="10">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi nulla placeat recusandae debitis nihil in. Laborum velit sint cum, voluptate, voluptatum necessitatibus dignissimos provident mollitia. Sequi fugiat magni repudiandae velit.textarea>

    <script src="./dist/clipboard.min.js">script>
    <script>
        s.focus();

        function selectAll(){
            content.select();
        }

        function copyAll(){
            // 判断剪切板对象
            if (window.clipboardData) {
                // IE
                clipboardData.setData('text', content.value);
                alert('已复制到剪切板!');
            } else {
                // 非IE
                content.select();
                alert('请按 Ctrl + C');
            }
        }

        // 使用剪切板对象
        var clipBoard = new ClipboardJS('.btn');
        console.log(clipBoard);

(9).select对象

Select 对象代表 HTML 表单中的一个下拉列表。

在 HTML 表单中， 标签每出现一次，一个 Select 对象就会被创建。

通过遍历表单的 elements[] 数组来访问某个 Select 对象，或者使用 document.getElementById()。

Select 对象属性

属性	描述
disabled	设置或返回是否应禁用下拉列表。
form	返回对包含下拉列表的表单的引用。
id	设置或返回下拉列表的 id。
length	返回下拉列表中的选项数目。
multiple	设置或返回是否选择多个项目。
name	设置或返回下拉列表的名称。
selectedIndex	设置或返回下拉列表中被选项目的索引号。
size	设置或返回下拉列表中的可见行数。
tabIndex	设置或返回下拉列表的 tab 键控制次序。
type	返回下拉列表的表单类型。

标准属性

属性	描述
className	设置或返回元素的 class 属性。
dir	设置或返回文本的方向。
lang	设置或返回元素的语言代码。
title	设置或返回元素的 title 属性。

Select 对象方法

方法	描述
add()	向下拉列表添加一个选项。
blur()	从下拉列表移开焦点。
focus()	在下拉列表上设置焦点。
remove()	从下拉列表中删除一个选项。

Select 对象事件句柄

事件句柄	描述
onchange	当改变选择时调用的事件句柄。

(10).option 对象

Option 对象的属性

属性	描述
defaultSelected	返回 selected 属性的默认值。
disabled	设置或返回选项是否应被禁用。
form	返回对包含该元素的 元素的引用。
id	设置或返回选项的 id。
index	返回下拉列表中某个选项的索引位置。
label	设置或返回选项的标记 （仅用于选项组）。
selected	设置或返回 selected 属性的值。
text	设置或返回某个选项的纯文本值。
value	设置或返回被送往服务器的值。

标准属性

属性	描述
className	设置或返回元素的 class 属性。
dir	设置或返回文本的方向。
lang	设置或返回元素的语言代码。
title	设置或返回元素的 title 属性。

(11).style对象

Style 对象代表一个单独的样式声明。可从应用样式的文档或元素访问 Style 对象。

详情见手册

(12).table对象

Table 对象代表一个 HTML 表格。

在 HTML 文档中

标签每出现一次，一个 Table 对象就会被创建。

Table 对象集合

集合	描述
[cells]	返回包含表格中所有单元格的一个数组。
[rows]	返回包含表格中所有行的一个数组。
tBodies[]	返回包含表格中所有 tbody 的一个数组。

Table 对象属性

元素的引用。

属性	描述
border	设置或返回表格边框的宽度。
caption	对表格的
cellPadding	设置或返回单元格内容和单元格边框之间的空白量。
cellSpacing	设置或返回在表格中的单元格之间的空白量。
frame	设置或返回表格的外部边框。
id	设置或返回表格的 id。
rules	设置或返回表格的内部边框（行线）。
summary	设置或返回对表格的描述（概述）。
tFoot	返回表格的 TFoot 对象。如果不存在该元素，则为 null。
tHead	返回表格的 THead 对象。如果不存在该元素，则为 null。
width	设置或返回表格的宽度。

标准属性

属性	描述
className	设置或返回元素的 class 属性。
dir	设置或返回文本的方向。
lang	设置或返回元素的语言代码。
title	设置或返回元素的 title 属性。

Table 对象方法

方法	描述
createCaption()	为表格创建一个 caption 元素。
createTFoot()	在表格中创建一个空的 tFoot 元素。
createTHead()	在表格中创建一个空的 tHead 元素。
deleteCaption()	从表格删除 caption 元素以及其内容。
deleteRow()	从表格删除一行。
deleteTFoot()	从表格删除 tFoot 元素及其内容。
deleteTHead()	从表格删除 tHead 元素及其内容。
insertRow()	在表格中插入一个新行。

(13) . tableRow ( 表格行 )

​ 属性 :

属性	功能
innerHTML	开始标签和结束标签之间的文本
rowIndex	该行在表中的位置 ( 行数 )

​ 方法 :

方法	功能
deleteCell()	删除行中的指定的单元格
insertCell()	在一行中的指定位置插入一个空的	元素

(14) . tableCell ( 表格单元格 )

​ 属性 :

属性	功能
colspan	跨列
rowspan	跨行
cellIndex	返回单元格在某行的位置

2 . XML DOM

(1) . 节点介绍

​ 1> . 什么是节点 ( node )

​ HTML文档中 所有的成分 都称之为节点

​ document 文档

​ element HTML元素

​ attr 属性 ( Attribute )

​ text 文本

​ comment 注释

​ 2> . 节点树

​ 子节点 、父节点 、同辈节点 、后代节点 、先辈节点

​ 3> . 节点的访问

​ 得到节点 :

document	直接使用
element	getElementById() / getElementsByTagName()
attr	element.getAttributeNode(attrname)
text	子节点
comment	子节点

获取子节点	childNodes
获取子元素节点	children
获取第一个子节点	firstChild
获取最后一个子节点	lastChild
获取父节点	parentNode
获取父元素节点	parentElement
获取前一个节点	previousSibling
获取后一个节点	nextSibling

​ 4> . 节点属性

属性	nodeName ( 名 )	nodeValue ( 值 )	nodeType ( 类型 )
document	#document	null	9
element	标签名	null	1
attr	属性名	属性值	2
text	#text	文本内容	3
comment	#comment	注释内容	8

​

(2) . 节点操作

1> . 获取节点 :

​ element getElementById() / getElementsByTagName() / 子节点 / 父节点 / 同辈节点

​ attr element.getAttributeNode(attrname) 属性节点
​ element.getAttribute(attrname) 属性值

2> . 改变节点 ( 改变节点的值 ) : nodeValue

​ element.attr = 'value'

​ element.setAttribute('attrname', 'value');

3> . 删除节点 :

​ 删除属性节点 : removeAttribute('attrname')

​ 删除元素节点 : removeChild() ( 需要找到父节点 )

4> . 替换节点 :

​ 替换属性 : setAttribute('attrname', 'value');

​ 替换元素 : replaceChild(new_node, old_node) ( 需要找到父节点 )

5> . 插入节点 :

​ 属性 : setAttribute('attrname', 'value');

​ setAttributeNode('attrname');

​ 元素 : appendChild(node) 追加插入

​ insertBefore(new_node, old_node) 指定位置插入

6> . 创建节点 :

​ 属性 : document.createAttribute(attrName)

​ 元素 : document.createElement('tagname')

7> . 克隆节点 : cloneNode()

3 . XML 对象

对象	功能
node	节点
nodeList	一个有序的节点列表
document	文档
element	标签名
attr	属性名
text	文本内容
comment	注释内容

4 . HTMLElement 对象

属性	功能
className	类名
scrollLeft / scrollTop	滚动条至左 / 上边界像素
offsetLeft / offsetTop	距离已定位父元素的左 / 上偏移量
innerHTML	元素内部的内容(不含标签)
innerText	元素内部所有的文本内容
outerHTML	元素的内容(含标签)
offsetWidth / offsetHeight	盒子模型 , 实际的宽 / 高: 内容+内边距+边框
clientWidth / clientHeight	宽 / 高 + 内边距
scrollWidth / scrollHeight	宽 / 高 + 内边距 + 计算里面元素的大小
document.documentElement.clientHeight	视口高度
document.documentElement.scrollHeight	文档高度

实例:

1.银行卡自动截断

<input type="text" id="backCard" maxlength="23">
<script>
    var input = document. getElementById('backCard');

    if (document.all) {
        input.onpropertychange = ck;
    }else{
        input.oninput = ck;
    }

    // 截断函数
    function ck(){
        //限定输入范围 
        //第一种   先将字符串中不是数字的全部替换为空字符,包括空格,第二步将字符中连续4位数字替换为连续四位数字加空格,第三步将字符串最后一位为空格是替换为空字符
        input.value = input.value.replace(/\D/g,'').replace(/(\d{4})/g,'$1 ').replace(/ $/g,'');
		//第二种   匹配的过程中需要 使用连续四位数字,需要使用匹配的结果的时候将其忽略,在这里的作用就是不替换空格
        input.value = input.value.replace(/\D/g,'').replace(/(\d{4})(?=\d)/g,'$1 ');
        
    }
     /*   (?=) 正向预查/现行断言
             就是说 匹配的过程中, 需要这个条件
             但是获取匹配结果时,又要忽略该条件   */
script>

2.轮播图

<div id="banner">
    <div id="play">
        <div id="imglist">
            <a href="#"><img src="./imgs/mm020.jpg" style="display:block">a>
            <a href="#"><img src="./imgs/mm021.jpg" style="display:block">a>
            <a href="#"><img src="./imgs/mm022.jpg" style="display:block">a>
            <a href="#"><img src="./imgs/mm023.jpg" style="display:block">a>
            <a href="#"><img src="./imgs/mm024.jpg" style="display:block">a>
        div>

        <div id="iconlist">
            <ul>
                <li style="background-color: #f00;">1li>
                <li>2li>
                <li>3li>
                <li>4li>
                <li>5li>
            ul>
        div>

    div>
div>

<script>
各种获取
var play = document.getElementById('play');
var imglist = play.getElementsByTagName('img');
var iconlist = play.getElementsByTagName('li');

// 设置循环变量
var m =0;
function run(){
    if(m>4){
        m = 0; //m>4就是循环到最后一张图片了需要重置
    }
    img(m); // 指定当前显示的图片序号
    icon(m); // 指定单签标红的按钮序号
    m++;
}

var timer = setInterval(run,1000);

function img(m){
    for (var i = 0; i < imglist.length; i++) {
        imglist[i].style.diplay ='none';
        // 先遍历所有的 图片将属性改为none不可见
    }
    //执行显示 序号为m 的图片
    imglist[m].style.display='block';

}

function icon(m){
    for (var i = 0; i < iconlist.length; i++) {
        iconlist[i].style.backgroundColor = 'rgba(0,0,0,0.5)';
        // 改变所有的背景色

    }
    //指定显示某种图片
    iconlist[m].style.backgroundColor = '#f00';
    //执行显示 序号为m 的背景色为红色
}

// 控制图片是否暂停显示
play.onmouseover = function(){
    clearInerval(timer);
}

// 移除 继续显示
play.onmouseout = function(){
    timer = setInterval(run,1000);
}

// 控制按钮 显示指定的图片
for (var i = 0; i < iconlist.length; i++) {
    (function(i){
        iconlist[i].onmouseover = function(){
            img(i);
            icon(i);
            m = i + 1;
        }
    })(i);
}
script>

3.图片无缝轮滚

<div id="box">
    <div id="content">
        <div id="imglist">
            <img src="./imgs/mm020.jpg">
            <img src="./imgs/mm021.jpg">
            <img src="./imgs/mm022.jpg">
            <img src="./imgs/mm023.jpg">
        div>
    div>
div>

<script>
    // 获取一轮图片的宽度
    var width = imglist.offsetWidth;

    //将所有的图片克隆一份.追加到当前图片集合之后
    content.appendChild(imglist.cloneNode(true));

    function scrollImage(){
        // 判断一轮图片是否滚完,则回滚
        if(box.scrollLeft>= width){
            box.scrollLeft = 0;
        }
        box.scrollLeft += 1;
        console.log(box.scrollLeft);
    }
    setInterval(scrollImage,10);

   /* 图片无缝轮滚
    1. 将图片属性以及图片外一层div设置浮动
    2. 将外两层设置非常宽的宽度.
    3. 将外三层设置超出部分用滚动条显示
    4. 获取一轮图片的宽度,
    5. 将所有图片也就是拼在一行的图片,克隆一份,追加到当前图片div子节点后面
    6. 使用多次定时器 每10毫秒 触发一次方法
    7. 调用方法 判断一轮图片是否滚动完,也即是判断 外三层的div滚动条滚动的距离 是否大于  所有图片加起来的宽度,如果是则执行 滚动条归零 就可以重新滚动,因为定时是毫秒所以看不出来已经回滚了,
    如果没有滚完则 滚动条像素+1 以此循环    */
script>

4.滚动加载图片

 <div id="imglist">
    <img data-src="./imgs/mm040.jpg">
    <img data-src="./imgs/mm041.jpg">
    <img data-src="./imgs/mm042.jpg">
    <img data-src="./imgs/mm043.jpg">
    <img data-src="./imgs/mm044.jpg">
    <img data-src="./imgs/mm045.jpg">
div>

<script>
// 获取img集合
var imgs = imglist.getElementsByTagName('img');

// 获取imglist元素的宽度 获取imglist盒子的宽度
var box_width = imglist.offsetWidth;

// 视口高度
var view_height = document.documentElement.clientHeight;

//  横着能加载图片数量
// Math.floor(box的宽度 / 一张img的宽) 
var x_number = Math.floor(box_width / imgs[0].offsetWidth);

// 首屏加载图片的数量
// Math.ceil(视口高度 - 首图到顶部的偏移量) / (图片高度) * 横向图片数量
var first_number = Math.ceil((view_height - img[0].offsetTop) / imgs[0].offsetHeight) * x_number;

// 定义全局 用于记录加载的 总张数
var m = 0;

// 加载第一屏幕的图片
loadImage(m,first_number);

// 更新m 记录值
m += first_number;

//绑定滚动事件
window.onscroll = function(){
    //判断图片序列是否滚完
    if(m >= img.length) {return;}

    // 获取滚动条 滚过的距离
    var top = document.body.scrollTop || document.documentElement.scrollTop;

    // 获取 还未加载首图到顶部的偏移量
    var img_top = imgs[m].offsetTop;

    // 计算后续图片的加载临界点
    if((top+view_height)>= img_top){
        loadImage(m,x_number);
        m += x_number;
    }
}

function loadImage(start,length){
    for (var i = start; i < (start+length); i++) {
        //判断图片序列是否滚完
        if(i >= imgs.length){return;}
        (function(i){
            setTimeout(function(){
                imgs[i].src = imgs[i].getAttribute('data-src');
            },800)
        })(i);
    }
}

/* 滚动加载图片效果
    1. 获取 放图片盒子的元素对象-就是图片的集合
    2. 获取 放图片的盒子的宽度 offserWidth
    3. 获取当前视口高度d.dE.clientHeight
    4. 获取横向能够加载图片数量,Math.floor(图片盒子宽度 / 单张图片宽度)
    5. 获取首屏慕能够加载图片数量,Math.ceil((视口的高度-首图到顶部的偏移量offsetTop) / 单张图片高度offsetHeight) * 横向加载图片的数量
    6. 定义一个全局变量 用于记录加载总张数
    7. 调用自定义方法---加载首屏慕图片
    8. 更新 全局变量m记录值 += 首屏能加载图片的数量

    9. 给文档绑定滚动事件, 判断图片是否滚完 m>图片集合.length.如果是则return; 
    10. 如果不是则 获取滚动条滚动过的距离body.scrollTop, 获取还未加载的首张图片到顶部的偏移量offsetTop, 
    11. 计算后续图片加载的临界点--判断 滚动条滚动的距离 + 视口高度 >= 还未加载首图到顶部的偏移量
    如果是则执行 调用 自定义方法让图片显示(调用参数m 准备开始加载的首张图片号 和 一行能够加载的图片数量)     m += 一行能够加载的图片数量

    12. 自定义方法接收参数, 进行for循环,初始值为m 条件为m+一行图片数
    13. 判断图片是否滚完 滚完则执行return
    14. 创建自执行函数, 传入参数i, 创建单次定时器,单张图片,让其赋予或替换src地址 让其显示,设置秒数,     */
script> 

5.蛇形文字

var msg = '1234567890-9876543343587-=5432486=432987432';
for (var i = 0; i < msg.length; i++) {
    document.write('+i+'" class="str">');
    document.write(msg[i]);
    document.write('');
}

document.onmousemove = function(e){
    var e = e || window.event;
    // 获取鼠标相对于文档 x y 坐标
    document.title = 'x:'+ e.x + '| Y:'+e.y;

    // 让每个字之间有统一的延迟去行动
    var m = 0;  // 默认从第0个字开始定位
                // 多次定时 使用方法, 判断m标记 < 字符长度 时,调用snake方法,标记++就是下一个文字,如果标记大于总长度则 清除定时
    var time = setInterval(function(){
        if (m<msg.length) {
            snake(e.x,e.y,m);
            m++;
        }else{
            clearInterval(timer);
        }
    },50);
}

function snake(x,y,i){
    // 获取每个span标签
    var span = document.getElementById('str'+i);
    span.style.left = x +(i*20)+'px';
    span.style.top = y +'px';
}

/* 蛇形文字
1. 读取字符串中文本写到浏览器中,利用for循环和span标签将每个文本独立,并设置相关联的id(此id同步m )
2. 给鼠标绑定移动时间,获取鼠标的xy坐标
3. 给标志m=0
4. 设置多次定时,判断m是否小于子串长度,调用蛇形走位传入xy坐标以及 m(m可以说是字符的下标,代表第几个字), m++自增.   如果不满足则清除定时
5. 蛇形走位方法,接收参数. 获取id为 'str'字符拼接m 也就是之前遍历创建的id.
6. 通过span对象设置x 设置 y 
    通过x+(m*数字)+'px'; 设置每个字符之间的间隔(文字横向)
    通过y+(m*数字)+'px';设置每个字符之间的间隔(文字纵向)     */

↓

↓

AJAX 笔记

async javascript and xml 异步的JS和XML

一. AJAX基础

1.请求与响应

• request 请求 : 客户端 向服务器 请求一个文件
• response响应: 服务端 把 文件的内容 返回给客户端,一般服务器有输出才算真正的响应
• 传统请求: 通过地址栏 刷新请求的
• AJAX 的请求: 通过技术 偷偷请求的

2.XMLHttpRequest 对象 XHR

概念: XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。

XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。

(1) 对象申明

​ var = xhr = new XMLHttpRequest();

(2)AJAX事件

​ xhr.onreadystatechange

​ readyState请求响应状态 值! 发生改变时触发.

(3)常用属性

• readyState 请求响应状态的属性

readyState 请求响应状态的属性
0	Uninitialized初始化状态 XMLHttpRequest对象已创建或已被 abort( )方法重置
1	open( ) 方法已经调用, 但是send( ) 方法为调用. 请求还未被发送
2	send( ) 方法已调用, HTTP请求已发送到Web服务器.未接收到响应
3	Receiving 所有响应头部已经接收到,响应体开始接受但未完成
4	Loaded HTTP 响应已经完全接受

• status HTTP响应状态码

status 状态响应码
200	成功响应
404	文件不存在
304	文件来自于缓存
500	服务未知错误
503	服务器宕机

• responseText 获取服务器的响应文本

(4)常用方法

常用方法	功能	参数
open( )	初始化请求	参1 method 请求方式 get/post/head 参2 url 请求地址 参3 是否同/异步, 默认值为 true(异步),false(同步) 参4,5 认证的用户名和密码
send( )	发送请求	GET 方式 无参数
POST 方式 有 可选参数
setRequestHeader( )	设置HTTP请求头信息	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

3 Ajax+php 请求流程

• 创建对象 XHR对象
• 初始化请求
• 发送请求
• 接收并处理响应

加数1 <input type="text" id="num1">
加数2 <input type="text" id="num2"><br>
<button onclick="add()">相加button><hr>
<div id="box">div>
<script>
/*  触发请求过程
1. 通过input输入值, 在script代码中获取到值
2. 创建一个xml http request对象 xmlhttp请求对象
3. 请求初始化 open() 参1:请求方式,参2:请求地址(可以添加传递其他文件 的参数),参3:是否同步异步
    (如果传输方式是post 则需要设置请求头信息 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');    并且参数在send()中传递)
4. 发送请求 send();
5. 创建 AJAX事件 xhr.onreadystatechange 请求状态改变时触发
6. 判断请求相应的状态--true执行下一步
7. 判断请求成功的状态码 true执行下一步
8. 获取请求成功时,服务器返回的数据内容 将其写到页面上
 */
    function add(){
        // 获取输入值
        var num1 = document.getElementById('num1').value;
        var num2 = document.getElementById('num2').value;

        var xhr = new XMLHttpRequest();
        //ajax事件 redyState状态发生改变时触发 
        xhr.onreadystatechange = function(){
             // 请求响应状态
            if(xhr.readyState==4){
                 // 成功请求会返回的状态码
                if(xhr.status==200){
                     // 获取相应文本
                    box.innerHTML = xhr.responseText;
                }
            }
        }
        // 请求初始化
        xhr.open('get','./php/2.php?a='+num1+'&b='+num2,true);
        // 正式发送请求
        xhr.send();
    }
script>

4.处理JSON数据

PHP : json_encode() 对变量进行 JSON 编码

J S : eval() 计算字符串 , 并执行其中的的 JavaScript 代码 ( 参数为 String )

​ JSON.parse(text[, reviver]) 将数据转换为 JavaScript 对象

​ 参数 :

​ text : 必需， 一个有效的 JSON 字符串

​ reviver : 可选，一个转换结果的函数， 将为对象的每个成员调用此函数

eval()案例 :
<script type="text/javascript">
	eval("x=10;y=20;document.write(x*y)")		// 输出 : 200
	document.write(eval("2+2"))					// 输出 : 4
	var x=10
	document.write(eval(x+17))					// 输出 : 27
script>

5.同步和异步

open( 请求方式, 请求地址, 同步/异步 )的参3决定的,

1. 默认参数为true,表示请求是异步的,AJAX不会影响到后续代码的执行
2. 参数为false,表示请求是同步的,AJAX将会阻塞后续程序的执行,直到响应完全接收完成就停止

6.post 和 get

• get

  • 使用 open ('method请求方式','请求地址 +参数','是否异步')

  • 当请求地址为get时,直接填写请求地址 + 参数 即可

xhr.open('get', './php/2.php?a='+num1+'&b='+num2, true);
xhr.send();

• post
  • 使用 open('method请求方式','请求地址','是否异步')
  • 当请求地址为post时, 请求地址不能够写参数.需要设置 header信息,并且 在正式发送请求的 send() 中填写参数

	// 请求初始化
    xhr.open('post', './php/3.php', true);
    //  设置HTTP 请求头信息
   	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // 正式发送请求
    xhr.send('a='+num1+'&b='+num2);

7.Ajax 无法跨域

为什么会产生无法跨域的问题呢?

1.发出的请求不是在本域, 比如: 协议 / 域名 / 端口 任何一个不同就算 不同域.

2.浏览器的限制,不是服务器不给你访问, 是浏览器为了安全性阻拦的.

3.XHR对象 不支持跨域. 如果你发送的不是ajax请求,就算跨域也可能能进行正常访问.

解决 无法跨域的问题, 需要用到jsonp 方式

8.jsonp

jsonp 就是,动态的创建一个JS标签, 给JS标签的src地址 服务端PHP的文件,而PHP文件中 返回了一个 JS可调用的函数代码. (返回的函数代码中 实参可以是数据)

只要在JS页面中 声明这个同名函数.就可以调用它做事情.
JS标签 不受同源策略的影响

• 例

// 触发函数后 加载php文件, 返回了字符串,内容为,一个函数调用并且传参. 
function load(){  
    //创建JS标签
    var script = document.createElement('script');
    //设置该标签的src地址为 指定域的 php文件
    script.src = 'http://127.0.0.1/text/20190329/php/jsonp.php';
    //把该标签 追加到页面中
    document.body.appendChild(script);
}

function makedata(obj){
    for(var i in obj){
       // 如果返回的数据,需要遍历要页面中可以在这里操作
    }
}

9.AJAX封装

function ajax(url, callback){
    var xhr = new XMLHttpRequest();
    xhr.open('get', url, true);
    xhr.send();
    xhr.onreadystatechange = function(){
        if (xhr.readyState == 4 && xhr.status == 200) {
            var result = xhr.responseText;
            // 处理结果
            callback(result);
        }
    }
}

ajax('./php/7.php', function (result){
    box.innerHTML = result;
});

10.回调函数,匿名函数,闭包函数

(1)回调函数

将一个函数名作为参数,被作为参数传递的这个函数 就是一个回调函数 (在一个函数内部 使用变量函数)

• call_user_func 把第一个参数作为回调函数调用
• call_user_func_array 把一个数组参数作为回调函数的参数

// 求和
function sum($n1, $n2)
{
    return $n1 + $n2;
}
// 求积
function mul($n1, $n2)
{
    return $n1 * $n2;
}
// 自定义回调函数
function result($n1, $n2, $callback='sum')
{
    // sum($n1, $n2);
    return $callback($n1, $n2);
}

// 把第一个参数作为回调函数调用
echo call_user_func('sum', 50, 50);

// 调用回调函数，并把一个数组参数作为回调函数的参数
echo call_user_func_array('sum', [99, 99]);

(2)匿名函数

将一个没有函数名的函数赋值给一个变量

$hehe = function ($a)
{
    echo $a;
};
$hehe('呵呵哒');

在匿名函数内部 使用外部的全局变量时, 必须通过 use关键字 来连接闭包函数的内外部变量

$func = function () use(&$x, &$y)
{
    $x *= 2;
    $y *= 3;
    $z = $x + $y;
    return $z;
};
$x = 3;
$y = 3;

echo $func();

(3)闭包函数

function demo()
{
    $m = 3;
    $n = 3;
    //  闭包函数
    $func = function () use ($m, $n)
    {
        $m *= 2;
        $n *= 3;
        $k = $m + $n;
        return $k;
    };
    return $func();
}
echo demo();

function getInfo($callback)
{
    $callback('鲜血与农药,喂了联盟!');
}

// 回调方式
function lm($str)
{
    echo '回调方式: ' . $str;
}
getInfo('lm');

// 匿名方式
getInfo(function($str){
    echo '匿名方式: ' . $str;
});

getInfo(function($str){
    echo '
'.$str.'
';
});