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 相关文章推荐
利用JS自动打开页面上链接的实现代码
Sep 25 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
jq选项卡鼠标延迟的插件实例
May 13 Javascript
解析jquery中的ajax缓存问题
Dec 19 Javascript
使用jQuery实现的掷色子游戏动画效果
Mar 14 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
Jun 06 Javascript
js禁止页面刷新与后退的方法
Jun 08 Javascript
javascript每日必学之多态
Feb 23 Javascript
vue-resourse将json数据输出实例
Mar 08 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 Javascript
比较node.js和Deno
Apr 27 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获取从html表单传递数组的方法
2015/03/20 PHP
PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】
2017/07/19 PHP
Javascript 布尔型分析
2008/12/22 Javascript
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
javascript 二维数组的实现与应用
2010/03/16 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
js Object2String方便查看js对象内容
2014/11/24 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
jQuery的context属性用法实例
2014/12/27 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
详解JS-- 浮点数运算处理
2016/11/28 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
Node.Js生成比特币地址代码解析
2018/04/21 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
python实现linux下使用xcopy的方法
2015/06/28 Python
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
Python 操作文件的基本方法总结
2017/08/10 Python
python绘制双柱形图代码实例
2017/12/14 Python
python中将一个全部为int的list 转化为str的list方法
2018/04/09 Python
TensorFlow损失函数专题详解
2018/04/26 Python
对python 生成拼接xml报文的示例详解
2018/12/28 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
应聘面试自我评价
2014/01/24 职场文书
《威尼斯的小艇》教学反思
2014/02/17 职场文书
社团2014年植树节活动总结
2014/03/11 职场文书
寄语学生的话
2014/04/10 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
优秀学生干部先进事迹材料
2014/05/26 职场文书
在职证明范本
2015/06/15 职场文书
2019年教师入党申请书
2019/06/27 职场文书
《曾国藩家书》读后感——读家书,立家风
2019/08/21 职场文书
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS