Java Web Day06_JQuery基础

课程安排

jQuery是什么

框架（framework）是一个框子------指其约束性，也是一个架子------指其支撑性。是一个基本概念上的结构，用于去解决或者处理复杂的问题。

jQuery是目前使用最广泛的javascript函数库，极大地简化了javascript编程，通过它能"写的更少，但做得更多"。可以方便地处理HTML DOM、事件处理Events、高效灵活的操作CSS、实现动画效果，并且方便地为网站提供Ajax交互。

同类型的js函数库还有YUI，Ext-js，dojo，prototype，zeptojs等

全世界排名前100万的网站，一半以上使用jQuery，它已成为了前端js操作的一个标准，微软，google，腾讯等公司均在项目中使用jQuery，大量国内互联网公司也在他们的产品中已经使用jQuery。

如何学习jQuery

jQuery最有特色的语法特点就是具有与CSS语法相似的选择器，并且支持CSS1到CSS3的几乎所有的选择器并兼容所有的主流浏览器，这为快速访问DOM提供了方便。

一份jQuery API文档
jQuery的文档非常丰富，因为其轻量级的特性，文档并不复杂，文档中有每一个api的用法，有完整的实例代码。
掌握jQuery操作的基本语法规律
在项目中参照api文档，孰能生巧。

如何在项目中使用jQuery

1、从jquery.com下载的jquery.js文件（最新的jquery版本V1.1.1或V2.1.1或V3）。
2、百度静态资源公共库：CDN网址：http://cdn.code.baidu.com jQuery的文件规则，如"jquery-1.4.1.js"，其中1.4.1是js文件的版本的版本号。
3、在开发web程序前，需要在html页面引入包含的jquery函数库，如下面的代码：

html 复制代码

<script src="js/jquery-2.0.3.min.js"></script>
<script>
   --jQuery写在这里
</script>

jQuery构造函数

jQuery构造函数返回一个jQuery对象

例如下边的一些构造函数：

 jQuery(experssion,context)

 jQuery(html)

 jQuery(elements)

 jQuery(fn)

在编码过程中，jQuery可以所写成，但是在一些应用中，但是在一些应用中，但是在一些应用中可能会产生冲突而无法正常使用，此时将不能使用缩写形式。

jQuery语法及如何获取页面元素

通过jQuery，您可以选取（查询，query）HTML元素，并对它们执行"操作"（actions）
jQuery选择器基于元素的id、类、类型、属性、属性值等"查找"（或选择）HTML元素。它基于已经存在的CSS选择器，除此之外，它还有一些自定义的选择器。
jQuery中所有的选择器都是以美元符号开头：$("")。

基础语法：

html 复制代码

$(selector).action()

示例：

html 复制代码

$("p").hide() -- 隐藏所有<p>元素

jquery就是对javascript的一个扩展，封装，就是让javascript更好用，更简单。

例如：原生的javascript中获取DOM元素

document.getElementById("myid");

jquery中：

html 复制代码

 $("#myid")

jQuery选择器分类

jQuery基本选择器

html 复制代码

1、$("#id")： 根据给定的id匹配一个元素
2、$(".myclass")：根据给定的类名匹配元素
3、$("*")：选取html页面中所有的元素
4、$("span")：选取html页面中所有的span元素
5、$("div,span,.myclass")：选取所有的<div> 、<span>、<myclass>一组元素

jQuery层次选择器

html 复制代码

1、$("div span")：选取<div>下面的所有<span>元素，包括后代元素
2、$("div > span")：选取<div>元素下的所有<span> 子元素，不包括后代元素
3、$(".one + div")：选取class为one的下一个<div>兄弟元素，即紧接在.one元素后的div元素。
等价于：$(".one").next("div");
4、$("#one ~ div")：选取id为one的元素之后的所有同辈<div>兄弟元素
等价于：$(".one").nextAll("div");
siblings()方法，与前后位置无关，只要同辈元素节点就匹配。如：$(".one"). siblings()

