javaweb实训第二天上午——jQuery基础

Posted dearQiHao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javaweb实训第二天上午——jQuery基础相关的知识,希望对你有一定的参考价值。

课程介绍

  1. jQuery介绍; (了解)
  2. 使用jQuery; (掌握)
  3. jQuery选择器; (掌握)
  4. jQuery注册事件; (掌握)
  5. jQuery方法; (掌握)
  6. 案例:jQuery实现二级联动; -->有点难度

1.jQuery介绍

1.1.jQuery的认识

1.jQuery是继prototype之后一个优秀的开源的javascript代码库(或JavaScript框架),它封装JavaScript常用的功能代码;
2.我们首先来看看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

3.jQuery的核心思想:(write less,do more)写得更少,做得更多;

1.2.和原生js比较

1.2.1.获取结点

例如:获取input节点:

原生js写法:document.getElementById(“mytime”);
jquery写法:$("#mytime") – #mytime代表id选择器

1.2.2.Ajax处理

原生js写法

(1)创建XMLHttpRequest对象
(2)open方法准备请求
(3)监听属性 onreadystatechange
(4)send方法发送请求

jquery写法:只需要一个方法

$.get(url,{json格式参数},function(data){});
$.post(url,{json格式参数},function(data){});

1.3.1.3.其他js库或js框架


番外篇开始

其实我们除了Jquery这个JS框架,还有很多其他的优秀框架,比如我们现在流行的MVVM架构,当别人问我们,特别是面试的时候,至少要知道下面的一部分名字:

1.MVVM是Model-View-ViewModel的缩写,里面比较重要的两个概念:

(1)单向绑定非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model(eg:js对象)时,View(标签)就会自动更新;

(2)有单向绑定,就有双向绑定。如果用户更新了View,Model的数据也自动被更新了,这种情况就是双向绑定,实现了View和Model的自动同步;

2.其他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,有什么差别

2.使用jQuery

2.1.jQuery版本介绍

1.jQuery是一个js框架,代码本质上就是js代码,使用时需要需要引入jQuery.js
在这里插入图片描述
2.引人jQuery:使用

<script type="text/javascript" src="/js/jquery-1.11.2.min.js"></script>

2.2.jQuery编程步骤

1.使用

(1)注:Jquery1.x支持ie6、7、8,但性能上赶不上Jquery2.x,所以如果使用1.x版本开发的项目,要注意程序的升级。导入开发版的js,方便查看源码;
(2)使用<script>标签准备写jQuery代码;
(3)注:使用<script>双标记引入jquery.js,<script>要么用于引入外部js文件,要么用于编写js/jQuery代码,不能同时干两件事;

2.编写jQuery入口函数即页面加载事件;
(1)注:$(function(){})window.onload加载快。多个$(function(){})中的代码都会执行,多个window.onload只会执行最后一个;

3.使用选择器定位到需要操作的节点;

(1)var $obj = $("body");
(2)注:$()$函数,body:选择器(元素选择器)

4.调用jquery的方法进行后续操作

2.3.页面加载事件

在这里插入图片描述
window.onload = function(){} // 整个页面加载完毕之后再执行{}里面的代码
ready()方法 // 整个页面的元素读取完毕之后就执行{}里面的代码
下图为例进行解释:
在这里插入图片描述

2.4.jQuery===$

1.在Js中,===先比较类型,再比较值,而jQuery===$返回值为true;
2.所以使用$的地方就可以使用jQuery,但是必须jQuery严格区分大小写,写成jquery都不行;
3.之所以这样做得原因是因为其他的js框架也可能使用 $ 符号,那么这时就可以使用jQuery来区分;

2.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对象的属性和方法;

3.jQuery选择器

引入:想要操作某一个节点,就需要先定位某一个节点,jQuery提供了非常强大的选择器机制,不但可以使用CSS选择器,而且还进行了大量扩展,让使用者有更多选择;

3.1.基本选择器

Id选择器:				id="d1"  		#d1
类/class选择器:			class="c1" 	.c1
元素选择器:				p				p
*选择器:				*代表所有/一般不使用
选择器分组/分组选择器:		#d1,.c1,p

