JavaWeb
目录
概述
HTML
html语法规范
html基本结构标签
常用标签
案例之体育新闻
JavaScript
使用的方式
关系运算
逻辑运算
数组
函数
JavaScript的隐形传输
js中自定义对象
JS中的事件
失去焦点事件
内容发生改变事件
表单提交事件
DOM 模型
Jquery
核心函数
基本选择器
层级选择器
过滤选择器
基本过滤选择器
dom对象的增删改
css样式操作
淡入淡出动画
jquery事件操作
jQuery 中其他事件处理方法
事件冒泡
JavaScript事件对象
xml语法
文本区域（CDATA区）
XML解析技术介绍
JSON
1.什么是JSON？
2.JSON的定义？
1.3.JSON的访问
json的两个常用方法
JSON在java中的使用
javabean与JSON互转
LIST和JSON互转
map 和json的互转
servlet
AJAX请求
概述
web标准的构成包括结构（html）：对于网页元素进行整理和分类，
表现（css）：用于设置网页元素的版本，颜色，大小等外观样式，
行为（JavaScript让网页动起来）：网页模型的定义及交互,页面元素与设备的响应。
web标准提出的最佳体验方案：结构，样式，行为相分离
结构写到html文件，表现写到css文件，行为写到JavaScript里面
HTML
html语法规范
1.html标签都是由<>包括的关键词，例如。
2.html标签通常都是成对出现，例如 我们成为双标签。也有单标签
.
3.双标签的关系可以分为两类：包含和并列关系。
html基本结构标签
html标签 页面中最大的标签，称为根标签
文档头部 在head标签里面我们必须设置标签是title标签。head标签是控制下图区域。
文档类型声明 作用就是告诉浏览器使用那种html版本来显示网页
不是一个html标签，是一个文档类型声明标签。
常用标签
标题标签：
我是一级标签
一共有h1-h6.
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<h1>标题一共六级选h1>
<h2>文字加粗一行显h2>
<h3>由小到大依次减h3>
<h4>从重到轻随之变h4>
<h5>语法规范书写后h5>
<h6>具体效果刷新见h6>
body>
html>
段落标签：是把文字分段，如果没有段落标签，文字不会分段，会只有一段。
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<p>他一直都在为自己投资教育，先后获得了3个学位，平时还通过各种平台学习课程。他的职业计划是66岁退休，70岁以后还计划以某种身份参与编程或从事咨询的工作。对于45-50岁这个阶段，他认为这依然还是程序员生涯的黄金时期，只要自己能够保持不断学习的状态，那么你就会慢慢好起来！
对于这些高龄开发者的故事与建议。p>
<p>我们可以发现一个共同点，那就是：持续学习，投资自己，拥抱变化！说白了，就是要紧跟技术的发展，保持个人的技术价值！那么，你觉得这些建议是不是现在焦虑的原因呢？你觉得自己的程序员生涯可以做到多少岁呢？留言说说你的观点吧！p>
body>
html>1.文本在一个段落中会根据浏览器窗口的大小自动换行。
2.段落和段落之间有比较大的空隙。
换行标签，会把文字强制换行
br是break是打断，换行的意思。
1.是单标签
2.跟段落不一样，标签只是简简单单开始一行不会有较大缝隙，和段落不一样。
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<p>他一直都在为自己投资教育，先后获得了3个学位，平时还通过各种平台学习课程。<br/>他的职业计划是66岁退休，70岁以后还计划以某种身份参与编程或从事咨询的工作。对于45-50岁这个阶段，他认为这依然还是程序员生涯的黄金时期，只要自己能够保持不断学习的状态，那么你就会慢慢好起来！
对于这些高龄开发者的故事与建议。p>
<p>我们可以发现一个共同点，那就是：持续学习，投资自己，拥抱变化！说白了，就是要紧跟技术的发展，保持个人的技术价值！那么，你觉得这些建议是不是现在焦虑的原因呢？你觉得自己的程序员生涯可以做到多少岁呢？留言说说你的观点吧！p>
body>
html>文本格式化标签：有时需要设置文字为粗体，斜体和下划线效果，这时就需要用到html中文本格式化标签，使文字以特殊的方式显示。
案例之体育新闻
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<h1>欧洲杯-沙奇里2球 德甲飞翼3助攻 瑞士3-1小组第3h1>
<h4>一h4>
<p>北京时间6月21日00:00(阿塞拜疆当地时间20日20:00)，2020欧洲杯A组第3轮一场比赛在巴库奥林匹克球场展开争夺，瑞士3比1力克土耳其，塞费罗维奇进球，沙奇里梅开二度，祖贝尔上演助攻帽子戏法。瑞士获得小组第3，出线待定。p>
<h4>二h4>
<p>这是两队第16次交手，此前土耳其8胜3平4负，其中正式比赛5胜2平3负。祖贝尔和维德梅尔轮换出场。土耳其轮换3人，德米拉尔、穆尔杜和卡赫维奇出战。p>
<p>下半场。祖贝尔长传，恩博洛突入禁区右侧劲射被扑出。土耳其第62分钟扳回一城，恰尔汗奥卢传球，卡赫维奇25码处射入左上角，1-2。第68分钟，祖贝尔左路斜传，沙奇里12码处推射入网，3-1。祖贝尔上演帽子戏法。第77分钟，扎卡禁区弧内任意球直接射门打中右侧立柱p>
<p>作者李祖德<br/>2020-01-01p>
body>
html>JavaScript
JavaScript语言诞生主要是完成页面的数据验证，因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码
特点：交互性
安全性（不允许直接访问本地硬盘）
跨平台（只要可以解释js的浏览器都可以运行，和平台无关）
使用的方式
第一种方式：在head或者body标签中，使用script标签来书写JavaScript代码
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2021/9/10
Time: 14:44
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Titletitle>
<script type="text/javascript">
alert("小心");
script>
//alert 是javascpript语言提供的警告函数
//它可以接收任意类型的参数，这个参数就是警告的提示信息
head>
<body>
body>
html>
第二种方式：使用script标签引入单独的JavaScript代码
JavaScript变量：
数值类型：number
字符串类型：String
对象类型：object
布尔类型：boolean
函数类型：function
JavaScript里特殊的值：
undefine：所有js变量未赋初始值的时候，默认值是undefine
null：空值
NAN：非数字，非数值 比如：6*qqq
关系运算
==：等于
===：全等于除了比较字面值，还会比较两个变量的数据类型
逻辑运算
且运算：&&
或运算：||
取反运算：！
在JavaScript语言中，所有的变量，都可以作为一个boolean类型的变量使用。0，null，undefine，""(空串)都认为是false
逻辑运算具有短路效应。
数组
var arr = []
int a = [123]
函数
第一种，可以使用function关键字来定义函数。
使用的格式如下：
function 函数名（形参列表）{
函数体
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Titletitle>
<script type="text/javascript">
function fun(){
alert("无参函数被调用");
}
function a(a,b){
alert(有参函数被调用了);
return a + b;//无需返回值，直接返回
}
fun();
script>
head>
<body>
body>
html>
第二种
var 函数名 = function（形参列表）{函数体}
JavaScript的隐形传输
js中隐形参数也跟java变长参数一样，操作类似数组，
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2021/9/10
Time: 14:44
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Titletitle>
<script type="text/javascript">
function fun(){
alert(arguments.length);//2
}
fun(1,2);
script>
head>
<body>
body>
html>
js中自定义对象
object形式的自定义对象
var 变量名 = new object();//对象实例
变量名.属性名 = 值；
变量名.函数名 = function{}
{}花括号形式自定义对象:
var 变量名 = {
属性名 ： 值
函数名：function（）{}
}
JS中的事件
什么是事件？事件是电脑输入设备与页面进行交互的响应。我们称之为事件
onload：加载完成事件 页面加载完成之后，常用于做页面js代码初始化操作
onclick：单击事件 常用于按钮的点击响应操作
onblur：失去焦点事件 常用于输入框失去焦点后验证其输入内容是否合法。
啥是失去焦点：光标存在的地方。
onchange：内容发生改变事件 常用于下拉列表和输入框内容发生改变后操作
onsubmit：表单提交事件 常用于表单提交前，验证所有表单项是否合法
事件的注册又分为静态注册和动态注册两种：
什么是事件注册绑定？
其实就是告诉浏览器，当事件响应后要执行那些操作代码，叫做事件注册或者绑定
静态注册：提供html标签的事件属性直接赋值于事件响应后的代码，这种方式叫做静态注册
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2021/9/10
Time: 14:44
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Titletitle>
<script type="text/javascript">
script>
head>
<body onload="alert('静态事件onload事件，是浏览器解析完页面之后就会自动触发的事件')">
body>
html>
改进
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Titletitle>
<script type="text/javascript">
function fun(){
alert('静态事件onload事件，是浏览器解析完页面之后就会自动触发的事件');
}
script>
head>
<body onload="fun()">
body>
html>动态注册：是指先通过js代码得到dom对象，然后再通过dom对象.事件名 = function(){}这种形式赋于事件后响应的代码，叫做动态注册。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Titletitle>
<script type="text/javascript">
function functionc(){
alert("静态注册onclink");
}
window.onload = function (){
//1.获取标签对象
//2.通过标签对象.事件名 = function(){}
var b = document.getElementById("1");
b.onclick = function (){//检测到button标签有单击事件，则响应。
alert("动态注册onclink");
}
}
script>
head>
<body>
<button id="1">按钮1button>
<button onclick="functionc()">按钮2button>
body>
html>
失去焦点事件
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2021/9/10
Time: 14:44
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
Title
用户名：
密码：
内容发生改变事件
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2021/9/10
Time: 14:44
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Titletitle>
<script type="text/javascript">
function onchangefun(){
alert("女神已经改变了");
}
window.onload = function (){
var elementById = document.getElementById("1");
elementById.onchange = function (){
alert("女神已经改变了");
}
}
script>
head>
<body>
请选择你心中的女神：
<select onchange="onchangefun()">
<option>女神option>
<option>芳芳option>
<option>佳佳option>
<option>娘娘option>
select>
<select id="1">
<option>女神option>
<option>芳芳option>
<option>佳佳option>
<option>娘娘option>
select>
body>
html>表单提交事件
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2021/9/10
Time: 14:44
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
Title
DOM 模型
其实就是把文档中标签，文本，属性转换成为对象来管理。把标签转换成对象来管理
document.getElementById(elementId)
通过标签的id属性查找标签dom对象
document.getElementByName(elementName)
通过标签的name属性查找标签dom对象
document.getElementByTagName(tagname)
通过标签名查找标签dom对象，tagname是标签名
document.createElement(tagName)
通过给定标签名，创建一个标签对象，tagName是要创建的标签名
innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。
innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。
Jquery
Jquery是JavaScript的js类库
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title heretitle>
<script type="text/javascript" src="jquery-1.7.2.js">script>
<script type="text/javascript">
/*window.onload = function (){
var dobj = document.getElementById("btnId");
dobj.click = function (){
alert("js原生的单击事件");
}
}*/
$(function (){/*表示页面加载完成，相当于window.onload = function (){}*/
var $obj = $("#btnId");/*表示按照id查询标签对象*/
$obj.click(function (){//绑定单击事件
alert("jquery的单击事件");
})
})
script>
head>
<body>
<button id="btnId">SayHellobutton>
body>
html>核心函数
$是jquery的核心函数，能完成jquery的很多功能，$()就是调用$这个函数。
1.当传入参数为函数时候，表示页面加载完成之后；
$(function (){/*表示页面加载完成，相当于window.onload = function (){}*/2.传入参数为html字符串时； 会帮我们创建对应的标签对象
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title heretitle>
<script type="text/javascript" src="jquery-1.7.2.js">script>
<script type="text/javascript">
/*window.onload = function (){
var dobj = document.getElementById("btnId");
dobj.click = function (){
alert("js原生的单击事件");
}
}*/
$(function (){/*表示页面加载完成，相当于window.onload = function (){}*/
var $obj = $("#btnId");/*表示按照id查询标签对象*/
$obj.click(function (){//绑定单击事件
alert("jquery的单击事件");
})
$("" +
"div-span1" +
"div-span2" +
"").appendTo("body");
})
script>
head>
<body>
<button id="btnId">SayHellobutton>
body>
html>3.传入参数是选择器字符串
$("#id属性值")；id选择器，根据id查询标签对象
$("标签名")；标签名选择器，根据指定标签名查询标签对象
$(".class属性值") 根据属性值选择标签对象
4.查询dom对象时候，会把dom对象转换成jQuery对象
jQuery对象：
通过jQuery提供的API创建的对象是Jquery对象
通过jQuery包装的dom对象，也是jQuery对象
var dobj = document.getElementById("btnId");
$(doobj);
通过jQueryAPI查询到的对象，是jQuery对象
jQuery对象Alert出来的效果是：【object object】
jQuery对象的本质是什么？
jquery对象是dom对象的数组+一系列方法。
$(function(){
//testDiv.css("color","red")
//testDiv.style.color = "blue";
var arr = [12,"abc","true"];
var $btns = $("button");
for (var i = 0; i < $btns.length; i++){
alert($btns[i]);
}
});jquery对象和dom对象使用区别
jquery对象不能使用dom对象的属性和方法
dom对象不能使用jquery对象的属性和方法
dom对象和jquery对象互转
dom对象转为jquery对象
1.先有Dom对象
2.$(dom对象)就可以转换为jquery对象
jquery对象转换为dom对象
1.先有jquery对象
2.jquery对象下标取出相应的dom对象
$(function(){
//testDiv.css("color","red")
//testDiv.style.color = "blue";
/*var arr = [12,"abc","true"];
var $btns = $("button");
for (var i = 0; i < $btns.length; i++){
alert($btns[i]);
}*/
//dom对象转为jquery对象
alert($(document.getElementById("testDiv")));
//jquery对象转为dom对象
alert($(document.getElementById("testDiv"))[0]);
});基本选择器
#id 选择器：根据id查询标签对象
.class 选择器：根据class查找标签对象
element 选择器 根据标签名查找标签对象
* 选择器：表示任意的，所有的元素
selector1，selector2 组合选择器：合并选择器1，选择器2的结果并返回
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Documenttitle>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
style>
<script type="text/javascript" src="../script/jquery-1.7.2.js">script>
<script type="text/javascript">
$(function () {
//1.选择 id 为 one 的元素 "background-color","#bbffaa"
$("#btn1").click(function () {
// css() 方法 可以设置和获取样式
$("#one").css("background-color","#bbffaa");
});
//2.选择 class 为 mini 的所有元素
$("#btn2").click(function () {
$(".mini").css("background-color","#bbffaa");
});
//3.选择 元素名是 div 的所有元素
$("#btn3").click(function () {
$("div").css("background-color","#bbffaa");
});
//4.选择所有的元素
$("#btn4").click(function () {
$("*").css("background-color","#bbffaa");
});
//5.选择所有的 span 元素和id为two的元素
$("#btn5").click(function () {
$("span,#two").css("background-color","#bbffaa");
});
});
script>
head>层级选择器
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Documenttitle>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
style>
<script type="text/javascript" src="../script/jquery-1.7.2.js">script>
<script type="text/javascript">
$(document).ready(function(){
//1.选择 body 内的所有 div 元素
$("#btn1").click(function(){
$("body div").css("background", "#bbffaa");
});
//2.在 body 内, 选择div子元素
$("#btn2").click(function(){
$("body > div").css("background", "#bbffaa");
});
//3.选择 id 为 one 的下一个 div 元素
$("#btn3").click(function(){
$("#one+div").css("background", "#bbffaa");
});
//4.选择 id 为 two 的元素后面的所有 div 兄弟元素
$("#btn4").click(function(){
$("#two~div").css("background", "#bbffaa");
});
});
script>
head>过滤选择器
基本过滤选择器
<script type="text/javascript" src="../script/jquery-1.7.2.js">script>
<script type="text/javascript">
$(document).ready(function(){
function anmateIt(){
$("#mover").slideToggle("slow", anmateIt);
}
anmateIt();
});
$(document).ready(function(){
//1.选择第一个 div 元素
$("#btn1").click(function(){
$("div:first").css("background", "#bbffaa");
});
//2.选择最后一个 div 元素
$("#btn2").click(function(){
$("div:last").css("background", "#bbffaa");
});
//3.选择class不为 one 的所有 div 元素
$("#btn3").click(function(){
$("div:not(.one)").css("background", "#bbffaa");
});
//4.选择索引值为偶数的 div 元素
$("#btn4").click(function(){
$("div:even").css("background", "#bbffaa");
});
//5.选择索引值为奇数的 div 元素
$("#btn5").click(function(){
$("div:odd").css("background", "#bbffaa");
});
//6.选择索引值为大于 3 的 div 元素
$("#btn6").click(function(){
$("div:gt(3)").css("background", "#bbffaa");
});
//7.选择索引值为等于 3 的 div 元素
$("#btn7").click(function(){
$("div:eq(3)").css("background", "#bbffaa");
});
//8.选择索引值为小于 3 的 div 元素
$("#btn8").click(function(){
$("div:lt(3)").css("background", "#bbffaa");
});
//9.选择所有的标题元素
$("#btn9").click(function(){
$(":header").css("background", "#bbffaa");
});
//10.选择当前正在执行动画的所有元素
$("#btn10").click(function(){
$(":animated").css("background", "#bbffaa");
});
//11.选择没有执行动画的最后一个div
$("#btn11").click(function(){
$("div:not(:animated):last").css("background", "#bbffaa");
});
});
script>
head>内容过滤选择器
$(document).ready(function(){
//1.选择 含有文本 'di' 的 div 元素
$("#btn1").click(function(){
$("div:contains('di')").css("background", "#bbffaa");
});
//2.选择不包含子元素(或者文本元素) 的 div 空元素
$("#btn2").click(function(){
$("div:empty").css("background", "#bbffaa");
});
//3.选择含有 class 为 mini 元素的 div 元素
$("#btn3").click(function(){
$("div:has(.mini)").css("background", "#bbffaa");
});
//4.选择含有子元素(或者文本元素)的div元素
$("#btn4").click(function(){
$("div:parent").css("background", "#bbffaa");
});
});
script>属性过滤选择器
*/
$(function() {
//1.选取含有 属性title 的div元素
$("#btn1").click(function() {
$("div[title]").css("background", "#bbffaa");
});
//2.选取 属性title值等于'test'的div元素
$("#btn2").click(function() {
$("div[title='test']").css("background", "#bbffaa");
});
//3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中)
$("#btn3").click(function() {
$("div[title!='test']").css("background", "#bbffaa");
});
//4.选取 属性title值 以'te'开始 的div元素
$("#btn4").click(function() {
$("div[title^='te']").css("background", "#bbffaa");
});
//5.选取 属性title值 以'est'结束 的div元素
$("#btn5").click(function() {
$("div[title$='est']").css("background", "#bbffaa");
});
//6.选取 属性title值 含有'es'的div元素
$("#btn6").click(function() {
$("div[title*='es']").css("background", "#bbffaa");
});
//7.首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素
$("#btn7").click(function() {
$("div[id][title*='es']").css("background", "#bbffaa");
});
//8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素
$("#btn8").click(function() {
$("div[title][title!='test']").css("background", "#bbffaa");
});
});
script>表单过滤器
//1.对表单内 可用input 赋值操作
$("#btn1").click(function(){
// val()可以操作表单项的value属性值
// 它可以设置和获取
$(":text:enabled").val("我是万能的程序员");
});
//2.对表单内 不可用input 赋值操作
$("#btn2").click(function(){
$(":text:disabled").val("管你可用不可用，反正我是万能的程序员");
});
//3.获取多选框选中的个数 使用size()方法获取选取到的元素集合的元素个数
$("#btn3").click(function(){
alert( $(":checkbox:checked").length );
});
//4.获取多选框，每个选中的value值
$("#btn4").click(function(){
// 获取全部选中的复选框标签对象
var $checkboies = $(":checkbox:checked");
// 老式遍历
// for (var i = 0; i < $checkboies.length; i++){
// alert( $checkboies[i].value );
// }
// each方法是jQuery对象提供用来遍历元素的方法
// 在遍历的function函数中，有一个this对象，这个this对象，就是当前遍历到的dom对象
$checkboies.each(function () {
alert( this.value );
});
});
//5.获取下拉框选中的内容
$("#btn5").click(function(){
// 获取选中的option标签对象
var $options = $("select option:selected");
// 遍历，获取option标签中的文本内容
$options.each(function () {
// 在each遍历的function函数中，有一个this对象。这个this对象是当前正在遍历到的dom对象
alert(this.innerHTML);
});
});
})
元素筛选
//(1)eq() 选择索引值为等于 3 的 div 元素
$("#btn1").click(function(){
$("div").eq(3).css("background-color","#bfa");
});
//(2)first()选择第一个 div 元素
$("#btn2").click(function(){
//first() 选取第一个元素
$("div").first().css("background-color","#bfa");
});
//(3)last()选择最后一个 div 元素
$("#btn3").click(function(){
//last() 选取最后一个元素
$("div").last().css("background-color","#bfa");
});
//(4)filter()在div中选择索引为偶数的
$("#btn4").click(function(){
//filter() 过滤 传入的是选择器字符串
$("div").filter(":even").css("background-color","#bfa");
});
//(5)is()判断#one是否为:empty或:parent
//is用来检测jq对象是否符合指定的选择器
$("#btn5").click(function(){
alert( $("#one").is(":empty") );
});
//(6)has()选择div中包含.mini的
$("#btn6").click(function(){
//has(selector) 选择器字符串 是否包含selector
$("div").has(".mini").css("background-color","#bfa");
});
//(7)not()选择div中class不为one的
$("#btn7").click(function(){
//not(selector) 选择不是selector的元素
$("div").not('.one').css("background-color","#bfa");
});
//(8)children()在body中选择所有class为one的div子元素
$("#btn8").click(function(){
//children() 选出所有的子元素
$("body").children("div.one").css("background-color","#bfa");
});
//(9)find()在body中选择所有class为mini的div元素
$("#btn9").click(function(){
//find() 选出所有的后代元素
$("body").find("div.mini").css("background-color","#bfa");
});
//(10)next() #one的下一个div
$("#btn10").click(function(){
//next() 选择下一个兄弟元素
$("#one").next("div").css("background-color","#bfa");
});
//(11)nextAll() #one后面所有的span元素
$("#btn11").click(function(){
//nextAll() 选出后面所有的元素
$("#one").nextAll("span").css("background-color","#bfa");
});
//(12)nextUntil() #one和span之间的元素
$("#btn12").click(function(){
//
$("#one").nextUntil("span").css("background-color","#bfa")
});
//(13)parent() .mini的父元素
$("#btn13").click(function(){
$(".mini").parent().css("background-color","#bfa");
});
//(14)prev() #two的上一个div
$("#btn14").click(function(){
//prev()
$("#two").prev("div").css("background-color","#bfa")
});
//(15)prevAll() span前面所有的div
$("#btn15").click(function(){
//prevAll() 选出前面所有的元素
$("span").prevAll("div").css("background-color","#bfa")
});
//(16)prevUntil() span向前直到#one的元素
$("#btn16").click(function(){
//prevUntil(exp) 找到之前所有的兄弟元素直到找到exp停止
$("span").prevUntil("#one").css("background-color","#bfa")
});
//(17)siblings() #two的所有兄弟元素
$("#btn17").click(function(){
//siblings() 找到所有的兄弟元素，包括前面的和后面的
$("#two").siblings().css("background-color","#bfa")
});
//(18)add()选择所有的 span 元素和id为two的元素
$("#btn18").click(function(){
// $("span,#two,.mini,#one")
$("span").add("#two").add("#one").css("background-color","#bfa");
});
});
jquery属性操作
不传参数是获取，传递参数是设置
html（） 它可以设置和获取起始标签和结束标签中的内容。跟dom对象的innerHtml属性一样
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type="text/javascript" src="script/jquery-1.7.2.js">script>
<script type="text/javascript">
$(function () {
// alert( $("input[name!='newsletter']").length );
// alert( $("div").has("span").length );
// $("div:first").nextUntil("span").addClass("after");
//alert($("div").add("span").length)
alert($("div").html());
$("div").html("我是div中的标题1
")
});
script>
head>
<body>
<div>我是div标签 <span>我是div标签中的span标签span>div>
body>
html>text（） 它可以设置和获取起始标签和结束标签中的文本。跟dom属性innerText属性一样
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type="text/javascript" src="script/jquery-1.7.2.js">script>
<script type="text/javascript">
$(function () {
alert($("div").text());
$("div").text("我是div中的标题1
")
});
script>
head>
<body>
<div>我是div标签 <span>我是div标签中的span标签span>div>
body>
html>val（） 它可以设置和获取表单项的value属性值。跟dom对象value属性一样
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type="text/javascript" src="script/jquery-1.7.2.js">script>
<script type="text/javascript">
$(function () {
$("button").click(function (){
/*alert($("#username").val());*/
$("#username").val("超级程序员")
})
});
script>
head>
<body>
<div>我是div标签 <span>我是div标签中的span标签span>div>
<input type="text" name="username" id="username">
<button>操作输入框button>
body>
html>val方法同时设置多个表单项的选中状态示例代码
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type="text/javascript" src="script/jquery-1.7.2.js">script>
<script type="text/javascript">
$(function () {
/* $(":radio").val(["radio2"]);//写入表单项选中的value属性值
$(":checked").val(["checkbox1","checkbox2"]);
$("#multip").val(["mul1"]);
$("#single").val(["sin2"]);*/
$(":radio,:checked").val(["radio1","checkbox1"]);
});
script>
head>
<body>
单选：
<input name="radio" type="radio" value="radio1">radio1
<input name="radio" type="radio" value="radio2">radio2
<br>
多选：
<input name="checkbox" type="checkbox" value="checkbox1">checkbox1
<input name="checkbox" type="checkbox" value="checkbox2">checkbox2
<input name="checkbox" type="checkbox" value="checkbox3">checkbox3
body>
<br>
下拉多选：
<select id="multip" multiple="multiple" size="4">
<option value="mul1">mul1option>
<option value="mul2">mul2option>
<option value="mul3">mul3option>
<option value="mul4">mul4option>
select>
<br>
下拉多选：
<select id="single">
<option value="sin1">sin1option>
<option value="sin2">sin2option>
<option value="sin3">sin3option>
select>
html>
当传入一个参数时候表示获取该参数的属性值，当传入两个参数时候一个表示那个参数，一个表示设置该参数值
attr() 可以设置或者获取属性值 不推荐操作checked，readonly，selected，disabled等等
prop() 可以设置和获取属性值 只推荐操作checked，readonly，selected，disabled等等
因为当用attr方法操作checked，readonly，selected，disabled时候如果没有定义这些属性时候会出现undefine用户不太容易明白，但是prop是false更加容易懂
dom对象的增删改
内部插入：
appendTo() a.appendto(b) 把a插入到b子元素末尾，成为最后一个子元素
prependTo() a.prependTo(b) 把a插到b所有子元素前面，成为第一个子元素
外部插入：
insertAfter() a.insertAfter(b) 得到ba
insertBefore() a.insertBefore(b) 得到ab
替换：
replaceWith() a.replaceWith(b) 用b替换掉a
replaceAll() a.replaceAll(b) 用a替换所有b
删除：
remove（） a.remove () 删除a标签
empty（） a.empty() 清空标签中内容
css样式操作
addClass() 添加样式
removeClass() 删除样式
toggleClass() 有就删除，没有就添加样式
offset() 获取和设置元素的坐标
jquery动画
基本动画
show() 将隐藏的元素显示
hide() 将可见的元素隐藏
toggle() 可见就隐藏，不可见就显示
以上动画方法都可以添加参数。
1.第一个参数是动画 执行的时长，以毫秒为单位
2.第二个参数是动画的回调函数（动画完成之后自动调用）
$("#btn1").click(function(){
$("#div1").show(1000,function (){
alert("s")
});
}); 淡入淡出动画
fadeIn() 淡入（慢慢可见）
fadeOut() 淡出（慢慢消失）
fadeTo() 在指定时长内慢慢的将透明度修改到指定的值
fadeToggle() 淡入淡出 切换
jquery事件操作
先执行jquery页面加载完成之后，再执行原生页面加载完成之后。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title heretitle>
<script type="text/javascript" src="../script/jquery-1.7.2.js">script>
<script type="text/javascript">
/*$(document).ready(function (){
})*/
$(function (){
alert("jquery加载");
})
window.onload = function (){
alert("原生jquery");
}
script>
head>
<body>jQuery页面加载完成之后是等到浏览器内核解析完页面标签创建好dom对象之后就会马上执行。
js原生页面加载完成之后是等到浏览器内核解析完页面标签创建好dom对象之后，还要等标签显示时需要的内容加载完成。
jquery和原生js的执行次数
jquery只执行一次
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title heretitle>
<script type="text/javascript" src="../script/jquery-1.7.2.js">script>
<script type="text/javascript">
$(function (){
alert("jquery加载1");
})
$(function (){
alert("jquery加载2");
})
$(function (){
alert("jquery加载3");
})
window.onload = function (){
alert("原生jquery1");
}
window.onload = function (){
alert("原生jquery2");
}
window.onload = function (){
alert("原生jquery3");
}
script>
head>
<body>jQuery 中其他事件处理方法
click() 单击事件
mouseover() 鼠标移入事件
mouseout() 鼠标移出事件
bind() 给元素一次性绑定一个或者多个事件
$(function (){
$(".head").bind("click mouseover mouseout",function (){
console.log("这是bind绑定的click事件");
})
})one() 跟bind一样可以绑定多个单击事件，但是单击事件各自只响应一次。
$(function (){
$(".head").one("click mouseover mouseout",function (){
console.log("这是bind绑定的click事件");
})
})unbind() 解除绑定事件
$(function (){
$(".head").unbind("click");
})live() 也是用来绑定当前事件的
/*$("h5").click(function (){
alert("s");
})*/
$("h5").live("click",function (){
alert("live")
})
$("什么是jQuery?
").appendTo("#panel");
});事件冒泡
当父子元素同时监听同一个事件的时候，当子元素被触发的时候，同一个事件也被传递到了父元素的事件里面去。
如何阻止事件冒泡呢
外层div元素
内层span元素
外层div元素
WWW.HAO123.COM
JavaScript事件对象
事件对象是封装有触发的事件信息的一个JavaScript对象。
我们重点关心的是这个JavaScript的事件对象，以及使用
如何
xml语法
xml version="1.0" encoding="UTF-8" ?> <books>books表示多个图书信息 <book sn="12345567878">book表示一个图书信息，sn属性表示图书序列号 <name>时间简史name>name标签表示书名 <author>霍金author>outer表示作者 <price>75price>price表示图书价格 book> books>
文本区域（CDATA区）
CDATA语法可以告诉xml解析器，我CDATA里面的文本内容，只是纯文本，不需要xml语法解析
语法格式：
<a>a>XML解析技术介绍
xml是可扩展的标记性语言。
DOM4J类库的使用，是第三方技术，就需要这个jar包
import org.dom4j.DocumentException;
import org.dom4j.Element;
import org.dom4j.io.SAXReader;
import org.junit.jupiter.api.Test;
import java.util.List;
public class DOM4jTest {
@Test
public void test() throws DocumentException {
/*首先创建一个SaxReader输入流，去读取xml配置文件，生成document对象*/
SAXReader saxReader = new SAXReader();
Document document = saxReader.read("books.xml");
System.out.println(document);
Element rootElement = document.getRootElement();
List books = rootElement.elements("book");
for (Element book:books){
Element nameElement = book.element("name");
String nametext = nameElement.getText();
System.out.println(nametext);
}
}
}
JSON
1.什么是JSON？
JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。数据交换指的是客户端和服务器之间业务数据的传递
2.JSON的定义？