jQuery属性选择器

html 复制代码

$("input[name='text']")，获取所有文本框输入值
$("#myselect option:selected")，获取列表框中选中的option
$("input[name='checkbox']:checked")，获取所有选中的复选框
$("#mytable tr:odd")，取mytable中的偶数行
$("#mytable tr:even")，取mytable中的奇数行
$("#mytable tr:first")，取mytable中的第一行

了解为什么要对DOM进行操作

使网页具备动态化的效果，而且使用起来非常简单。jQuery 中非常重要的部分，就是操作 DOM 的能力。

DOM操作的分类

1、 DOM Core

DOM Core是用来处理任何一种标记语言编写出来的文档。例如：XML

2、 HTML-DOM

HTML-DOM是专门用于表述HTML标记语言而编写出来的文档。它提供了一些更简单的记号来描述各种HTML元素的属性

3、 CSS-DOM

CSS-DOM是针对CSS来操作，CSS-DOM技术主要作用是获取和设置style对象的各种属性。

掌握jQuery对DOM操作的语法

jQuery查找元素节点

1、查找元素节点，基本上能熟练运用jQuery中的选择器就好了，例如：

html 复制代码

$("ul li:eq(1)").css("background","green");

2、查找属性节点

熟练掌握jQuery中属性过滤选择器的运用

例如：$("ul li[title=lanqiu]").css("background","green");

获取属性和设置属性值

jQuery设置内容和属性

html()方法 ，相当于javascript里的innerHTML(替换元素中的内容)
例如：

html 复制代码

   1、
<div><b>我爱jQuery</b></div>
var a = $("div").html(); //获取div中的html代码
   2、
<div>我爱jQuery</div>
$("div").html("<b>我爱jQuery</b>"); //设置jQuery中的html代码

text()方法 ，类似于javascript里的innerText方法，获取某个元素的内容
例如：

html 复制代码

   1、
<div>我爱jQuery</div>
var a = $("div").text(); //获取div中的文本值
   2、
<div>我爱jQuery</div>
$("div").text("你爱我吗？"); //设置div的文本值

val()方法，相当于javascript中的value属性
attr()方法 用于设置/改变属性值
例如：

html 复制代码

$("p").attr("title");添加属性
$("p").attr("title","123");给属性赋值
$("p").removeAttr("title");删除属性

创建元素节点

$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回

