爱站程序员基地JSON介绍
JSON:是一种轻量级的数据交换格式。
它是基于ECMAScript规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
简洁和清晰的层次结构使得JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于计算机解析和生成，并有效的提升网络传输效率。
stringify(对象) 将指定对象转换为JSON格式的字符串
parse：将一个json字符串转为js对象
用户注册提交案例
1.为表单添加提交事件
首先想明白，是要用什么事件，用户注册不用点击事件，是因为如果用点击事件，就算用户名错误，仍然会提交。
document.getElementById(\"regist\").onsubmit=function(){
2.获取填写的用户名和密码
利用js的dom获取对象，然后获取它的value
3.判断用户名是否满足条件
let reg1=/^[a-zA-Z]{4,16}$/;if(!reg1.test(username)){alert(\"用户名请输入4-16位的字母\");return false;}
4.判断密码是否满足条件
5.条件都满足，则提交表单
BOM介绍
BOM（browser object model）：浏览器对象模型
将浏览器的各个组成部分封装城不同的对象，方便我们进行操作。
window:窗口对象
Location：地址栏对象
Navigator：浏览器对象
History：当前窗口历史记录对象
Screen：显示器屏幕对象
Window窗口对象
- setTimeout()、clearTimeout():一次性定时器
- setInterval()、clearInterval():循环定时器
- onload 事件：页面加载完毕触发执行功能
Location 地址栏对象
- href属性：跳转到指定的URL地址
.js文件在使用之前必须先导入
JQuery
JQuery是一个JavaScript库
所谓的库，就是一个JS文件，里面封装了很多预定义的函数，比如获取元素，执行隐藏、移动等，目的就是在使用时直接调用，不需要再重复定义，这样就可以极大的简化了JavaScript编程。
快速入门
1.导包
2.用$(\”\”)来获取对象
<script src=\"js/jquery-3.3.1.min.js\"></script><script>// JS方式，通过id属性值来获取div元素// let jsDiv=document.getElementById(\"div\");// alert(jsDiv);// alert(jsDiv.innerHTML);// jQuery方式，通过id属性值来获取div元素let jqDiv=$(\"#div\");alert(jqDiv);alert(jqDiv.html());</script>
JQuery对象的实质
JQuery本质上还是JS，但如果想使用JQuery的属性和方法那么必须保证对象是JQuery对象，而不是JS方式获得的DOM对象，二者的API方法不能混合使用，若想使用对方的API，需要进行对象的转换。
1.JQuery对象实际上是一个数组类
2.js对象转为JQuery
let jq=$(jsobj)
3.JQuery转为js对象
let jqDiv = $()
JQuery事件
事件的基本使用
<script src=\"js/jquery-3.3.1.min.js\"></script><script>$(\"#btn\").click(function(){alert(\"点我干嘛\")});$(\"#input\").focus(function(){alert(\"你快输入数据\");});$(\"#input\").blur(function(){alert(\"输入完成\");});</script>
事件的绑定和解绑
- JQuery对象.on(事件名称，执行的功能);
- JQuery对象.on(事件名称); //如果不传入事件名称，则解绑所有事件
事件的切换
本质上是给同一个对象绑定多个事件
<script>$(\"#div\").mouseover(function(){$(this).css(\"background\",\"red\");}).mouseout(function(){$(this).css(\"background\",\"pink\");}).click(function(){$(this).css(\"background\",\"green\");});</script>
遍历的三种方式
1.for循环遍历
2.对象.each()方法
$(\"#btn\").click(function(){$(\"li\").each(function(index,ele){alert(index+\":\"+ele.innerHTML);});})
3.$.each()方法
基本选择器
1.元素选择器 $(“元素的名称”)
let divs=$(\"div\");console.log(divs);
2.id选择器 $(\”#id的属性值\”)
3.类选择器 $(\”.class的属性值\”)
层级选择器
1.后代选择器 $(“A B”) A下的所有B(包括B的子级)
let spans=$(\"div span\");console.log(spans);
2.子选择器 $(“A > B”) A下的所有B(不包括B的子级)
let span=$(\"div > span\");console.log(span);
3.兄弟选择器 $(“A + B”) A相邻的下一个B
let p=$(\"div + p\");console.log(p);
4.兄弟选择器 $(“A ~ B”) A相邻的所有B
let p2=$(\"div ~ p\");console.log(p);
属性选择器
1.获取包含了某个属性的元素
og(span);
3.兄弟选择器 $(\"A + B\") A相邻的下一个B```jslet p=$(\"div + p\");console.log(p);
4.兄弟选择器 $(“A ~ B”) A相邻的所有B
let p2=$(\"div ~ p\");console.log(p);
属性选择器
1.获取包含了某个属性的元素
2.某元素包含了某个属性并且属性值也是指定的
