js相关笔记（十八）
1.有些样式的属性值，在某些浏览器上是无法直接获取的，原来的内嵌式与外链式的获取方式还有行内式的获取方式也是无法直接获取的，只能够通过获取获取其子样式属性来获取，于是以下是getStyle新版本的封装，兼容border-radius的获取【
/**
* 功能：获取兼容borderRadius的getStyle框架
* @param elemnet
* @param attribute
* @returns {string}
*/
function getStyle(elemnet, attribute) {
// 左边||右边
// 左边在有些主流浏览器上获取不到内嵌式和外链式以及行内式的border-radius
// 右边只能够获取到行内式的border-radius
// 所以无论是左边还是右边，在某些浏览器上 肯定获取不到内嵌式和外链式的 border-radius
// 当左边和右边都获取不到时，返回值都是""空字符串，于是就判断一下 是否是border-radius
var sty = (elemnet.currentStyle
?
elemnet.currentStyle[attribute]
:
window.getComputedStyle(elemnet, null)[attribute]
) || elemnet.style[attribute];
//判断获取到的值是否为空字符串
if ("" == sty) {
switch (attribute) {
case "borderRadius":
case "border-radius":
(sty = elemnet.currentStyle
?
elemnet.currentStyle["border-top-left-radius"]
:
window.getComputedStyle(elemnet, null)["border-top-left-radius"]);
break;
default:
sty;
break;
}
}
return sty;
}
】
2.旋转木马轮播的原理：将每张图片的样式都存到一个数组中，每一张图片的样式有多个，所以那个数组里面的元素都是对象，通过制作的缓速框架，移动每一张图片对象，缓速改变图片的样式，缓速改变的样式都在数组元素的对象里，所以改变了数组中元素的位置，就让图片轮播起来，并且还是以旋转木马的方式，通过将第一个元素shift然后push达到顺时针旋转，通过将最后一个元素pop然后unshift达到逆时针旋转。防止狂点的方法是，定义一个标识，一开始这个表示为true，当点击一下之后，把这个标识赋值为false，等整个动画都执行完毕之后，在赋值为true,这样就能防止动画没有结束完毕右执行了下一个动画。【
旋转木马
原理：我们先定义一个数组，数组中的元素是json；json中的元素是属性。点击一个按钮，按顺序更换数组中元素的位置。
（如果我们想完成旋转木马，只需要更换数组中元素的位置）
步骤：
1.我们必须让页面加载的时候把所有的属性加载出来，让我看看。（核心）
2.鼠标放到大盒子上显示对应的左右切换按钮，移开隐藏
3.获取两个按钮。对他们进行事件绑定。对他们进行判断。
4.如果是左侧的按钮执行一套程序，如果是右侧的按钮执行另一套程序。
5.绑定按钮的函数，一个是正转，一个是反转。（传参确定）
6.调换相应的数组对应的元素。（先删除谁，在怎么添加）
正转反转的问题
最开始是：12345；我想让他变成：23451
把1删除，在最后添加1；
在数组json中，删除第一个元素，添加到最末尾。（正转）
在数组json中，删除最后一个元素，添加到第一位。（反转）
函数节流
定义一个变量，只有函数执行完毕在去执行下一个。
】
3.正则表达式定义的方式有两种：内置对象定义法、字面量定义法
◆var reg=new RegExp(/abc/);，通过new 关键字和构造函数来定义
◆var reg=/abc/;，通过正则表达式字面量来定义
4.数组使用字面量定义的方式是[]、对象使用字面量定义的方式是{}、正则使用字面量定义的方式是/abc/（/占位置不能为空/）。
5.正则表达式五大内部类（帮我们写好的工具直接使用）
◆预定义类
【
.：[^\n\r] 匹配除了\r、\n之外的任何单个字符
\d：[0-9]匹配所有数字类型的单个字符
\D：[^0-9]匹配所有非数字类型的单个字符
\s：[ \t\n\x0B\f\r]匹配所有空白的单个字符
\S：[^ \t\n\x0B\f\r] 匹配所有非空白的单个字符
\w：[a-zA-Z_0-9]匹配所有的数字类型及字母类型的单个字符
\W：[^a-zA-Z_0-9]匹配所有的非数字类型及非字母类型的单个字符
】
◆简单类
【
//中什么特殊符号都不写，如/str/，只要包含str的字符的字符串都能够匹配成功，是整个str，只能多不能少，例如str123也能匹配成功。
//中加入[]，如/[str]/，只要包含s、t、r的字符的字符串都能匹配成功，是整个str中的任何单个字符，例如 s123、t123、r123都能够匹配成功。
】
◆负向类
【
[^]：表示只要不完全等于括号中的完整字符串或者不完全等于括号中完整字符串中的任意单个字符或者多个相同字符或不同字符的组合，就算你匹配成功了，如/[^str]/，只要你的字符串中包含了str或者只有str中任意单个字符或多个字符都无法匹配成功，例如str、sssss、tttttt、rrrr、srsss、strrr、rts、tsr、rst、sr、tr、st、ts、rt、rs、s、t、r、都会匹配失败，而ts123、st123、str123、str345、s123、r123、t123、aacc123都会匹配成功，也就是说，你只能是括号完整字符串中的一部分或者全部，也可以是这个完整字符串中的任意单个字符或者多个字符的组合，甚至连长度都可以超过原来完整字符串的长度。
总结：[]表示只要包含其中之一，而[^]表示只要不完全等于其中之一或者不完全等于全部再或者不完全等于其中任意的组合。
核心：[^]，只要你匹配的字符串中有任何一个不在[^]里的字符，就算你匹配成功，只要你匹配的字符串中都是[^]里的字符组成而来，那么就算你匹配失败，这个很像是贪婪匹配，尽可能匹配所有能够匹配到的。
其它：[^abc]、[^a,b,c]、[^a-c]表示的都是一样的效果。
】
◆范围类
【
[a-z]：表示a到z之间的所有字母
[A-Z]:表示A到Z之间的所有字母
[0-9]:表示0-9之间的所有数字
】
◆组合类
【
[a-z0-9]：表示a到z之间的所有字母和0-9之间的所有数字
[a-z0-9A-Z]：表示a到z之间的所有字母和A到Z之间的所有字母和0-9之间的所有数字
[]中的-的意思是 unicode码指定范围之间的连接符，如a-z表示 97-125之间
】
◆[]与[^]的区别
【
[]表示只要匹配的字符串中有一个字符是括号里的就算匹配成功
[^]表示只要匹配的字符串中有一个字符不是括号里的就算匹配成功
】
6.正则边界
◆^:表示开头的边界，表示以什么什么开头
◆$:结束的边界，以什么什么结束
◆^$:表示以什么开头，以什么结束。
7.量词，前面单个字符的数量
◆*：前面的内部类所代表的字符重复零次或者多次（>=0），会触发贪婪模式，尽可能的多匹配
◆+：前面的内部类所代表的字符重复一次或者多次（>=1）
◆?：前面的内部类所代表的字符重复零次或者一次（0||1），可以终止贪婪模式
◆{}：重复多少次的，{5}表示重复五次（=5）;{5,10}，重复5至10次（>=5&&<=10）;{5，},重复至少5次(>=5)。
◆|：表示满足左边或者右边都行，2|5表示2或者5。
◆()：表示提升优先级，并且也可以提取，通过$符号提取，在使用replace方法时可以提取。
◆* 等价于 {0,} + 等价于{1,} ? 等价于{0,1}
8.汉字的unicode码的取值范围在 u4e00-u9fa5，汉字接近21000个，[\u4e00-\uf95a]匹配的是中文，其实也就是第一个汉字和最后一个汉字之间的unicode码的范围，[\u4e00-\uf95a]等价于[一-偿]，所以用这个效果一样[一-偿]，原理是在unicode码之间取值。
9.getAttribute或者getAttributeNode 只能够获取页面标签字符串中属性及节点的值，并不能实时的获取，只要页面标签字符串没有，那么就获取不到返回null或者为空，而通过对象.属性，可以实时获取。
10.一些常用的正则表达式
◆匹配HTML标记的正则表达式：< (\S*?)[^>]*>.*?|< .*? />
◆验证QQ号：/^[1-9][0-9]{4,}$/
◆验证手机号：/^((13[0-9])|(15[^4,\D])|(18[0-9]))\d{8}$/
◆验证邮箱：/^[\w\-\.]+\@[\w]+\.[\w]{2,4}$/
◆验证座机号：/^0\d{2}-\d{8}$|^0\d{3}-\d{7}$/
◆验证用户名：/^[a-zA-Z0-9_-]{3,16}$/
◆验证密码：/^[\$a-zA-Z0-9_-]{6,18}$/
◆匹配人名：/^[\u4e00-\u9fa5]{2,4}$/
◆匹配URL：[a-zA-z]+://[^\s]*
◆匹配国内电话号码：\d{3}-\d{8}|\d{4}-\d{7}
◆匹配中国邮政编码：[1-9]\d{5}(?!\d)中国邮政编码为6位数字
◆匹配身份证：\d{15}|\d{18}中国的身份证为15位或18位
◆匹配ip地址：\d+\.\d+\.\d+\.\d+：提取ip地址时有用
◆匹配密码强度：
◇弱 /^([a-z].*[A-Z])|([A-Z].*[a-z])$/ 区分大小写英文字母
◇中/^([a-z].*[0-9])|([A-Z].*[0-9])|[0-9].*[a-zA-Z]$/ 带有字母 和 数字
◇强/^[A-Za-z0-9]+[_$][A-Za-z0-9]*$/ 字母数字中间 加有下划线（想要什么中括号中加）
◆匹配双字节字符(包括汉字在内)：[^\x00-\xff]可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）
11.字符串的search方法，str.search(/s/);和str.indexOf("s")效果一样，只不过是参数不一样。
12.字符串的trim方法在IE678里不支持，所以有时候需要自己封装trim方法【
//自己封装trim方法
function trim(str){
return str.replace(/^\s+|\s+$/g,"");//i是忽略大小写 g表示全局匹配
}
//面向对象
String.prototype.trim2= function () {
return str.replace(/^\s+|\s+$/g,"");//i是忽略大小写 g表示全局匹配
}
】
/**
* 功能：获取兼容borderRadius的getStyle框架
* @param elemnet
* @param attribute
* @returns {string}
*/
function getStyle(elemnet, attribute) {
// 左边||右边
// 左边在有些主流浏览器上获取不到内嵌式和外链式以及行内式的border-radius
// 右边只能够获取到行内式的border-radius
// 所以无论是左边还是右边，在某些浏览器上 肯定获取不到内嵌式和外链式的 border-radius
// 当左边和右边都获取不到时，返回值都是""空字符串，于是就判断一下 是否是border-radius
var sty = (elemnet.currentStyle
?
elemnet.currentStyle[attribute]
:
window.getComputedStyle(elemnet, null)[attribute]
) || elemnet.style[attribute];
//判断获取到的值是否为空字符串
if ("" == sty) {
switch (attribute) {
case "borderRadius":
case "border-radius":
(sty = elemnet.currentStyle
?
elemnet.currentStyle["border-top-left-radius"]
:
window.getComputedStyle(elemnet, null)["border-top-left-radius"]);
break;
default:
sty;
break;
}
}
return sty;
}
】
2.旋转木马轮播的原理：将每张图片的样式都存到一个数组中，每一张图片的样式有多个，所以那个数组里面的元素都是对象，通过制作的缓速框架，移动每一张图片对象，缓速改变图片的样式，缓速改变的样式都在数组元素的对象里，所以改变了数组中元素的位置，就让图片轮播起来，并且还是以旋转木马的方式，通过将第一个元素shift然后push达到顺时针旋转，通过将最后一个元素pop然后unshift达到逆时针旋转。防止狂点的方法是，定义一个标识，一开始这个表示为true，当点击一下之后，把这个标识赋值为false，等整个动画都执行完毕之后，在赋值为true,这样就能防止动画没有结束完毕右执行了下一个动画。【
旋转木马
原理：我们先定义一个数组，数组中的元素是json；json中的元素是属性。点击一个按钮，按顺序更换数组中元素的位置。
（如果我们想完成旋转木马，只需要更换数组中元素的位置）
步骤：
1.我们必须让页面加载的时候把所有的属性加载出来，让我看看。（核心）
2.鼠标放到大盒子上显示对应的左右切换按钮，移开隐藏
3.获取两个按钮。对他们进行事件绑定。对他们进行判断。
4.如果是左侧的按钮执行一套程序，如果是右侧的按钮执行另一套程序。
5.绑定按钮的函数，一个是正转，一个是反转。（传参确定）
6.调换相应的数组对应的元素。（先删除谁，在怎么添加）
正转反转的问题
最开始是：12345；我想让他变成：23451
把1删除，在最后添加1；
在数组json中，删除第一个元素，添加到最末尾。（正转）
在数组json中，删除最后一个元素，添加到第一位。（反转）
函数节流
定义一个变量，只有函数执行完毕在去执行下一个。
】
3.正则表达式定义的方式有两种：内置对象定义法、字面量定义法
◆var reg=new RegExp(/abc/);，通过new 关键字和构造函数来定义
◆var reg=/abc/;，通过正则表达式字面量来定义
4.数组使用字面量定义的方式是[]、对象使用字面量定义的方式是{}、正则使用字面量定义的方式是/abc/（/占位置不能为空/）。
5.正则表达式五大内部类（帮我们写好的工具直接使用）
◆预定义类
【
.：[^\n\r] 匹配除了\r、\n之外的任何单个字符
\d：[0-9]匹配所有数字类型的单个字符
\D：[^0-9]匹配所有非数字类型的单个字符
\s：[ \t\n\x0B\f\r]匹配所有空白的单个字符
\S：[^ \t\n\x0B\f\r] 匹配所有非空白的单个字符
\w：[a-zA-Z_0-9]匹配所有的数字类型及字母类型的单个字符
\W：[^a-zA-Z_0-9]匹配所有的非数字类型及非字母类型的单个字符
】
◆简单类
【
//中什么特殊符号都不写，如/str/，只要包含str的字符的字符串都能够匹配成功，是整个str，只能多不能少，例如str123也能匹配成功。
//中加入[]，如/[str]/，只要包含s、t、r的字符的字符串都能匹配成功，是整个str中的任何单个字符，例如 s123、t123、r123都能够匹配成功。
】
◆负向类
【
[^]：表示只要不完全等于括号中的完整字符串或者不完全等于括号中完整字符串中的任意单个字符或者多个相同字符或不同字符的组合，就算你匹配成功了，如/[^str]/，只要你的字符串中包含了str或者只有str中任意单个字符或多个字符都无法匹配成功，例如str、sssss、tttttt、rrrr、srsss、strrr、rts、tsr、rst、sr、tr、st、ts、rt、rs、s、t、r、都会匹配失败，而ts123、st123、str123、str345、s123、r123、t123、aacc123都会匹配成功，也就是说，你只能是括号完整字符串中的一部分或者全部，也可以是这个完整字符串中的任意单个字符或者多个字符的组合，甚至连长度都可以超过原来完整字符串的长度。
总结：[]表示只要包含其中之一，而[^]表示只要不完全等于其中之一或者不完全等于全部再或者不完全等于其中任意的组合。
核心：[^]，只要你匹配的字符串中有任何一个不在[^]里的字符，就算你匹配成功，只要你匹配的字符串中都是[^]里的字符组成而来，那么就算你匹配失败，这个很像是贪婪匹配，尽可能匹配所有能够匹配到的。
其它：[^abc]、[^a,b,c]、[^a-c]表示的都是一样的效果。
】
◆范围类
【
[a-z]：表示a到z之间的所有字母
[A-Z]:表示A到Z之间的所有字母
[0-9]:表示0-9之间的所有数字
】
◆组合类
【
[a-z0-9]：表示a到z之间的所有字母和0-9之间的所有数字
[a-z0-9A-Z]：表示a到z之间的所有字母和A到Z之间的所有字母和0-9之间的所有数字
[]中的-的意思是 unicode码指定范围之间的连接符，如a-z表示 97-125之间
】
◆[]与[^]的区别
【
[]表示只要匹配的字符串中有一个字符是括号里的就算匹配成功
[^]表示只要匹配的字符串中有一个字符不是括号里的就算匹配成功
】
6.正则边界
◆^:表示开头的边界，表示以什么什么开头
◆$:结束的边界，以什么什么结束
◆^$:表示以什么开头，以什么结束。
7.量词，前面单个字符的数量
◆*：前面的内部类所代表的字符重复零次或者多次（>=0），会触发贪婪模式，尽可能的多匹配
◆+：前面的内部类所代表的字符重复一次或者多次（>=1）
◆?：前面的内部类所代表的字符重复零次或者一次（0||1），可以终止贪婪模式
◆{}：重复多少次的，{5}表示重复五次（=5）;{5,10}，重复5至10次（>=5&&<=10）;{5，},重复至少5次(>=5)。
◆|：表示满足左边或者右边都行，2|5表示2或者5。
◆()：表示提升优先级，并且也可以提取，通过$符号提取，在使用replace方法时可以提取。
◆* 等价于 {0,} + 等价于{1,} ? 等价于{0,1}
8.汉字的unicode码的取值范围在 u4e00-u9fa5，汉字接近21000个，[\u4e00-\uf95a]匹配的是中文，其实也就是第一个汉字和最后一个汉字之间的unicode码的范围，[\u4e00-\uf95a]等价于[一-偿]，所以用这个效果一样[一-偿]，原理是在unicode码之间取值。
9.getAttribute或者getAttributeNode 只能够获取页面标签字符串中属性及节点的值，并不能实时的获取，只要页面标签字符串没有，那么就获取不到返回null或者为空，而通过对象.属性，可以实时获取。
10.一些常用的正则表达式
◆匹配HTML标记的正则表达式：< (\S*?)[^>]*>.*?|< .*? />
◆验证QQ号：/^[1-9][0-9]{4,}$/
◆验证手机号：/^((13[0-9])|(15[^4,\D])|(18[0-9]))\d{8}$/
◆验证邮箱：/^[\w\-\.]+\@[\w]+\.[\w]{2,4}$/
◆验证座机号：/^0\d{2}-\d{8}$|^0\d{3}-\d{7}$/
◆验证用户名：/^[a-zA-Z0-9_-]{3,16}$/
◆验证密码：/^[\$a-zA-Z0-9_-]{6,18}$/
◆匹配人名：/^[\u4e00-\u9fa5]{2,4}$/
◆匹配URL：[a-zA-z]+://[^\s]*
◆匹配国内电话号码：\d{3}-\d{8}|\d{4}-\d{7}
◆匹配中国邮政编码：[1-9]\d{5}(?!\d)中国邮政编码为6位数字
◆匹配身份证：\d{15}|\d{18}中国的身份证为15位或18位
◆匹配ip地址：\d+\.\d+\.\d+\.\d+：提取ip地址时有用
◆匹配密码强度：
◇弱 /^([a-z].*[A-Z])|([A-Z].*[a-z])$/ 区分大小写英文字母
◇中/^([a-z].*[0-9])|([A-Z].*[0-9])|[0-9].*[a-zA-Z]$/ 带有字母 和 数字
◇强/^[A-Za-z0-9]+[_$][A-Za-z0-9]*$/ 字母数字中间 加有下划线（想要什么中括号中加）
◆匹配双字节字符(包括汉字在内)：[^\x00-\xff]可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）
11.字符串的search方法，str.search(/s/);和str.indexOf("s")效果一样，只不过是参数不一样。
12.字符串的trim方法在IE678里不支持，所以有时候需要自己封装trim方法【
//自己封装trim方法
function trim(str){
return str.replace(/^\s+|\s+$/g,"");//i是忽略大小写 g表示全局匹配
}
//面向对象
String.prototype.trim2= function () {
return str.replace(/^\s+|\s+$/g,"");//i是忽略大小写 g表示全局匹配
}
】
