JSON介绍&& BOM介绍&&JQuery基础使用

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

```js
let p=$("div + p");
    console.log(p);

4.兄弟选择器 $(“A ~ B”) A相邻的所有B

let p2=$("div ~ p");
    console.log(p);

属性选择器

1.获取包含了某个属性的元素

2.某元素包含了某个属性并且属性值也是指定的