JSON轻量级的数据交换格式
定义：
是一种规范 ，不同语言中都对应有实现
JSON(JavaScript Object Notation, JavaScript对象标记)，是一种轻量级的数据交换格式，用于服务器与浏览器之间传输数据。以前我们都是使用XML来传递数据。
- XML不足
- 描述的数据比需要的真实数据多
- 占用了更多的传输的带宽
- 解析XML比较麻烦
<contact>
<name>貂蝉</name>
<gender>false</gender>
<age>20</age>
</contact>
- json
{
"name": "貂蝉",
"gender": false,
"age": 20
}
json的语法格式
JSON三种常用的格式：
对象：{属性名:值}
数组：[元素,元素]
混合：[{},{}] {属性:[]}
| 类型 | 语法 | 解释 |
|---|---|---|
| 对象类型 | {键:值, 键:值} | 代表一个对象，可以有多个属性 属性与值之间使用冒号，属性与属性之间使用逗号 |
| 数组/集合类型 | [元素,元素,元素] | 数组中每个元素类型是可以不同 |
| 混合类型 | [{键:值},{键:值},{键:值}] | 数组中每个元素是一个对象 |
| {键:[元素,元素,元素]} | 是一个对象，但某个属性是一个数组或集合 |
JS中操作JSON的方法
| 语法 | 功能 |
|---|---|
| JSON.parse(字符串) | 将一个字符串转成JSON对象 注：JSON字符串中属性名一定要使用双引号引起来 |
| JSON.stringify(JSON对象) | 将一个JSON对象转成字符串 |
<script>
//定义天气对象
let weather = {
city : "北京",
date : "2088-08-08",
wendu : "10° ~ 23°",
shidu : "22%"
};
//1.将天气对象转换为JSON格式的字符串
let str = JSON.stringify(weather);
document.write(str + "<br>");
//2.将JSON格式字符串解析成JS对象
let weather2 = JSON.parse(str);
document.write("城市：" + weather2.city + "<br>");
document.write("日期：" + weather2.date + "<br>");
document.write("温度：" + weather2.wendu + "<br>");
document.write("湿度：" + weather2.shidu + "<br>");
<body>
<div class="login-form-wrap">
<h1>hello</h1>
<form class="login-form" action="#" id="regist" method="get" autocomplete="off">
<label>
<input type="text" id="username" name="username" placeholder="Username..." value="">
</label>
<label>
<input type="password" id="password" name="password" placeholder="Password..." value="">
</label>
<input type="submit" value="注册">
</form>
</div>
</body>
<script>
document.getElementById("register").οnsubmit=function(){
let username=document.getElementById("username").value
let password=document.getElementById("password").value
let user=/^[a-zA-Z]{4,16}$/;
if(!user.test(username)){
alert("用户名错误，需要提交4-16位的纯字母")
return false;
}
let pass=/^[\d]{6}$/;
if(!pass.test(password)){
alert("密码错误，需要提交6位纯数字")
return false
}
return true;
}
</script>
BOM浏览器对象模型
BOM：Browser Object Model 浏览器对象模型，用来操作浏览器中各种对象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xiENDqmo-1592915226451)(C:\Users\Administrator\Desktop%5CUsers%5CAdministrator%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5C1592878852306.png)]
window中计时器有关的方法
| window中的方法 | 作用 |
|---|---|
| setTimeout(函数名, 间隔毫秒数) | 过一段时间后调用一次指定的函数，单位是毫秒，只调用一次。 返回值是一个整数类型，这就是计时器 |
| clearTimeout(计时器) | 清除上面的计时器，参数的计时器就是上面方法的返回值 |
| setInterval(函数名, 间隔毫秒数) | 每隔一段时间调用一次指定的函数，单位是毫秒，不停的调用。 返回值是一个整数类型，这就是计时器 |
| clearInterval(计时器) | 清除上面的计时器，参数的计时器就是上面方法的返回值 |
| onload | 加载完毕 |
<script>
//一、定时器
function fun(){
alert("该起床了！");
}
//设置一次性定时器
//let d1 = setTimeout("fun()",3000);
//取消一次性定时器
//clearTimeout(d1);
//设置循环定时器
//let d2 = setInterval("fun()",3000);
//取消循环定时器
//clearInterval(d2);
//加载事件
window.onload = function(){
let div = document.getElementById("div");
alert(div);
}
</script>
location对象
- 作用：代表浏览器上地址栏对象，主要用于页面的跳转
| 属性 | 功能 |
|---|---|
| href | 1. 获取属性值，得到当前访问的地址 2. 设置属性值，跳转到指定的页面 |
| search | 获取?后面的参数字符串 GET方法提交表单的时候，参数会显示在地址栏上 |
location常用方法
| location的方法 | 描述 |
|---|---|
| reload() | 重载加载当前的页面，类似于刷新 |
<body>
<p>
注册成功！<span id="time">5</span>秒之后自动跳转到首页...
</p>
</body>
<script>
//1.定义方法。改变秒数，跳转页面
let num = 5;
function showTime() {
num--;
if(num <= 0) {
//跳转首页
location.href = "index.html";
}
let span = document.getElementById("time");
span.innerHTML = num;
}
//2.设置循环定时器，每1秒钟执行showTime方法
setInterval("showTime()",1000);
</script>
在 css 样式中，display 属性可以控制元素是否显示
display : none 不显示
display : block 显示
设置定时器，3 秒后显示广告图片
设置定时器，3 秒后隐藏广告图片
//1.设置定时器，3秒后显示广告图片
setTimeout(function(){
let img = document.getElementById("ad_big");
img.style.display = "block";
},3000);
//2.设置定时器，3秒后隐藏广告图片
setTimeout(function(){
let img = document.getElementById("ad_big");
img.style.display = "none";
},6000);
<script>
function jump(){
console.log("定时器执行")
}
setTimeout(jump,150)
console.log("主线程执行")
</script>
封装思想
封装：将复杂的操作进行封装隐藏，对外提供更加简单的操作。
jQuery
什么是JS框架
JS框架也是使用JavaScript语言编写的，框架本身提供了大量的新的方法，可以简化JS代码，提高开发效率。
jQuery 是一个 JavaScript 库。
所谓的库，就是一个JS 文件，里面封装了很多预定义的函数，
比如获取元素，执行隐藏、移动等，目的就 是在使用时直接调用，不需要再重复定义，这样就可以极大地简化了JavaScript 编程。
为什么要使用框架开发
同一段JS代码在不同的浏览器上执行效果是有差异的
-
jQuery框架也是JS代码写出来的，就是一个JS文件
-
由第三方厂商做出来的，免费开源。
-
提供了大量的方法，以前需要编写多行代码的功能，现在一行代码就可以实现
-
程序员只需要编写一套代码 ，就可以无差异的运行在所有的浏览器上。
<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对象之间的转换
JS对象与jQuery对象的区别
- JS对象：以前通过DOM中方法获得的元素都是JS对象，如：document.getElementById(“id”)
- jQuery对象：通过jQuery选择器选中元素，就是jQuery对象
为什么要转换
注：JS对象无法使用JQ对象中方法，如果JS对象需要使用JQ对象中方法，必须将JS对象转成JQ对象，反之亦然。
转换语法
| 操作 | 方法 |
|---|---|
| 将JS对象–>jQuery对象 | $(JS对象) |
| 将jQuery对象–> JS对象 | JQ对象[0] 或 JQ对象.get(0) JQ对象本质上是JS的一个数组对象 |
<body>
<div id="div">我是div</div>
</body>
// JS方式，通过id属性值获取div元素
let jsDiv = document.getElementById("div");
alert(jsDiv.innerHTML);
//alert(jsDiv.html()); JS对象无法使用jQuery里面的功能
// 将 JS 对象转换为jQuery对象
let jq = $(jsDiv);
alert(jq.html());
// jQuery方式，通过id属性值获取div元素
let jqDiv = $("#div");
alert(jqDiv.html());
// alert(jqDiv.innerHTML); jQuery对象无法使用JS里面的功能
// 将 jQuery对象转换为JS对象
let js = jqDiv[0];
alert(js.innerHTML);
jQuery中常用的事件
| 事件方法 | 功能 |
|---|---|
| blur() | 失去焦点 |
| change() | 改变事件 |
| click() | 单击事件 |
| dblclick() | 双击事件 |
| focus() | 得到焦点 |
| keydown() | 键盘按下 |
| keyup() | 松开键盘 |
| mouseover() | 鼠标移上 |
| mouseout() | 鼠标移出 |
| submit() | 表单提交 |
事件的绑定和解绑
绑定与解绑语法
| 事件绑定语法 | 说明 |
|---|---|
| JQ对象.on(“事件名”, 处理函数) | 作用：给JQ对象动态绑定一个事件 参数1：要绑定的事件名，如："click" 参数2：通常使用匿名函数，如：function() { } |
| 事件解绑语法 | 说明 |
|---|---|
| JQ对象.off(“事件名1 事件名2”) | 解绑一个或多个事件，事件名通过空格隔开 |
| JQ对象.off() | 解绑所有的事件 |
jQuery 对象.on(事件名称,执行的功能);
jQuery 对象.off(事件名称);
<body>
<input type="button" id="btn1" value="点我">
<input type="button" id="btn2" value="解绑">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//给btn1按钮绑定单击事件
$("#btn1").on("click",function(){
alert("点我干嘛?");
});
//通过btn2解绑btn1的单击事件
$("#btn2").on("click",function(){
alert("解绑成功了")
$("#btn1").off("click");
});
事件的多个绑定事件
事件的切换：需要给同一个对象绑定多个事件，而且多个事件还有先后顺序关系。
<body>
<div id="div">我是div</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
// 方式一 单独定义
$("#div").mouseover(function(){
//背景色：红色
//$("#div").css("background","red");
$(this).css("background","red");
});
$("#div").mouseout(function(){
//背景色：蓝色
//$("#div").css("background","blue");
$(this).css("background","blue");
});
//方式二 链式定义
$("#div").mouseover(function(){
$(this).css("background","red");
}).mouseout(function(){
$(this).css("background","blue");
}).click(function(){
$(this).css("background","green")
});
jQuery循环遍历的几种方式
JQ遍历的两种方式
JQ对象.each(function(index,element))
JQ对象就是要遍历的集合或数组
index: 表示当前遍历的索引号，从0开始
element：表示当前的元素
$.each(数组或集合, function(index,element))
第一个参数是要遍历的数组或集合
index: 表示当前遍历的索引号，从0开始
element：表示当前的元素
for(let 变量名 of 数组或集合)
注：无论使用上面哪些方式进行遍历，数组中每个元素都是JS对象
遍历的示例
<body>
<input type="button" id="btn" value="遍历列表项">
<ul>
<li>你</li>
<li>我</li>
<li>她</li>
</ul>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//方式一：传统方式
$("#btn").click(function(){
let lis = $("li");
for(let i = 0 ; i < lis.length; i++) {
alert(i + ":" + lis[i].innerHTML);
}
});
//方式二：对象.each()方法
$("#btn").click(function(){
let lis = $("li");
lis.each(function(index,ele){
alert(index + ":" + ele.innerHTML);
});
});
//方式三：$.each()方法
$("#btn").click(function(){
let lis = $("li");
$.each(lis,function(index,ele){
alert(index + ":" + ele.innerHTML);
});
});
//方式四：for of 语句遍历
$("#btn").click(function(){
let lis = $("li");
for(ele of lis){
alert(ele.innerHTML);
}
});
</script>
基本选择器
注：所有的选择器外面都要使用$("")，如：ID选择器 $("#ID")
| 基本选择器 | 语法 |
|---|---|
| ID选择器 | #ID |
| 类选择器 | .类名 |
| 标签选择器 | 标签名 |
<body>
<div id="div1">div1</div>
<div class="cls">div2</div>
<div class="cls">div3</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//1.元素选择器 $("元素的名称")
let divs = $("div");
//alert(divs.length);
//2.id选择器 $("#id的属性值")
let div1 = $("#div1");
//alert(div1);
//3.类选择器 $(".class的属性值")
let cls = $(".cls");
alert(cls.length);
</script>
选择器：层级选择器
注：省略了$("")
| 层级选择器 | 语法 |
|---|---|
| 获取A元素内部所有B元素，B是A的子孙元素 | A B |
| 获得A元素下面的所有B子元素 | A>B |
| 获得A元素同级，下一个B元素。(B和A是兄弟关系，A是老二，B是老三) | A+B |
| 获取A元素后面所有同级B元素。(B是A后面所有的兄弟，得到一个集合) | A~B |
<body>
<div>
<span>s1
<span>s1-1</span>
<span>s1-2</span>
</span>
<span>s2</span>
</div>
<div></div>
<p>p1</p>
<p>p2</p>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
// 1. 后代选择器 $("A B"); A下的所有B(包括B的子级)
let spans1 = $("div span");
//alert(spans1.length);
// 2. 子选择器 $("A > B"); A下的所有B(不包括B的子级)
let spans2 = $("div > span");
//alert(spans2.length);
// 3. 兄弟选择器 $("A + B"); A相邻的下一个B
let ps1 = $("div + p");
//alert(ps1.length);
// 4. 兄弟选择器 $("A ~ B"); A相邻的所有B
let ps2 = $("div ~ p");
alert(ps2.length);
</script>
属性选择器
<body>
<input type="text">
<input type="password">
<input type="password">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//1.属性名选择器 $("元素[属性名]")
let in1 = $("input[type]");
//alert(in1.length);
//2.属性值选择器 $("元素[属性名=属性值]")
let in2 = $("input[type='password']");
alert(in2.length);
</script>
邻的下一个B
let ps1 = $(“div + p”);
//alert(ps1.length);
// 4. 兄弟选择器 $("A ~ B");
A相邻的所有B
let ps2 = $("div ~ p");
alert(ps2.length);
属性选择器
<body>
<input type="text">
<input type="password">
<input type="password">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//1.属性名选择器 $("元素[属性名]")
let in1 = $("input[type]");
//alert(in1.length);
//2.属性值选择器 $("元素[属性名=属性值]")
let in2 = $("input[type='password']");
alert(in2.length);
</script>