jQuery基础
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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。