JavaScript函数定义语法总结 作者 黄诚
QQ群:65643887
1.正常的定义方法:
function functionName([arguments]){
Javascript statements
[return expression]
}
例1:
function evalScript( i, elem ) {
if ( elem.src )
jQuery.ajax({
url: elem.src,
async: false,
dataType: "script"
});
else
jQuery.globalEval( elem.text || elem.textContent || elem.innerHTML || "" );
if ( elem.parentNode )
elem.parentNode.removeChild( elem );
}
2.匿名函数
上面的其中的functionName可以省略,成为匿名函数:
var func2 = function(…){…};
例1:
var max = function(a, b){
if(a>b) return a;
return b;
}
例2:
dojo.isString = function(/*anything*/ it){
//summary:
//Return true if it is a String
return !!arguments.length && it != null && (typeof it == "string" || it instanceof String);
// Boolean
}
例3:
function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context );
}
3.匿名函数加默认参数
(function(){})();语法表示一个匿名函数的定义
例1:
var iii = (function(a,b){return a+b;})(1,2);
alert(iii);
后面的括号(1,2)表示创建完后立即进行这个函数调用。结果是弹出3。它的优点是在很长的代码段中进行模块化设计或者想避免命名冲突,这是一个不错的解决办法。
例2:
(function(){
var mp = dojo.config["modulePaths"];
if(mp){
for(var param in mp){
dojo.registerModulePath(param, mp[param]);
}
}
})();
4.大括号({})语法
JavaScript中的对象其实就是属性(方法)的一个集合,并没有严格意义上类的概念。所以它提供一个简单的方式类创建对应,即:
{
property1:statement,
property2:statement2,
…
propertyN:statementN
}
通过大括号括住多个属性或方法及其定义(这些属性或方法用逗号割开),来实现对象的定义,这段代码就直接定义个具有n个属性或方法的对象,其属性名和其定义之间用冒号(:)隔开。
例1:
this.dojo = {
_scopeName: "dojo",
_scopePrefix: "",
_scopePrefixArgs: "",
_scopeSuffix: "",
_scopeMap: {},
_scopeMapRev: {}
};
//调用dojo对象的属性scopeName
alert(dojo. scopeName);
例2:
jQuery.browser = {
version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [0,'0'])[1],
safari: /webkit/.test( userAgent ),
opera: /opera/.test( userAgent ),
msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent ) };
5. new Function创建方式:
var funcName = new Function(p1, p2, …, pn, body);
参数的类型都是字符串,p1到pn表示所创建函数的参数名称列表,body表示所创建函数的函数体语句,funcName就是所创建函数的名称。
可以不指定任何参数创建一个空函数,不指定funcName创建一个无名函数,当然那样的函数没有任何意义。
例1:
下面的定义是等价的
var myFunction = new Function(“a”, “b”, “c”, “return a + b + c”);
var myFunction = new Function(“a, b, c”, “return a + b + c”);
var myFunction = new Function(“a, b”, “c”, “return a + b + c”);
函数里面使用大括号语法。
jQuery.extend(
{
noConflict: function( deep ) {
window.$ = _$;
if ( deep )
window.jQuery = _jQuery;
return jQuery;
}
}
);
解析。
jQuery首先定义了一个extend函数。
jQuery.extend= jQuery.fn.extend = function() {
// copy reference to target object
var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options;
// Handle a deep copy situation
if ( typeof target === "boolean" ) {
deep = target;
target = arguments[1] || {};
// skip the boolean and the target
i = 2;
}
...
};
而jQuery.extend({…});是构造了一个对象作为extend函数的参数进行调用。
第二篇:JavaScript语句代码总结
JavaScript语句代码
JavaScript内置对象和操作
数组的操作:
得到数组长度 var len = array.length;
将元素添加到数组开头:array.unshift(要添加的对象);
将元素添加到数组的末尾:array.push(要添加的对象);
删除数组第一个元素:array.shift();
删除数组最后一个元素:array.pop();
删除指定的元素:Array a = array.splice(起始索引,删除的个数);splice方法会将新的数组返回 得到数组片段:array.slice(起始索引,个数);
翻转数组:array.reverse();
将数组的元素连接array.join(“连接符”)(连接符不填的话默认为逗号,)
数组元素的排序array.sort();(由小到大)
字符串对象的操作:
获取字符串的长度:str.length;(length为属性,不是函数)
字符串的截取:str.stringsubstring(起始索引,位数-1)
字符串的替换:str.replace(“原始字符串”,”替换字符串”);
大小写转换:str.toLowerCase(); str.toUpperCase();
将字符串转换为数组:str.split(“分割符”)
数学运算:
小数取整:Math.ceil(小数)向上取整
Math.floor(小数)向下取整
得到随机数:var num = Math.random();
最大值var max = Math.max(num1,num2,num3…………)
最小值var min = Math.min(num1,num2,num3…………)
window对象属性及方法(window.可以省略)
显示提示信息:alert(提示信息);
弹出确认框:confirm(提示信息);
弹出输入框:prompt(提示信息);
窗口状态栏:window.status=”提示信息”
延迟执行:setTimeout(函数名,延迟时间)
定时循环执行:setInterval(函数名,间隔时间);
窗口状态栏:window.status=”提示信息”
setTimeout(函数名,延迟时间)
DOM对象操作
节点的引用:
通过ID获得节点引用:document.getElementBy(id)
通过name获得节点集合的引用:document.getElementsByName(name)
通过标签名获得节点集合的引用:document.getELementsByTagName(TagName)
引用父节点:node.getParentNode;
引用第一个子节点:node.firstChild
引用最后一个子节点:node.lastChild
引用全部子节点结合:node.childNodes
引用相邻的前一个节点:node.previousSibling
引用相邻的后一个节点:node.nextSibling
对节点的操作
创建元素节点: document.createElement(标签名)
创建文本节点:document.createTextNode(文本内容)
添加节点:node.appendChild(要添加的节点)
插入子节点: parent.insertBefore(需要插入的节点,要插入的当前节点)
替换子节点:node.replaceChild(新节点,被替换的节点)
复制节点:var cloneNode=node.cloneNode();
删除子节点:parentNode.removeChild(要删除的节点)
读取节点属性:node.getAttribute(属性名称)
添加或修改节点属性:node.setAttribute(属性名称,属性值)
删除节点的属性:node.removeAttribute(要删除的属性名称)
设置节点的html内容:node.innerHTML="html内容";
设置节点的文本内容:node.innerText="文本内容";
样式控制
设置节点的样式:node.className=样式名字
设置背景色:node.style.backgroundColor=”red”
设置文字颜色:node.style.color=”green”
设置相对或者绝对位置:node.style.position="p"
p=absolute(绝对)或者relative(相对)
设置元素的x坐标:node.style.left=距离+"px"
设置元素的y坐标:node.style.top=距离+"px"
设置元素的高度:node.style.height=高度+"px"
设置元素的宽度:node.style.width=宽度+"px"
添加事件处理(以下方法均用click作为例子,注意有的需要加on,有的不需要)
(1)在html代码内给元素内添加事件 : <input type=”button” onclick=”test()”/>
(2)通过给node的属性赋值来绑定事件 : node.onclick=函数名
(3)火狐的事件绑定,IE不支持:obj.addEventListener(click,处理函数名称,false); (不加on)
(4)IE的事件绑定,火狐不支持:obj.attachEvent(onclick, 处理函数名称)(加on)
注销事件处理
(1)node.onclick=null;
(2)obj.removeEventListener(click,处理函数名称,false);(FF支持,IE不支持)
(3)obj.detachEvent(onclick,处理函数名称);(IE支持,FF不支持)
兼容IE和FF的常用代码总结
(1)获取鼠标的x,y坐标(兼容IE和FF)
var mouseX= (document.body.scrollLeft||document.documentElement.scrollLeft)+evt.clientX; var mouseY = (document.body.scrollTop || document.documentElement.scrollTop) + evt.clientY;
(2)获取事件模型event(兼容IE和FF)
function getEvent(event){
} var evt = event || window.event;
(3)获取发出事件的源对象(兼容IE和FF)
function getTarget(event){
} var evt = event || window.event; var target = evt.target || evt.srcElement; alert(target.value);
(4)获取XMLHttpRequest对象(兼容IE和FF)
if(window.XMLHttpRequest){
} xmlhttp=new XMLHttpRequest(); xmlhttp=new ActiveXObject('Microsoft.XMLHTTP'); }else{
(5)通过ajax方式发送请求
if(xmlhttp){
xmlhttp.open("POST","Ajaxserver",true);设置请求方式,请求URI,是否异步 var parm=name+","+wish+","+color;设置发送参数 //设置发送的头信息 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlhttp.send("name=" + parm);发送参数
xmlhttp.onreadystatechange=callback;设置状态变化事件,callback为回调函数
}
function callback(){
} if(xmlhttp.readyState==4){ var result=xmlhttp.responseText;获得服务器返回的结果 }