Javascript学习第二节

Javascript学习第二节

一.Array及JSON
数组的创建及其元素的引用
1.创建数组
方式一：var 数组对象名 = [元素1，元素2，…，元素n]；【最常用】
方式二：var 数组对象名 = new Array(元素1，元素2，…，元素n)；
2.元素的数组引用
数组下标从0开始，第一个元素的下标为0，引用数组元素时可以通过数组名和下标来实现，引用格式如下：
数组名[元素下标]
例如：一个包含3个元素的名为arr的数组的3个元素，可分别通过：arr[0]、arr[1]和arr[2]来引用。
3.数组的访问
访问数组有两种方式：一是直接访问数组名，例如，alert(hobbies1)，该语句执行后将在警告对话框中输出上面创建的hobbies1数组中存储的所有元素值：旅游，运动，音乐；二是使用数组加下标访问，此时将返回数组下标对应的数组元素值。例如：alert(hobbies1[1])，该语句执行后将在警告对话框中输出“运动”。
4.数组的常用属性及方法
数组的常用属性：length
length属性的读、写操作示例如下：
var arr = [1,2,3]；
Alert（arr.length）；//读取数组长度结果为3
arr.length = 1； //修改数组长度为1，此时数组只剩第一个元素
arr.length = 0； //快速清空数组，此时数组中没有元素
5.数组的常用方法
数组提供了一些常用方法，可实现数组元素的添加、删除、替换以及排序等功能。
（1）push（元素1,…,元素n）
push()方法可把参数指定的元素依次添加到数组的末尾，并返回添加元素后的数组长度（该方法必须至少有一个参数）。
（2）unshift（元素1,…,元素n）
unshift()方法可把参数指定的元素依次添加到数组的前面，并返回添加元素后的数组长度。
（3）pop()
pop()方法可弹出（删除）数组最后一个元素，并返回弹出的元素。
（4）shift()
shift()方法可删除数组第一个元素，并返回删除的元素。
（5）splice（index,count[,元素1,…,元素n]）
unshift()方法可把参数指定的元素依次添加到数组的前面，并返回添加元素后的数组长度。
（6）slice(index1[,index2])
slice()方法返回包含从数组对象中的第index1～index2-1之间的元素的数组。
（7）sort()、sort(compareFunction)
sort()方法用于按某种规则排序数组：当方法的参数为空时，按字典序（即元素的Unicode编码从小到大排序顺序）排序数组元素；当参数为一个匿名函数时，将按匿名函数指定的规则排序数组元素。
(8）concat（数组1,…,数组n）
concat()将参数指定的数组和当前数组连成一个新数组。
（9）reverse()方法可返回当前数组倒序排序形式。
（10）join（分隔符）方法可将数组内各个元素按参数指定的分隔符连接成一个字符串。
（11）forEach()方法用于对数组的每个元素执行一次回调函数。
语法如下：
array对象.forEach ( function ( currentValue [ , index [ ,array ] ] ) [ ,thisarg ] )
说明如下:
①currentValue参数：必需参数，表示正在处理的数组元素（当前元素）。
②index参数：可选参数，表示正在处理的当前元素的索引。
③array参数：可选参数，表示方法正在操作的数组。
④thisArg参数，可选参数，取值通常为this，为空时取值为undefined。forEach()函数的返回值为undefined。
（12）filter()方法用于创建一个新的数组，其中的元素是指定数组中所有符合指定函数要求的元素。
(13）map()方法用于创建一个新的数组，其中的每个元素是指定数组的对应元素调用指定函数处理后的值。
（14）reduce()用于使用回调函数对数组中的每个元素进行处理，并将处理进行汇总返回。
（15)find()用于获取使回调函数值为true的第一个数组元素。如果没有符合条件的元素，将返回undefined。
JSON
JSON（JavaScript Object Notation，JavaScript对象表示法）是一种轻量级的数据交换格式，采用完全独立于编程语言的文本格式来存储和表示数据。
6.JSON数据格式及JSON变量的声明及应用
（1）JSON数据格式
JSON的基本书写格式如下：
{
“名称1”：值1，
…
“名称n”：值n
}
JSON中每个键/值对之间使用逗号分隔，最后一个键/值对的后面不需要使用逗号。
(2)JSON变量的声明
声明JSON变量的格式如下：
var变量名 = ‘{“名称1”：值1…“名称n”：值n}’；
7.JSON与JS对象的相互转换
(1）将JSON转换为JS对象通过JSON的parse()方法，可以将一个JSON解析为一个JS对象。
解析格式如下：
JSON.parse(json)
（2）将JS对象转换为JSON通过JSON的stringify()方法，可以将一个JS对象转换为JSON。
转换格式如下：
JSON.stringify(obj)
8.JSON各个值的获取
可以采用以下两种格式来获取值。
格式一：json解析得到的JS对象名.键名
格式二：json解析得到的JS对象名.[键名] //键名需要使用单引号或双引号引起来
二. 使用JavaScript操作属性及元素内容
1.使用JavaScript操作元素属性及样式属性
(1)属性的读操作
读取属性使用以下格式。
格式一：元素.属性名
格式二：元素[属性名]
属性的引用有“。”和“[]”两种操作符，这两种操作符可以理解为“的”的意思。一般情况下，“.”和“[]”的表示法可以相互替换，但在某些情况下，比如属性名需要从HTML页面中获取，以实现属性的动态变化，此时就只能使用“[]”。另外，需要注意的是，“[]”中的内容是一个字符串或字符串表达式。
（2）属性的写操作
格式一：元素.属性名 = 新值
格式二：元素[属性名] = 新值
(3)属性操作注意事项
1）CSS属性包含两个及以上单词时，会在两个单词之间使用中划线“－”连接。当在JS使用“。”操作符来引用这些CSS属性时，需要将中划线“－”删掉，同时大写除第一个单词以外的所有单词的首字母。例如操作CSS属性：font-size时，需要在JS中写成：fontSize。如果不想改写CSS属性名，则必须使用“[]”来引用属性，即在JS中写成：[‘font-size’]。其他属性如：padding-top、margin-left等属性依此法在JS中可分别修改为paddingTop、marginLeft。
2）需要操作HTML元素的“class”属性时，在JS中不能直接使用“class”属性，而应该使用“className”来操作这个属性。这是因为“class”在JS中属于保留字，直接使用“class”属性就会造成命名冲突。
3）在JS中直接设置样式属性时，设置的样式为内联样式，如果需要设置很多样式属性或希望添加内嵌样式，则必须结合JS和CSS，并且需要操作“className”属性实现动态给元素设置类名来实现样式的设置。
4）在JS中，有些元素属性名存在兼容性，此时需要进行兼容性处理。针对样式属性的最常用也最简单的兼容性处理方法就是使用JS+CSS，然后通过操作“className”属性来达到目的。而其他属性的兼容处理大部分情况下是通过变通处理的方法来达到的。
5）访问属性时，如果属性名需要从HTML页面中获取，此时不能使用“。”操作符来引用属性，只能使用“[]”操作符来引用属性。
6）在JS中不要将属性获取得到的相对路径、颜色等值放到条件表达式中进行判断，否则将可能得不到预期结果。这是因为元素使用src属性指定的文件路径，在JS中访问元素的src属性时返回的是文件的物理路径，由于不同浏览器默认的编码可能不一样，所以不同浏览器返回的物理路径可能不一样。而同一种颜色，在不同的浏览器中对应的颜色值可能会不一样。
2. 使用classList属性操作类属性
使用元素的classList属性可以访问或添加、删除及修改元素的class属性。
(1)使用classList属性访问class属性的格式如下：
element.classList
通过classList调用add()、remove()和toggle()等方法可以添加、移除或修改元素class属性，格式如下：
element.classList.add( ( className [ ,className2,…]) //添加一个类或多个属性
element.classList.remove( ( className [ ,className2,…]) //移除一个类或多个属性
element.classList.toggle( ( className [ ,className2,…]) //移除或添加第一个参数指定的class属性
3.使用getComputedStyle()和currentStyle获取样式
（1）使用getComputtedStyle()可访问指定元素的指定CSS属性样式，访问格式如下：
getComputtedStyle(需访问样式属性的元素).样式属性
（2）currentStyle属性
格式如下：
需访问样式属性的元素.currentStyle.样式属性
4.使用innerHTML属性访问或设置元素内容
使用innerHTML属性，还可以访问或设置元素的内容（包括子元素）。
5.自定义属性及其在图片切换中的应用
JS除了可以操作HTML元素现有的属性外，还可以对HTML元素自定义属性以及对这些自定义的属性进行读、写操作。JS可以为任何HTML元素自定义任意的属性（属性名必须符合标识符规范）。
定义格式如下：
元素对象.自定义属性名 = 属性值

元素一旦自定义了某个属性后，该属性就和元素的内置属性的用法完全一样，即可通过元素对该属性进行读或写操作。