JavaScript学习（三）

5.2JSON

json是什么

早期，所有的数据传输习惯使用XML文件！

JSON(JavaScript Object Notation,js对象简谱)是一种轻量级的数据交换格式

简洁和清晰的层次结构使得json成为理想 的数据交换语言

易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率

在JavaScript一切皆为对象、任何js支持的类型都可以用JSON来表示

格式:

对象都用{}

数组都用[]

所有的键值对都是用key：value

var user={

name:"sf",

age:3,

sex:'男'

}

//对象转化为son字符串

var jsonUser= JSON.stringify（user）

//json 字符串转化为对象 参数为json 字符串

var obj =JSON。parse（'{"name","sf","age":3,"sex":"男"}'）;

很多人搞不清楚，JSON和JS对象的区别

var obj={a:'hello',b:'hellob'};

var json ='{"a":'hello',"b":'hellob'}';

5.3、Ajax

原生的js写法 xhr异步请求

jQuey封装好的 方法 $（"#name"）.ajax("")

axios请求

6、面向对象编程

6.1、什么是面向对象

JavaScript、java、c#。。。面向对象；JavaScript有些区别！

类：模板

对象：具体的实例

在 JavaScript这个需要大家换一下思维方式

原型： 

class 关键字，是在ES6引入的

1.定义一个类，属性，方法

//定义一个学生的类

class student{

constructor(name){

this.name=name;

}

hello(){

alert('hello')

}

}

继承

本质：查看对象原型

7.操作BOM对象（重点）

浏览器介绍

JavaScript和浏览器关系？

JavaScript诞生就是为了能够让他在浏览器中运行

BOM：浏览器对象模型

IE

chrome

firefox

 reload:f reload()//刷新网页

//设置新的地址

location.assign('')

document

document代表当前的页面，HTML DOM文档树

获取具体的文档节点

获取cookie

document.cookie

劫持cookie原理

history

history.back()//后退

history.forward()//前进

操作DOM对象（重点）

核心

浏览器网页就是一个Dom树形结构

更新：更新Dom节点

遍历dom节点：得到Dom节点

删除：删除一个Dom节点

要操作一个Dom节点，就必须要先获得这个Dom节点

var h1=document.getElementsByTagName('h1');
            var p1=document.getElementsByTagName('p1');
            var father =document.ElementsByTagName('father');
            var childrens =father.children;//获取节点下的所有子节点
            //father.firstChild
            //father.LastChild

<div id="father">
        <h1>标题一</h1>
        <p id="p1">p1</p>
        <p class="p2">p2</p>
    </div>    
   

操作文本

id1.innerText='123'修改文本的值

id1.innerHTML='<stroong>123</strong>'可以解析HTML文本标签

删除节点

撒删除节点的步骤：先获取父节点，再通过父节点删除自己

插入节点

我们获取某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素

了，但是这个DOM节点已经存在元素了，我们就不能这么干了！会产生覆盖

追加

document.createElement('p');//创建一个p标签

//创建一个节点（通过这个属性，可以设置任意的值）

var myScript=document.createElement('script');

myScript.setAttribute('type','text/javascript');

//可以创建一个Style标签

var myStyle=document.createElement('style');

myScript.setAttribute('type','text/css');

myStyle.innerHTML='BODY{background-color:chartreuse;}'

document.getElementsByTagName('head')

9.操作表单（验证）

表单form DOM树

文本框text

下拉框<select>

单选框radio

多选框checkbox

密码框password

隐藏hidden

。。。。

表单的目的：提交信息

获得要提交的信息

<form action="post">
		<span>用户名：</span>
		<input type="text" id="username">
	</form>
var input_text=document.getElementById('username');
//得到输入框的值