初识JavaScript(二)
JSON
轻量级的数据交换格式
层次结构简洁清晰
易于人阅读和编写,同时也易于机器解析和生成,有效提升网络传输效率
在JS中一切皆为对象,任何JS支持的类型都可以用JSON来表示;
格式:
对象都用{}
数组都用[]
所有的键值对都使用key: value
JSON.stringify(user)
//对象转换为JSON字符串
JSON.parse('string')
//字符串转换为对象
面向对象编程
class继承
ES6引入class关键字
1 定义一个类，属性，方法
//定义一个学生的类
class student{
constructor(name){
this.name = name;
}
hello(){
alert('hello')
}
}
var longda = new student("longda")
longda.hello()
2 继承
class BigStudent extends Student{
constructor(name,grade){
super(name);
this.grade=grade
}
myGrade(){
alert('i am a BigStudent')
}
}
原型链
_proto_:
关系图:
操作BOM对象
浏览器介绍
JS和浏览器关系？
JS诞生就是为了能够让他在浏览器中运行！
BOM：浏览器对象模型
- IE 6~11
- Chrome
- Safari
- FireFox
- Edge
window
window代表浏览器窗口
Navigator
Navigator,封装了浏览器的信息
大多数时候，我们不会使用Navigator对象，因为会被人为修改。
不建议使用这些属性来判断和编写代码
screen
代表全屏幕属性
location
代表当前页面的URL信息
//设置新的地址
location.assign("https://xxxx.com")
document
document代表当前的页面 HTML DOM文档树
>document.title
<"百度一下,你就知道"
>document.title='我要改变你'
<"我要改变你"
可以获取具体的文档树节点
<div id='app'></div>
<script>
var div = document.getElementById('app')
</script>
可以获取cookie
document.cookie
history
代表浏览器的历史记录
//后退
history.back()
//前进
history.forward()
操作DOM对象
DOM:文档对象模型
浏览器网页就是一个Dom树形结构
- 更新:更新Dom节点
- 遍历dom结点:得到Dom节点
- 删除:删除一个Dom节点
- 添加:添加一个新的Dom节点
要操作一个Dom节点,就必须要先获得这个Dom节点.
<body>
<h1 class="luo">hello</h1>
<h1 id="li">hello</h1>
<h1>hello</h1>
<script>
let li = document.getElementsByName('li');
let luo = document.getElementsByClassName('luo');
let father = document.getElementById('father');
let children = father.children;
</script>
</body>
这是原生代码,之后尽量用jQuery();
更新节点
<body>
<div id="id1">abc</div>
</body>
<script>
let doc = document.getElementById('id1');
</script>
操作文本
id1.innertex='456'修改文本的值id1.innerHTML='<str>123</str>'可以解析HTML标签
操作JS
id1.style.color='yellow';
id1.style.padding='2em';
删除节点
删除节点的步骤:先获取父节点,再通过父节点删除自己
<div id='father'>
<h1>标题一</h1>
<p id='p1'>p1</p>
<p class='p2'>p2</p>
</div>
<script>
let sel=document.getElementById('p1');
let father=self.parentElement;
father.removeChild(self)
//删除是一个动态的过程;
father.removeChild(father.children[0]) father.removeChild(father.children[1])
father.removeChild(father.children[2])
</script>
注意:删除多个节点的时候,children是时刻在变换的,删除节点时要注意
插入节点
我们获得了某个Dom节点,假如这个Dom节点是空的,我们通过innerHTML就可以增加一个元素了,但是这个DOM节点已经存在元素,则会产生覆盖
追加 append
创建新标签 createElement
操作表单(验证)
表单是什么 form DOM 树
- 文本框 text
- 下拉框 select
- 单选框 radio
- 多选框 checkbox
- 隐藏域 hidden
- 密码框 password
- ......
表单的目的:提交信息
获得要提交的信息
<body>
<form action="#" method="post">
<span>用户名:</span><input type="text" id="username">
</form>
</body>
<script>
let input_text = document.getElementById('username');
//得到输入框的值
input_text.value
//修改输入框的值
input_text.value='123'
</script>
jQuery
获取jQuery
通过CDN来获取jQuery,比较方便快捷
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>xixi</title>
//百度云CDN
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
//新浪CDN
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<body>
</body>
</html>
公式: $(selector).action()
选择器
原生选择器和jQuery选择器
//标签
document.getElementsByTagName();
//id
document.getElementsById();
//类
document.getElementsByClassName();
//jQuery
$('p').click(); //标签选择器
$('.class1').click(); //类选择器
$('#id1').click(); //id选择器
浙公网安备 33010602011771号