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 缩图函数 (onDOMLoaded)……
Oct 23 Javascript
js prototype截取字符串函数
Apr 01 Javascript
js中的getAttribute方法使用示例
Aug 01 Javascript
JavaScript实现大数的运算
Nov 24 Javascript
jquery实现横向图片轮播特效代码分享
Nov 19 Javascript
Node.js的文件权限及读写flag详解
Oct 11 Javascript
vue中路由参数传递可能会遇到的坑
Dec 07 Javascript
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 Javascript
JS实现图片拖拽交换效果
Nov 30 Javascript
layui清除radio的选中状态实例
Nov 14 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 Javascript
JavaScript Tab菜单实现过程解析
May 13 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,ajax实现分页
2008/03/27 PHP
PHP 全角转半角实现代码
2010/05/16 PHP
常用的PHP数据库操作方法(MYSQL版)
2011/06/08 PHP
YII框架中搜索分页jQuery写法详解
2016/12/19 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
JavaScript表单常用验证集合
2008/01/16 Javascript
prettify 代码高亮着色器google出品
2010/12/28 Javascript
jQuery中data()方法用法实例
2014/12/27 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
2020/04/26 Javascript
Python中正则表达式的详细教程
2015/04/30 Python
django rest framework之请求与响应(详解)
2017/11/06 Python
python学习入门细节知识点
2018/03/29 Python
Python中的Numpy矩阵操作
2018/08/12 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
详解10个可以快速用Python进行数据分析的小技巧
2019/06/24 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
jupyter 添加不同内核的操作
2021/02/06 Python
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
2017/09/15 HTML / CSS
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
HTML5 Convas APIs方法详解
2015/04/24 HTML / CSS
美国最大的家庭鞋类零售商之一:Shoe Carnival
2017/10/06 全球购物
Java提供了哪些企业应用编程接口
2015/02/13 面试题
自我鉴定思想方面
2013/10/07 职场文书
优秀毕业大学生推荐信
2013/11/13 职场文书
楼面部长岗位职责范本
2014/02/14 职场文书
企业标语大全
2014/07/01 职场文书
一个家长教育孩子的心得体会
2016/01/15 职场文书
党员观看《筑梦中国》心得体会
2016/01/18 职场文书
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers