javascript的常用操作(一)

1. 实时监听input的值变化

　　onchange事件只在键盘或者鼠标操作改变对象属性，且失去焦点时触发，脚本触发无效;

　　而onkeydown/onkeypress/onkeyup在处理复制、粘贴、拖拽、长按键（按住键盘不放）等细节上并不完善;

　　onpropertychange属性可在某些情况下解决上面存在的问题，不用考虑是否失去焦点，不管js操作还是键盘鼠标手动操作，只要HTML元素属性发生改变即可立即捕获到。遗憾的是，onpropertychange为IE专属的。其他浏览器下如果想要实现这一实时监听的需求，就要用到HTML5中的标准事件oninput，不过IE9以下的浏览器是不支持oninput事件的

　　$("input").on("input propertychange",function(event){
　　　　....
　　});

例1、对支持oninput的浏览器用oninput，其他浏览器（IE6/7/8）使用onpropertychange：

[javascript] view plain copy

var testinput = document.createElement('input');

if('oninput' in testinput){

    object.addEventListener("input",fn,false);

}else{

    object.onpropertychange = fn;

}  

例2、对所有ie使用onpropertychange，其他浏览器用oninput：

[javascript] view plain copy

var ie = !!window.ActiveXObject;

if(ie){

    object.onpropertychange = fn;

}else{

    object.addEventListener("input",fn,false);

}

　　汇总onchange onpropertychange 和oninput事件的区别：

　　1、onchange事件与onpropertychange事件的区别：

　　　　onchange事件在内容改变（两次内容有可能还是相等的）且失去焦点时触发；onpropertychange事件却是实时触发，即每增加或删除一个字符就会触发，通过js改变也会触发该事件，但是该事件IE专有。

　　2、oninput事件与onpropertychange事件的区别：

　　　　oninput事件是IE之外的大多数浏览器支持的事件，在value改变时触发，实时的，即每增加或删除一个字符就会触发，然而通过js改变value时，却不会触发；onpropertychange事件是任何属性改变都会触发的，而

　　　 oninput却只在value改变时触发，oninput要通过addEventListener()来注册，onpropertychange注册方式跟一般事件一样。（此处都是指在js中动态绑定事件，以实现内容与行为分离）

　　3、oninput与onpropertychange失效的情况：

　　　　（1）oninput事件：a). 当脚本中改变value时，不会触发；b).从浏览器的自动下拉提示中选取时，不会触发。

　　　　（2）onpropertychange事件：当input设置为disable=true后，onpropertychange不会触发。

2. 正则表达式的使用

　　正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。

　　搜索模式可用于文本搜索和文本替换。

　　正则表达式是由一个字符序列形成的搜索模式。

　　当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。

　　正则表达式可以是一个简单的字符，或一个更复杂的模式。

　　正则表达式可用于所有文本搜索和文本替换的操作。

　　语法

　　/正则表达式主体/修饰符(可选)

　　其中修饰符是可选的。

　　实例：

　　　　var patt = /runoob/i

　　实例解析：

　　　　/runoob/i 是一个正则表达式。

　　　　runoob 是一个正则表达式主体 (用于检索)。

　　　　i 是一个修饰符 (搜索不区分大小写)。

　　在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。

　　search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。

　　replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

　　var str = "Visit Runoob!";

　　var n = str.search(/Runoob/i);

　　　　输出结果为：　6

　　search 方法可使用字符串作为参数。字符串参数会转换为正则表达式：

　　实例

　　　　检索字符串中 "Runoob" 的子串：

　　　　var str = "Visit Runoob!";

var n = str.search("Runoob"); // 6

　　使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 Runoob :

　　var str = document.getElementById("demo").innerHTML;

　　var txt = str.replace(/microsoft/i,"Runoob");

　　结果输出为: Visit Runoob!

　　replace() 方法将接收字符串作为参数：

　　var str = "请访问 Microsoft!";

　　var txt = str.replace("Microsoft","Runoob"); // 请访问 Runoob!

正则表达式修饰符

