第三节 深入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"> ...
随机推荐
- Java Script注意事项
1.HTML中,打错标点符号 或输入格式不对(多输等号 或少加括号等) 会导致字体颜色不对劲 2.写Java Script时通常的做法是把函数放入 <head> 部分中,或者放在页面底部. ...
- Font Awesome 最简单应用例子
简介: Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果. 使用方法: 引入<link rel=&q ...
- abap method中的异常处理
1: 抛出异常 2: 处理异常
- abap function module中的异常处理
1: 定义一个有异常抛出的function module. (zfm_moudle6), 该函数中有符合exceptions中的异常,将会自动将exceptions中的异常抛出. FUNCTION ...
- Asp.net Core认证和授权:Cookie认证
关于asp.net core 的文章,博客园已经有很多大牛写过了. 这里我只是记录下自己在学习中的点滴和一些不懂的地方 Cookie一般是用户网站授权,当用户访问需要授权(authorization) ...
- 测试一体机ASM Disk online操作
环境:3台虚拟机 RHEL 7.3 + Oracle RAC 11.2.0.4 问题现象:RAC运行正常,ASM磁盘组Normal冗余,节点主机重启,offline状态的asm disk短时间内可以直 ...
- ANTLR4权威指南 - 第5章 设计语法
在第I部分,我们熟悉了ANTLR,并在一个比较高的层次上了解了语法以及语言程序.现在,我们将要放慢速度来学习下实现更实用任务的一些细节上的技巧,例如建立内部数据结构,提取信息,生成输入对应的翻译内容等 ...
- react native 中使用swiper
1.下载依赖 cnpm install react-native-swiper --save 2.在组件中使用 import React, { Component } from 'react'; im ...
- vue中使用kindeditor富文本编辑器
1.去官网下载kindeditor 2.将其放在一个名为kindeditor的文件夹里,并且将它放在vue里的static文件夹下 3.创建kindeditor.vue <template> ...
- composer----------composer初体验,如何安装,如何下载
最近PHP里面比较火的一款框架laravel,想学一下看下这个框架到底哪里好.这款框架的中文官网激励推荐composer,没办法就去学了一些composer.结果整了半天,还不如看一段短视频学的容易. ...