主流方式：
技术栈 JavaScript 形成交互jQuery 封装JavaScript，代码更加简洁高效ajax 异步请求json 数据传输Web中间件(tomcat) 处理请求和响应mysql数据库 存取数据 执行过程用户页面中触发ajax请求，访问后端服务器，Web中间件拦截用户请求，转发后端程序进行数据处理，一般还需访问数据库，然后逐层返回。数据库返回数据处理服务，数据处理服务返回Web中间件，Web中间件返回ajax调用，将数据封装到返回的js对象中，目前主流返回数据为json字符串。在回调callback的方法中解析json中的数据，最终回显到页面上。通常我们使用jquery封装过的ajax，写法更加简洁灵活。
jQuery简介 什么是jQueryjQuery是一门轻量的、免费开源的JS函数库，主要作用是用于简化JS代码
轻量的：代码或项目对该技术的依赖程度，依赖程度越低，这个技术越轻，反之，依赖程度越高，这个技术越重。推荐使用轻量级的技术框架
jQuery的核心思想："写的更少，但做的更多"
通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行" *** 作"（actions）。
jQuery** 库包含以下功能：**
HTML 元素快速选取(给予css选择器,方便快速查询DOM文档中的元素)HTML 元素 *** 作CSS *** 作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAX jQuery的语法jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些 *** 作。
基础语法是：$(selector).action()
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
1,简化了js的写法，用$替代了document.getXxx()
2,可以像CSS选择器一样非常方便的获取元素
3,可以通过修改css样式控制页面的效果
var ele = document.getElementById("username"); //js
var ele = $("#username"); // jQuery
var ele = document.getElementsByTagName("p"); //js
var ele = $("p"); //jQuery
var ele = document.getElementsByName("username"); //js
var ele = $('input[name="username"]'); // jQuery
var ele = document.getElementsByClassName("info"); //js
var ele = $(".info"); // jQuery
$("div").css("background", "red");
$("div").css({
"background" : "blue",
"border" : "2px solid red",
"font-size" : "30px"
});
jQuery其实就是一个JS文件,如需使用 jQuery,需要下载，然后使用 HTML 的script标签引用它,应该位于页面的head 部分。
<!-- 引入jQuery的函数库文件 -->
<script src="jquery.min.js"></script>
或者：
<script src="jquery.js"></script>
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行 *** 作。如果在文档没有完全加载之前就运行函数， *** 作可能失败。
测试<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq</title>
<!-- 引入jQuery文件 -->
<script src="jquery-1.8.3.min.js"></script>
<!-- 嵌入js代码 -->
<script>
// 方式1:还没加载到h1元素,a是null,调用null的资源f12时会出问题
// var a = document.getElementById("p1");
// alert(a); //null
// alert(a.innerHTML);
// 方式2: 使用jQuery的文档就绪函数,整个DOM都加载完了才执行
//jQuery语法:$(选择器).action{ } ;
$(document).ready(function(){
var a = document.getElementById("p1");
alert(a.innerHTML);
});
// 方式3: 简写
$(function(){
var a = document.getElementById("p1");
alert(a.innerHTML);
});
</script>
</head>
<body>
<h1 id="p1">文档就绪</h1>
</body>
</html>
什么时候该使用文档就绪事件函数？
如果在获取元素时，获取元素的代码执行的时机（时间）比元素本身加载的时间还要早，如果元素还没有加载到就获取，必然是获取不到的！
将获取元素的代码放在文档就绪事件函数中，等浏览器加载完整个网页后，文档就绪事件函数才会执行，此时所有的元素都被加载过了，再获取任何元素都能获取到！
jQuery选择器jQuery 选择器允许您对 HTML 元素组或单个元素进行 *** 作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中选择器语法：$()
基本选择器元素选择器:
$("div") -- 选中所有的div元素
$("span") -- 选中所有的span元素
id 选择器
$("#one") -- 选中id为one的元素
$("p#demo") -- 选取所有 id="demo" 的p元素
class 选择器
$(".mini") -- 选中所有class值为mini的元素
$(".test") -- 选中所有class值为test的元素
属性选择器
$("[href]") -- 选取所有带有 href 属性的元素
$("[href='#']") -- 选取所有带有 href 值等于 "#" 的元素
需求:点击按钮,隐藏段落内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例</title>
<!-- 引入jQuery文件 -->
<script src="jquery-1.8.3.min.js"></script>
<!-- 嵌入js代码 -->
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>
需求:点击按钮,隐藏指定id的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例</title>
<!-- 引入jQuery文件 -->
<script src="jquery-1.8.3.min.js"></script>
<!-- 嵌入js代码 -->
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>
</body>
</html>
需求:点击按钮,隐藏指定class的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例</title>
<!-- 引入jQuery文件 -->
<script src="jquery-1.8.3.min.js"></script>
<!-- 嵌入js代码 -->
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body>
</html>
$("div span") -- 选中所有div元素下的所有span元素
$("#one div") -- 选中id为one的元素下的所有div元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例</title>
<!-- 引入jQuery文件 -->
<script src="jquery-1.8.3.min.js"></script>
<!-- 嵌入js代码 -->
<script>
$(function(){
$("button").click(function(){
// 层级选择器,选中div下的span,隐藏
$("div span").hide();
})
$("button").click(function(){
//层级选择器,选中id=one下的div,隐藏
$("#one div").hide();
})
});
</script>
</head>
<body>
<button>点我</button>
<span id="one">
<div>我是div1</div>
<div>我是div2</div>
</span>
<div>
<a href="#">链接</a>
<span>我是span1</span>
<span>我是span2</span>
</div>
</body>
</html>
(1)选中第一个div元素
$("div:first")
$("div:eq(0)")
$("div").eq(0)
(2)选中最后一个div元素
$("div:last")
$("div:eq(-1)")
$("div").eq(-1)
//点按钮,隐藏按钮自己
$(document).ready(function(){
$("button").click(function(){
$(this).hide();
});
});
//点按钮,隐藏第一个div
$(function(){
$("button").click(function(){
// 选中第一个div
$("div:first").hide();
})
});
过滤选择器
$("li:first") //第一个li
$("li:last") //最后一个li
$("li:even") //挑选下标为偶数的li
$("li:odd") //挑选下标为奇数的li
$("li:eq(4)") //下标等于 4 的li(第五个 li 元素)
$("li:gt(2)") //下标大于 2 的li
$("li:lt(2)") //下标小于 2 的li
内容过滤选择器
$("div:contains('Runob')") // 包含 Runob文本的元素
$("td:empty") //不包含子元素或者文本的空元素
可见性过滤选择器
$("li:hidden") //匹配所有不可见元素，或type为hidden的元素
$("li:visible") //匹配所有可见元素
属性过滤选择器
$("div[id]") //所有含有 id 属性的 div 元素
$("div[id='123']") // id属性值为123的div 元素
$("div[id!='123']") // id属性值不等于123的div 元素
状态过滤选择器
$("input:enabled") // 匹配可用的 input
$("input:disabled") // 匹配不可用的 input
$("input:checked") // 匹配选中的 input
$("option:selected") // 匹配选中的 option
表单选择器
$(":input") //匹配所有 input, textarea, select 和 button 元素
$(":text") //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password") //所有密码框
$(":radio") //所有单选按钮
$(":checkbox") //所有复选框
$(":submit") //所有提交按钮
$(":reset") //所有重置按钮
$(":button") //所有button按钮
$(":file") //所有文件域
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
常见的DOM事件有很多:
事件的语法页面中指定一个点击事件：
$("p").click();
$("p").click(function(){ // 事件触发后执行的代码!! });
click() -- 单击事件
$("p").click( function(){ $(this).hide(); });
dblclick() -- 双击事件
$("p").dblclick(function(){ $(this).hide(); });
mouseenter() -- 鼠标指针穿过元素
$("#p1").mouseenter(function(){ alert('鼠标移到了 id="p1" 的元素上!'); });
mouseleave() -- 鼠标指针离开元素
$("#p1").mouseleave(function(){ alert("再见，您的鼠标离开了该段落。"); });
hover() -- 光标悬停事件
$("#p1").hover(
function(){ alert("你进入了 p1!"); }, //当鼠标移动到元素上时触发
function(){ alert("拜拜! 现在你离开了 p1!"); //当鼠标移出这个元素时触发
});
可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素
$("#hide").click(function(){ $("p").hide(); });
$("#show").click(function(){ $("p").show(); });
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
// 鼠标指针穿过元素会触发
$("button").mouseenter(function(){
alert("您经过了button");
})
// 鼠标指针离开元素会触发
$("div").mouseover(function(){
alert("您离开了div..");
})
})
</script>
</head>
<body>
<button ondblclick="alert(1);">点我</button>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>
Ajax 即Asynchronous Javascript And XML( 异步的 )
Ajax并不是一种新的编程语言，而是多种技术的综合应用
Ajax是 客户端 的技术，它可以实现 局部刷新 网页
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
原理AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
格式七个参数：
$.ajax({
type: //要使用的请求方式
url: //要使用的请求路径
contentType: //要传递的数据类型
data: //要拼接的数据
dataType: //数据类型
success: function(data){ //成功时的方案
},
error: function(data){ //失败时的方案
}
})
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(function(){//文档就绪事件
$.ajax({ //发起Ajax请求数据
type: "POST",
url: "http://p.3.cn/prices/mgets",
contentType: "application/json;charset=utf-8",
data: { //拼接的参数
"skuIds": "J_100003717483"
},
dataType: "jsonp",
success: function(data) { //返回的结果
//[{"cbf":"0","id":"J_100003717483","m":"10000.00","op":"2499.00","p":"2099.00"}]
$('#p1').text("返回数据：" + JSON.stringify(data));
$('#p2').text("商品编号：" + data[0].id);
$('#p3').text("商品价格： " + data[0].op);
},
error: function(data) {
alert("提交失败" + JSON.stringify(data));
}
});
});
</script>
</head>
<body>
<p id="p1">这是p1</p>
<p id="p2">这是p2</p>
<p id="p3">这是p3</p>
</body>
</html>
json字符串: { "id":"100","name":"tony","salary":"30000" }
js对象：{ "id":100,"name":"tony","salary":30000 }
可以看出js对象中value值如果是整数，小数，无需加双引号
含义不同，json是一种数据格式，js表示类的实例传输：json用于跨平台、跨网络传输，速度快；js不能传输展现：json键值对方式，值是字符串不能是对象方法函数；js值不一定加双引号，值可以是对象、函数、字符串等转换：JSON.parse(jsonStr) JSON已经作为浏览器内置对象，eval(json)；JSON.stringify(obj)欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）