修饰符 可以在全局搜索中不区分大小写:

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

正则表达式模式

方括号用于查找某个范围内的字符：

表达式	描述
[abc]	查找方括号之间的任何字符。
[0-9]	查找任何从 0 至 9 的数字。
(x\|y)	查找任何以 \| 分隔的选项。

元字符是拥有特殊含义的字符：

元字符	描述
\d	查找数字。
\s	查找空白字符。
\b	匹配单词边界。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

test() 方法是一个正则表达式方法。

test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

以下实例用于搜索字符串中的字符 "e"：

实例

var patt = /e/;

patt.test("The best things in life are free!");

字符串中含有 "e"，所以该实例输出为：

true

exec() 方法是一个正则表达式方法。

exec() 方法用于检索字符串中的正则表达式的匹配。

该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

以下实例用于搜索字符串中的字母 "e":

Example 1

/e/.exec("The best things in life are free!");

字符串中含有 "e"，所以该实例输出为:

e

验证数字：^[0-9]*$

验证n位的数字：^\d{n}$

验证至少n位数字：^\d{n,}$

验证m-n位的数字：^\d{m,n}$

验证零和非零开头的数字：^(0|[1-9][0-9]*)$

验证有两位小数的正实数：^[0-9]+(.[0-9]{2})?$

验证有1-3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$

验证非零的正整数：^\+?[1-9][0-9]*$

验证非零的负整数：^\-[1-9][0-9]*$

验证非负整数（正整数 + 0） ^\d+$

验证非正整数（负整数 + 0） ^((-\d+)|(0+))$

验证长度为3的字符：^.{3}$

验证由26个英文字母组成的字符串：^[A-Za-z]+$

验证由26个大写英文字母组成的字符串：^[A-Z]+$

验证由26个小写英文字母组成的字符串：^[a-z]+$

验证由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$

验证由数字、26个英文字母或者下划线组成的字符串：^\w+$

验证用户密码:^[a-zA-Z]\w{5,17}$ 正确格式为：以字母开头，长度在6-18之间，只能包含字符、数字和下划线。

验证是否含有 ^%&',;=?$\" 等字符：[^%&',;=?$\x22]+

验证汉字：^[\u4e00-\u9fa5],{0,}$

