从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）

复习：从零开始学前端：初识函数 — 今天你学习了吗？（JS）

前言

感觉JS牵连太深了，学的都是这个一点点那个一点点。

第三节课：中括号代替点操作，获取对象，自定义标签属性

一、“[ ]”代替“ . ”操作

要访问一个对象里面的属性，除了可以使用点，还可以使用[ ]。

原理：[ ]可以代替点操作的，也就是说下面这种写法跟上面的没什么区别。
注意：在使用[ ] 代替点操作时，中括号里面的属性名必须带上引号。
特殊：操作input里面的值。

拿前面学到的JS中修改样式为例进行操作

mydiv.style.backgroundColor = ‘pink’

可以换为

mydiv[“style”].backgroundColor = ‘pink’

也可以换为

mydiv[“style”][“backgroundColor”] = ‘pink’

二、获取对象的具体方式

集合的序号：

• document.getElementsByClassName(); //不兼容IE8以其一下浏览器；
• document.getElementsByTagName();
• document.getElementsByName();
• document.querySelectorAll(); //不兼容IE7以其一下浏览器

对象：

• document.getElementById();
• document.querySelector(); //不兼容IE7及其以下浏览器；

length属性
length长度：
使用字符串的length属性可以读取字符串的长度。长度以字符为单位，该属性为只读属性。

下面代码使用字符串的length属性获取字符串的长度。

var s = "String 类型长度";    //定义字符串console.log(s.length);     //返回10个字符

三、自定义标签属性

1. 了解自定义标签属性：

//自定义标签属性：melody这种属性是人为添加的，叫自定义标签属性！<div id="box" class="wrap" title="名字" melody="Melody" ></div>

2. 如何操作合法的标签属性：

var box = document.getElementByid('box');box.title = '我是甜柚';// 修改样式    class是关键字，所以会报错！box.class = 'btn'; //错误！box.className = 'btn'; //正确！

3. 如何操作自定义标签属性

//自定义标签属性：candy这种属性是人为添加的，叫自定义标签属性！//特点：不能直接通过点操作：<div id="box" class="wrap" title="名字" melody="Melody"></div>

setAttribute(属性名,值)：

box.setAttribute('melody','甜柚');

获取自定义标签属性，getAttribute(属性名)：

console.log(box.getAttribute('melody'));

判断自定义属性是否存在：

hasAttribute('属性名');// 返回 true  存在 false 不存在

四、Arry数组

不是系统定制好的，而是人为自己定义的属性！如果再来访问这个自定义属性，就得能到这个值。

什么是数组？
数组对象的作用是：使用单独的变量名来存储一系列的值。
数组用法：

 //如何返回数组 var arr = [5,2,0,1,3,1,4]; arr.2   //错误做法//正确做法arr[2]//不能输用.操作的时候，就用[]取中括号。//使用中括号的时候，必须使用引号，如有特殊，则值为数字；

数组存值的情况：

var arr = [1, 'melody',function(){alert(666);renturn 666;},[520,1314],true];console.log( arr );console.log( arr[2]() );

二维数组：

var arr = [1, 'melody',function(){alert(666);renturn 666;},[520,1314],true];// 如何找到520？arr[3][0] // 先找到数组里面第3个，之后找到数据里面第1个；console.log(typeof []); //object

K歌软件