$(function(){

$("input[type=text]").blur(function(){

var idCard = $(this).val();//获取文本框的值

var $span = $(""+idCard+"");
( " p " ) . a p p e n d ( ("p").append( ("p").append(span);//创建span元素

});

append() - 在被选元素的结尾插入内容被选元素中

html 复制代码

HTML: <p>我爱jQuery</p>
例如：$("p"). append ("<b>你爱jQuery吗？</b>");
结果：<p>我爱jQuery<b>你爱jQuery吗？</b></p>

prepend() - 在被选元素的开头插入内容被选元素中

html 复制代码

HTML: <p>我爱jQuery</p>
例如：$("p").prepend("<b>你爱jQuery吗？</b>");
结果：<p><b>你爱jQuery吗？</b>我爱jQuery</p>

after() - 在被选元素之后插入内容被选元素外

html 复制代码

HTML: <p>我爱jQuery</p>
例如：$("p"). after ("<b>你爱jQuery吗？</b>");
结果：<p>我爱jQuery</p><b>你爱jQuery吗？</b>

before() - 在被选元素之前插入内容被选元素外

html 复制代码

HTML: <p>我爱jQuery</p>
例如：$("p"). before ("<b>你爱jQuery吗？</b>");
结果：<b>你爱jQuery吗？</b><p>我爱jQuery</p>

删除元素/内容

remove() - 删除被选元素（及其子元素）（注意：可以根除所有）
empty() - 从被选元素中删除子元素（注意：不可以根除所有，保留父节点）
clone() --实现克隆
示例：jquery实现克隆和删除技术

追加DOM CSS样式

addClass() - 向被选元素添加一个或多个类
hasClass() -- 判断是否含有样式
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
**toggle()**方法实现切换元素显示

为什么要学习jQuery动画和特效？

jQuery中的动画和特效的相关方法能够实现自动显隐，渐入渐出、飞入飞出、自定义动画等。

显示和隐藏show()和hide()

语法如下：

html 复制代码

show(duration,[callback]);
hide(duration,[callback]);

duration表示动画执行时间的长短，可以表示速度的字符串，包括slow,normal,fast.也可以是表示时间的整数(毫秒)。

callback是可选的回调函数。在动画完成之后执行。

显隐切换toggle()方法
淡入淡出fadeIn()和fadeOut()方法

语法如下：

html 复制代码

fadeIn(duration, [callback]);
fadeOut(duration, [callback]);

fadeTo()方法自定义变换目标透明度的使用

html 复制代码

语法如下：
fadeTo(duration,opacity,callback);

speed 可选。规定元素从当前透明度到指定透明度的速度。

可能的值：

• 毫秒（比如 1500）

• "slow"

• "normal"

• "fast"

opacity 必需。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。

callback 可选。fadeTo 函数执行完之后，要执行的函数。

如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数，否则不能设置该参数。

展开与收拢效果slideDown slideUp slideToggle

与显示隐藏的语法一样

幻灯片效果

jQuery提供了slideUp()和slideDown()来模拟PPT中类似幻灯片拉窗帘的特效

语法格式：

和slow()和hide()完全相同

自定义动画animate()

语法如下：

animate(styleparams,[duration],[easing],[callback])

styleparams为希望进行变幻的css属性列表，以及希望变化到的最终值。

duration为可选项，与show()/hide()的参数含义完全相同

easing为可选参数，通常供动画插件使用。用来控制节奏的变化过程。jQuery中只提供了linear和swing两个值

callback为可选的回调函数。在动画完成后触发。

html 复制代码

$(".div1").animate({
	"width": "500px",
	 "height": "600px",
	 "textAlign": "center",
	 "background": "#efefef",
	 "lineHeight": "600px"
},3000,function(){
	  alert();
});

Ajax的原理介绍

ajax是一种用来改善用户体验的技术，其本质是利用浏览器的内置的一种特殊的对象

（XMLHttpRequest）异步（即发送请求时，浏览器不会销毁当前页面，用户可以继续在当前页面做其他的操作）的向服务器发送请求，并且利用服务器返回的数据（不再是一个完整的页面，只是部分的数据，一般使用文本或者xml返回）来部分更新当前页面。使用ajax技术之后，页面无刷新，并且不打断用户的操作。

Ajax的优势

1、不需要任何插件支持，大多主流浏览器都支持ajax技术。

2、用户体验优秀，能够在不刷新整个页面就能实现数据的更新。

3、提高web的性能，减轻服务器和宽带的负担。

Json数据

基于数组的json数据

基于对象的json数据

jQuery对ajax的封装应用：

html 复制代码

$.get(url [,data]...[function(msg){}回调函数] [,dataType]);

url:待载入页面的URL地址

data: 给服务器传递的数据，请求字符串，json对象都可以设置

function(msg){}: 回调函数，ajax请求完成后调用改对象函数，可以在此函数完成ajax的后续处理，msg泛指从服务器传递回来的信息。...

dataType:返回内容格式，xml, html, script, json, text, _default。

html 复制代码

$.post(url [,data]...[function(msg){}回调函数] [,dataType]);

该方法与$.get()方法使用完全一致，不同的是其为post方式请求给服务器传递数据的时候，不需要设置header头

（以上两种ajax请求是异步的，如果需要设置同步请求，就换其他方法）

相对底层的Ajax 请求方式

html 复制代码

$.ajax({  //json对象
url:请求地址,
[data]:,
[dataType]:,
[type]:,
[success]:function(msg){}
async:[true]异步/false同步
cache:[true]缓存/false不缓存
});