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中的列表。

常见功能：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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、小知识汇总
1. 序列化
序列化就是将JavaScript中的数据类型转换成字符串，反序列化的过程则相反；

var a="ss";
ret = JSON.stringify(a);//序列化
console.log(ret);
 
console.log(JSON.parse(ret));//反序列化
结果如下：


2. 转义
一般使用在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)));
结果如下：


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

console.log(eval('1+2*5'));
console.log(eval(a = 1));
结果如下：

4. 时间
在JavaScript中，Date对象用来表示日期和时间。JavaScript中提供了时间相关的操作，分别为获取时间和设置时间，时间操作中分为两种时间，统一时间(UTC),以及本地时间（东8区）
var now = new Date();
now.getFullYear(); //2016
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

























        

        

            posted on 
2018-03-21 18:59 
努力做一个伪程序员 
阅读(250) 
评论(0) 
编辑 
收藏 
举报

        

    










    
    

    
    

    

        

    

        

            
                
                
            
        

    

        

            
                
            
        

    

    

    





            

        

        

            

导航