第三节 深入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"> ...
随机推荐
- poi 生成excel,最简单代码
import org.apache.poi.hssf.usermodel.HSSFWorkbook; import org.apache.poi.hssf.usermodel.HSSFSheet; i ...
- vue-自定义pc端键盘-动画
<template> <div class="keyboard"> <div class="keyboard_key"> & ...
- K-means &K-medoids 聚类
k-平均值算法对孤立点很敏感!因为具有特别大的值的对象可能显著地影响数据的分布. k-中心点(k-Medoids): 不采用簇中对象的平均值作为参照点, 而是选用簇中位置最中心的对象, 即中心点(me ...
- [vue]模拟移动端三级路由: router-link位置体现router的灵活性
小结 router-link可以随便放 router-view显示的是父组件的直接子组件的内容 想研究下移动三级路由的逻辑, 即 router-link和router-view 点首页--点新闻资讯( ...
- 【UML】-NO.40.UML.1.UML.1.001-【UML】- uml
1.0.0 Summary Tittle:[UML]-NO.40.UML.1.UML.1.001-[UML]- uml Style:DesignPattern Series:DesignPattern ...
- JS 8-4 OOP instanceof
instanceof数据类型的判断方法 一般要求左边是个对象,右边是个函数或者构造器 [1,2] instanceof Array //true 左边的原型 指向了 右边的prototype属性
- vbox 相关
1.虚拟机vbox 安装mac os 10.12 图文教程: https://www.cnblogs.com/liming2017/p/7566953.html
- 实践 : Ubuntu 上 Testlink 部署
1.安装apache sudo apt-get install apache2 2. sudo /etc/init.d/apache2 restart 测试: Http:\localhost or I ...
- iOS 开发笔记-控制器翻页
找了一天,终于找到了两个能用的. 1.https://github.com/wangmchn/WMPageController 2.https://github.com/everettjf/EVTTa ...
- spring注解式开发之视图解析器
http://localhost:8089/springmvc-04-viewResovler/springmvc/hello