JS对象简介
一.JS对象简介：
JS对象
分类：
Array
String
JSON
BOM（浏览器对象模型）
DOM（文档对象模型）
注意：我们重点关注：Array，String，JSON；（JS基础对象）
1.Array
JS中的Array对象用于定义数组；
1.Array简介
1.Array的定义：
a： var 变量名=new Array（元素列表）； eg： var arr=new ARRAY(1,2,3,4)
b: var 变量名=[元素列表]; eg:var arr=[1,2,3,4];
2.数组的访问：
arr[索引]=值; eg:arr[10]='hello';
3.JS数组的特点：长度可变，类型可变；
4.因为Array是对象：--》：所以就有属性和方法；
（1）属性：
length：设置或返回数组中元素的数量；（遍历数组时常用！！！）
（2）方法：
forEach():遍历数组中的每个有值的元素，并调用一次传入的函数；（undefined：不会遍历）
push(): 将新元素添加到数组的末尾，并返回新的长度；
splice():从数组中删除元素；
splice(start number:从哪个索引开始删除，删几个)
2.Array演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D</title>
</head>
<body>
</body>
<script>
/* 1.数组定义及访问 */
var arr=new Array(1,2,3,4);/* 定义数组方式1 */
console.log(arr[0]);
var arr1=[1,2,3,4];/* 定义数组方式2 */
console.log(arr1[0]);
/* 3.JS数组特点 */
arr1[50]=10; /* 不会报错：因为JS数组长度可变 */
console.log(arr1[50]);
console.log(arr1[9]);
console.log(arr1[10]);
/* 其它没有赋值的索引：输出结果是：undefine；因为只是定义了数组，但并没有赋值； */
arr1[11]='A';
arr1[11]=true; /* JS数组类型可以改变 */
arr1[11]='abc';
/* 4.遍历数组arr1 */
/* for (let i = 0; i < arr1.length; i++) {
console.log(arr1[i]);
} */
/* 5.演示Array方法 */
//（1）forEach:遍历数组中所有有值的元素（undefined：不会遍历）
/* arr1.forEach(function(e){
console.log(e)
}) */
//演示箭头函数（省略function）
/* arr1.forEach((e)=>{
console.log(e)
} ) */
//(2)push:添加元素到数组末尾
arr.push(6,6,6);
console.log(arr); /* ！！直接输出数组 */
//（3）splice；删除数组元素
arr.splice(0,2); //会删除arr数组中的1，2
</script>
</html>
2.String
1.String简介：
2.）String
1.String对象的创建方式：
方式1： var 变量名=new String（...）;
方式2：var 变量名=''...;
2.String 对象的属性和方法
（1）属性：
length：字符串长度
（2）方法：
charAt（）：返回指定位置的字符。
indexOf（）：检索字符串索引位置。
trim（）：去除字符串两边的空格；（中间的空格不会去除）
substring（）：字符串截取：提取字符串中两个指定的索引号之间的字符；
2.String演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D</title>
</head>
<body>
</body>
<script>//js代码写在<script>标签中
//字符串对象的创建
var str=new String('Hello,String');
var str1=' Hello,String ';
console.log(str);
//字符串属性：
console.log(str1.length);
//字符串方法：
console.log(str.charAt(3));//charAt：获取指定位置的字符
console.log(str.indexOf('lo'));//indexof:检索字符串位置
var a=str1.trim()
console.log(a); //trim:去除首位空格
//substring(start,end);开始索引，结束索引（含头不含尾！！！！！）
console.log(a.substring(0,5));
</script>
</html>
3.JSON：
1.JSON简介：
JS中的自定义对象：
1.定义对象的格式：
var 对象名 = {
属性名1: 属性值1,
属性名2: 属性值2,
属性名3: 属性值3,
函数名称: function(形参列表){}
};
eg:
var user={
name:'TOM',
age:20,
gender:'male',
eat:function(){ --》函数
alert('用膳...')
}
}
2.调用属性/方法
对象名.属性名；
对象名.函数名();
(3.)JSON对象
1.JSON：即JS对象标记法
JSON就是通过JS对象表记法书写的（文本！）
（就是编写一个大括号：在其中定义key-value形式的键值对）
2. JSON对象书写时：
括号中属性名称必须使用双引号引起来！！！
3.JSON用途：由于JSON语法简单，结构鲜明，JSON多用于作为数据载体，在网络中进行数据传输。
4.JSON基础语法
（1）JSON定义：
var 变量名=' {"key1":value1,"key2":value2} ';
eg: var userStr='{"name":"Jerry", age":18, "addr":["北京","上海"]}';
（2）定义完JSON后：只是定义了字符串，并不能调用其中的属性/方法：需要经过转化成JS对象才可以！！！！！
JSON字符串转为JS对象(parse方法)：var jsObject=JSON.parse(userStr);
JS对象转为JSON字符串(stringify方法)： var jsonStr=JSON.stringify(jsObject);
-->
2.JSON演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D</title>
</head>
<body>
</body>
<script>
/* 1.自定义对象： */
var user={
name:'tom', //对象的属性
age:18,
gender:'male',
eat:function(){ //对象的方法
alert('用膳...');
}
/* eat1(){ ----》：方法也可以简化写成这样：省略“：function ”！！！
alert();
}
*/
}
//调用属性/方法：
alert(user.age);
alert(user.eat);
/* 2.定义JSON： */
var jsonStr='{"name":"tom","age":18,"addr":[北京，上海，西安]}';/*a： 定义JSON字符串 */
/*JSON字符串转为JS对象：var jsObject=JSON.parse(userStr) */
var obj=JSON.parse(jsonStr); //b：将JSON字符串jsonStr转为了JS对象:obj
obj.age; //转为对象后才可以调用属性/方法！！！
/* JS对象转为JSON字符串： var jsonStr=JSON.stringify(jsObject); */
alert(JSON.stringify(obj));
</script>
</html>
4.BOM：
1.BOM简介：
（4）BOM:
浏览器对象模型，允许JS与浏览器对话，JS将浏览器的各个组成部分封装为对象。
1.组成：
Window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象
注意：我们只需要了解Window和Location对象
2.Window对象
（1）获取Window对象：
直接使用window,其中window.可以省略； eg：window.alert("hello");
(2)属性：
#history：获取history对象
#Location：获取location
#Navigator：....
如果想要获取其它BOM对象：直接window.:可以获取到想应的对象了(或者直接省略window.)
(3.）方法：
#alert():显示带有一段消息和一个确认按钮的警告框
# confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
#setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
#setTimeout() 在指定的毫秒数后调用函数或计算表达式。
3.Location对象
：地址栏对象
（1）获取Location对象：
使用window.location.属性；获取，（其中window.可以省略。）即location.属性
（2.）属性：
href：设置或返回浏览器地址栏的url
eg：location.href="http//......":当我们为这个属性赋完值之后，就会自动跳转至这个地址！！！
2.BOM演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D</title>
</head>
<body>
</body>
<script>
/* 1.获取window对象 */
window.alert("hello,BoM");
alert("hello"); //window. 可以省略
/* 2.演示window方法 */
//confirm方法：如果点击确认：返回true，点击取消：返回false
confirm("您确认删除该记录吗？");
//定时器：setInterval() 周期性的执行某一个函数。：会执行n次
setInterval(function(){
i++;
console.log("定时器执行了"+i+"次");
},2000)
//即每隔两秒执行一次函数
//定时器：setTimeout--延迟指定时间执行一次：只会执行1次！！！！
setTimeout(function(){
alert("JS");
},3000)
// location：
alert(location.href) //!!:会跳转至浏览器页面
location.href="https://www.bilibili.com/video/BV1m84y1w7Tb?p=24&vd_source=1edbc713771753e37dc44c60df25b464";
//先将当前的url更新，点击确定后，就会跳转至新的域名
</script>
</html>
5.DOM：
1.DOM简介：
（5.）DOM对象:文档对象模型。
1.DOM就是将标记语言的各个组成部分封装为对应的对象。（HTML的每一个元素都是Dom对象）
DOM中5类基础的对象：
# Document：整个文档对象
# Element：元素对象
# Attribute：属性对象
# Text：文本对象
# Comment：注释对象
HTML文件被浏览器加载并解析之后，就会被封装成这5种对象；（-----》：看资料图片！！！！）
JS是控制网页行为（通过DOM，和事件监听）
2.JS通过DOM。能够对HTML进行操作：（DOM的作用）
改变HTML元素的内容
改变HTML元素的样式
对HTML DOM 事件作出反应
添加删除HTML元素
3.要想改变标题内容·：
a:先要获取到元素对象
b：再操作元素对象当中的属性/方法，从而改变元素的文本内容；
4.HTML的Element对象通过Document对象获得，Document对象通过window对象获得；
5.Document对象提供了获取Element元素对象的函数
-------------常见获取DOM对象的4种方式-------------------
1.通过id属性值获取，返回单个Element对象
var h1=document.getElementById('指定id');
2.根据标签名称获取，返回Element数组
var divs=document.getElementsByTagName('div');
3.根据name属性值获取，返回Element对象数组
var hobbys=document.getElementsByName('hobby');
4.根据class属性值获取，返回Element对象数组
document.getElementsByClassName() 根据class属性值获取，返回Element对象数组
2.DOM演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>JS-对象-DOM</title>
</head>
<body>
<img id="h1" src="img/off.gif"> <br><br>
<div class="cls">传智教育</div> <br>
<div class="cls">黑马程序员</div> <br>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
</body>
<script>
// 获取Element元素对象：
//1
var m1=document.getElementById('h1');
alert(m1);
//2.根据标签获取：标签div有多个--》返回的是数组
var divs=document.getElementsByTagNameNS('div');
for (let i = 0; i < dive.length; i++) {
alert(divs[i]);//可以获取到两个对象！！！（因为有两个div）
}
//3.name:name属性为hobby的一共有3个，所以根据name属性获取返回值也是一个数组
var ins=document.getElementsByName('hobby');
for (let i = 0; i < ins.length; i++) {
alert(ins[i]);//可以获取到3个对象！！！（因为有3个hobby）
}
//4.有两个class标签：有两个返回值，所以返回的也是数组；
var n=document.getElementsByClassName('cls');
for (let i = 0; i< n.length; i++) {
alert(n[i]); //可以获取到两个对象！！！（因为有两个cls）
}
//（2）
</script>
</html>
2.DOM演示：
<script>
// 获取Element元素对象：
//1
var m1=document.getElementById('h1');
alert(m1);
//2.根据标签获取：标签div有多个--》返回的是数组
var divs=document.getElementsByTagNameNS('div');
for (let i = 0; i < dive.length; i++) {
alert(divs[i]);//可以获取到两个对象！！！（因为有两个div）
}
//3.name:name属性为hobby的一共有3个，所以根据name属性获取返回值也是一个数组
var ins=document.getElementsByName('hobby');
for (let i = 0; i < ins.length; i++) {
alert(ins[i]);//可以获取到3个对象！！！（因为有3个hobby）
}
//4.有两个class标签：有两个返回值，所以返回的也是数组；
var n=document.getElementsByClassName('cls');
for (let i = 0; i< n.length; i++) {
alert(n[i]); //可以获取到两个对象！！！（因为有两个cls）
}
//（2）
</script>
6.DOM案例演示：
通过DOM操作，完成如下操作
1.电路灯泡
2.将所有的div标签的标签体内容后面加上：very good（红色）
3.使所有的复选框呈现被选中状态
总结：首先：获取到操作的元素对象
之后查询操作参考手册：通过元素对象中的属性/方法来完成元素的相应控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM案例</title>
</head>
<body>
<image id='h1' src="./img/d.jpg"> <br><br>
<div class="cls">坤坤</div><br><br>
<div class="cls">坤天帝</div><br><br>
<input type="checkbox" name="hobby"> 唱
<input type="checkbox" name="hobby"> 跳
<input type="checkbox" name="hobby"> rap
</body>
<script>
//分析：
//1.点亮灯泡：即改变图片--》即改变img元素的src的属性值
// 要想改变img属性对应的属性值--》a:首先要拿到img对象---》通过document.getElementById来获取img元素对象！！！！！
var img1=document.getElementById('h1'); //我们拿到了img的对象，使用img1来接收，此时img1就表示img的对象；！！！
img1.src="./img/d1.jpg"; //b:调用元素对象当中的属性/方法来控制元素：我们只需要更改img对象的属性值src即可
//2.所有的div标签的标签体内容后面加上：very good（红色）
// 因为我们要在标签体后面加上内容：
// a：首先我们要获取div对象：（根据标签名称获取div对象）
var d1=document.getElementsByTagName('div');
for (let i = 0; i < d1.length; i++) {
const div=d1[i] // 遍历d1数组，拿到div数组中的元素（'坤坤'、'坤天帝'）
//b：控制div数组元素内容
div.innerHTML+=<font color='red'>"very good"</font>; //代表在原有基础上加上very good，然后赋值给innerHTML这个属性
//c:颜色：通过标签：font,就会使font标签之间的字变为红色；
// d:使复选框呈选中状态：首先应该获取复选框的对象，、
var ins=document.getElementsByName('hobby'); //拿到所有复选框对象，使用ins接收
//使用for遍历，拿到ins数组中的元素
for (let i = 0; i < ins.length; i++) {
const element = ins[i];
check.checked=true;// 选中
}
}
</script>
</html>
