JavaWeb基础（10）----- JQuery、AJAX及JSON
补充
JQuery补充
JQuery
JQuery基础
-
概念：一个JavaScript框架。简化JS开发。
- 它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优 化HTML文档操作、事件处理、动画设计和Ajax交互。
-
JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已
-
JQuery的使用需要导入JQuery的js文件（导入min.js文件）
JQuery和JS对象
-
JQuery对象在操作时，更加方便。
-
JQuery对象和js对象方法不通用的.
-
两者相互转换
- jq – > js : jq对象[索引] 或者 jq对象.get(索引)
- js – > jq : $(js对象)
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>入门title>
<script src="js/jquery-3.3.1.min.js">script>
head>
<body>
<div class="div1">div1...div>
<div class="div2">div2...div>
<script>
//通过js方式来获取名称叫div的所有html元素对象,获取的是HTMLConnection对象
var divs = document.getElementsByTagName("div");
alert(divs.length);//可以当做数组来使用
//将其div中的标签体所有内容变为“acd”
for (var i=0;i<divs.length;i++){
divs[i].innerHTML = "acd";
//js--->jq
$(divs[i]).html("ddd")
}
//通过jq方式来获取名称叫div的所有html元素对象，获取的是Object
var $divs = $("div");
alert($divs.lang);//可以当做数组来使用
//将其div中的标签体所有内容变为“acd”
$divs.html("acd");
//jq--->js
$divs[0].innerHTML = "fff";
$divs.get(1).innerHTML = "eee";
script>
body>
html>
选择器
- 筛选具有相似特征的元素(标签)
基本语法
- 1.事件绑定
- 2.入口函数
- 3.样式控制：css方法
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>入门title>
<script src="js/jquery-3.3.1.min.js">script>
head>
<body>
<div class="div1">div1...div>
<div class="div2">div2...div>
<input type="button" value="点击" id="b1">
<script>
//获取
$("#b1").click(function (){
alert("dsd")
});
//jquery入口函数( dom文档加载完成之后执行该函数中的代码)
$(function (){
});
//js入口函数
window.onload = function (){
}
/*
window.onload 和$(function) 区别
1.window.onload只能定义一次,如果定义多次，后边的会将前边的覆盖掉
2.$(function)可以定义多次的。
*/
//样式控制jq
$(function (){
//1.
$("#div1").css("background-color","red");
//第二种方法：可以通过ctrl+alt键检查是否写对
$("#div1").css("backgroundColor","red");
});
script>
body>
html>
分类
基本选择器
-
标签选择器（元素选择器）
语法： $(“html标签名”) 获得所有匹配标签名称的元素
-
id选择器
语法： $("#id的属性值") 获得与指定id属性值匹配的元素
-
类选择器
语法： $(".class的属性值") 获得与指定的class属性值匹配的元素
-
并集选择器：
语法： $(“选择器1,选择器2…”) 获取多个选择器选中的所有元素
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>基本选择器title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="../js/jquery-3.3.1.min.js">script>
<style type="text/css">
div,span{
width: 180px;
height: 180px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div .mini{
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div .mini01{
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
style>
<script type="text/javascript">
$(function () {
//
$("#b1").click(function () {
$("#one").css("backgroundColor","pink");
});
//
$("#b2").click(function () {
$("div").css("backgroundColor","pink");
});
//
$("#b3").click(function () {
$(".mini").css("backgroundColor","pink");
});
//
$("#b4").click(function () {
$("span,#two").css("backgroundColor","pink");
});
});
script>
head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value="改变 id 为 one 的元素的背景色为 红色" id="b1"/>
<input type="button" value=" 改变元素名为 的所有元素的背景色为 红色" id="b2"/>
<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色" id="b3"/>
<input type="button" value=" 改变所有的元素和 id 为 two 的元素的背景色为红色" id="b4"/>
<h1>有一种奇迹叫坚持h1>
<h2>自信源于努力h2>
<div id="one">
id为one
div>
<div id="two" class="mini" >
id为two class是 mini
<div class="mini" >class是 minidiv>
div>
<div class="one" >
class是 one
<div class="mini" >class是 minidiv>
<div class="mini" >class是 minidiv>
div>
<div class="one" >
class是 one
<div class="mini01" >class是 mini01div>
<div class="mini" >class是 minidiv>
div>
<span class="spanone">class为spanone的span元素span>
<span class="mini">class为mini的span元素span>
<input type="text" value="zhang" id="username" name="username">
body>
html>
层级选择器
-
后代选择器
语法： $("A B ") 选择A元素内部的所有B元素
-
子选择器
语法： $(“A > B”) 选择A元素内部的所有B子元素
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>层次选择器title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="../js/jquery-3.3.1.min.js">script>
<style type="text/css">
div,span{
width: 180px;
height: 180px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div .mini{
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div .mini01{
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
style>
<script type="text/javascript">
$(function () {
//
$("#b1").click(function () {
$("body div").css("backgroundColor","pink");
});
//
$("#b2").click(function () {
$("body > div").css("backgroundColor","pink");
});
});
script>
head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value=" 改变 内所有 的背景色为红色" id="b1"/>
<input type="button" value=" 改变 内子 的背景色为 红色" id="b2"/>
<h1>有一种奇迹叫坚持h1>
<h2>自信源于努力h2>
<div id="one">
id为one
div>
<div id="two" class="mini" >
id为two class是 mini
<div class="mini" >class是 minidiv>
div>
<div class="one" >
class是 one
<div class="mini" >class是 minidiv>
<div class="mini" >class是 minidiv>
div>
<div class="one">
class是 one
<div class="mini01" >class是 mini01div>
<div class="mini" >class是 minidiv>
div>
<span class="spanone"> span
span>
body>
html>
属性选择器
-
属性名称选择器
语法： $(“A[属性名]”) 包含指定属性的选择器
-
属性选择器
语法： $(“A[属性名=‘值’]”) 包含指定属性等于指定值的选择器
-
复合属性选择器
语法： $("A[属性名='值'][]...") 包含多个属性条件的选择器
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>属性过滤选择器title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="../js/jquery-3.3.1.min.js">script>
<style type="text/css">
div,span{
width: 180px;
height: 180px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div .mini{
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div .mini01{
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
style>
<script type="text/javascript">
$(function () {
//
$("#b1").click(function () {
$("div[title]").css("backgroundColor","pink");
});
//
$("#b2").click(function () {
$("div[title='test']").css("backgroundColor","pink");
});
//
$("#b3").click(function () {
$("div[title!='test']").css("backgroundColor","pink");
});
//
$("#b4").click(function () {
$("div[title^='te']").css("backgroundColor","pink");
});
//
$("#b5").click(function () {
$("div[title$='est']").css("backgroundColor","pink");
});
//
$("#b6").click(function () {
$("div[title*='es']").css("backgroundColor","pink");
});
//
$("#b7").click(function () {
$("div[id][title*='es']").css("backgroundColor","pink");
});
});
script>
head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value=" 含有属性title 的div元素背景色为红色" id="b1"/>
<input type="button" value=" 属性title值等于test的div元素背景色为红色" id="b2"/>
<input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色" id="b3"/>
<input type="button" value=" 属性title值 以te开始 的div元素背景色为红色" id="b4"/>
<input type="button" value=" 属性title值 以est结束 的div元素背景色为红色" id="b5"/>
<input type="button" value="属性title值 含有es的div元素背景色为红色" id="b6"/>
<input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色" id="b7"/>
<div id="one">
id为one div
div>
<div id="two" class="mini" title="test">
id为two class是 mini div title="test"
<div class="mini" >class是 minidiv>
div>
<div class="visible" >
class是 one
<div class="mini" >class是 minidiv>
<div class="mini" >class是 minidiv>
div>
<div class="one" title="test02">
class是 one title="test02"
<div class="mini01" >class是 mini01div>
<div class="mini" style="margin-top:0px;">class是 minidiv>
div>
<div class="visible" >
这是隐藏的
div>
<div class="one">
div>
<div id="mover" >
动画
div>
<input type="text" value="zhang" id="username" name="username">
body>
html>
过滤选择器
-
首元素选择器
语法： :first 获得选择的元素中的第一个元素
-
尾元素选择器
语法： :last 获得选择的元素中的最后一个元素
-
非元素选择器
语法： :not(selector) 不包括指定内容的元素
-
偶数选择器
语法： :even 偶数，从 0 开始计数
-
奇数选择器
语法： :odd 奇数，从 0 开始计数
-
等于索引选择器
语法： :eq(index) 指定索引元素
-
大于索引选择器
语法： :gt(index) 大于指定索引元素
-
小于索引选择器
语法： :lt(index) 小于指定索引元素
-
标题选择器
语法： :header 获得标题（h1~h6）元素，固定写法
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>基本过滤选择器title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="../js/jquery-3.3.1.min.js">script>
<style type="text/css">
div,span{
width: 180px;
height: 180px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div .mini{
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div .mini01{
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
style>
<script type="text/javascript">
$(function () {
//
$("#b1").click(function () {
$("div:first").css("backgroundColor","pink");
});
//
$("#b2").click(function () {
$("div:last").css("backgroundColor","pink");
});
//
$("#b3").click(function () {
$("div:not(.one)").css("backgroundColor","pink");
});
//
$("#b4").click(function () {
$("div:even").css("backgroundColor","pink");
});
//
$("#b5").click(function () {
$("div:odd").css("backgroundColor","pink");
});
//
$("#b6").click(function () {
$("div:gt(3)").css("backgroundColor","pink");
});
//
$("#b7").click(function () {
$("div:eq(3)").css("backgroundColor","pink");
});
//
$("#b8").click(function () {
$("div:lt(3)").css("backgroundColor","pink");
});
//
$("#b9").click(function () {
$(":header").css("backgroundColor","pink");
});
});
script>
head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value=" 改变第一个 div 元素的背景色为 红色" id="b1"/>
<input type="button" value=" 改变最后一个 div 元素的背景色为 红色" id="b2"/>
<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色" id="b3"/>
<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色" id="b4"/>
<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色" id="b5"/>
<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色" id="b6"/>
<input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色" id="b7"/>
<input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色" id="b8"/>
<input type="button" value=" 改变所有的标题元素的背景色为 红色" id="b9"/>
<h1>有一种奇迹叫坚持h1>
<h2>自信源于努力h2>
<div id="one">
id为one
div>
<div id="two" class="mini" >
id为two class是 mini
<div class="mini" >class是 minidiv>
div>
<div class="one" >
class是 one
<div class="mini" >class是 minidiv>
<div class="mini" >class是 minidiv>
div>
<div class="one" >
class是 one
<div class="mini01" >class是 mini01div>
<div class="mini" >class是 minidiv>
div>
body>
html>
表单过滤选择器
-
可用元素选择器
语法： :enabled 获得可用元素
-
不可用元素选择器
语法： :disabled 获得不可用元素
-
选中选择器
语法： :checked 获得单选/复选框选中的元素
-
选中选择器
语法： :selected 获得下拉框选中的元素
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>表单属性过滤选择器title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="../js/jquery-3.3.1.min.js">script>
<style type="text/css">
div,span{
width: 180px;
height: 180px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div .mini{
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div .mini01{
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
#job{
margin: 20px;
}
#edu{
margin-top:-70px;
}
style>
<script type="text/javascript">
$(function () {
//
$("#b1").click(function () {
$("input[type='text']:enabled").val("aaa");
});
//
$("#b2").click(function () {
$("input[type='text']:disabled").val("aaa");
});
//
$("#b3").click(function () {
alert($("input[type='checkbox']:checked").length);
});
//
$("#b4").click(function () {
alert($("#job > option:selected").length);
});
});
script>
head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 元素的值" id="b1"/>
<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 元素的值" id="b2"/>
<input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数" id="b3"/>
<input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数" id="b4"/>
<br><br>
<input type="text" value="不可用值1" disabled="disabled">
<input type="text" value="可用值1" >
<input type="text" value="不可用值2" disabled="disabled">
<input type="text" value="可用值2" >
<br><br>
<input type="checkbox" name="items" value="美容" >美容
<input type="checkbox" name="items" value="IT" >IT
<input type="checkbox" name="items" value="金融" >金融
<input type="checkbox" name="items" value="管理" >管理
<br><br>
<input type="radio" name="sex" value="男" >男
<input type="radio" name="sex" value="女" >女
<br><br>
<select name="job" id="job" multiple="multiple" size=4>
<option>程序员option>
<option>中级程序员option>
<option>高级程序员option>
<option>系统分析师option>
select>
<select name="edu" id="edu">
<option>本科option>
<option>博士option>
<option>硕士option>
<option>大专option>
select>
<br/>
<div id="two" class="mini" >
id为two class是 mini div
<div class="mini" >class是 minidiv>
div>
<div class="one" >
class是 one
<div class="mini" >class是 minidiv>
<div class="mini" >class是 minidiv>
div>
<div class="one" >
class是 one
<div class="mini01" >class是 mini01div>
<div class="mini" >class是 minidiv>
div>
body>
html>
DOM操作
内容操作
-
html(): 获取/设置元素的标签体内容
内容 -->可以获取的内容： 内容
-
text(): 获取/设置元素的标签体纯文本内容
内容 -->可以获取的： 内容
-
val()： 获取/设置元素的value属性值
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script src="../js/jquery-3.3.1.min.js">script>
<script>
$(function () {
// 获取myinput 的value值
//var value = $("#myinput").val();
//alert(value);
//设置内容
//$("#myinput").val("李四");
// 获取mydiv的标签体内容
//var html = $("#mydiv").html();
//alert(html);
//设置mudiv里面的内容
//$("#mydiv").html("aaaa
");
// 获取mydiv文本内容
//var text = $("#mydiv").text();
//alert(text);
//设置文本内容
$("#mydiv").text("bbb");
});
script>
head>
<body>
<input id="myinput" type="text" name="username" value="张三" /><br />
<div id="mydiv"><p><a href="#">标题标签a>p>div>
body>
html>
属性操作
通用属性操作
操作所有属性
-
attr(): 获取/设置元素的属性
-
removeAttr():删除属性
-
prop():获取/设置元素的属性
-
removeProp():删除属性
-
attr和prop区别？
- 如果操作的是元素的固有属性，则建议使用prop
- 如果操作的是元素自定义的属性，则建议使用attr
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>获取属性title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="../js/jquery-3.3.1.min.js">script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
style>
<script type="text/javascript">
$(function () {
//获取北京节点的name属性值
var name = $("#bj").attr("name");
//alert(name);
//设置北京节点的name属性的值为dabeijing
$("#bj").attr("name","dabeijing");
//新增北京节点的discription属性 属性值是didu
$("#bj").attr("discription","didu");
//删除北京节点的name属性并检验name属性是否存在
$("#bj").removeAttr("name");
//获得hobby的的选中状态
var checked = $("#hobby").prop("checked");
alert(checked);
//var checked = $("#hobby").attr("checked"); //attr获取不到checked属性，弹出undefined
});
script>
head>
<body>
<ul>
<li id="bj" name="beijing" xxx="yyy">北京li>
<li id="tj" name="tianjin">天津li>
ul>
<input type="checkbox" id="hobby"/>
body>
html>
对class属性操作
-
addClass():添加class属性值
-
removeClass():删除class属性值
-
toggleClass():切换class属性
-
toggleClass(“one”):
- 判断如果元素对象上存在class=“one”，则将属性值one删除掉。 如果元素
对象上不存在class=“one”，则添加
-
css():
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>样式操作title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="../js/jquery-3.3.1.min.js">script>
<style type="text/css">
.one{
width: 200px;
height: 140px;
margin: 20px;
background: red;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div .mini{
width: 40px;
height: 40px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div .mini01{
width: 40px;
height: 40px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
/*待用的样式*/
.second{
width: 300px;
height: 340px;
margin: 20px;
background: yellow;
border: pink 3px dotted;
float:left;
font-size: 22px;
font-family:Roman;
}
style>
<script type="text/javascript">
$(function () {
//
$("#b1").click(function () {
$("#one").prop("class","second");
});
//
$("#b2").click(function () {
$("#one").addClass("second");
});
//
$("#b3").click(function () {
$("#one").removeClass("second");
});
//
$("#b4").click(function () {
$("#one").toggleClass("second");
});
//
$("#b5").click(function () {
var backgroundColor = $("#one").css("backgroundColor");
alert(backgroundColor);
});
//
$("#b6").click(function () {
$("#one").css("backgroundColor","green");
});
});
script>
head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value="采用属性增加样式(改变id=one的样式)" id="b1"/>
<input type="button" value=" addClass" id="b2"/>
<input type="button" value="removeClass" id="b3"/>
<input type="button" value=" 切换样式" id="b4"/>
<input type="button" value=" 通过css()获得id为one背景颜色" id="b5"/>
<input type="button" value=" 通过css()设置id为one背景颜色为绿色" id="b6"/>
<h1>有一种奇迹叫坚持h1>
<h2>自信源于努力h2>
<div id="one">
id为one
div>
<div id="two" class="mini" >
id为two class是 mini
<div class="mini" >class是 minidiv>
div>
<div class="one" >
class是 one
<div class="mini" >class是 minidiv>
<div class="mini" >class是 minidiv>
div>
<div class="one" >
class是 one
<div class="mini01" >class是 mini01div>
<div class="mini" >class是 minidiv>
div>
<span class="spanone"> span
span>
body>
html>
CRUD操作:
- append():父元素将子元素追加到末尾
- 对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾
- prepend():父元素将子元素追加到开头
- 对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头
- appendTo():
- 对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾
- prependTo()：
- 对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头
- after():添加元素到元素后边
- 对象1.after(对象2)： 将对象2添加到对象1后边。对象1和对象2是兄弟关系
- before():添加元素到元素前边
- 对象1.before(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系
- insertAfter()
- 对象1.insertAfter(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系
- insertBefore()
- 对象1.insertBefore(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>内部插入脚本title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="../js/jquery-3.3.1.min.js">script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div .mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
style>
<script type="text/javascript">
$(function () {
//
$("#b1").click(function () {
//append
//$("#city").append($("#fk"));
//appendTo
$("#fk").appendTo($("#city"));
});
//
$("#b2").click(function () {
//prepend
//$("#city").prepend($("#fk"));
//prependTo
$("#fk").prependTo($("#city"));
});
//
$("#b3").click(function () {
//after
//$("#tj").after($("#fk"));
//insertAfter
$("#fk").insertAfter($("#tj"));
});
//
$("#b4").click(function () {
//before
//$("#tj").before($("#fk"));
//insertBefore
$("#fk").insertBefore($("#tj"));
});
});
script>
head>
<body>
<input type="button" value="将反恐放置到city的后面" id="b1"/>
<input type="button" value="将反恐放置到city的最前面" id="b2"/>
<input type="button" value="将反恐插入到天津后面" id="b3"/>
<input type="button" value="将反恐插入到天津前面" id="b4"/>
<ul id="city">
<li id="bj" name="beijing">北京li>
<li id="tj" name="tianjin">天津li>
<li id="cq" name="chongqing">重庆li>
ul>
<ul id="love">
<li id="fk" name="fankong">反恐li>
<li id="xj" name="xingji">星际li>
ul>
<div id="foo1">Hello1div>
body>
html>
- remove():移除元素
- 对象.remove():将对象删除掉
- empty():清空元素的所有后代元素。
- 对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>删除节点title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="../js/jquery-3.3.1.min.js">script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
style>
<script type="text/javascript">
$(function () {
//
$("#b1").click(function () {
$("#bj").remove();
});
//
$("#b2").click(function () {
$("#city").empty();
});
});
script>
head>
<body>
<input type="button" value="删除' bj' name='beijing'>北京" id="b1"/>
<input type="button" value="删除所有的子节点 清空元素中的所有后代节点(不包含属性节点)" id="b2"/>
<ul id="city">
<li id="bj" name="beijing">北京li>
<li id="tj" name="tianjin">天津li>
<li id="cq" name="chongqing">重庆li>
ul>
<p class="hello">Hellop> how are <p>you?p>
body>
html>
案例
- 01.隔行换色
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script src="../../js/jquery-3.3.1.min.js">script>
<script>
//需求：将数据行的奇数行背景色设置为 pink，偶数行背景色设置为 yellow
$(function () {
//1. 获取数据行的奇数行的tr，设置背景色为pink
$("tr:gt(1):odd").css("backgroundColor","pink");
//2. 获取数据行的偶数行的tr,设置背景色为yellow
$("tr:gt(1):even").css("backgroundColor","yellow");
});
script>
head>
<body>
<table id="tab1" border="1" width="800" align="center" >
<tr>
<td colspan="5"><input type="button" value="删除">td>
tr>
<tr style="background-color: #999999;">
<th><input type="checkbox">th>
<th>分类IDth>
<th>分类名称th>
<th>分类描述th>
<th>操作th>
tr>
<tr>
<td><input type="checkbox">td>
<td>0td>
<td>手机数码td>
<td>手机数码类商品td>
<td><a href="">修改a>|<a href="">删除a>td>
tr>
<tr>
<td><input type="checkbox">td>
<td>1td>
<td>电脑办公td>
<td>电脑办公类商品td>
<td><a href="">修改a>|<a href="">删除a>td>
tr>
<tr>
<td><input type="checkbox">td>
<td>2td>
<td>鞋靴箱包td>
<td>鞋靴箱包类商品td>
<td><a href="">修改a>|<a href="">删除a>td>
tr>
<tr>
<td><input type="checkbox">td>
<td>3td>
<td>家居饰品td>
<td>家居饰品类商品td>
<td><a href="">修改a>|<a href="">删除a>td>
tr>
table>
body>
html>
- 全选全不选
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script src="../../js/jquery-3.3.1.min.js">script>
<script>
//分析：需要保证下边的选中状态和第一个复选框的选中状态一致即可
function selectAll(obj){
//获取下边的复选框
$(".itemSelect").prop("checked",obj.checked);
}
script>
head>
<body>
<table id="tab1" border="1" width="800" align="center" >
<tr>
<td colspan="5"><input type="button" value="删除">td>
tr>
<tr>
<th><input type="checkbox" onclick="selectAll(this)" >th>
<th>分类IDth>
<th>分类名称th>
<th>分类描述th>
<th>操作th>
tr>
<tr>
<td><input type="checkbox" class="itemSelect">td>
<td>1td>
<td>手机数码td>
<td>手机数码类商品td>
<td><a href="">修改a>|<a href="">删除a>td>
tr>
<tr>
<td><input type="checkbox" class="itemSelect">td>
<td>2td>
<td>电脑办公td>
<td>电脑办公类商品td>
<td><a href="">修改a>|<a href="">删除a>td>
tr>
<tr>
<td><input type="checkbox" class="itemSelect">td>
<td>3td>
<td>鞋靴箱包td>
<td>鞋靴箱包类商品td>
<td><a href="">修改a>|<a href="">删除a>td>
tr>
<tr>
<td><input type="checkbox" class="itemSelect">td>
<td>4td>
<td>家居饰品td>
<td>家居饰品类商品td>
<td><a href="">修改a>|<a href="">删除a>td>
tr>
table>
body>
html>
- QQ表情选择
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>QQ表情选择title>
<script src="../../js/jquery-3.3.1.min.js">script>
<style type="text/css">
*{
margin: 0;padding: 0;list-style: none;}
.emoji{
margin:50px;}
ul{
overflow: hidden;}
li{
float: left;width: 48px;height: 48px;cursor: pointer;}
.emoji img{
cursor: pointer; }
style>
<script>
//需求：点击qq表情，将其追加到发言框中
$(function () {
//1.给img图片添加onclick事件
$("ul img").click(function(){
//2.追加到p标签中即可。
$(".word").append($(this).clone());
});
});
script>
head>
<body>
<div class="emoji">
<ul>
<li><img src="img/01.gif" height="22" width="22" alt="" />li>
<li><img src="img/02.gif" height="22" width="22" alt="" />li>
<li><img src="img/03.gif" height="22" width="22" alt="" />li>
<li><img src="img/04.gif" height="22" width="22" alt="" />li>
<li><img src="img/05.gif" height="22" width="22" alt="" />li>
<li><img src="img/06.gif" height="22" width="22" alt="" />li>
<li><img src="img/07.gif" height="22" width="22" alt="" />li>
<li><img src="img/08.gif" height="22" width="22" alt="" />li>
<li><img src="img/09.gif" height="22" width="22" alt="" />li>
<li><img src="img/10.gif" height="22" width="22" alt="" />li>
<li><img src="img/11.gif" height="22" width="22" alt="" />li>
<li><img src="img/12.gif" height="22" width="22" alt="" />li>
ul>
<p class="word">
<strong>请发言：strong>
<img src="img/12.gif" height="22" width="22" alt="" />
p>
div>
body>
html>
- 左右移动
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script src="../../js/jquery-3.3.1.min.js">script>
<style>
#leftName , #btn,#rightName{
float: left;
width: 100px;
height: 300px;
}
#toRight,#toLeft{
margin-top:100px ;
margin-left:30px;
width: 50px;
}
.border{
height: 500px;
padding: 100px;
}
style>
<script>
//需求：实现下拉列表选中条目左右选择功能
$(function () {
//toRight
$("#toRight").click(function () {
//获取右边的下拉列表对象，append(左边下拉列表选中的option)
$("#rightName").append($("#leftName > option:selected"));
});
//toLeft
$("#toLeft").click(function () {
//appendTo 获取右边选中的option，将其移动到左边下拉列表中
$("#rightName > option:selected").appendTo($("#leftName"));
});
});
script>
head>
<body>
<div class="border">
<select id="leftName" multiple="multiple">
<option>张三option>
<option>李四option>
<option>王五option>
<option>赵六option>
select>
<div id="btn">
<input type="button" id="toRight" value="-->"><br>
<input type="button" id="toLeft" value="<--">
div>
<select id="rightName" multiple="multiple">
<option>钱七option>
select>
div>
body>
html>
JQuery高级
动画
-
三种方式显示和隐藏元素
-
默认显示和隐藏方式：即从右下角开始消失，左上角开始显示
-
1.show([speed,[easing],[fn]])：显示
参数：
- speed：动画的速度。三个预定义的值(“slow”,“normal”, “fast”)或表
示动画时长的毫秒数值(如：1000)
- easing：用来指定切换效果，默认是"swing"，可用参数"linear"
- swing：动画执行时效果是 先慢，中间快，最后又慢
- linear：动画执行时速度是匀速的
- fn：在动画完成时执行的函数，每个元素执行一次。
-
2.hide([speed,[easing],[fn]])：隐藏
-
3.toggle([speed],[easing],[fn])：切换显示和隐藏div
-
滑动显示和隐藏方式：从底部开始消失，顶部开始出现
- slideDown([speed],[easing],[fn])
- slideUp([speed,[easing],[fn]])
- slideToggle([speed],[easing],[fn])
-
淡入淡出显示和隐藏方式：全部内容慢慢的的消失或显示
- fadeIn([speed],[easing],[fn])
- fadeOut([speed],[easing],[fn])
- fadeToggle([speed,[easing],[fn]])
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<script type="text/javascript" src="../../js/jquery-3.3.1.min.js">script>
<script>
//隐藏div
function hideFn(){
//同时，会弹出一个对话框
/* $("#showDiv").hide("slow","swing",function(){
alert("隐藏了...")
});*/
//默认方式，先慢，中间快，最后又慢
// $("#showDiv").hide(5000,"swing");
//滑动方式
//$("#showDiv").slideUp("slow");
//淡入淡出方式
$("#showDiv").fadeOut("slow");
}
//显示div
function showFn(){
/*$("#showDiv").show("slow","swing",function(){
alert("显示了...")
});*/
//默认方式，匀速显示
//$("#showDiv").show(5000,"linear");
//滑动方式
//$("#showDiv").slideDown("slow");
//淡入淡出方式
$("#showDiv").fadeIn("slow");
}
//切换显示和隐藏div
function toggleFn(){
//默认方式
//$("#showDiv").toggle("slow");
//滑动方式
//$("#showDiv").slideToggle("slow");
//淡入淡出方式
$("#showDiv").fadeToggle("slow");
}
script>
head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">
<div id="showDiv" style="width:300px;height:300px;background:pink">
div显示和隐藏
div>
body>
html>
遍历
-
js的遍历方式
- for(初始化值;循环结束条件;步长)
-
遍历li里面的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
//1.获取所有的ul下的li
var citys = $("#city li");
//2.遍历li
for (var i = 0; i < citys.length; i++) {
if("上海" == citys[i].innerHTML){
//break; 结束循环
//continue; //结束本次循环，继续下次循环
}
//获取内容
alert(i+":"+citys[i].innerHTML);
}
</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
</html>
-
jq的遍历方式
- jq对象.each(callback)
- 语法：
- jquery对象.each(function(index,element){});
- index:就是元素在集合中的索引
- element：就是集合中的每一个元素对象
- this：集合中的每一个元素对象
- 回调函数返回值：
- true:如果当前function返回为true，则结束本次循环，继续下次循环
(continue)
- false:如果当前function返回为false，则结束循环(break)。
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script src="../../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
$(function () {
//2. jq对象.each(callback)
citys.each(function (index,element) {
//3.1 获取li对象 第一种方式 this：但是不能获取它的索引
//alert(this.innerHTML);//js方法
//alert($(this).html());//jq方法
//3.2 获取li对象 第二种方式 在回调函数中定义参数
// index（索引，如：0123） element（每次遍历得到的元素对象）
//alert(index+":"+element.innerHTML);//js方式获取
//alert(index+":"+$(element).html());//JQuery方式
//判断如果是上海，则结束循环
if("上海" == $(element).html()){
//在这里不能使用break和continue来就循环，使用了的话，就会报错
//如果当前function返回为false，则结束循环(相对于break)。
//如果返回为true，则结束本次循环，继续下次循环(相对于continue)
return true;
}
alert(index+":"+$(element).html());
});
script>
head>
<body>
<ul id="city">
<li>北京li>
<li>上海li>
<li>天津li>
<li>重庆li>
ul>
body>
html>
- $.each(object, [callback])，全局遍历方式，[callback]这里面的内容与上面的一致
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script src="../../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
$(function () {
//3 $.each(object, [callback])
$.each(citys,function () {
alert($(this).html());
});
});
script>
head>
<body>
<ul id="city">
<li>北京li>
<li>上海li>
<li>天津li>
<li>重庆li>
ul>
body>
html>
- for…of: jquery 3.0 版本之后提供的方式
for(元素对象 of 容器对象)
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script src="../../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
$(function () {
//4. for ... of:jquery 3.0 版本之后提供的方式
for(li of citys){
alert($(li).html());
}
});
script>
head>
<body>
<ul id="city">
<li>北京li>
<li>上海li>
<li>天津li>
<li>重庆li>
ul>
body>
html>
事件绑定
jquery标准的绑定方式
- jq对象.事件方法(回调函数)；
- 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
- 表单对象.submit();//让表单提交
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
$(function () {
//1.获取name对象，绑定click事件
/*$("#name").click(function () {
alert("我被点击了...")
});*/
//给name绑定鼠标移动到元素之上事件。绑定鼠标移出事件
/*$("#name").mouseover(function () {
alert("鼠标来了...")
});
$("#name").mouseout(function () {
alert("鼠标走了...")
});*/
/* //简化操作，链式编程
$("#name").mouseover(function () {
alert("鼠标来了...")
}).mouseout(function () {
alert("鼠标走了...")
});*/
alert("我要获得焦点了...")
//让文本输入框获得焦点
//$("#name").focus();
// 如果在里面不写任何方法的话，就会直接触发该事件
//表单对象.submit();//让表单提交
});
script>
head>
<body>
<input id="name" type="text" value="绑定点击事件">
body>
html>
on绑定事件/off解除绑定
- jq对象.on(“事件名称”,回调函数)
- jq对象.off(“事件名称”)
- 如果off方法不传递任何参数，则将组件上的所有事件全部解绑
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
$(function () {
//1.使用on给按钮绑定单击事件 click
$("#btn").on("click",function () {
alert("我被点击了。。。")
}) ;
//2. 使用off解除btn按钮的单击事件
$("#btn2").click(function () {
//解除btn按钮的单击事件
//$("#btn").off("click");
$("#btn").off();//如果不传递参数，则是将组件上的所有事件全部解绑
});
});
script>
head>
<body>
<input id="btn" type="button" value="使用on绑定点击事件">
<input id="btn2" type="button" value="使用off解绑点击事件">
body>
html>
事件切换：toggle
- jq对象.toggle(fn1,fn2…)
- 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2…
- 如果只有fn1和fn2，那么，点击第三次的时候又会重新执行fn1…
- 注意：JQuery1.9版本以后 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script src="../../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8">script>
<script src="../../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
$(function () {
//获取按钮，调用toggle方法
$("#btn").toggle(function () {
//改变div背景色backgroundColor 颜色为 green
$("#myDiv").css("backgroundColor","green");
},function () {
//改变div背景色backgroundColor 颜色为 pink
$("#myDiv").css("backgroundColor","pink");
});
});
script>
head>
<body>
<input id="btn" type="button" value="事件切换">
<div id="myDiv" style="width:300px;height:300px;background:pink">
点击按钮变成绿色，再次点击红色
div>
body>
html>
案例
- 广告的自动显示与隐藏
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>广告的自动显示与隐藏title>
<style>
#content{
width:100%;height:500px;background:#999}
style>
<script type="text/javascript" src="../../js/jquery-3.3.1.min.js">script>
<script>
/*
需求：
1. 当页面加载完，3秒后。自动显示广告
2. 广告显示5秒后，自动消失。
分析：
1. 使用定时器来完成。setTimeout (执行一次定时器)
2. 分析发现JQuery的显示和隐藏动画效果其实就是控制display
3. 使用 show/hide方法来完成广告的显示
*/
//入口函数，在页面加载完成之后，定义定时器，调用这两个方法
$(function () {
//定义定时器，调用adShow方法 3秒后执行一次
setTimeout(adShow,3000);
//定义定时器，调用adHide方法，8秒后执行一次
setTimeout(adHide,8000);
});
//显示广告
function adShow() {
//获取广告div，调用显示方法
$("#ad").show("slow");
}
//隐藏广告
function adHide() {
//获取广告div，调用隐藏方法
$("#ad").hide("slow");
}
script>
head>
<body>
<div>
<div id="ad" style="display: none;">
<img style="width:100%" src="../img/adv.jpg" />
div>
<div id="content">
正文部分
div>
div>
body>
html>
- 抽奖
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery案例之抽奖title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js">script>
<script language='javascript' type='text/javascript'>
/*
分析：
1. 给开始按钮绑定单击事件
1.1 定义循环定时器
1.2 切换小相框的src属性
* 定义数组，存放图片资源路径
* 生成随机数。数组索引
2. 给结束按钮绑定单击事件
1.1 停止定时器
1.2 给大相框设置src属性
*/
var imgs = ["../img/man00.jpg",
"../img/man01.jpg",
"../img/man02.jpg",
"../img/man03.jpg",
"../img/man04.jpg",
"../img/man05.jpg",
"../img/man06.jpg",
];
var startId;//开始定时器的id
var index;//随机角标
$(function () {
//处理按钮是否可以使用的效果
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
//1. 给开始按钮绑定单击事件
$("#startID").click(function () {
// 1.1 定义循环定时器 20毫秒执行一次
startId = setInterval(function () {
//处理按钮是否可以使用的效果
$("#startID").prop("disabled",true);
$("#stopID").prop("disabled",false);
//1.2生成随机角标 0-6
index = Math.floor(Math.random() * 7);//0.000--0.999 --> * 7 --> 0.0-----6.9999
//1.3设置小相框的src属性
$("#img1ID").prop("src",imgs[index]);
},20);
});
//2. 给结束按钮绑定单击事件
$("#stopID").click(function () {
//处理按钮是否可以使用的效果
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
// 1.1 停止定时器
clearInterval(startId);
// 1.2 给大相框设置src属性
$("#img2ID").prop("src",imgs[index]).hide();
//显示1秒之后
$("#img2ID").show(1000);
});
});
script>
head>
<body>
<div style="border-style:dotted;width:160px;height:100px">
<img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px"/>
div>
<div
style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">
<img id="img2ID" src="../img/man00.jpg" width="800px" height="500px"/>
div>
<input
id="startID"
type="button"
value="点击开始"
style="width:150px;height:150px;font-size:22px">
<input
id="stopID"
type="button"
value="点击停止"
style="width:150px;height:150px;font-size:22px">
body>
html>
插件
插件：增强JQuery的功能
-
实现方式：通过自己在里面定义的方法了实现入口函数里面的内容去调用该方法
- $.fn.extend(object)
- 增强通过Jquery获取的对象的功能 $("#id")
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01-jQuery对象进行方法扩展title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
//使用jquery插件 给jq对象添加2个方法 check()选中所有复选框，uncheck()取消选中所有复选框
//1.定义jqeury的对象插件
$.fn.extend({
//定义了一个check()方法。所有的jq对象都可以调用该方法
check:function () {
//让复选框选中
//this:调用该方法的jq对象
this.prop("checked",true);
},
uncheck:function () {
//让复选框不选中
this.prop("checked",false);
}
});
$(function () {
// 获取按钮
//$("#btn-check").check();
//复选框对象.check();
$("#btn-check").click(function () {
//获取复选框对象
$("input[type='checkbox']").check();
});
$("#btn-uncheck").click(function () {
//获取复选框对象
$("input[type='checkbox']").uncheck();
});
});
script>
head>
<body>
<input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()">
<input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckFn()">
<br/>
<input type="checkbox" value="football">足球
<input type="checkbox" value="basketball">篮球
<input type="checkbox" value="volleyball">排球
body>
html>
- $.extend(object)
- 增强JQeury对象自身的功能 $/jQuery
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01-jQuery对象进行方法扩展title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
//对全局方法扩展2个方法，扩展min方法：求2个值的最小值；扩展max方法：求2个值最大值
$.extend({
max:function (a,b) {
//返回两数中的较大值
return a >= b ? a:b;
},
min:function (a,b) {
//返回两数中的较小值
return a <= b ? a:b;
}
});
//调用全局方法
var max = $.max(4,3);
//alert(max);
var min = $.min(1,2);
alert(min);
script>
head>
<body>
body>
html>
AJAX
基础入门
基本概念
- AJAX(Asynchronous JavaScript And XML) :异步的JavaScript和XML。
- 本身不是一 种新技术,而是多个技术综合。用于快速创建动态网页的技术。
- 一般的网页如果 需要更新内容，必需重新加载整个页面。
- 而AJAX通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下,对网页的部分内容进行局部更新。
实现方式
原生JS实现AJAX(了解)
- UserServlet
@WebServlet("/userServlet")
public class UserServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//设置请求和响应的乱码
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=UTF-8");
//获取请求参数
String username = req.getParameter("username");
//判断zhangsan是否已经注册
if ("zhangsan".equals(username)){
resp.getWriter().write("用户名已注册");
}else {
resp.getWriter().write("用户名未注册");
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req,resp);
}
}
- register.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册title>
head>
<body>
<form autocomplete="off">
姓名：<input type="text" id="username">
<span id="uSpan">span>
<br>
密码：<input type="password" id="password"><br>
<input type="submit" value="注册">
form>
body>
<script>
//1.为姓名绑定失去焦点事件
document.getElementById("username").onblur = function(){
//2.创建XMLHt tpRequest核心对象
let xmlHttp = new XMLHttpRequest();
//3.打开链接
let username =document.getElementById("username").value;
//true是异步，如果设置为false就是同步
xmlHttp.open("GET","userServlet?username="+username,true);
//4.发送请求
xmlHttp.send();
//5.处理响应
xmlHttp.onreadystatechange = function (){
//判断请求和响应是否成功
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
//将响应数据显示到span标签
document.getElementById("uSpan").innerHTML = xmlHttp.responseText;
}
}
}
script>
html>
- 核心对象: XMLHttpRequest
- 用于在后台与服务器交换数据。可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
- 打开链接: open(method,url,async)
- method :请求的类型GET或POST。
- url :请求资源的路径。
- async : true(异步)或false(同步)。
- 发送请求: send(String params)
- params :请求的参数(POST专用)。
- 处理响应: onreadystatechange
- readyState : 0-请求未初始化，1-服务器连接E建立，2- 请求E接收，3-请求处理中，4-请求E完成,且响应已就绪。
- status : 200-响应已全部OK。
- 获得响应数据形式
- responseText :获得字符串形式的响应数据。
- responseXML :获得XML形式的响应数据。
jQuery的GET方式实现AJAX
- 核心语法: $.get(url,[data],[callback],[type]);
- url :请求的资源路径。
- data :发送给服务器端的请求参数,格式可以是key=value，也可以是js对象。
- callback :当请求成功后的回调函数,可以在函数中编写我们的逻辑代码。
- type :预期的返回数据的类型，取值可以是xml, html, js, json, text等。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册title>
head>
<body>
<form autocomplete="off">
姓名：<input type="text" id="username">
<span id="uSpan">span>
<br>
密码：<input type="password" id="password"><br>
<input type="submit" value="注册">
form>
body>
<script src="js/jquery-3.3.1.min.js">script>
<script>
//1.为姓名绑定失去焦点事件
$("#username").blur(function (){
//获取username
let username = $("#username").val();
//2. jQuery的GET方式实现AJAX
$.get(
//请求的资源路径
"userServlet",
//请求参数
"username=" + username,
//回调函数
//data代表服务器给我们响应过来的数据，这些数据传递给data
function (data){
//将响应的数据显示到span标签
$("#uSpan").html(data);
},
//响应数据的形式
"text"
);
});
script>
html>
jQuery的POST方式实现AJAX
核心语法: $.post(url,[data],[callback],[type]);
- url :请求的资源路径。
- data :发送给服务器端的请求参数,格式可以是key=value，也可以是js对象。
- callback :当请求成功后的回调函数,可以在函数中编写我们的逻辑代码。
- type :预期的返回数据的类型，取值可以是xml, html, js, json, text等。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册title>
head>
<body>
<form autocomplete="off">
姓名：<input type="text" id="username">
<span id="uSpan">span>
<br>
密码：<input type="password" id="password"><br>
<input type="submit" value="注册">
form>
body>
<script src="js/jquery-3.3.1.min.js">script>
<script>
//1.为姓名绑定失去焦点事件
$("#username").blur(function (){
//获取username
let username = $("#username").val();
//2. jQuery的post方式实现AJAX
$.post(
//请求的资源路径
"userServlet",
//请求参数
"username=" + username,
//回调函数
//data代表服务器给我们响应过来的数据，这些数据传递给data
function (data){
//将响应的数据显示到span标签
$("#uSpan").html(data);
},
//响应数据的形式
"text"
);
});
script>
html>
jQuery的通有方式实现AJAX
- 核心语法: $.ajax({name:value,name:val…);
- url :求的资源路径。
- async :否异步请求, true-是, false否(默认是true)。
- data :发送到服务器的数据,可以是键值对形式,也可以是js对象形式。
- type :请求方式，POST或GET (默认是GET)。
- dataType :预期的返回数据的类型,取值可以是xml, html, js, json, text等。
- success :请求成功时调用的回调函数。
- error :请求失败时调用的回调函数。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册title>
head>
<body>
<form autocomplete="off">
姓名：<input type="text" id="username">
<span id="uSpan">span>
<br>
密码：<input type="password" id="password"><br>
<input type="submit" value="注册">
form>
body>
<script src="js/jquery-3.3.1.min.js">script>
<script>
//1.为姓名绑定失去焦点事件
$("#username").blur(function (){
//获取username
let username = $("#username").val();
//2. jQuery的通用方式实现AJAX
$.ajax({
//请求资源路径
url:"userServlet",
//是否同步
async:true,
//请求参数
data:"username="+username,
//请求方式
type:"GET",
//数据形式
data_type:"text",
//请求成功后调用的回调函数
success:function (data){
//将响应的数据显示到span标签
$("#uSpan").html(data);
},
//请求失败后调用的回调函数
error:function (){
alert("操作失败。。")
}
})
});
script>
html>
小结
后面三种是重点
-
AJAX(Asynchronous JavaScript And XML) :异步的JavaScript和XML。
-
通过浏览器与服务器进行少數据交换，就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下,对网页的部分内容进行局部更新。
-
同步和异步
- 同步:服务器端在处理过程中，无法进行其他操作。
- 步:服务器端在处理过程中,可以进行其他操作。
-
GET方式实现: $.get0;
-
POST方式实现: $.post0;
- url :请求的资源路径。
- data :发送给服务器端的请求参数,格式可以是key=value ,也可以是js对象。
- callback :当请求成功后的回调函数,可以在函数中编写我们的逻辑代码。
- type :预期的返回数据的类型,取值可以是xml, html, js, json, text等。
-
通用方式实现: $.ajax0;
- url :请求的资源路径。
- async :是否异步请求, true- 是, false 否(默认是true)。
- data :发送到服务器的数据，可以是键值对形式,也可以是js对象形式。
- type :请求方式, POST或GET (默认是GET)。
- dataType :预期的返回数据的类型,取值可以是xml, html, js, json, text等。
- success :请求成功时调用的回调函数。
- error :请求失败时调用的回调函数。
JSON
基础
-
概念： JavaScript Object Notation
-
JavaScript对象表示法
-
JavaScript用来表示对象的手段或者是方式，使用json来表示对象，便称为JavaScript对象表示法
-
json现在多用于存储和交换文本信息的语法，类似与XML
-
存储数据，进行数据的传输
-
JSON 比 XML 更小、更快，更易解析。
//Java的表示
Person p = new Person();
p.setName("张三");
p.setAge(23);
p.setGender("男");
//使用json来表示对象
var p = {"name":"张三","age":23,"gender":"男"};
语法
-
基本规则
- 数据在名称/值对中：json数据是由键值对构成的
- 键用引号(单双都行)引起来，也可以不使用引号
- 值得取值类型：
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（true 或 false）
- 数组（在方括号中） {“persons”:[{},{}]}
- 对象（在花括号中） {“address”:{“province”：“陕西”…}
- null
- 数据由逗号分隔：多个键值对由逗号分隔
- 花括号保存对象：使用{}定义json 格式
- 方括号保存数组：[]
<script>
//1.定义基本格式
var person = {
"name": "张三", age: 23, 'gender': true};
//获取name的值
//var name = person.name;
var name = person["name"];
// alert(name);
//alert(person);
//2.嵌套格式 {}———> []
var persons = {
"persons": [
{
"name": "张三", "age": 23, "gender": true},
{
"name": "李四", "age": 24, "gender": true},
{
"name": "王五", "age": 25, "gender": false}
]
};
// alert(persons);
//获取王五值
var name1 = persons.persons[2].name;
// alert(name1);
//2.嵌套格式 []———> {}
var ps = [{
"name": "张三", "age": 23, "gender": true},
{
"name": "李四", "age": 24, "gender": true},
{
"name": "王五", "age": 25, "gender": false}];
//获取李四值
//alert(ps);
alert(ps[1].name);
</script>
-
获取数据:
- json对象.键名
- json对象[“键名”]
- 数组对象[索引]
//获取name的值
//var name = person.name;
var name = person["name"];
// alert(name);
//获取王五值
var name1 = persons.persons[2].name;
// alert(name1);
//获取李四值
//alert(ps);
alert(ps[1].name);
- 遍历
<script>
//1.定义基本格式
var person = {
"name": "张三", age: 23, 'gender': true};
var ps = [{
"name": "张三", "age": 23, "gender": true},
{
"name": "李四", "age": 24, "gender": true},
{
"name": "王五", "age": 25, "gender": false}];
//获取person对象中所有的键和值
//方式1
//for in 循环，key是name，age和gender
/* for(var key in person){
//alert(key + ":" + person.key);//这样的方式获取不行。因为相当于 person."name"
alert(key+":"+person[key]);
}*/
//获取ps中的所有值
//方式2
for (var i = 0; i < ps.length; i++) {
var p = ps[i];
for(var key in p){
alert(key+":"+p[key]);
}
}
</script>
jackson
JSON数据和Java对象的相互转换
-
JSON解析器：
- 常见的解析器：Jsonlib，Gson，fastjson，jackson
-
JSON转为Java对象
-
导入jackson的相关jar包
-
创建Jackson核心对象 ObjectMapper
-
调用ObjectMapper的相关方法进行转换
- readValue(json字符串数据,Class)
//演示 JSON字符串转为Java对象
@Test
public void test5() throws Exception {
//1.初始化JSON字符串
String json = "{\"gender\":\"男\",\"name\":\"张三\",\"age\":23}";
//2.创建ObjectMapper对象
ObjectMapper mapper = new ObjectMapper();
//3.转换为Java对象 Person对象
Person person = mapper.readValue(json, Person.class);
System.out.println(person);
//Person{name='张三', age=23, gender='男'}
}
-
Java对象转换JSON使用步骤：
-
导入jackson的相关jar包
-
创建Jackson核心对象 ObjectMapper
-
调用ObjectMapper的相关方法进行转换
-
转换方法：
- writeValue(参数1，obj):
参数1：
- File：将obj对象转换为JSON字符串，并保存到指定的文件中
- Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
- OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
- writeValueAsString(obj):将对象转为json字符串
@Test
public void test1() throws Exception {
//Java对象转为JSON字符串
Person p = new Person();
p.setName("das");
p.setAge(26);
p.setGender("女");
//2.创建Jackson的核心对象 ObjectMapper
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(p);
//System.out.println(json);//{"name":"张三","age":23,"gender":"男"}
//writeValue，将数据写到d://a.txt文件中
//mapper.writeValue(new File("d://a.txt"),p);
//writeValue.将数据关联到Writer中
mapper.writeValue(new FileWriter("d://b.txt"),p);
}
-
注解：
- @JsonIgnore：排除属性。
- @JsonFormat：属性值得格式化
- @JsonFormat(pattern = “yyyy-MM-dd”)
@Test
public void test2() throws Exception {
//1.创建Person对象
Person p = new Person();
p.setName("张三");
p.setAge(23);
p.setGender("男");
p.setBirthday(new Date());
//2.转换
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(p);
System.out.println(json);//{"name":"张三","age":23,"gender":"男","birthday":1530958029263}
//在Person类里面的birthday上面添加一句@JsonIgnore,后面的birthday内容就没有了
//使用@JsonFormat(pattern="yy-MM-dd") 输出的便是下面的内容
//{"name":"张三","age":23,"gender":"男","birthday":"2021-07-07"}
}
-
复杂java对象转换
- List：转换出来是一个数组，数组里面放的对应的内容
@Test
public void test2() throws Exception {
//1.创建Person对象
Person p = new Person();
p.setName("张三");
p.setAge(23);
p.setGender("男");
p.setBirthday(new Date());
//2.转换
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(p);
System.out.println(json);//{"name":"张三","age":23,"gender":"男","birthday":1530958029263}
//在Person类里面的birthday上面添加一句@JsonIgnore,后面的birthday内容就没有了
//使用@JsonFormat(pattern="yy-MM-dd") 输出的便是下面的内容
//{"name":"张三","age":23,"gender":"男","birthday":"2021-07-07"}
}
- Map：转换出的结果跟对象格式一致
@Test
public void test4() throws Exception {
//1.创建map对象
Map<String,Object> map = new HashMap<String,Object>();
map.put("name","张三");
map.put("age",23);
map.put("gender","男");
//2.转换
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(map);
System.out.println(json);//{"gender":"男","name":"张三","age":23}
}
JSON处理
-
JSON(avaScriptObject Notation) :是种轻量级的数据交换格式。
-
它是基于ECMAScript规范的一个子集, 采用完全独立于编程语言的文本格式来存储和表示数据。
-
简洁和清晰的层次结构使得JSON成为理想的数据交换语言。易于人阅读和编写,同时也易于计算机解析和生成,并有效的提升网络传输效率。
-
创建格式
- 常用方法
JSON转换工具
- 我们除了可以在JavaScript中来使用JSON以外,在JAVA中同样也可以使用JSON。
- JSON的转换工具是通过JAVA封装好的一些JAR工具包。
- 可以将JAVA对象或集合转换成JSON格式的字符串，也可以将JSON格式的字符串转成JAVA对象。
- Jackson :开源免费的JSON转换工具，SpringMVC转换默认使用Jackson.
- 1.导入jar包。
- 2.创建核心对象。
- 3.调用方法完成转换。
常用类和方法
练习
public class ObjectMapperTest {
private ObjectMapper mapper = new ObjectMapper();
/*
1. User对象转json, json转User对象
*/
@Test
public void test01() throws Exception {
//User对象转json
User user = new User("张三",23);
String json = mapper.writeValueAsString(user);
System.out.println(json);//{"name":"张三","age":23}
// json转User对象
User user2 = mapper.readValue(json, User.class);
System.out.println(user2);//User{name='张三', age=23}
}
/*
2. map
*/
@Test
public void test02() throws Exception {
//map
HashMap<String,String> map = new HashMap<>();
map.put("name","zhangsan");
map.put("sex","male");
String json = mapper.writeValueAsString(map);
System.out.println(json);//{"sex":"male","name":"zhangsan"}
//json转map转json, json转map
@Test
public void test03() throws Exception {
//map转json
HashMap<String,User> map = new HashMap<>();
map.put("one",new User("zhangs1",26));
map.put("two",new User("zhangs2",22));
String json = mapper.writeValueAsString(map);
System.out.println(json);//{"one":{"name":"zhangs1","age":26},"two":{"name":"zhangs2","age":22}}
//json转map,import com.fasterxml.jackson.core.type.TypeReference;是这个包
HashMap<String,User> hashMap = mapper.readValue(json, new TypeReference<HashMap<String,User>>(){
});
System.out.println(hashMap);//{one=User{name='zhangs1', age=26}, two=User{name='zhangs2', age=22}}
}
//4. List 转json, json转 List
@Test
public void test04() throws Exception {
//List 转json,
ArrayList<String> list = new ArrayList<>();
list.add("zhangsa1");
list.add("zhangsa2");
String json = mapper.writeValueAsString(list);
System.out.println(json);//["zhangsa1","zhangsa2"]
//json转 List
ArrayList list2 = mapper.readValue(json, ArrayList.class);
System.out.println(list2);//[zhangsa1, zhangsa2]
}
//5. List转json, json转List
@Test
public void test05() throws Exception {
//List转json
ArrayList<User> list = new ArrayList<>();
list.add(new User("zhangs1",23));
list.add(new User("zhangs2",25));
String json = mapper.writeValueAsString(list);
System.out.println(json);//[{"name":"zhangs1","age":23},{"name":"zhangs2","age":25}]
//json转List
小结
