目录
1.内容介绍
1. jQuery介绍； （了解）
2. 使用jQuery； （掌握）
3. jQuery选择器； （掌握）
4. jQuery注册事件； （掌握）
5. jQuery方法； （掌握）
6. 案例：jQuery实现二级联动； （掌握）
2.jQuery介绍
2.1.jQuery的认识
- jQuery是继prototype之后一个优秀的开源的JavaScript代码库（或JavaScript框架），它封装JavaScript常用的功能代码；
- 我们首先来看看jquery的核心特点：
(1)具有独特的链式语法，可以把多个操作写在一行代码里，更加简洁；
(2)拥有大量的选择器，不仅有高效灵活的css选择器，并且可对CSS选择器进行扩展；
(3)拥有便捷的插件扩展机制和丰富的插件（树形菜单、日期控件、图片切换插件、弹出窗口等）；
(4)这个就厉害了，jQuery兼容各种主流浏览器，包括互联网十大垃圾之一IE6，IE6有各种各样的问题（https://blog.csdn.net/zykon/article/details/78520330），如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等，jQuery2.0及后续版本将不再支持IE6/7/8浏览器，最新版本是jQuery3.0 - jQuery的核心思想：（write less，do more）写得更少，做得更多；
2.2.和原生js比较
2.2.1.获取节点
例如：获取input节点：<input id="mytime" value="按钮">
原生js写法：document.getElementById(“mytime”);
jquery写法：$("#mytime") – #mytime代表id选择器
2.2.2.Ajax处理
- 原生js写法：
(1)创建XMLHttpRequest对象
(2)open方法准备请求
(3)监听属性 onreadystatechange
(4)send方法发送请求 - jquery写法：只需要一个方法
$.get(url,{json格式参数},function(data){});
$.post(url,{json格式参数},function(data){});
2.3.其他js库或js框架
****************************番外篇开始*****************************
其实我们除了Jquery这个JS框架，还有很多其他的优秀框架，比如我们现在流行的MVVM架构，当别人问我们，特别是面试的时候，至少要知道下面的一部分名字：
- MVVM是Model-View-ViewModel的缩写，里面比较重要的两个概念：
(1)单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model（eg:js对象）时，View（标签）就会自动更新；
(2)有单向绑定，就有双向绑定。如果用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定，实现了View和Model的自动同步； - 其他js库和js框架：
(1)angular.js：google出品，思想来自flex，IoC， 脏检测，自定义标签，受限于绑定数量，一般不能超过2000个，入门容易上手难，大量避不开的概念；
(2)ember.js：原来是苹果公司的内部项目，使用Object.defineProperties， 体型庞大，MVVM只是其很少一部分；
(3)knockout.js：微软出品，使用函数偷龙转凤，最短编辑长度算法实现DOM的同步，兼容IE6，实现高超，但源码极其难读；
(4)winjs：微软出品，使用Object.defineProperties，一个庞大的UI库；
这一两年冒出来的：
(5)react：facebook出品，带来virtual dom的革命性概念，受限于视图的规模；
(6)rivets：API比较精致；
(7)way：使用定时间同步；
(8)vue：使用Object.defineProperties实现同步，实现精致，但功能薄弱；
(9)regular：最近才冒出来的新东西，网易推出的JS框架，自称AngularJS与React的合体；
**************************番外篇结束****************************
目前比较大热的一些前端技术比如：vue.js、angular.js等
说了那么多理论，我们先来简单感受一下，jquery是一门什么样的技术，它和我们的js，有什么差别
3.jQuery入门
3.1.jQuery版本介绍
1.jQuery是一个js框架，代码本质上就是js代码，使用时需要引入jQuery.js
2.引入jQuery：使用<script>标签
<script type="text/javascript" src="/js/jquery-1.11.2.min.js"></script>
3.2.jQuery编程步骤
- 使用
<script>标签引入jquery.js；
(1)注：Jquery1.x支持ie6、7、8，但性能上赶不上Jquery2.x，所以如果使用1.x版本开发的项目，要注意程序的升级。导入开发版的js，方便查看源码；
(2)使用<script>标签准备写jQuery代码；
(3)注：使用<script>双标记引入jquery.js，<script>要么用于引入外部js文件，要么用于编写js/jQuery代码，不能同时干两件事； - 编写jQuery入口函数即页面加载事件；
(1)注：$(function(){})比window.onload加载快。多个$(function(){})中的代码都会执行，多个window.onload只会执行最后一个； - 使用选择器定位到需要操作的节点；
(1)var$obj =$(“body”);
(2)注：$()：$函数，body：选择器（元素选择器） - 调用jquery的方法进行后续操作
3.3.页面加载事件
//整个页面加载完毕，包括图片加载完毕之后才执行{}里面的代码，只执行一次
window.onload = function(){ }
//整个页面的标签和属性读取完毕之后就执行{}里面的代码，执行多次，顺序执行
ready()方法
下图为例进行解释：
3.4.jQuery===$
- 在Js中，
===先比较类型，再比较值，而jQuery===$返回值为true； - 所以使用$的地方就可以使用jQuery，但是必须jQuery严格区分大小写，写成jquery都不行；
- 之所以这样做得原因是因为其他的js框架也可能使用$符号，那么这时就可以使用jQuery来区分；
3.5.DOM对象与jQuery对象转换
Dom对象：即我们用传统的方法（javascript）获得的节点对象：
传统方法有：getElementById(),getElementsByName(),getElementsByTagName()；
JQeury对象：通过选择器和$函数获取的节点对象。实质是通过jQuery包装DOM对象后产生的对象；
例子：<div id="d1"></div>
Dom对象：var obj = document.getElementById("d1");
jQuery对象：var $obj = $("#d1");
注：一般情况下为了避免dom对象与jquery对象混淆，可以将jquery对象的变量名用加上$前缀；
1.将Dom对象转换成jquery对象：$(dom对象)
(1) 代码：var $obj = $(obj);
2.将jquery对象转换成dom对象：通过jquery的方法get(0)
(1) 代码：var obj = $obj.get(0); 或var obj = $obj[0,1,2…];
注：dom对象与jquery对象的方法和属性不能混淆，jqeury对象不能调用dom对象的属性和方法；
4.jQuery选择器
引入：想要操作某一个节点，就需要先定位某一个节点，jQuery提供了非常强大的选择器机制，不但可以使用CSS选择器，而且还进行了大量扩展，让使用者有更多选择；
4.1.基本选择器
| - | - |
|---|---|
| Id选择器： | id=“d1” #d1 |
| 类/class选择器: | class=“c1” .c1 |
| 元素选择器： | p p |
| *选择器： | *代表所有/一般不使用 |
| 选择器分组/分组选择器： | #d1, .c1, p |
4.2.层次选择器（有上下级关系）
4.2.1.祖先 后代（空格）
在给定的祖先元素下匹配所有的后代元素：
4.2.2.父亲 儿子（>）
在给定的父元素下匹配所有的子元素
4.2.3.元素 紧接下一个元素（+）
匹配所有紧接在 prev 元素后的 next 元素
4.2.4.~
5.jQuery事件绑定
Js事件绑定【事件注册】方式回顾：
<a href="javascript:void(0);" onclick="functionName();"/>–>简单，支持所有浏览器，缺点是结构与事件没有分开，耦合度高，只能添加一个事件，添加之后，事件不能取消；- document.getElementById(“id”).οnclick=function(){ }–>简单，支持所有浏览器，只能添加一个事件，添加之后，事件可以取消；
jQuery事件绑定【事件注册】方式：
$obj.事件名称(function(){
});
$obj.on(“事件名称”, function(){
});
$obj.bind(“事件名称”, function(){
});
jQuery取消事件方法：
$obj.off(“事件名称”);
$obj.unbind(“事件名称”);
6.jQuery的DOM操作
6.1.文本操作
6.1.1.API
html()
设置或者获取双标签中的的元素
text()
设置或者获取双标签中的纯文本
val()
设置和获取有value属性的标签的value属性值
有value属性值的元素【大多数单标签都有】：input【按钮，文本框等】、option等
没有value属性值的元素【大多数双标签没有】：div、hn、span、a、p等
6.1.2.案例演示
案例：当鼠标进入div显示红色的"有敌人潜入"，鼠标移开div还原
<div style="height: 150px;width: 150px;background-color: green" id="d1"></div>
<script type="text/javascript" src="/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#d1").mouseover(function(){
$(this).html("<span style='color:red'>有敌军潜入</span>");
});
$("#d1").mouseout(function(){
$(this).text("");
});
});
</script>
6.2.属性和样式操作
6.2.1.API
操作属性：attr()，data()，removeAttr()
操作样式：css()，addClass()，removeClass()
6.2.2.案例演示
<a href="javascript:;">File</a>
<a href="javascript:;">Edit</a>
<script type="text/javascript" src="/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(function(){
var $as = $("a");//jQuery对象
for(var i = 0 ; i < $as.length ; i++){
var a = $as[i];//dom对象
//$(a) 将dom对象转换成jQuery对象，才能使用方法
$(a).mouseover(function(){
$(this).css('backgroundColor','skyblue');
});
$(a).mouseout(function(){
$(this).css('backgroundColor','white');
});
$(a).click(function(){
alert("当前元素的跳转地址为：" + $(this).attr('href'));
$(this).addClass('c1');
});
}
});
</script>
6.2.3.attr()和data()区别
1.在jquery里面获取属性有两种：attr()，data()
2.HTML5增加了一项新功能是：自定义数据属性，也就是data-*自定义属性；
3.获取值：
(1) 使用data获取属性值有个前提，属性名必须是data-xxx。使用data()获取属性的语法格式：jquery对象.data(“xxx”)
(2) 使用attr()获取属性的语法格式：jquery对象.attr(“属性名”)；
<input type="text" id="d1"
data-person='{"id":1,"name":"tom","address":"四川成都"}'
data-name="赵子龙"
data-age="22"
data-sex="true" />
$(function(){
console.debug($('#d1').attr('data-person'));
console.debug($('#d1').attr('data-name'));
console.debug($('#d1').attr('data-age'));
console.debug($('#d1').attr('data-sex'));//获取出来都是字符串
console.debug("====================================");
//获取出来出来的值，会自动转换成相应的类型。能转就转，不能转就以字符串的形式存在
console.debug($('#d1').data('person'));
console.debug($('#d1').data('name'));
console.debug($('#d1').data('age'));
console.debug($('#d1').data('sex'));
});
6.3.元素操作
6.3.1.API
添加：append()
删除：remove():清空后当前本身元素也会移除掉 empty():清空内容但不移除本身元素
6.3.2.案例演示
案例1：参考课件resources中的案例【1_checkbox.html】
案例2：参考课件resources中的案例【2_user.html】
7.jQuery遍历
场景：例如有多个input按钮，获取每个按钮的value值
第一种：传统的遍历方式：var $obj = $("input:button");
for(var i = 0 ; i < $obj.length ; i++){
alert($($obj[i]).val());//注意$obj[i]是一个dom对象
}
第二种：jQuery提供的each函数
//$obj：jquery集合对象，index遍历元素的下标（从0开始），obj表示每一个节点
$obj.each(function(index , obj){
alert($(obj).val());
});
8.jQuery发异步请求
8.1.API
$.get("url",data,callback,type);
$.post("url",data,callback,type);
url：表示请求
data：请求参数，格式{key1:value1,key2:value2}
callback：回调函数function(data){}，其中data表示服务器返回的数据
type：指定服务器返回数据的类型：
如果是字符串，基本值用text
如果是对象，或者集合用json，前台接收的直接就是一个json对象，可以直接使用
$.ajax({
url: "emp/list", //请求地址
type: "GET", //请求方式
data: "eid=1&ename=tom", //请求参数
success: function (result) { //请求成功后的回调函数，result是服务器返回的数据
},
async: true, //默认异步，可以不写，写成false，就是同步操作
dataType: "json" //如果是json，服务器返回值就是json对象，直接使用
//如果不指定dataType，就是普通文本
});
8.2.案例演示：jQuery实现二级联动菜单
8.2.1.前台html代码
省:
<select id="provinceSelect">
<option>--请选择--</option>
</select>
市:
<select id="citySelect">
<option>--请选择--</option>
</select>
8.2.2.前台Js代码
//加载省的方法
$.post("province",function(data){
$.each(data,function(i,n){
$('#provinceSelect').append('<option value="'+n.id+'">'+n.name+'</option>');
});
},'json');
//加载市的方法
$('#provinceSelect').change(function(){
//初始化市的数据，将之前加载的数据初始化
$('#citySelect').html("<option>--请选择--</option>");
//动态获取省的id值
var id = $(this).val();
//根据id值发送post请求去加载相应省的所有市的数据
$.post('city',{'id':id},function(data){
$.each(data,function(i,n){
$('#citySelect').append('<option value="'+n.id+'">'+n.name+'</option>');
});
},'json');
});
8.2.3.部分后台代码
@RequestMapping("/city")
@ResponseBody
private List<City> getCity(Integer id){
List<City> citys = City.getCityByProvinceId(id);
return citys;
}
@RequestMapping("/province")
@ResponseBody
private List<Province> getProvince(){
//获取所有的省
List<Province> allProvince = Province.getAllProvince();
return allProvince;
}
注意：需要导入jackson的jar包；
9.课程总结
9.1.重点
1.jQuery选择器；
2.jQuery的方法；
3.jQuery发送异步请求；
9.2.难点
1.jQuery版本二级联动；
9.3.如何掌握
1.查看API文档；
2.独立完成课堂和课后练习；
9.4.排错技巧
1.alert，debug调式；
2.浏览器控制台；
10.常见问题
11.课后练习
1.课堂代码1-2遍；
12.面试题
1.jQuery的加载机制$(function(){})和window.onload有什么区别？
13.扩展知识或课外阅读推荐（可选）
13.1.扩展知识
13.2.课外阅读
jQuery 3.0十大新特性：http://www.jb51.net/article/87998.htm
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
