Javascript基础——深入了解Javascript(函数返回值return、函数传参arguments、兼容各浏览器的单一行间样式、元素的插入删除split/shift/sort/pop)

news/2024/7/24 8:39:18 标签: split, arguments, sort, 数组的添加删除, Array

1、函数返回值

即函数的执行结果,不过return返回的值也可以为空,

若无结果时返回undefined。

function show(){

return 12;

//return 'asbjf';

}

alert(show());

//var a=show();

//alert('a');


2、函数传参

第一种情况:函数参数已知;

function sum(a,b,c){

return a+b+c;

}

alert(sum(12,6,7));      //传入参数12,6,7

第二种情况:函数参数未知——此时借助于数组(arguements)

例1(求和):ba

function sum(){

//arguements;

var result=0;

for(var i;i<argurments.length;i++){

return + = arguments[i];

}

return result;

}

alert(sum(12,34,56,6,86,5,4));

例2:(css函数使用)

(1)判断arguments.length

(2)参数——css(oDiv,'width');               //两个参数为获取;

css(oDiv,'width','200px');   //三个参数为设置样式;

若为三个参数时,可设置为css(obj,name,value);

代码如下:

function css(){

if(arguements.length==2){         //两个参数为获取;

return arguments[0].style[arguments[i]];

}

else{

arguments[0].style[arguments[1]]=arguments[2];

}

}

window.οnlοad=function (){

var oDiv=document.getElementById("div1");

css(oDiv,'background','green');

}

<body>

<div id="div1" style="width:200px;height:200px;background:#ccc">

</body>


3、兼容各浏览器的非行间样式——单一样式

该代码案例主要作为一个包进行使用。

<head>

<style>
#div1{width: 200px;height: 200px;background: #ccc;}
</style>
<script>
function getStyle(obj,name){

//兼容IE浏览器
if(obj.currentStyle){       
return obj.currentStyle[name];
}

//兼容Chrome、FireFox
else{
return obj.CompentStyle[name];
}
}
window.οnlοad=function(){
var oDiv=document.getElementById('div1');
alert(getStyle(oDiv,'width'));
}
</script>
</head>

<body>
<div id="div1"></div>
</body>

此外,还应该注意两个概念——复合样式、单一样式

复合样式:如background、border

单一样式:如width、position、height


4、数组基础

(1)定义:var arr=[1,2,3];

    var arr=new Array(1,2,3);

一般建议用第一种格式;

(2)数组属性Length——既可以获取,也可以设置(如arr.length=0)

alert(arr.length);

注意:为了避免出现问题,建议数组中存取相同样式的元素;

(3)数组的使用——插入和删除

a、当作用于尾部时,采用push()、pop()

push()——向数组的尾部添加

  pop()——向数组的尾部删除

b、当向数组的头部进行操作时,采用shift()、unshift()

unshift()——类似于push()

    shift()——类似于pop()

c、splice()某个点插入删除元素用法

c1、删除元素:splice(起点、长度)

例如——arr.splice(2,3);

c2、插入元素:splice(起点、长度、插入的元素...)

例如——arr.splice(2,0,'a','b','c')  //直接插入;

       arr.splice(2,3,'a','b','c');   //表示先删除,在插入,类似于替换;

d、转换类——

(d1)数组间的连接concat(数组2);

例如:alert(a.concat(b));

(d2)数组间连接的字符join(分隔符)——用分隔符,组合数组元素,生成字符串

例如:alert(arr.join('-'));

此外,字符串的删除采用上边的方法split()


e、数组间的排序sort(比较函数)——排序一个数组

例如:var arr=['float','width','asd','zoom','left'];

   arr.sort();

   alert(arr);

不过,对于sort()而言,一般对数字进行排序,而非字符;

例如:var arr=[12,4,73,23,46,122];

     arr.sort();

   alert(arr);   

//把数组中数字当成了字符串,会抛出错误。

若要对数组中数字进行排序,需要借助函数进行比较

例如:arr.sort(function(n1,n2){

第一种方法:利用n1,n2比较

if(n1<n2){

return -1;

}

else if(n1<n2){

return 1;

}

else{

return 0;

}

第二种方法:借助n1-n2

return n1-n2;

});


http://www.niftyadmin.cn/n/1659547.html

相关文章

设置按钮禁用时的样式

前言 按钮有可用和不可用之分&#xff0c;一般按钮不可用时默认是置灰且不可点击的&#xff0c;但是为了配合整个项目的样式和色调&#xff0c;我们需要对不可用的按钮进行样式的调整。 效果展示 按钮可用时的样式&#xff1a;      按钮不可用时的样式&#xff1a;    …

Javascript基础——定时器的使用及简单小应用(简易时钟1、延时提示框)

1、开启时钟、关闭时钟各有两种方式&#xff1a; 开启&#xff1a;setInterval()、setTimeout() 关闭&#xff1a;clearInterval()、clearTimeout() 同时&#xff0c;setInterval()/setTimeout()开启时钟函数传递两个参数——执行函数/参数、间隔毫秒ms数 这两种方式的区别…

Vue公众号退出微信浏览器

前言 开发了一个项目&#xff0c;需要放到公众号中&#xff0c;在路由跳转之后&#xff0c;此时我们单击手机上的返回键&#xff08;部分手机是左右滑&#xff09;&#xff0c;我们希望退出微信浏览器&#xff0c;这个时候应该如何操作呢&#xff1f; 过程 1.安装微信的SDK n…

Javascript基础——利用定时器实现的图片无缝滚动(offsetLeft)

1、无缝滚动 原理&#xff1a;&#xff08;1&#xff09;让div动起来&#xff0c;让ul一直向左/向右移动&#xff1b; &#xff08;2&#xff09;即利用定时器让物体从左到右或从右到左进行滚动。 采用offsetLeft——如oUl.style.leftoUl.offsetLeft-2px;&#xff08;由左向右…

Javascript基础——利用Dom元素对节点进行创建、插入和删除、文档碎片

1、创建节点——createElement &#xff08;例如在ul元素后创建li元素&#xff09; var oUldocuemnt.getElementById(ul1); var oLioUl.createElement(li); 2、插入节点(两种方式) 第一种——appendChild 前提是在按钮点击创建基础上&#xff0c;进行相对应节点的插入。 …

Vue实现复制指定的值

项目需求 当我单击“复制”按钮的时候&#xff0c;需要复制上前面的“中国民生…支行”。 实现方式 思路&#xff1a;用剪切板的插件&#xff0c;单击复制的时候复制指定的内容到剪切板上。   代码&#xff1a;   1.安装插件 npm install clipboard --save2.界面引入 im…

DOM高级应用——表格元素的添加、删除、搜索操作1

1、表格应用 &#xff08;1&#xff09;获取——tBodies、tHead、tFoot、rows、cells &#xff08;2&#xff09;隔行换色——鼠标移入高亮 if(i%20){ oTab.tBodies[0].rows[i].style.background"#cbc"; } else{ oTab.tBodies[0].rows[i].style.background&qu…

【CSS】span标签设置宽度

前言 我们都知道HTML中的span标签是行内标签&#xff0c;行内标签是无法设置高度和宽度的&#xff0c;但是就是需要给span设置宽度&#xff0c;应该怎么处理呢&#xff1f; display 首先我们先来学习一下display属性。 取值效果none不显示元素inline行内效果block块级效果inl…