标号（12）：python(就业阶段)——javascript入高级

<1>数组及操作方法

1、数组

（1）定义：

数组就是一组数据的集合（数组里面的数据可以是不同类型）

（2）创建方法：

1>对象的实例创建 var aList = new Array(1,2,3);
2>直接量创建 var aList2 = [1,2,3,‘asd’];

2、操作数组中数据的方法（API应用程序接口）

（1）aList.length;：获取数组的长度（和for循环配合遍历数组）
（2）aList[0]：用下标操作数组的某个数据;（可以根据索引值获取和修改数组中的元素）
（3）join() 将数组成员通过一个分隔符合并成字符串（不传递参数默认使用逗号连接，无缝连接，使用空字符串“”）
（4）push() 和 pop() 从数组最后增加成员或删除数组中最后的元素并返回删除的元素
（5）reverse() 将数组反转
（6）indexOf() 返回数组中元素第一次出现的索引值，没有过返回-1
（7）splice() 在数组中增加或删除成员

第一位：从哪个索引值开始
第二位：删除几位 (指定位置插入,不删除时，写0,删除指定元素时，写1)
第三位：添加元素

（8）sort() 排序 默认升序

newArr.sort(function(a,b){ return a-b})
1>a-b：升序
2>b-a：降序

3、多维数组

定义：多维数组指的是数组的成员也是数组的数组，批量操作数组中的数据，需要用到循环语句。

python中的字典对应js中的对象{ },用的较多的数组中套对象

<script>
	var obj = { 'name':'张三'}
</script>

<2>循环语句

1、for循环

作用：遍历数组/字符串

<script>
	for(var i=0;i<len;i++)  { }
</script>

将数组数据放入页面

<html>
	<body>
	    <div>
	        <ul id='box'>
	            <li>1</li>
	            <li>2</li>
	            <li>3</li>
	        </ul>
	    </div>
	    <script>
	            var  arr = ["123", "1dsfs24", "456"]
	            var str = '';
	            for (var i=0; i < arr.length; i++){
	                str += "<li>"+ arr[i] +"</li>"
	            }
	            var ul = document.getElementById('box')
	            console.log(ul)
	            console.log(str)
	            ul.innerHTML = str;
	        </script>
	</body>
</html>

2、while循环

<script>
	var i=1;
	while（i<5）{ i++}
</script>

<3>字符串处理方法

没有三引号，不能一单一双，不可修改类型，不能修改

1、字符串合并操作：“ + ”（如果多个值，有一个是字符串，那么最后拼接完是字符串）

var iNum01 = 12;
var iNum02 = 24;
var sNum03 = '12';
var sTr = 'abc';
alert(iNum01+iNum02);  //弹出36
alert(iNum01+sNum03);  //弹出1212 数字和字符串相加等同于字符串相加
alert(sNum03+sTr);     // 弹出12abc

2、parseInt() 将数字字符串转化为整数

var sNum01 = '12';
var sNum02 = '24';
var sNum03 = '12.32';
alert(sNum01+sNum02);  //弹出1224
alert(parseInt(sNum01)+parseInt(sNum02))  //弹出36
alert(parseInt(sNum03))   //弹出数字12 将字符串小数转化为数字整数

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

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

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

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、indexOf() 查找字符串是否含有某字符，没有返回-1。存在返回第一个存在的索引值。

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

6、**substring() 和 slice()**截取字符串用法： substring(start,end)（不包括end）

var sTr = "abcdefghijkl";
var sTr2 = sTr.substring(3,5);
var sTr3 = sTr.substring(1);

alert(sTr2); //弹出 de
alert(sTr3); //弹出 bcdefghijkl

7、**.split().reverse().join()**字符串反转

var str = 'asdfj12jlsdkf098';
var str2 = str.split('').reverse().join('');

alert(str2);

8、replace()替换

<4>定时器

1、定时器类型及语法

定时器：
setTimeout 只执行一次的定时器
clearTimeout 关闭只执行一次的定时器
setInterval 反复执行的定时器
clearInterval 关闭反复执行的定时器
语法：

var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
    alert('ok!');
}

2、定时器在javascript中的作用

		1、定时调用函数
		2、制作动画

<5>变量作用域

1、含义：

变量作用域指的是变量的作用范围

2、分类：

1、全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。
2、局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问

<script type="text/javascript">
    // 定义全局变量
    var a = 12;
    function myalert()
    {
        // 定义局部变量
        var b = 23;
        alert(a);
        // 修改全局变量
        a++;
        alert(b);
    }
    myalert(); // 弹出12和23
    alert(a);  // 弹出13    
    alert(b);  // 出错
</script>

<6>封闭函数

1、含义：

封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。封闭函数就是匿名函数的自调用（也称为沙箱）

(function(){
    alert('hello!');
})();

还可以在函数定义前加上“~”和“!”等符号来定义匿名函数

!function(){
    alert('hello!');
}()

2、封闭函数的作用：

封闭函数可以创造一个独立的空间，在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，可以避免命名冲突。例如：在页面上引入多个js文件时，用这种方式添加js文件比较安全。

var iNum01 = 12;
function myalert(){
    alert('hello!');
}

(function(){
    var iNum01 = 24;
    function myalert(){
        alert('hello!world');
    }
    alert(iNum01);
    myalert()
})()

alert(iNum01);
myalert();

注意：匿名函数执行完就释放发了，加封号的好处可以隔绝后面的代码，避免出错。

<7>拓展javascript标签操作

1、根据标签名/类名/id名获取

（1）通过标签名获取标签

通过标签名获取元素，返回一个列表(伪数组)，没有返回空列表(伪数组)
伪数组：只能查看不能修改

<script>
	document.getElementsByTagName("li")
</script>

（2）通过Id获取标签

document.getElementById("box")

（3）通过类名获取标签

document.getElementsByClassName("aaa")

2、通过标签找兄弟标签/子标签/父标签(访问关系/节点层级

li3.nextElementSibling
li3.previousElementSibling
li3.parentNode
li3.firstElementChild
li3.lastElementChild
li3.children
li3.childNodes (连换行也会当文本抓取)

3、标签的操作

（1）创建

<script>
	var newLi = document.createElement("li")
	newLi.innerHTML = "我是li标签"
</script>

（2）添加

<script>
	var ul = li3.parentNode
	ul.appendChild(newLi)
</script>

（4）删除

<script>
	ul.removeChild(li3)
</script>

4、DOM(很重要)

Document Object Model：把整个页面上所有的标签加载到内存中以树状数据结构存储
js方法获取的标签也被称为: 节点、js对象、DOM对象、标签。