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 相关文章推荐
javascript 支持链式调用的异步调用框架Async.Operation
Aug 04 Javascript
jquery 笔记 事件
Nov 02 Javascript
node.js使用require()函数加载模块
Nov 26 Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
Boostrap基础教程之JavaScript插件篇
Sep 08 Javascript
EditPlus 正则表达式 实战(3)
Dec 15 Javascript
JS字符串按逗号和回车分隔的方法
Apr 25 Javascript
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 Javascript
关于RxJS Subject的学习笔记
Dec 05 Javascript
Vue项目安装插件并保存
Jan 28 Javascript
使用React-Router实现前端路由鉴权的示例代码
Jul 26 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实现的简单日志写入函数
2015/03/31 PHP
php版微信自动获取收货地址api用法示例
2016/09/22 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
Jquery 弹出层插件实现代码
2009/10/24 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
jQuery on方法传递参数示例
2014/12/09 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
JS判断字符串包含的方法
2015/05/05 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
JavaScript判断输入是否为数字类型的方法总结
2017/09/28 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
浅谈Django自定义模板标签template_tags的用处
2017/12/20 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
python编写计算器功能
2019/10/25 Python
python单向循环链表原理与实现方法示例
2019/12/03 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
Python sublime安装及配置过程详解
2020/06/29 Python
python右对齐的实例方法
2020/07/05 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
竞选部门副经理的自荐书范文
2014/02/11 职场文书
学校门卫岗位职责
2014/03/16 职场文书
幼儿教师求职信
2014/05/24 职场文书
颐和园的导游词
2015/01/30 职场文书
2015年度企业工作总结
2015/05/21 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书
python实现股票历史数据可视化分析案例
2021/06/10 Python
MySQL去除密码登录告警的方法
2022/04/20 MySQL
一文解答什么是MySQL的回表
2022/08/05 MySQL