javaScript常用命令

一、js简单用法

1、javaScript是一种弱类型语言，变量类型需要由它的值来确定，定义变量需要用关键字var来进行定义与接收

var num = 123
var str = 'helloworld'

同时定义读哦个变量的时候可以公用一个关键字var，中间用，隔开

var num = 123,str = 'hello',sount = '23'

2、获取元素的方法可以使用内置对象document函数里边的方法来进行元素获取，并将其赋值给一个变量

var div = document.getElementById('div1')
var div = document.getElementsByTagName('div')
........

但是获取元素的时候，语句写在了标签语句的上边，就会出错，因为代码执行是从上往下执行的，当你执行js语句的时候，标签语句还没有进行加载，所以获取不到，就会出错，解决的方法有两种
第一、将js语句放在最下边

....
<div id="div1">这是一个div元素</div>
....

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>
</body>

第二种、将js语句放在window.onload触发的函数中，获取元素的语句就必须在页面加载完成后才会执行，以免报错；

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
    }
</script>

....

<div id="div1">这是一个div元素</div>

3、操作属性的方法有两个
@1、“.”操作
@2、“[]”操作
html的属性和js的属性写法一样；‘class’属性写成’className‘;’style’属性里边的属性，有横杠的改成驼峰式，比如：“font-size",改成”style.fontSize"
通过’.‘操作属性

//读取属性值
var input = document.getElementById('input1')
var value =  input.value
//写属性
input.style.color = 'red'

通过[]操作属性

var oInput1 =document.getElementById('input1');  var oInput2 =document.getElementById('input2');
 var oA = document.getElementById('link1');
        // 读取属性
        var sVal1 = oInput1.value;
        var sVal2 = oInput2.value;
        // 写(设置)属性
        // oA.style.val1 = val2; 没反应
        oA.style[sVal1] = sVal2;   

4、可以通过innerHtml填写标签包裹的内容

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        //读取
        var sTxt = oDiv.innerHTML;
        alert(sTxt);
        //写入
        oDiv.innerHTML = '<a href="http://www.taobao.com">淘宝<a/>';
    }
</script>

......

<div id="div1">这是一个div元素</div>

---

二、js函数

---

1、函数就是重复执行的代码
函数的定义与执行

<script type="text/javascript">
    // 函数定义
    function fnAlert(){
        alert('hello!');
    }
    // 函数执行
    fnAlert();
</script>

2、变量与函数预解析
js定义函数在解析过程中分为两个阶段，先是编译阶段，然后是执行阶段，在编译阶段会将function定义的函数提前，并将var定义的变量声明提前，将他赋值为undefined

<script type="text/javascript">    
    fnAlert();       // 弹出 hello！
    alert(iNum);  // 弹出 undefined
    function fnAlert(){
        alert('hello!');
    }
    var iNum = 123;
</script>

3、提取行间事件

<!-- 提取行间事件 -->
<script type="text/javascript">

window.onload = function(){
    var oBtn = document.getElementById('btn1');
    oBtn.onclick = fnAlert;
    function fnAlert(){
        alert('ok!');
    }
}    
</script>
......
<input type="button" name="" value="弹出" id="btn1">

4、匿名函数
定义的函数可以不给名称，可以直接将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用

var bt = document.getElementById('bt1')
bt.onclick = function(){
alert('hello'!)
}

5、函数传参

function show(a){
alert(a)
}
show(123456789)

6、函数中return关键字
return的作用：
返回函数执行的结果；结束函数的运行；阻止默认行为

function fnAdd(iNum01,iNum02){
    var iRs = iNum01 + iNum02;
    return iRs;
    alert('here!');
}

var iCount = fnAdd(3,4);
alert(iCount);  //弹出7

7、条件语句
运算符
@1、算术运算符：+ - * / %(求余)
@2、赋值运算符：= ，+=，-=，*=，/=，%=
@3、条件运算符：== ， === ，>, >=, < , <=, !=,&&(而且),||(或者),!(否)
1、if else

var a = 3
var b = 4
if(a<b){
alert("a小于b")
}
else{
alert("a大于b")
}

2、多重if else语句

var iNow = 1;
if(iNow==1)
{
    ... ;
}
else if(iNow==2)
{
    ... ;
}
else
{
    ... ;
}

3、switch语句

var iNow = 1;

switch (iNow){
    case 1:
        ...;
        break;
    case 2:
        ...;
        break;    
    default:
        ...;
}

注意case后边比较的是字符串

---

三、数组及操作方法

---

1、定义数组的方法

//对象的实例创建
var aList = new Array(1,2,3)
//直接量创建
var aList2 = [1,2,3,'hello']

2、获取数组的长度：alist.length
3、用下标操作数组的某个数据：aList[i]
4、join()将数组成员通过一个分隔符合并成字符串

var aList = [1,2,3,4];
alert(aList.join('-')); // 弹出 1-2-3-4

5、push()和pop()从数组最后增加成员或者删除成员

var aList = [1,2,3,4];
aList.push(5);
alert(aList); //弹出1,2,3,4,5
aList.pop();
alert(aList); // 弹出1,2,3,4

6、unshift()和shift()从数组前面增加或者删除成员

var aList = [1,2,3,4];
aList.unshift(5);
alert(aList); //弹出5,1,2,3,4
aList.shift();
alert(aList); // 弹出1,2,3,4

7、reverse()将数组反转
8、indexOf()返回数组中元素第一次出现的索引值，可以用来数组去重
9、splice()在数组中增加或者删除成员

var aList = [1,2,3,4];
aList.splice(2,1,7,8,9); //从第2个元素开始，删除1个元素，然后在此位置增加'7,8,9'三个元素
alert(aList); //弹出 1,2,7,8,9,4

10、多维数组
多维数组指的是数组的成员也是数组的数组

var aList = [[1,2,3],['a','b','c']];

alert(aList[0][1]); //弹出2;

---

四、 字符串的处理方法

---

1、字符串合并操作：’+‘
2、parseInt()将数字字符串转化为整数

var a = '12'
var b = '24'
alert(parseInt(a))//弹出12

3、parseFloat()将数字字符串转化为小数

var sNum03 = '12.32'
alert(parseFloat(sNum03));  //弹出 12.32 将字符串小数转化为数字小数

4、spilt()把一个字符串分隔成字符串组成的数组

var sTr = '2017-4-22';
var aRr = sTr.split("-");
var aRr2= sTr.split("");

alert(aRr);  //弹出['2017','4','2']
alert(aRr2);  //弹出['2','0','1','7','-','4','-','2','2']

5、charAt()获取字符串中的某一个字符

var sId = "#div1";
var sTr = sId.charAt(0);
alert(sTr); //弹出 #

6、indexOf()查找字符串是否含有某字符

var sTr = "abcdefgh";
var iNum = sTr.indexOf("c");
alert(iNum); //弹出2

7、substring() 截取字符串 用法： substring(start,end)（不包括end）
8、toUpperCase() 字符串转大写
9、toLowerCase() 字符串转小写