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 浏览器对象模型,用来操作浏览器中各种对象
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>