天天看点
返回

JS学习笔记一操作元素属性JavaScript嵌入页面的方式变量获取元素函数条件语句数组及操作方法循环语句

操作元素属性

获取页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写。

操作属性的方法

1."."操作

2."[]"操作

属性写法

1.html的属性和js里面的属性写法一样

2."class"属性写成"classname"

3."style"属性里面的属性，有横杠的改成驼峰式，比如:"font-size"，改成"style.fontSize"

通过"."操作属性:

<script type="text/javascript">
        window.onload = function () {
            var oInput = document.getElementById('input1')
            var oA = document.getElementById('link1')
            //读取属性值
            var sValue = oInput.value;
            var sType = oInput.type;
            var sName = oInput.name;
            var sLinks = oA.href;
            //写属性
            oA.style.color = 'red';
            oA.style.fontSize = sValue;
        }
    </script>

innerHTML

innerHTML可以读取或者写入标签包裹的内容

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            var oDIV = document.getElementById('box');
            //读取
            var sTxt = oDIV.innerHTML;
            alert(sTxt);
            //写入
            oDIV.innerHTML = '<a href="http://www.baidu.com" target="_blank" rel="external nofollow" >百度</a>'
        }
    </script>
</head>
<body>
    <div id="box">TEST</div>
</body>
</html>

JavaScript嵌入页面的方式

1.行间事件（主要用于事件）

<input type="button" name="" οnclick="alert('OK!');">

2.页面script标签嵌入

<script type="text/javascript">

     alert('OK!');

</script>

3.外部引用

<script type="text/javascript" src="js/index.js"></script>

变量

JavaScript是一种弱类型语言，JavaScript的变量类型由它的值来决定。定义变量需要用关键字'var'。如果需要同时定义多个变量可以使用逗号隔开。

变量的类型：

5种基本数据类型：

1.number数字类型

2.string字符串类型

3.Boolean布尔类型true或者false

4.underfined类型，变量声明未初始化，它的值就是underfined。

5.null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null，在页面上获取不到对象，返回值就是null。

6.复合类型，object

变量、函数、属性、函数参数命名规范：

1.区分大小写

2.第一个字符必须是字母、下划线或者美元符号$

3.其他字符可以是字母、下划线、美元符号或者数字

获取元素

可以使用内置对象document上的getEelementById方法来获取页面上设置了ID属性的元素，获取到的是一个html对象，然后将他赋值给一个变量，比如：

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

上面的语句，如果把JavaScript写在元素的上面，就会出现错误，因为页面是从上往下加载执行的，JavaScript去页面上获取元素的时候div1还没有进行加载，解决的方式有：一是将JavaScript放到页面最下面，二是使用Windows.online等网页加载完成之后再执行。

函数

函数就是重复执行的代码片。

函数定义与执行：

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

变量和函数预解析

JavaScript解析的过程分为两个阶段，首先是编译的阶段，然后才是执行的阶段，在编译的阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为undefined。

函数传参：

<script type="text/javascript">
    function fnAlert(a) {
        alert(a);

    }
    fnAlert(123);
</script>

函数'return'关键字

函数return关键字的作用：

1.返回函数执行的结果

2.结束函数的运行

3.阻止默认行为

<script type="text/javascript">
    function fnAdd(iNum01,iNum02) {
        var iRs = iNum01 + iNum02;
        return iRs;
        alert("hello");
    }
    var iCount = fnAdd(3,4);
    alert(iCount);
</script>

条件语句

通过条件来控制程序的走向，就需要利用条件语句

运算符

1.算术运算符：+、-、*、/、%

2.赋值运算符：=、+=、-=、*=、/=、%=

3.条件运算符：==、===、>、>=、<、<=、!=、&&、||、!

if语句

 var iNow=1;

if (iNow==1){

......;

}

else if(iNow==2){

......;

}

else{

....;

}

switch语句

var iNow=1;

switch(iNow){

case 1:

    .....;

    break;

case2:

   ......;

   break;

default:

    ......;

}

数组及操作方法

数组就是一组数据的集合，JavaScript中，数组里面的数据可以是不同类型的。

定义数组的方法

//对象的实例创建

var aList = new Arry(1,2,3);

//直接创建

var aList2 = [1,2,3,'asd'];

操作数组中数据的方法

1.获取数组的长度：aList.length;

var aList = [1,2,3,4];

alert(aList.length);

 2.用下标操作数组的某个数据:aList[0];

var aList = [1,2,3,4];

alert(aList[0]);

3.join()将数组成员通过一个分隔符合并成字符串

var aList[1,2,3,4];

alert(aList.join('-')); //弹出1-2-3-4

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

var aList[1,2,3,4];

aList.push(5);

alert(aList); // 弹出1,2,3,4,5

aList.pop();

alert(aList); // 弹出12,3,4

5.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

6.reverse()将数组反转

var aList[1,2,3,4];

aList.reverse();

alert(aList); // 弹出4,3,2,1

7.indexOf()返回数组中元素第一次出现的索引值

var aList[1,2,3,4,1,3,4];

alert(aList.indexOf(1)); 

8.splice()在数组中增加或删除成员

var aList[1,2,3,4];

aList.splice(2,1,7,8,9); // 从第二个元素开始，删除1个元素，然后在此位置增加'7,8,9'三个元素

alert(aList); // 弹出1,2,7,8,94

 多维数组

多维数组指的是数组的成员也是数组的数组。

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

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

批量操作数组需要使用循环语句

循环语句

程序循环中进行有规律的重复性操作，需要用循环语句

for循环

for (var i=0; i<len; i++)

{

.......

}

while循环

var i=0;

while(i<0){

....

i++;

}

数组去重

var aList[1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];

var aList2 = [];

for (var i=0;i<aList.lenth; i++){

     if(aList.indexOf(aList[i])==i){

         aList2.push(aList[i]);

    }

}

alert(aList2);

前端学习笔记 javascript
上一篇: JS学习笔记-基础JS学习笔记-基础
下一篇: JS学习笔记(一)

继续阅读