javascript基础知识大集锦(二) 推荐收藏


Posted in Javascript onJanuary 13, 2011

详细看附件例子,还是写的比较简单的。

1.关于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; 
} 
};

2.关于一个可以查看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); 
} 
}

3.正则表达式: 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); 
}

4.很值得学习并要使用好的方法,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");

多重继承的例子:
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); 
}

5.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)

打包下载 http://xiazai.3water.com/201101/yuanma/MyHtml.rar
Javascript 相关文章推荐
FF IE兼容性的修改小结
Sep 02 Javascript
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
JS实现div居中示例
Apr 17 Javascript
基于javascript实现窗口抖动效果
Jan 03 Javascript
js对字符串进行编码的方法总结(推荐)
Nov 10 Javascript
BootStrop前端框架入门教程详解
Dec 25 Javascript
JS前向后瞻正则表达式定义与用法示例
Dec 27 Javascript
JavaScript 数组的进化与性能分析
Sep 18 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
vue 获取视频时长的实例代码
Aug 20 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 Javascript
Vue绑定用户接口实现代码示例
Nov 04 Javascript
javascript基础知识大集锦(一) 推荐收藏
Jan 13 #Javascript
myFocus slide3D v1.1.0 使用方法与下载
Jan 12 #Javascript
异步加载script的代码
Jan 12 #Javascript
数组方法解决JS字符串连接性能问题有争议
Jan 12 #Javascript
js对数字的格式化使用说明
Jan 12 #Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
Jan 12 #Javascript
克隆javascript对象的三个方法小结
Jan 12 #Javascript
You might like
php IP及IP段进行访问限制的代码
2008/12/17 PHP
php5 apache 2.2 webservice 创建与配置(java)
2011/01/27 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
PHP大神的十大优良习惯
2016/09/14 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
2016/06/20 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
2016/10/10 Javascript
JavaScript运动框架 链式运动到完美运动(五)
2017/05/18 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
vue组件从开发到发布的实现步骤
2018/11/11 Javascript
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
js 图片懒加载的实现
2020/10/21 Javascript
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
python实现对excel进行数据剔除操作实例
2017/12/07 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
Tensorflow tensor 数学运算和逻辑运算方式
2020/06/30 Python
英国街头品牌:Bee Inspired Clothing
2018/02/12 全球购物
什么叫做SQL注入,如何防止
2016/10/04 面试题
口腔医学技术应届生求职信
2013/11/09 职场文书
服务中心夜班服务员岗位职责
2013/11/27 职场文书
交通安全演讲稿
2014/01/07 职场文书
大学生年度个人总结
2015/02/15 职场文书
仓管员岗位职责范本
2015/04/01 职场文书
教师节主题班会教案
2015/08/17 职场文书
Spring整合Mybatis的全过程
2021/06/28 Java/Android
elementui的el-popover修改样式不生效的解决
2021/06/30 Javascript
Python编写nmap扫描工具
2021/07/21 Python
Python绘画好看的星空图
2022/03/17 Python