3.2.层次选择器(有上下级关系)

3.2.1.祖先 后代(空格)

在给定的祖先元素下匹配所有的后代元素:
在这里插入图片描述

3.2.2.父亲 儿子(>)

在给定的父元素下匹配所有的子元素

在这里插入图片描述

3.2.3.元素 紧接下一个元素(+)

匹配所有紧接在 prev 元素后的 next 元素
在这里插入图片描述

3.2.4.~

在这里插入图片描述

4.jQuery注册事件

Js注册事件方法:
1.<a href=”javascript:void(0);” onclick=”functionName();”/> -->简单,支持所有浏览器,缺点是结构与事件没有分开,耦合度高,只能添加一个事件,添加之后,事件不能取消;
2.Document.getElementById(“id”).οnclick=function(){}–>简单,支持所有浏览器,只能添加一个事件,添加之后,事件可以取消;
3.元素.addEventListener()/元素.attachEvent(IE浏览器)–>麻烦,需要自己做兼容,但是功能最为强大;

jQuery注册事件方法:

$obj.事件名称(function () {
});
$obj.on("事件名称", function () {
});
$obj.bind("事件名称", function () {
});
// jQuery取消事件方法:
$obj.off("事件名称");
$obj.unbind("事件名称");

5.jQuery的方法

5.1.jQuery操作html/文本/value属性值

html(),text(),val()

5.2.jQuery操作元素或节点的方法

添加:append(),appendTo(),prepend(),after(),before()
删除:remove(),empty()
复制:clone(true)

5.3.jQuery操作dom的属性和样式

操作属性:attr(),removeAttr(),data()
操作样式:css(),addClass(),removeClass()

5.4.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());
});

5.5.jQuery发异步请求

$.get("url",data,callback,type);
$.post("url",data,callback,type);
url:表示请求
data:请求参数,格式{key1:value1,key2:value2}
callback:回调函数function(data){},其他data表示服务器返回的数据
type:指定服务器返回数据的类型,如果是字符串,基本值用text,如果是对象,或者集合用json

6.Json

6.1.json概述

思考1:js发送异步请求时接收后台的数据有哪些?

text文本(字符串,数值型的数据,布尔型的数据),xml格式的数据
xhr.responseText,xhr,responseXml

思考2:那么js能接受一个对象吗?

可以,间接接收(不能直接接收一个对象,而是先接收字符串,然后转换成对象),通过json
1.Json(javaScript Object notation):js对象格式,和xml一样,都是一种简单的数据交换格式;
2.json相对于xml,文档更小,属于轻量级的数据交换格式
用xml表示一个对象:

<person id=”1”>
<name>tom</name>
<age>20</age>
<salary>5000.0</salary>
</person>

用JS的json表示一个对象:

{‘id’:1,”name”:”tom”,”salary”:5000.0}
复杂对象
class Earth{
Person person;
}
class Person{
String name;
int age;
}

6.2.Json语法【掌握】

6.2.1.如何用json表示一个对象

使用场景:当服务器端要发送Java对象到客户端时
简单对象:

var obj={"name":"tom","age":34};
   	alert(obj.name);

复杂对象:

var obj={"name":"vikey","address":{"city":"成都","street":"九眼桥","room":"215"}};
    alert(obj.address.street);

6.2.2.如何用json表示一个数组

使用场景:当服务器端要发送一个集合对象到客户端时
语法:
var obj = [value,value,value]
value可以是object,数组类型,简单数据类型(string,number,boolean等),json对象
例子:

var obj = [
	{‘id’:1,”name”:”tom1”,”salary”:5000.0},
	{‘id’:2,”name”:”tom2”,”salary”:6000.0},
	{‘id’:3,”name”:”tom3”,”salary”:7000.0}
]
alert(obj.length);
alert(obj[1].name);

遍历:
注:json中数据的属性名必须用双引号或单引号引起来,属性值如果是字符型必须引起来

6.3.json字符串和json对象

