第三节 深入JavaScript
函数的返回值:(把函数体内的数据传出到函数体外)
什么是函数的返回值:函数执行结果、可以没有返回值
一种函数应该只返回一种类型的值
函数传参:(与函数返回值相反,把外面数据传入函数体内)
可变参(不定参)arguments:参数的个数可变,如参数数组,例如:求所有参数的和、判断arguments.length、给参数取名,增强可读性;
function sum() { //对所有参数求和
var result=0;
for (var i=0; i<arguments.length; i++){
result+=arguments[i];
}
return result;
}
alert(sum(12,4,6,72,8,3,7,4,68,8));
//CSS函数
function css(){
if (arguments.length==2){ //传入两个参数,表示获取元素
return arguments[0].style[arguments[1]];
}else{ //传入三个参数,表示修改元素值
arguments[0].style[arguments[1]]=arguments[2];
}
}
window.onload=function () {
var oDiv=document.getElementById('div1');
//alert(css(oDiv,'width'));
css(oDiv, 'background', 'green')
};
<div id="div1" style="width:200px; height:200px; border:1px solid black; background:red"></div>
//上面代码可以修改为:
function css(obj, name, value){
if (arguments.length==2){ //传入两个参数,表示获取元素
return obj.style[name];
}else{ //传入三个参数,表示修改元素值
obj.style[name]=value;
}
}
取非行间样式:(上述代码中style只能取行间的样式,而非行间的,或者是外部样式表中的样式都取不了)
currentStyle用于获取非行间样式或外部样式表中的样式,alert(oDiv.currentStyle.width); 注意:currentStyle只支持IE,Chromee,FF(火狐)不兼容。
getComputedStyle(对象名, 任何值).样式名,用于火狐、谷歌、IE9以上等浏览器获取行间样式;例如:alert(getComputedStyle(oDiv, false).width);
//我们要处理这种兼容问题,可以使用以下方法:
if (oDiv.currentStyle) {
alert(oDiv.currentStyle.width); //IE
}else {
alert(getComputedStyle(oDiv, false).width); //Chrome、FF
} //或者把上面获取样式封装成一个函数,放入自己的JS文件内,之后只需调用即可
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
}else {
return getComputedStyle(obj, false)[name];
}
}
alert(getStyle(oDiv, 'width')); //调用
需要注意的是,上述获取样式的几个方法中有个小缺陷,它们只能获取“单一/简单样式单一/简单样式单一/简单样式单一/简单样式”比如width、height、position……;但是不能获取“复合样式”如background(background-color、background-image……),border(border-color、border-bottom……)等,但是可以取出backgroun-color等这样的单一样式。
数组基础:
定义方法:var a=[元素, 元素, 元素, 元素, ...]; 或者var a=new Array(元素, 元素, 元素, 元素, ...); 两者没有差别,第一种性能略高,因为代码短。
数组的属性:“length”既可以获取,又可以设置; 例如:快速清空数组,只需arr.length=0;
数组中应该只存一种类型的变量;
数组的方法:
添加:push(元素) 从尾部添加数据; unshift(元素) 从头部添加数据; 从中间插入:arr.splice(开始, 长度, 元素...) 先删除,后插入,即表示用“元素...”替换被删除的元素,当被删除元素个数,即“长度”为0时,表示直接插入。
删除:pop() 从尾部弹出数据; shift() 从头部弹出数据; 从中间删除:arr.splice(开始,长度)
排序:sort([比较函数]); 给一个数组排序,
arr=['array', 'flaot', 'left', 'zoo', 'zero', 'ten', 'mom']; arr.sort();:排序一个字符串数组(按首字母在26个因为字母中的先后顺序,相同时继续比较下一个字母);
arr=[11, 56, 35, 980, 45]; arr.sort();:排序一个数字数组(按数字的首位在0,1,2,3,4,5,6,7,8,9的顺序)。
怎么解决上句数字不能按大小排序呢?
arr.sort(function (n1, n2) {
if (n1<n2){
return -1;
} else if (n1>n2){
return 1;
} else { //n1=n2
return 0;
}
});
//或者把上述语句简写为:
arr.sort(function (n1, n2) {
return n1-n2;
});
转换类:数组1.concat(数组2); 连接两个数组; arr.join(分隔符)用分隔符,组合数组元素,生成字符串----对应字符串split
第三节 深入JavaScript的更多相关文章
- 第一百三十三节,JavaScript,封装库--弹出登录框
JavaScript,封装库--弹出登录框 封装库,增加了两个方法 yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面,chuang_kou_shi_jian()方法,浏览器窗口事 ...
- 第一百二十三节,JavaScript错误处理与调试
JavaScript错误处理与调试 学习要点: 1.浏览器错误报告 2.错误处理 3.错误事件 4.错误处理策略 5.调试技术 6.调试工具 JavaScript在错误处理调试上一直是它的软肋,如果脚 ...
- 第一百一十三节,JavaScript文档对象,DOM基础
JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...
- 第一百零三节,JavaScript对象和数组
JavaScript对象和数组 学习要点: 1.Object类型 2.Array类型 3.对象中的方法 什么是对象,其实就是一种类型,即引用类型.而对象的值就是引用类型的实例.在ECMAScript中 ...
- 第一百四十三节,JavaScript,利用封装库做百度分享
JavaScript,利用封装库做百度分享 效果图 html代码 <div id="share"> <h2>分享到</h2> <ul> ...
- 学习javascript基础知识系列第三节 - ()()用法
总目录:通过一段代码学习javascript基础知识系列 注意: 为了便于执行和演示,建议使用chrome浏览器,按F12,然后按Esc(或手动选择)打开console,在console进行执行和演示 ...
- 2014年辛星完全解读Javascript第三节
经过第一节的入门和第二节的运算符,那么接下来我们就可以学习Javascript的函数了,当然了,不管大家之前学习的是什么编程语言,都会有函数的概念,如果大家学的是Pascal,还会有”过程“的概念,但 ...
- 2014年辛星Javascript解读第三节
经过第一节的入门和第二节的运算符.那么接下来我们就能够学习Javascript的函数了,当然了.无论大家之前学习的是什么编程语言.都会有函数的概念,假设大家学的是Pascal,还会有"过程& ...
- 第一百五十三节,封装库--JavaScript,表单验证--备注字数验证
封装库--JavaScript,表单验证--备注字数验证 效果图 html <div id="reg"> <h2 class="tuo"> ...
随机推荐
- [py][mx]django的cookie和session操作-7天免登录
浏览器同源策略(same-origin policy) csrf攻击防御核心点总结 django的cookie和session操作-7天免登录 flask操作cookie&django的see ...
- Java获取环境变量
Java 获取环境变量Java 获取环境变量的方式很简单: System.getEnv() 得到所有的环境变量System.getEnv(key) 得到某个环境变量的值 Map map = Syst ...
- confd动态生成配置文件
下载安装confd $ mkdir -p $GOPATH/src/github.com/kelseyhightower $ git clone https://github.com/kelseyhig ...
- AFNetworking 源码解析
3.0 之后,就取消了NSOperation的控制. 因为根据Apple Developer Document的文档 https://developer.apple.com/documentation ...
- CentOS下用yum命令安装jdk【转】
一.使用yum命令安装 1.查看是否已安装JDK,卸载 [root@192 ~]# yum list installed |grep java java-1.8.0-openjdk.x86_64 ...
- System.Web.UI.Page的页面基类
服务器端的page类 所有我们编写的页面都继承自page类,可见page类是非常重要的,page类提供了哪些功能,直接决定了我们的页面类可以继承什么功能,或者说,直接决定了我们的页面类功能的强大与否! ...
- cookie之三天免登录代码
LoginCookie.java 1 package com.bjsxt.cookie; import java.io.IOException; import java.net.URLDecoder; ...
- Sift中尺度空间、高斯金字塔、差分金字塔(DOG金字塔)、图像金字塔
转自:https://blog.csdn.net/dcrmg/article/details/52561656 一. 图像金字塔 图像金字塔是一种以多分辨率来解释图像的结构,通过对原始图像进行多尺度像 ...
- MyBatis基础入门《十七》动态SQL
MyBatis基础入门<十七>动态SQL 描述: >> 完成多条件查询等逻辑实现 >> 用于实现动态SQL的元素主要有: > if > trim > ...
- quartz demo01
1,Pom.xml 加入:quartz-2.1.7.jar <dependency> <groupId>org.quartz-scheduler</groupId&g ...