jquery
jquery简介：
jquery是一个快速、简洁的javascript框架，于2006年1月份发布，jquery设计的宗旨是"write less,do more"，倡导写更少的代码，做更多的事情
封装了JavaScript常用的一些功能代码，提供了一种简便的js设计模式，优化html文档操作、事件处理、动画设计和ajax交互
jquery核心特性:可以总结为具有独特的链式语法和短小清晰的多功能接口，具有高效灵活的css选择器，并且可以对css选择器进行扩展，拥有便捷的插件扩展机制和丰富的插件
jquery兼容各种主流的浏览器
jquery下载和引入
下载地址:https://jquery.com/download/
引入:
<script src="jquery_4.0.0.min.js"></script>
<script>
$(function(){
alert("hello j");
})
</script>jquery常见的选择器
$("div"):标签选择器
$("#id"):id选择器
$(".X"):class选择器
$("input[type='checkbox']"):属性选择器
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="X"></div>
<input type="button" value="隐藏" id="btn">
<input type="button" value="显示" id="btn1">
<input type="button" value="切换" id="btn2">
<script src="jquery_4.0.0.min.js"></script>
<script>
$(function(){
$("#btn").click(function(){
$("#X").hide();
alert("隐藏了");
});
$("#btn1").click(function(){
$("#X").show(10000);
alert("显示了");
})
$("#btn2").click(function(){
$("#X").toggle();
alert("切换了");
})
})
</script>
</body>使用jquery改变控件属性
prop方法
attr方法
removeAttr方法
<body>
<input type="checkbox">我同意 隐私政策
<br>
<input type="button" value="注册" disabled id="btn">
<script src="jquery_4.0.0.min.js"></script>
<script>
$(function(){
$("[type='checkbox']").click(function(){
let f = $(this).prop("checked");
if(f){
$("#btn").removeAttr("disabled");
}
})
})
</script>
</body>使用jquery改变css样式
css("属性","属性值").css ··· ···
css("属性1":"值1","属性2":"值2")
addClass("class名")
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
.xx{
background-color: aqua;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div></div>
<input type="button" value="按钮" id="btn">
<script src="jquery_4.0.0.min.js"></script>
<script>
$(function(){
$("#btn").click(function(){
// $("div").css("background-color","blue").css("border","1px solid black");
// $("div").css({
// "background-color":"pink"
// })
$("div").addClass("xx").removeClass("xx");
})
})
</script>
</body>jquery去获取或改变value值
.val():获取value值
.val("值"):赋值
<body>
<input type="text" id="V" placeholder="请输入文本">
<input type="text" id="idnum" placeholder="请输入身份证">
<input type="text" id="age" placeholder="请输入年龄">
<script src="jquery_4.0.0.min.js"></script>
<script>
$(function(){
$("#V").blur(function(){
let f = $(this).val();
if(f==""){
alert("请输入文本");
}else{
}
})
$("#idnum").blur(function(){
let v = $(this).val();
let year = parseInt(v.substring(6,10));
let d = new Date();
let cy = d.getFullYear();
let age = cy - year;
$("#age").val(age);
})
})
</script>
</body>jquery获取或改变html值
html():获取html值
html("值"):赋值
jquery来完成dom操作
append()在被选元素的结尾插入内容
prepend()在被选元素开头去插入内容
empty()在当前被选元素中删除子元素
remove()删除被选元素及其子元素
<body>
省份:<select id="p">
<option>--请选择--</option>
</select>
城市:<select id="c">
<option>--请选择--</option>
</select>
<script src="jquery_4.0.0.min.js"></script>
<script>
$(function(){
let ps = ["江苏省","浙江省","广东省"];
for(let i = 0;i < ps.length;++i){
$("#p").append("<option value="+ps[i]+">"+ps[i]+"</option>")
}
let cs=[[],["南京市","苏州市"],["杭州市","宁波市"],["广州市","深圳市"]];
$("#p").change(function(){
$("#c").empty();
$("#c").append("<option>--请选择--</option>");
let index = $(this).prop("selectedIndex");
if(index!=-1){
let arr = cs[index];
for(let i = 0;i < arr.length;++i){
$("#c").append("<option value="+arr[i]+">"+arr[i]+"</option>");
}
}
});
})
</script>
</body>json
简介：
JSON(javaScript Object Notation,js对象标记)，是一种轻量级的数据交换格式，易于阅读的编写，可以在多种语言之间进行数据交换
以前数据交换，使用xml(可扩展的标记语言)
json
vb
`{
"name":"zhangsan";
"gender":"men";
"age":20;
}`json包括类型：
1.简单值:字符串，数字值，布尔值，null都可以在json中出现，特殊值undefined不可以出现
如:"hello json",是一个有效的json数据
区别:json字符串必须用双引号
2.对象:是一种复杂的数据类型，对象表示有键值对，每个值可以是简单值，也可以是复杂类型
在javaScript中，我们想定义一个对象
const user={
name:"libai",
age:20,
gender:"man"
};在json中，要求将属性用双引号包围起来
{
"name":"libai",
"age":20,
"gender":"man"
}第一种区别:没有变量声明
第二种区别:没有分号
json对象中的复杂类型：
Person类(name,age,gender,school) School类(name,location)
{
"name":"libai",
"age":20,
"gender":"man",
"school":{
"name":"北京大学",
"location":"北京"
}
}数组:
复杂数据类型，数组的值可以是任意类型，包括简单值，对象，其他数组
javaScript定义数组
let arr = ["abc",12,true];json表示：
["abc",12,true]数组和对象集合：
类似于java中的集合或对象数组
Person类，Person[] person = new Person[];
json表示
[
{
"name":"libai",
"age":20,
"gender":"man"
},
{
"name":"lbai",
"age":2,
"gender":"an"
}
]json的解析与序列化：
json流行的原因：
1.语法与js类似
2.独立于各种语言
3.json可以直接被解析成js对象
JSON对象：
stringify():将js序列化成json字符串
parse():将json解析成js值
<body>
<script>
const person={
name:"libai",
age:20,
gender:"man",
school: {
name:"北京大学",
location:"北京"
}
};
//将js序列化js字符串
let jsonText = JSON.stringify(person);
console.log(jsonText);
//打印得到{"name":"libai","age":20,"gender":"man",
//"school":{"name":"北京大学","location":"北京"}}
//将js字符串解析成js对象
const person1 = JSON.parse(jsonText);
console.log(person1);
//打印得到一个Object对象
//获得地址
console.log(person1.school.location);
</script>
</body>ajax
ajax(Asynchronous javaScript And XML):完成异步调用处理，实现页面局部刷新功能
<body>
<input type="text" id="name" placeholder="请输入姓名">
<span id="ns"></span>
<script src="jquery_4.0.0.min.js"></script>
<script>
$(function(){
$("#name").blur(function(){
//异步传输数据
$.ajax({
url:"result.json",//后台服务器访问的地址
type:"get",//使用get方法提交还是post方法提交
data:{
name:$("#name").val()
},//传给后台的数据
dataType:"json",//数据传输类型
success:function(res){//处理成功的话
let r = res.result;
if(r == "have"){
$("#ns").html("姓名已存在").css("color","red");
}else{
$("#ns").html("可以注册").css("color","green");
}
},
error:function(){//失败的话
console.log("系统异常");
$("#ns").html("系统异常").css("color","red");
}
})
})
})
</script>
</body>
bootstrap
导入:<link rel="stylesheet" href="bootstrap.min.css" type="text/css">
要有一个<div class="container">作为容器