json字符串:
	var obj ={“id”:1,”name”:”tom”,”salary”:5000.0};
	alert(obj.id);	---X
Json对象(js对象):
	var obj = {“id”:1,”name”:”tom”,”salary”:5000.0};
	alert(obj.id);		//1
	alert(obj.name);	//tom

6.4.数据交换【掌握】

数据库返回来的是一个Java对象,不能直接把Java对象发送到客户端

6.4.1.Java对象转成一个json字符串

1.导入包json-lib-2.2.3-jdk15.jar(连同其他的包)
2.Java服务器端进行数据格式转换

JSONObject obj = JSONObject.fromObject(s); String jsonStr = obj.toString();	//针对java对象
JSONArray obj = JSONArray.fromObject(stocks);String jsonStr = obj.toString();	//针对集合对象

6.4.2.json字符串转成json对象/js对象

JS原生的方法进行转换:

var jsonObj1 = eval("(" + obj +")");

或者:var jsonObj2 = JSON.parse(obj);
注意坑:使用JSON.parse这种方式对json对象中的格式有要求:json对象中的key,value如果要使用引号,必须使用双引号,单号号报错
三部曲
创建对象
给对象添加属性和方法
操作对象的属性和方法

7.创建对象

var obj = new ();
json: var json={};

7.1.添加属性/方法

    obj.name = "张三";
    obj["age"] = 18;//使用[],那么需要使用引号
    obj.say = function(){
          console.debug(this.name);
    } 

7.2.删除属性

    delete obj.name;
    delete obj["age"];

8.案例:jQuery实现二级联动菜单

html:

省:
<select id="provinceSelect">
	<option>--请选择--</option>
</select> 
市:
<select id="citySelect">
	<option>--请选择--</option>
</select>

Js代码:

//加载省的方法
$.post("province",{'log':'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,'log':'city'},function(data){
		$.each(data,function(i,n){
			$('#citySelect').append('<option value="'+n.id+'">'+n.name+'</option>');
		});
},'json');
});

Servlet(部分后台代码):

private void doCity(HttpServletRequest req, HttpServletResponse resp) throws IOException {
	long id = Long.parseLong(req.getParameter("id"));
	List<City> citys = City.getCityByProvinceId(id);
	JSONArray fromObject = JSONArray.fromObject(citys);
	resp.setContentType("text/html;charset=UTF-8");
	resp.getWriter().println(fromObject.toString());	
}

private void doProvince(HttpServletRequest req, HttpServletResponse resp) throws IOException {
	//获取所有的省
	List<Province> allProvince = Province.getAllProvince();
	//将数据转换成json字符串
	JSONArray fromObject = JSONArray.fromObject(allProvince);
	//解决中文乱码问题
	resp.setContentType("text/html;charset=UTF-8");
	//响应到页面
	resp.getWriter().println(fromObject.toString());
}

注:
1.使用Servlet原生的方式需要导入包json-lib-2.2.3-jdk15.jar(连同其他的包);
2.使用SpringMvc的@ResponseBody注解更加方便,但是需要SpringMvc的环境,而且需要导入jackson的jar包;

在这里插入图片描述

9.课程总结

9.1.重点

1.jQuery选择器;
2.jQuery的方法;
3.jQuery发送Ajax请求;

9.2.难点

1.jQuery版本二级联动;

9.3.如何掌握

1.查看API文档;
2.独立完成课堂和课后练习;

9.4.排错技巧

1.alert,debug, log调式;
2.浏览器控制台;

10.课后练习

必做题:
1.jQuery版本二级联动 ;
2.jQuery的方法;
3.jQuery事件绑定;
4.jQuery选择器有哪些 ;

10.1.课外阅读

jQuery 3.0十大新特性

以上是关于javaweb实训第二天上午——jQuery基础的主要内容,如果未能解决你的问题,请参考以下文章

javaweb实训第二天上午——jQuery笔记

javaweb实训第五天上午——Spring基础

javaweb实训第四天上午——MySQL基础

javaweb实训第三天上午——Servlet

javaweb实训第四天上午——JDBC入门

javaweb实训第一天上午——HTML和CSS