验证Email地址：^\w+[-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

验证InternetURL：^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$ ；^[a-zA-z]+://(w+(-w+)*)(.(w+(-w+)*))*(?S*)?$

验证电话号码：^(\(\d{3,4}\)|\d{3,4}-)?\d{7,8}$：--正确格式为：XXXX-XXXXXXX，XXXX-XXXXXXXX，XXX-XXXXXXX，XXX-

XXXXXXXX，XXXXXXX，XXXXXXXX。

验证身份证号（15位或18位数字）：^\d{15}|\d{}18$

验证一年的12个月：^(0?[1-9]|1[0-2])$ 正确格式为：“01”-“09”和“1”“12”

验证一个月的31天：^((0?[1-9])|((1|2)[0-9])|30|31)$ 正确格式为：01、09和1、31。

整数：^-?\d+$

非负浮点数（正浮点数 + 0）：^\d+(\.\d+)?$

正浮点数 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$

非正浮点数（负浮点数 + 0） ^((-\d+(\.\d+)?)|(0+(\.0+)?))$

负浮点数 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$

浮点数 ^(-?\d+)(\.\d+)?$

/*是否带有小数*/

function    isDecimal(strValue )  {

   var  objRegExp= /^\d+\.\d+$/;

   return  objRegExp.test(strValue);

}  

/*校验是否中文名称组成 */

function ischina(str) {

    var reg=/^[\u4E00-\u9FA5]{2,4}$/;   /*定义验证表达式*/

    return reg.test(str);     /*进行验证*/

}

/*校验是否全由8位数字组成 */

function isStudentNo(str) {

    var reg=/^[0-9]{8}$/;   /*定义验证表达式*/

    return reg.test(str);     /*进行验证*/

}

/*校验电话码格式 */

function isTelCode(str) {

    var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;

    return reg.test(str);

}

/*校验邮件地址是否合法 */

function IsEmail(str) {

    var reg=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;

    return reg.test(str);

}

https://www.cnblogs.com/tugenhua0707/p/5037811.html

3、数据类型

JavaScript 中的数据类型分为原始类型和对象类型：

原始类型
- 数字
- 字符串
- 布尔值
对象类型
- 数组
- 字典
- ...

1.数字

JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。

转换：

parseInt(..) 将某值转换成数字，不成功则NaN
parseFloat(..) 将某值转换成浮点数，不成功则NaN

特殊值：

NaN，非数字。可使用 isNaN(num) 来判断。
Infinity，无穷大。可使用 isFinite(num) 来判断。

2.字符串

字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript并未提供修改已知字符串内容的方法。

常见功能：

obj.length 获取当前字符串长度
obj.trim() 移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n) 返回字符串中的第n个字符
obj.concat(value, ...) 拼接
obj.indexOf(substring,start) 子序列位置
obj.lastIndexOf(substring,start) 子序列位置
obj.substring(from, to) 根据索引获取子序列---起始位置，结束位置
obj.slice(start, end) 切片
obj.toLowerCase() 大写
obj.toUpperCase() 小写
obj.split(delimiter, limit) 分割
obj.search(regexp) 从头开始匹配，返回匹配成功的第一个位置(g无效)
obj.match(regexp) 全局搜索，如果正则中有g表示找到全部，否则只找到第一个。
obj.replace(regexp, replacement) 替换，正则中有g则替换所有，否则只替换第一个匹配项，
$数字：匹配的第n个组内容；
$&：当前匹配的内容；
$`：位于匹配子串左侧的文本；
$'：位于匹配子串右侧的文本
$$：直接量$符号

3.布尔类型

布尔类型仅包含真假，与Python不同的是其首字母小写。

== 比较值相等
!= 不等于
=== 比较值和类型相等
!== 不等于
|| 或
&& 且

4.数组

JavaScript中的数组类似于Python中的列表。

常见功能：

obj.length 数组的大小

obj.push(ele) 尾部追加元素

obj.pop() 尾部获取一个元素

obj.unshift(ele) 头部插入元素

obj.shift() 头部移除元素

obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素

obj.splice(n,0,val) 指定位置插入元素

obj.splice(n,1,val) 指定位置替换元素

obj.splice(n,1) 指定位置删除元素

obj.slice( ) 切片

obj.reverse( ) 反转

obj.join(sep) 将数组元素连接起来以构建一个字符串

obj.concat(val,..) 连接数组

obj.sort( ) 对数组元素进行排序

4、小知识汇总

. 序列化

序列化就是将JavaScript中的数据类型转换成字符串，反序列化的过程则相反；

var a="ss";

ret = JSON.stringify(a);//序列化

console.log(ret);

console.log(JSON.parse(ret));//反序列化

结果如下：

. 转义

一般使用在URL中字符的转义等，下面来看一下具体的用法

var a='http://www.baidu.com?name=民资';

console.log(encodeURI(a));

console.log(decodeURI(encodeURI(a)));

console.log(encodeURIComponent(a));

console.log(decodeURIComponent(encodeURIComponent(a)));

结果如下：

. eval

JavaScript中的eval是Python中eval和exec的合集，既可以编译代码也可以获取返回值。

console.log(eval('1+2*5'));

console.log(eval(a = ));

结果如下：

. 时间

在JavaScript中，Date对象用来表示日期和时间。JavaScript中提供了时间相关的操作，分别为获取时间和设置时间，时间操作中分为两种时间，统一时间(UTC),以及本地时间（东8区）

var now = new Date();

now.getFullYear(); //

now.getMonth(); // 月份，注意月份范围是0~11，6表示7月

now.getDate(); // 日期

now.getDay(); // 表示星期几

now.getHours(); // 24小时制

now.getMinutes(); // 分钟

now.getTime(); // 以number形式表示的时间戳

结果如下：

https://www.cnblogs.com/cocc/p/6068957.html