- 浏览: 60277 次
- 性别:
- 来自: 江西
文章分类
最新评论
注释:来自http://www.csssea.com/?p=771#more-771
收集了一点JS基础的知识,主要知识点:js数组,数字函数,字符串函数,表单验证,hashMap,堆栈,日期函数,call函数,正则表达式 call(),apply(),callee,caller,cookie方法,setInterval(),clearInterval(),setTimeout() ,clearTimeout() 等。
1.javascript的数组API
代码如下:
2.dom最常用API
代码如下:
3.map对象:
代码如下:
4.常用的数字函数:
代码如下:
5.js堆栈
代码如下:
7.常用字符串函数API:
代码如下:
8.数学函数:
代码如下:
9.浏览器特征函数:
代码如下:
10.JavaScript面向对象的方法实现继承:call方法
代码如下:
11.用面向对象的编程方式写JavaScript:
代码如下:
12.常用的js方法,包括表单校验的一些方法,下拉菜单常用的方法等等:
代码如下:
Html代码:
13.关于cookie的函数
代码如下:
14.关于一个可以查看js对象的js函数,很酷的方法:
代码如下:
15.正则表达式:
g 代表全局匹配
m 代表可以进行多行匹配
i 代表不区分大小写匹配
^ 匹配输入字符串的开始位置
$ 匹配输入字符串的结束位置
* 匹配前面的子表达式零次或多次. 等价于{0,}
+ 匹配前面的子表达式一次或多次. 等价于{1,}
? 匹配前面的子表达式零次或一次. 等价于[0,1} , 当该字符跟在任何一个其他限制符(*, +, ?, {n}, {n,}, {n,m}) 后面时,匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串,而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如,对于字符串 "oooo",'o+?' 将匹配单个 "o",而 'o+' 将匹配所有 'o'。
\d 匹配一个数字字符. 等价于 [0-9]
\D 匹配一个非数字符. 等价于 [^0-9]
\w ,等价于 “[A-Za-z0-9_]”
\W 匹配任何非单词字符,等价于 “[^A-Za-z0-9]”
\s 匹配任何空白字符, 包括空格 制表符 换页符 等等. 等价于[\f\n\r\t\v]
\S 匹配任何非空白字符. 等价于 [^\f\r\n\t\v]
\b 匹配一个单词边界,也就是指单词和空格间的位置。
\B 匹配非单词边界。
正则表达式常用js方法:
16.call()方法
代码如下:
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
参数
thisObj
可选项。将被用作当前对象的对象。
arg1, arg2, , argN
可选项。将被传递方法参数序列。
说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
简单的例子:
稍微复杂的例子:
17.apply函数:
Function.apply(obj,args)方法能接收两个参数
obj:这个对象将代替Function类里this对象
args:这个是数组,它将作为参数传给Function(args–>arguments)
实现类似call的继承的效果:
使用apply进行数组参数的函数的优化,很酷的方法:
下面是另外一个例子,用来合并两个数组:
使用apply的话:
//js默认弹出对话框
收集了一点JS基础的知识,主要知识点:js数组,数字函数,字符串函数,表单验证,hashMap,堆栈,日期函数,call函数,正则表达式 call(),apply(),callee,caller,cookie方法,setInterval(),clearInterval(),setTimeout() ,clearTimeout() 等。
1.javascript的数组API
代码如下:
//定义数组 var pageIds = new Array(); pageIds.push('A'); 数组长度 pageIds.length; //shift:删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift(); //a:[2,3,4,5] b:1 //unshift:将参数添加到原数组开头,并返回数组的长度 var a = [1,2,3,4,5]; var b = a.unshift(-2,-1); //a:[-2,-1,1,2,3,4,5] b:7 //注:在IE6.0下测试返回值总为undefined,FF2.0下测试返回值为7,所以这个方法的返回值不可靠,需要用返回值时可用splice代替本方法来使用。 //pop:删除原数组最后一项,并返回删除元素的值;如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.pop(); //a:[1,2,3,4] b:5 //push:将参数添加到原数组末尾,并返回数组的长度 var a = [1,2,3,4,5]; var b = a.push(6,7); //a:[1,2,3,4,5,6,7] b:7 //concat:返回一个新数组,是将参数添加到原数组中构成的 var a = [1,2,3,4,5]; var b = a.concat(6,7); //a:[1,2,3,4,5] b:[1,2,3,4,5,6,7] //splice(start,deleteCount,val1,val2,):从start位置开始删除deleteCount项,并从该位置起插入val1,val2, var a = [1,2,3,4,5]; var b = a.splice(2,2,7,8,9); //a:[1,2,7,8,9,5] b:[3,4] var b = a.splice(0,1); //同shift a.splice(0,0,-2,-1); var b = a.length; //同unshift var b = a.splice(a.length-1,1); //同pop a.splice(a.length,0,6,7); var b = a.length; //同push //reverse:将数组反序 var a = [1,2,3,4,5]; var b = a.reverse(); //a:[5,4,3,2,1] b:[5,4,3,2,1] //sort(orderfunction):按指定的参数对数组进行排序 var a = [1,2,3,4,5]; var b = a.sort(); //a:[1,2,3,4,5] b:[1,2,3,4,5] //slice(start,end):返回从原数组中指定开始下标到结束下标之间的项组成的新数组 var a = [1,2,3,4,5]; var b = a.slice(2,5); //a:[1,2,3,4,5] b:[3,4,5] //join(separator):将数组的元素组起一个字符串,以separator为分隔符,省略的话则用默认用逗号为分隔符 var a = [1,2,3,4,5]; var b = a.join("|"); //a:[1,2,3,4,5] b:"1|2|3|4|5"
2.dom最常用API
代码如下:
document方法: getElementById(id) Node 返回指定结点的引用 getElementsByTagName(name) NodeList 返回文档中所有匹配的元素的集合 createElement(name) Node Node createTextNode(text) Node 创建一个纯文本结点 ownerDocument Document 指向这个节点所属的文档 documentElement Node 返回html节点 document.body Node 返回body节点 element方法: getAttribute(attributeName) String 返回指定属性的值 setAttribute(attributeName,value) String 给属性赋值 removeAttribute(attributeName) String 移除指定属性和它的值 getElementsByTagName(name) NodeList 返回结点内所有匹配的元素的集合 node方法: appendChild(child) Node 给指定结点添加一个新的子结点 removeChild(child) Node 移除指定结点的子结点 replaceChild(newChild,oldChild) Node 替换指定结点的子结点 insertBefore(newChild,refChild) Node 在同一层级的结点前面插入新结点 hasChildNodes() Boolean 如果结点有子结点则返回true node属性: nodeName String 以字符串的格式存放结点的名称 nodeType String 以整型数据格式存放结点的类型 nodeValue String 以可用的格式存放结点的值 parentNode Node 指向结点的父结点的引用 childNodes NodeList 指向子结点的引用的集合 firstChild Node 指向子结点结合中的第一个子结点的引用 lastChild Node 指向子结点结合中的最后一个子结点的引用 previousSibling Node 指向前一个兄弟节点;如果这个节点就是兄弟节点,那么该值为null nextSibling Node 指向后一个兄弟节点;如果这个节点就是兄弟节点,那么该值为null
3.map对象:
代码如下:
function HashMap() { /** Map 大小 **/ var size = 0; /** 对象 **/ var entry = new Object(); /** 存 **/ this.put = function (key , value) { if(!this.containsKey(key)) { size ++ ; } entry[key] = value; } /** 取 **/ this.get = function (key) { return this.containsKey(key) ? entry[key] : null; } /** 删除 **/ this.remove = function ( key ) { if( this.containsKey(key) && ( delete entry[key] ) ) { size --; } } /** 是否包含 Key **/ this.containsKey = function ( key ) { return (key in entry); } /** 是否包含 Value **/ this.containsValue = function ( value ) { for(var prop in entry) { if(entry[prop] == value) { return true; } } return false; } /** 所有 Value **/ this.values = function () { var values = new Array(); for(var prop in entry) { values.push(entry[prop]); } return values; } /** 所有 Key **/ this.keys = function () { var keys = new Array(); for(var prop in entry) { keys.push(prop); } return keys; } /** Map Size **/ this.size = function () { return size; } /* 清空 */ this.clear = function () { size = 0; entry = new Object(); } } var map = new HashMap(); /* map.put("A","1"); map.put("B","2"); map.put("A","5"); map.put("C","3"); map.put("A","4"); */ /* alert(map.containsKey("XX")); alert(map.size()); alert(map.get("A")); alert(map.get("XX")); map.remove("A"); alert(map.size()); alert(map.get("A")); */ /** 同时也可以把对象作为 Key **/ /* var arrayKey = new Array("1","2","3","4"); var arrayValue = new Array("A","B","C","D"); map.put(arrayKey,arrayValue); var value = map.get(arrayKey); for(var i = 0 ; i < value.length ; i++) { //alert(value[i]); } */ /** 把对象做为Key时 ,自动调用了该对象的 toString() 方法 其实最终还是以String对象为Key**/ /** 如果是自定义对象 那自己得重写 toString() 方法 否则 . 就是下面的结果 **/ function MyObject(name) { this.name = name; } /** function MyObject(name) { this.name = name; this.toString = function () { return this.name; } } **/ var object1 = new MyObject("小张"); var object2 = new MyObject("小名"); map.put(object1,"小张"); map.put(object2,"小名"); alert(map.get(object1)); alert(map.get(object2)); map.remove("xxxxx"); alert(map.size()); /** 运行结果 小名 小名 size = 1 **/ /** 如果改成复写toString()方法的对象 , 效果就完全不一样了 **/
4.常用的数字函数:
代码如下:
·数字型(Number) 1.声明 var i = 1; var i = new Number(1); 2.字符串与数字间的转换 var i = 1; var str = i.toString(); //结果: "1" var str = new String(i); //结果: "1" i = parseInt(str); //结果: 1 i = parseFloat(str); //结果: 1.0 //注意: parseInt,parseFloat会把一个类似于"32G"的字符串,强制转换成32 3.判断是否为有效的数字 var i = 123; var str = "string"; if( typeof i == "number" ){ } //true //某些方法(如:parseInt,parseFloat)会返回一个特殊的值NaN(Not a Number) //请注意第2点中的[注意],此方法不完全适合判断一个字符串是否是数字型!! i = parseInt(str); if( isNaN(i) ){ } 4.数字型比较 //此知识与[字符串比较]相同 5.小数转整数 var f = 1.5; var i = Math.round(f); //结果:2 (四舍五入) var i = Math.ceil(f); //结果:2 (返回大于f的最小整数) var i = Math.floor(f); //结果:1 (返回小于f的最大整数) 6.格式化显示数字 var i = 3.14159; //格式化为两位小数的浮点数 var str = i.toFixed(2); //结果: "3.14" //格式化为五位数字的浮点数(从左到右五位数字,不够补零) var str = i.toPrecision(5); //结果: "3.1415" 7.X进制数字的转换 //不是很懂 -.- var i = parseInt("0x1f",16); var i = parseInt(i,10); var i = parseInt("11010011",2); 8.随机数 //返回0-1之间的任意小数 var rnd = Math.random(); //返回0-n之间的任意整数(不包括n) var rnd = Math.floor(Math.random() * n)
5.js堆栈
代码如下:
function stack(){ if(this.top==undefined){ //初始化堆栈的顶部指针和数据存放域 this.top=0; this.unit=new Array(); } this.push=function(pushvalue){ //定义压入堆栈的方法 this.unit[this.top]=pushvalue; this.top+=1; } this.readAllElements=function(){ //定义读取所有数据的方法 if(this.top==0){ alert("当前栈空,无法读取数据"); return(""); } var count=0; var outStr=""; for(count=0;count<this.top;count++){ outStr+=this.unit[count]+","; } return(outStr); } this.pop=function(){ //定义弹出堆栈的方法 if(this.top==0){ alert("当前栈空,无法弹出数据"); return(""); } var popTo=this.unit[this.top-1]; this.top--; return(popTo); /* 从堆栈弹出数据,顶部指针减一,不过这里没有做到资源的释放,也 就是说数据仍然存在于this.unit的数组中,只不过无法访问罢了。目前 我也没想到好的办法解决。*/ } } [php] 6.最常用的JavaScript日期函数: 代码如下: [php] ·日期型(Date) 1.声明 var myDate = new Date(); //系统当前时间 var myDate = new Date(yyyy, mm, dd, hh, mm, ss); var myDate = new Date(yyyy, mm, dd); var myDate = new Date("monthName dd, yyyy hh:mm:ss"); var myDate = new Date("monthName dd, yyyy"); var myDate = new Date(epochMilliseconds); 2.获取时间的某部份 var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-????) myDate.getMonth(); //获取当前月份(0-11,0代表1月) myDate.getDate(); //获取当前日(1-31) myDate.getDay(); //获取当前星期X(0-6,0代表星期天) myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数) 时间戳!! myDate.getHours(); //获取当前小时数(0-23) myDate.getMinutes(); //获取当前分钟数(0-59) myDate.getSeconds(); //获取当前秒数(0-59) myDate.getMilliseconds(); //获取当前毫秒数(0-999) myDate.toLocaleDateString(); //获取当前日期 myDate.toLocaleTimeString(); //获取当前时间 myDate.toLocaleString( ); //获取日期与时间 3.计算之前或未来的时间 var myDate = new Date(); myDate.setDate(myDate.getDate() + 10); //当前时间加10天 //类似的方法都基本相同,以set开头,具体参考第2点 4.计算两个日期的偏移量 var i = daysBetween(beginDate,endDate); //返回天数 var i = beginDate.getTimezoneOffset(endDate); //返回分钟数 5.检查有效日期 //checkDate() 只允许"mm-dd-yyyy"或"mm/dd/yyyy"两种格式的日期 if( checkDate("2006-01-01") ){ } //正则表达式(自己写的检查 yyyy-mm-dd, yy-mm-dd, yyyy/mm/dd, yy/mm/dd 四种) var r = /^(\d{2}|\d{4})[\/-]\d{1,2}[\/-]\d{1,2}$/; if( r.test( myString ) ){ }
7.常用字符串函数API:
代码如下:
字符串(String) 1.声明 var myString = new String("Every good boy does fine."); var myString = "Every good boy does fine."; 2.字符串连接 var myString = "Every " + "good boy " + "does fine."; var myString = "Every "; myString += "good boy does fine."; 3.截取字符串 //截取第 6 位开始的字符 var myString = "Every good boy does fine."; var section = myString.substring(6); //结果: "good boy does fine." //截取第 0 位开始至第 10 位为止的字符 var myString = "Every good boy does fine."; var section = myString.substring(0,10); //结果: "Every good" //截取从第 11 位到倒数第 6 位为止的字符 var myString = "Every good boy does fine."; var section = myString.slice(11,-6); //结果: "boy does" //从第 6 位开始截取长度为 4 的字符 var myString = "Every good boy does fine."; var section = myString.substr(6,4); //结果: "good" 4.转换大小写 var myString = "Hello"; var lcString = myString.toLowerCase(); //结果: "hello" var ucString = myString.toUpperCase(); //结果: "HELLO" 5.字符串比较 var aString = "Hello!"; var bString = new String("Hello!"); if( aString == "Hello!" ){ } //结果: true if( aString == bString ){ } //结果: true if( aString === bString ){ } //结果: false (两个对象不同,尽管它们的值相同) 6.检索字符串 var myString = "hello everybody."; // 如果检索不到会返回-1,检索到的话返回在该串中的起始位置 if( myString.indexOf("every") > -1 ){ } //结果: true 7.查找替换字符串 var myString = "I is your father."; var result = myString.replace("is","am"); //结果: "I am your father." 8.特殊字符: \b : 后退符 \t : 水平制表符 \n : 换行符 \v : 垂直制表符 \f : 分页符 \r : 回车符 \" : 双引号 \' : 单引号 \\ : 反斜杆 9.将字符转换成Unicode编码 var myString = "hello"; var code = myString.charCodeAt(3); //返回"l"的Unicode编码(整型) var char = String.fromCharCode(66); //返回Unicode为66的字符 10.将字符串转换成URL编码 var myString = "hello all"; var code = encodeURI(myString); //结果: "hello%20all" var str = decodeURI(code); //结果: "hello all" //相应的还有: encodeURIComponent() decodeURIComponent()
8.数学函数:
代码如下:
·Math对象 1. Math.abs(num) : 返回num的绝对值 2. Math.acos(num) : 返回num的反余弦值 3. Math.asin(num) : 返回num的反正弦值 4. Math.atan(num) : 返回num的反正切值 5. Math.atan2(y,x) : 返回y除以x的商的反正切值 6. Math.ceil(num) : 返回大于num的最小整数 7. Math.cos(num) : 返回num的余弦值 8. Math.exp(x) : 返回以自然数为底,x次幂的数 9. Math.floor(num) : 返回小于num的最大整数 10.Math.log(num) : 返回num的自然对数 11.Math.max(num1,num2) : 返回num1和num2中较大的一个 12.Math.min(num1,num2) : 返回num1和num2中较小的一个 13.Math.pow(x,y) : 返回x的y次方的值 14.Math.random() : 返回0到1之间的一个随机数 15.Math.round(num) : 返回num四舍五入后的值 16.Math.sin(num) : 返回num的正弦值 17.Math.sqrt(num) : 返回num的平方根 18.Math.tan(num) : 返回num的正切值 19.Math.E : 自然数(2.718281828459045) 20.Math.LN2 : 2的自然对数(0.6931471805599453) 21.Math.LN10 : 10的自然对数(2.302585092994046) 22.Math.LOG2E : log 2 为底的自然数(1.4426950408889634) 23.Math.LOG10E : log 10 为底的自然数(0.4342944819032518) 24.Math.PI : π(3.141592653589793) 25.Math.SQRT1_2 : 1/2的平方根(0.7071067811865476) 26.Math.SQRT2 : 2的平方根(1.4142135623730951)
9.浏览器特征函数:
代码如下:
1.浏览器名称 //IE : "Microsoft Internet Explorer" //NS : "Netscape" var browserName = navigator.appName; 2.浏览器版本 bar browserVersion = navigator.appVersion; 3.客户端操作系统 var isWin = ( navigator.userAgent.indexOf("Win") != -1 ); var isMac = ( navigator.userAgent.indexOf("Mac") != -1 ); var isUnix = ( navigator.userAgent.indexOf("X11") != -1 ); 4.判断是否支持某对象,方法,属性 //当一个对象,方法,属性未定义时会返回undefined或null等,这些特殊值都是false if( document.images ){ } if( document.getElementById ){ } 5.检查浏览器当前语言 if( navigator.userLanguage ){ var l = navigator.userLanguage.toUpperCase(); } 6.检查浏览器是否支持Cookies if( navigator.cookieEnabled ){ }
10.JavaScript面向对象的方法实现继承:call方法
代码如下:
// 动物类 animal function animal(bSex){ this.sex = bSex this.getSex = function(){ return this.sex } } // 类静态变量 (如果你不修改它的话~~) animal.SEX_G = new Object(); // 雌性 animal.SEX_B = new Object(); // 雄性 // 动物子类 鸟 function bird(bSex){ animal.call(this, bSex); this.fly = function(iSpeed){ alert("飞行时速高达 " + iSpeed); } } // 动物子类 鱼 function fish(bSex){ animal.call(this, bSex); this.swim = function(iSpeed){ alert("游动时速高达 " + iSpeed) } } // 鱼 鸟 杂交品种。。。 function crossBF(bSex){ bird.call(this, bSex); fish.call(this, bSex); } var oPet = new crossBF(animal.SEX_G); // 雌性 鱼鸟 alert(oPet.getSex() == animal.SEX_G ? "雌性" : "雄性"); oPet.fly(124) oPet.swim(254)
11.用面向对象的编程方式写JavaScript:
代码如下:
MyTool = new function(){ /** * 返回非空字符串,如果有默认值就返回默认字符串. */ this.notNull = function(str,defaultStr){ if(typeof(str)=="undefined"||str==null||str==''){ if(defaultStr) return defaultStr; else return ''; } else{ return str; } }} rootId = MyTool.notNull(rootId,'001000');
12.常用的js方法,包括表单校验的一些方法,下拉菜单常用的方法等等:
代码如下:
/** * 对JSON对象转换为字符串. * @param {json对象} json * @return {json字符串} */ function jsonObj2Str(json) { var str = "{"; for (prop in json) { str += prop + ":" + json[prop] + ","; } str = str.substr(0, str.length - 1); str += "}"; return str; } /** * 将json字符串转换为json对象. * @param {json字符串} jsonstr * @return {json对象} */ function jsonStr2Obj(jsonstr) { return eval("("+jsonstr+")"); } /** * 得到一个元素的left坐标值. * @param {dom对象} obj * @return {位置值} */ function getLeft(obj){ var offset=e.offsetLeft; if(e.offsetParent!=null) offset+=getLeft(e.offsetParent); return offset; } /** * 得到一个元素的绝对位置的top坐标值. * @param {dom对象} obj * @return {位置值} */ function getTop(obj){ var offset=e.offsetTop; if(e.offsetParent!=null) offset+=getTop(e.offsetParent); return offset; } /** * 删除一个字符串的左右空格. * @param {原始字符串} str * @return {删除空格之后的字符串} */ function trim(str) { return str.replace(/(^\s*)|(\s*$)/g,""); } /** * 根据id取出一个元素. * @param {元素id值} str * @return {dom对象} */ function $(str) { return document.getElementById(str); } /** * 按name获取一个对象. * @param {元素name值} str * @return {根据name返回的第一个对象} */ function $byName(str) { var arr = document.getElementsByName(str); if (arr) return arr[0]; else return null; } /***************以下方法和表单验证相关*************************************************/ /** * 返回非空字符串,如果有默认值就返回默认字符串. * @param {要进行转换的原字符串} str * @param {默认值} defaultStr * @return {返回结果} */ function notNull(str, defaultStr) { if (typeof(str) == "undefined" || str == null || str == '') { if (defaultStr) return defaultStr; else return ''; } else { return str; } } /** * 比较两个日期大小. * @param {较小日期的文本框id} smallDate * @param {较大日期的文本框id} bigDate * @param {出错的提示信息} msg */ function compareTwoDate(smallDate, bigDate, msg) { var v1 = $(smallDate).value; var v2 = $(bigDate).value; if (v1 >= v2) { alert(msg); v2.focus(); return false; } return true; } /** * 比较两个金额大小的方法. * @param {较小的金额} smallNum * @param {较大的金额} bigNum * @param {出错提示信息} msg * @return {Boolean} */ function compareTwoNum(smallNum, bigNum, msg) { var v1 = $(smallNum).value; var v2 = $(bigNum).value; if (parseFloat(v1) >= parseFloat(v2)) { alert(msg); v2.focus(); return false; } return true; } /** * 检查文本框的长度是否超出指定长度. * @param {文本id} textId * @param {文本框的最大长度} len * @param {文本框描述内容} msg * @return {有错就返回false,否则返回true} */ function checkLength(textId, len, msg) { obj = $(textId); str = obj.value; str = str.replace(/[^\x00-\xff]/g, "**"); realLen = str.length; if (realLen > len) { alert("[" + msg + "]" + "长度最大为" + len + "位," + "请重新输入!\n注意:一个汉字占2位。"); obj.focus(); return false; } else return true; } /** * 判断某个文本框不可以为空. * @param {文本框id} textId * @param {文本框描述内容} msg * @return {有错就返回false,否则返回true} */ function checkIfEmpty(textId, msg) { var textObj = $(textId); var textValue = textObj.value; if (trim(textValue) == '') { alert('[' + msg + ']不得为空!'); textObj.focus(); return false; } else { return true; } } /** * 判断指定文本框内容必须为邮件. * @param {文本框id} textId * @param {文本框描述} msg * @return {如果是邮件内容就返回true否则返回false} */ function checkIsMail(textId, msg) { var obj = $(textId); if (!_isEmail(obj.value)) { alert('[' + msg + ']不是合法的邮件地址!'); obj.focus(); return false; } else return true; } /** * 验证是不是邮件. * @param {要验证的字符串} strEmail * @return {Boolean} */ function _isEmail(strEmail) { //接下来的验证是否有两个以上的‘.’号,有的话就是错的! var first = strEmail.indexOf('.'); if (strEmail.indexOf('@')== -1) { return false; } var tempStr = strEmail.substring(first + 1); if (tempStr.indexOf('.') != -1) { return false; } if (strEmail .search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1) { return true; } else return false; } /** * 判断某个文本框是否数字. * @param {文本框id} textId * @param {文本框描述内容} msg * @return {Boolean} */ function checkIsNum(textId, msg) { obj = $(textId); if (isNaN(obj.value)) { alert('[' + msg + ']必须为数字。'); obj.focus(); return false; } else return true; } /** * 判断某个文本框是否含有非法字符. * @param {文本框的id} textId * @param {文本框描述内容} msg * @return {有错就返回false否则返回true} */ function checkIsValid(textId, msg) { obj = $(textId); if (!_isValidString(obj.value, '[' + msg + ']不得含有非法字符。')) { obj.focus(); return false; } return true; } /** * 判断是不是合法字符串. * @param {要进行判断的字符串} szStr * @param {文本描述} errMsg * @return {合法则返回true否则返回false} */ function _isValidString(szStr,errMsg) { voidChar = "'\"><`~!@#$%^&\(\)()!¥……??“”‘’*"; for (var i = 0; i < voidChar.length; i++) { aChar = voidChar.substring(i, i + 1); if (szStr.indexOf(aChar) > -1){ alert(errMsg) return false; } } return true; } /*************** 以下方法和下拉菜单相关*************************************************/ /** * 控制下拉菜单不可以为-1(未选择情况value=-1) * @param {下拉菜单id} selectId * @param {下拉菜单描述内容} msg * @param {下拉菜单的空值对应的value,默认为-1} nullValue * @return {Boolean} */ function checkChooseSelect(selectId, msg ,nullValue) { var obj = $(selectId); if (obj.value == notNull(nullValue,'-1')) { alert('[' + msg + ']必选!'); obj.focus(); return false; } else return true; } /** * 得到下拉菜单的显示的文字. * @param {下拉菜单dom对象} selectObj * @return {返回下拉菜单的显示的"文本"} */ function getSelectText(selectObj) { return selectObj.options[selectObj.selectedIndex].text; } /** * 得到下拉菜单的显示的值. * @param {下拉菜单dom对象} selectObj * @return {得到下拉菜单的显示的"值"} */ function getSelectValue(selectObj) { return selectObj.options[selectObj.selectedIndex].value; } /** * 设置下拉菜单的选择状态到指定的值. * @param {下拉菜单对象} obj * @param {要选择的值} value */ function setSelectValue(obj, value) { /*for (i = obj.options.length - 1; i >= 0; i--) { if (obj.options[i].value == value) { obj.options[i].selected = true; return; } } */ obj.value= value; } /** * 根据键值串的内容进行下拉菜单的动态组装 * @param {要进行下拉菜单组装的dom对象} obj * @param {键值对用,和;分割,例如'1,男;2,女;3,未知'} valAndText */ function setSelectContent(obj,valAndText){ if(trim(valAndText)==''){ alert('没有要进行组装下拉菜单的数据!'); return false; } clearSelect(obj); var keyandvalues = valAndText.split(';'); for(var i=0;i<keyandvalues.length;i++){ var arr = keyandvalues[i].split(','); if(arr){ var value =arr[0]; var text =arr[1]; var objOption = new Option(text,value); obj.add(objOption); } } } /** * 清空下拉菜单里面的内容. * @param {下拉菜单对象} obj */ function clearSelect(obj) { for (var i=obj.options.length; i >0; i--) { obj.remove(0); } } /*************** 以下方法和多选框相关*************************************************/ /** * 返回选中的checks的id组成的字符串,逗号隔开. * @param {checks数组} checks * @return 选择的id组成的字符串 */ function getCheckedIds(checks){ var selectedValue = ''; var len = checks.length; for(var index=0; index<len; index++) { if(checks[index].checked==true) { selectedValue += checks[index].value+","; } } if(selectedValue.length>0) return selectedValue.substring(0,selectedValue.length-1); return selectedValue; }
Html代码:
<HTML> <HEAD> <script language="javascript" src="aaaaa.js"></script> </HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- /** * 表单验证的示例js方法. */ function check(){ if(checkIfEmpty('a','非空校验') &&checkIsMail('b','邮箱校验') &&checkIsNum('c','数字校验') &&checkIsValid('d','合法性校验') &&compareTwoDate('e','f','小日期与大日期关系错误!') &&checkLength('g',5,'长度校验') &&checkChooseSelect('h','下拉菜单非空','-1') &&compareTwoNum('k','l','大小数目关系不正确!')){ alert('校验通过!'); return true; }else{ return false; } } /** * 取下拉菜单的值和文本的示例js方法. */ function getSelect(){ var sss = $('h'); alert('下拉菜单选择的文本是:'+getSelectText(sss)+'\n' +'下拉菜单选择的值是:'+getSelectValue(sss)); } /** * 根据键值字符串设置下拉菜单的显示内容. */ function setSelect(){ var sss = $('i').value; setSelectContent($('h'),sss); } /** * 返回多选框数组选择状态的id的字符串,结果以逗号隔开. */ function getMulti(){ alert('多选选择的id是:'+getCheckedIds(document.getElementsByName('j'))); } //--> </SCRIPT> <BODY> <table> <tr> <td> 非空: <input id='a'> </td> <td> checkIfEmpty('a','非空校验') </td> </tr> <tr> <td> 邮箱: <input id='b' value='323232@2323.com'> </td> <td> checkIsMail('b','邮箱校验') </td> </tr> <tr> <td> 数字: <input id='c' value='aaaa'> </td> <td> checkIsNum('c','数字校验') </td> </tr> <tr> <td> 合法字符: <input id='d' value='@$@$#$#!%%#'> </td> <td> checkIsValid('d','合法性校验') </td> </tr> <tr> <td> 小的日期: <input id='e' value='2010-1-1'> 大的日期: <input id='f' value='2011-1-1'> </td> <td> compareTwoDate('e','f','小日期与大日期关系错误!') </td> </tr> <tr> <td> 小的数: <input id='k' value='12.3'> 大的数: <input id='l' value='4564'> </td> <td> compareTwoNum('k','l','大小数目关系不正确!') </td> </tr> <tr> <td> 字符长度校验(<5): <input id='g'> </td> <td> checkLength('g',5,'长度校验') </td> </tr> <tr> <td> 下拉菜单非空校验: <select id='h'> <option value='-1'> 请选择 </option> <option value='1'> 立项 </option> <option value='2'> 可研 </option> </select> </td> <td> checkChooseSelect('h','下拉菜单非空','-1') </td> </tr> <tr> <td colspan='2'> <button onclick='check()'> 测试表单校验方法 </button> </td> </tr> <tr> <td> <button onclick='getSelect()'> 得到下拉菜单的值 </button> </td> <td> getSelectText(sss)和getSelectValue(sss) </td> </tr> <tr> <td> 输入下拉菜单的键值字符串(如右所示) <input id='i' value='1,男;2,女;3,未知'> <button onclick='setSelect()'> 设置下拉菜单的值 </button> </td> <td> setSelectContent($('h'),sss) </td> </tr> <tr> <td> <input type='checkbox' name='j' value='aaa1'> <input type='checkbox' name='j' value='aaa2'> <input type='checkbox' name='j' value='aaa3'> <input type='checkbox' name='j' value='aaa4'> <button onclick='getMulti()'> 得到多选选择的id </button> </td> <td> getCheckedIds(document.getElementsByName('j')) </td> </tr> </table> </BODY> </HTML>
13.关于cookie的函数
代码如下:
/** * cookie操作工具. * 使用方法:保存值:CookieTool('name','1',{expires: 7}) //表示保存一个cookie值为1,键值为name,失效时间7天以后 * 取值:CookieTool('name') //返回1 * @param {} name * @param {} value * @param {} options * @return {} */ CookieTool = function(name, value, options) { if (typeof value != 'undefined') { options = options || {}; if (value === null) { value = ''; options.expires = -1; } var expires = ''; if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) { var date; if (typeof options.expires == 'number') { date = new Date(); date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000)); } else { date = options.expires; } expires = '; expires=' + date.toUTCString(); } var path = options.path ? '; path=' + (options.path) : ''; var domain = options.domain ? '; domain=' + (options.domain) : ''; var secure = options.secure ? '; secure' : ''; document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join(''); } else { var cookieValue = null; if (document.cookie && document.cookie != '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = trim(cookies[i]); if (cookie.substring(0, name.length + 1) == (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } };
14.关于一个可以查看js对象的js函数,很酷的方法:
代码如下:
/** * 用来查看一个对象的属性 */ function debugObjectInfo(obj){ traceObject(obj); function traceObject(obj){ var str = ''; if(obj.tagName&&obj.name&&obj.id) str="<table border='1' width='100%'><tr><td colspan='2' bgcolor='#ffff99'>traceObject tag: <"+obj.tagName+"> name = \""+obj.name+"\" id = \""+obj.id+"\" </td></tr>"; else{ str="<table border='1' width='100%'>"; } var key=[]; for(var i in obj){ key.push(i); } key.sort(); for(var i=0;i<key.length;i++){ var v= new String(obj[key[i]]).replace(/</g,"<").replace(/>/g,">"); str+="<tr><td valign='top'>"+key[i]+"</td><td>"+v+"</td></tr>"; } str=str+"</table>"; writeMsg(str); } function trace(v){ var str="<table border='1' width='100%'><tr><td bgcolor='#ffff99'>"; str+=String(v).replace(/</g,"<").replace(/>/g,">"); str+="</td></tr></table>"; writeMsg(str); } function writeMsg(s){ traceWin=window.open("","traceWindow","height=600, width=800,scrollbars=yes"); traceWin.document.write(s); } }
15.正则表达式:
g 代表全局匹配
m 代表可以进行多行匹配
i 代表不区分大小写匹配
^ 匹配输入字符串的开始位置
$ 匹配输入字符串的结束位置
* 匹配前面的子表达式零次或多次. 等价于{0,}
+ 匹配前面的子表达式一次或多次. 等价于{1,}
? 匹配前面的子表达式零次或一次. 等价于[0,1} , 当该字符跟在任何一个其他限制符(*, +, ?, {n}, {n,}, {n,m}) 后面时,匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串,而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如,对于字符串 "oooo",'o+?' 将匹配单个 "o",而 'o+' 将匹配所有 'o'。
\d 匹配一个数字字符. 等价于 [0-9]
\D 匹配一个非数字符. 等价于 [^0-9]
\w ,等价于 “[A-Za-z0-9_]”
\W 匹配任何非单词字符,等价于 “[^A-Za-z0-9]”
\s 匹配任何空白字符, 包括空格 制表符 换页符 等等. 等价于[\f\n\r\t\v]
\S 匹配任何非空白字符. 等价于 [^\f\r\n\t\v]
\b 匹配一个单词边界,也就是指单词和空格间的位置。
\B 匹配非单词边界。
正则表达式常用js方法:
/** * 在源字符串中查找满足要求的子串. * @return {} */ function MatchDemo() { var r, re; // 声明变量。 var s = "The rain in Spain falls mainly in the plain"; re = new RegExp("ain", "g"); // 创建正则表达式对象。 r = s.match(re); // 在字符串 s 中查找匹配。 return (r); } /** * 返回在源字符串中的满足正则表达式的全部的字串和位置信息. */ function RegExpTest() { var ver = Number(ScriptEngineMajorVersion() + "." + ScriptEngineMinorVersion()) var ans = ''; if (ver >= 5.5) { // 测试 JScript 的版本。 var src = "The rain in Spain falls mainly in the plain."; var re = /\w+/g; // 创建正则表达式模式。 var arr; while ((arr = re.exec(src)) != null) ans += arr.index + "-" + arr.lastIndex + arr + "\t"; } else { ans = "请使用 JScript 的更新版本"; } return ans; } /** * 对源字符串进行正则表达式检查,看是不是符合正则表达式. */ function TestDemo() { var s1; var source = "abcdefg"; var regex = /\w+/g; // 创建正则表达式模式。 if (regex.test(source)) s1 = " contains "; else s1 = " does not contain "; return ("'" + source + "'" + s1 + "'" + regex.source + "'"); } /** * 在源字符串中查找正则表达式的字串. * @return {} */ function SearchDemo() { var r, re; var s = "The rain in Spain falls mainly in the plain."; re = /falls/i; r = s.search(re); return (r); }
16.call()方法
代码如下:
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
参数
thisObj
可选项。将被用作当前对象的对象。
arg1, arg2, , argN
可选项。将被传递方法参数序列。
说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
简单的例子:
function add(a,b) { alert(a+b); } function sub(a,b) { alert(a-b); } add.call(sub,3,1); //这个例子中的意思就是用 add 来替换 sub,add.call(sub,3,1) == add(3,1) ,所以运行结果为:alert(4);
稍微复杂的例子:
function Class1() { this.name = "class1"; this.showNam = function() { alert(this.name); } } function Class2() { this.name = "class2"; } var c1 = new Class1(); var c2 = new Class2(); c1.showNam.call(c2); //call 的意思是把 c1 的方法放到c2上执行,原来c2是没有showNam() 方法,现在是把c1 的showNam()方法放到 c2 上来执行,所以this.name 应该是 class2,执行的结果就是 :alert("class2"); [php] 多重继承的例子: [php] function Class10() { this.showSub = function(a,b) { alert(a-b); } } function Class11() { this.showAdd = function(a,b) { alert(a+b); } } function Class2() { Class10.call(this); Class11.call(this); }
17.apply函数:
Function.apply(obj,args)方法能接收两个参数
obj:这个对象将代替Function类里this对象
args:这个是数组,它将作为参数传给Function(args–>arguments)
实现类似call的继承的效果:
function Person(name,age){ //定义一个类,人类 this.name=name; //名字 this.age=age; //年龄 this.sayhello=function(){alert("hello")}; } function Print(){ //显示类的属性 this.funcName="Print"; this.show=function(){ var msg=[]; for(var key in this){ if(typeof(this[key])!="function"){ msg.push([key,":",this[key]].join("")); } } alert(msg.join(" ")); }; } function Student(name,age,grade,school){ //学生类 Person.apply(this,arguments); Print.apply(this,arguments); this.grade=grade; //年级 this.school=school; //学校 } var p1=new Person("jake",10); p1.sayhello(); var s1=new Student("tom",13,6,"清华小学"); s1.show(); s1.sayhello(); alert(s1.funcName);
使用apply进行数组参数的函数的优化,很酷的方法:
Math.max后面可以接任意个参数,最后返回所有参数中的最大值。 比如 alert(Math.max(5,8)) //8 alert(Math.max(5,7,9,3,1,6)) //9 但是在很多情况下,我们需要找出数组中最大的元素。 var arr=[5,7,9,1] alert(Math.max(arr)) // 这样却是不行的。一定要这样写 function getMax(arr){ var arrLen=arr.length; for(var i=0,ret=arr[0];i<arrLen;i++){ ret=Math.max(ret,arr[i]); } return ret; } 用 apply呢,看代码: function getMax2(arr){ return Math.max.apply(null,arr); }
下面是另外一个例子,用来合并两个数组:
再比如数组的push方法。 var arr1=[1,3,4]; var arr2=[3,4,5]; 如果我们要把 arr2展开,然后一个一个追加到arr1中去,最后让arr1=[1,3,4,3,4,5] arr1.push(arr2)显然是不行的。 因为这样做会得到[1,3,4,[3,4,5]] 我们只能用一个循环去一个一个的push(当然也可以用arr1.concat(arr2),但是concat方法并不改变arr1本身) var arrLen=arr2.length for(var i=0;i<arrLen;i++){ arr1.push(arr2[i]); }
使用apply的话:
Array.prototype.push.apply(arr1,arr2)
//js默认弹出对话框
window.alert(); window.confirm(); window.prompt(); window.createPopup();
发表评论
文章已被作者锁定,不允许评论。
-
粒子喷泉
2011-07-18 17:43 861注:来自http://daimaren.cn/blog/?p= ... -
jquery validate addMethod
2011-06-20 15:18 1536只能输入m-n个字符且至少有一个字母和一个数字 jQuer ... -
4个跨浏览器必备的函数
2011-05-26 13:58 738http://www.cssbaby.com/archives ... -
用jquery实现的文本框只能输入数字
2011-05-25 10:14 2279用jquery实现的文本框只能输入数字简单插件 $.fn. ... -
闭包理解
2011-04-28 11:51 812直接看到代码 var list = document.ge ... -
JS/DOM/Ajax/Framework(Jquery/Yui/Mootools/EXT)
2011-03-28 10:09 1054gotop效果 <script> var B ... -
jQuery 封装function
2011-03-25 16:37 1919// JavaScript Document (func ... -
利用浏览器默认方法获取浏览器当前位置
2011-03-19 13:53 1028支持浏览器 IE FIREFOX SAFARI CHROME ... -
关于用jQuery实现效果
2011-03-19 09:37 7891、效果1:关于新闻信息文字上下切换 <div i ... -
jquery实现键盘上下键、return键选折li
2011-03-16 11:42 6590注释:code来源javaeye 使用前要引入jquery库 ... -
随滚动条移动的层
2011-02-15 09:51 804<!DOCTYPE html PUBLIC &quo ... -
yui的学习脚印
2011-01-30 22:37 958<!DOCTYPE html PUBLIC &quo ... -
vim 使用
2011-01-21 17:08 681vim命令 vi和vim是linux和u ... -
js左右滚动效果
2011-01-21 14:49 1830<!DOCTYPE html PUBLIC &quo ... -
Javascript浏览器兼容问题
2011-01-14 00:13 1019Javascript浏览器兼容 1.doc ... -
一个简单的javascript tab选项卡
2011-01-13 20:51 1089<!DOCTYPE html PUBLIC &quo ... -
常用的正则表达式
2011-01-10 13:47 652/** *postal codes regular ... -
一些比较实用的javascript方法
2011-01-10 13:25 906动态加载javascript文件 <script t ... -
javacript实现根据选择不同国家选择显示不同的省/州
2010-12-29 01:13 1450/** * @author wangxiang * ... -
javascript方法(Methods)
2010-12-28 23:49 9661、Array array.concat(item..) co ...
相关推荐
以下是对JavaScript基础知识的总结,主要关注在网页中使用的弹出对话框、函数调用以及带有参数的函数。 1) Alert Box `alert()` 函数用于显示一个包含警告信息的单行对话框,用户只能点击“确定”按钮关闭它。在...
这份“JavaScript基础知识点汇总”涵盖了从基础到进阶的多个方面,帮助开发者系统地理解和掌握这一语言。以下是详细的JavaScript知识点解析: 1. **变量**:在JavaScript中,我们可以使用`var`, `let`, 或 `const` ...
总的来说,这个压缩包提供了一个全面的JavaScript基础知识教程,涵盖了数据类型、Object、内置对象和变量等核心概念,对于初学者或者需要巩固基础的开发者来说,是一份非常有价值的参考资料。通过学习这些内容,可以...
1. JavaScript 的基础知识 在学习 JavaScript 之前,你需要了解 HTML 和 XHTML 的基础。JavaScript 被设计用来向 HTML 页面添加交互行为,通过在 HTML 中插入 JavaScript 代码,可以实现页面元素的动态操作和用户...
javascript 基础知识
javascript 基础知识
javascript 基础知识
javascript 基础知识
javascript 基础知识
javascript 基础知识
Javascript基础知识整理 JavaScript是一种高级的、动态的、弱类型的编程语言,主要用于客户端脚本编程。它可以在浏览器中执行,实现网页的交互性和动态效果。本文将对JavaScript的基础知识进行整理和总结,包括脚本...
JavaScript基础知识点总结 JavaScript是一种高级的、动态的、基于对象的客户端脚本语言。它是在网页上执行的脚本语言,能实现网页的交互功能。下面是该资源中的重要知识点总结: 一、 JavaScript 基本概念 * ...
本文将详细介绍JavaScript的基础知识,包括它的编程基础、工作原理、在HTML中的使用方法,以及数据类型、变量、常量、运算符、表达式、控制流程和数组等核心概念。 首先,JavaScript最初由Netscape公司开发,是一种...
javascript 基础知识