java课程c第三阶段j2ee第五章jquery框架

本章概要jquery简介jquery可以做什么？dom选择器元素的遍历dom属性css操作动态效果文档处理事件处理ajaxjquery简介Jquery是一款功能强大，设计良好的javascript框架，可以简化前端开发Jquery可以解决大多数浏览器兼容性问题（IE6除外）非常便于开发ajax功能目前最新版本2.x，已经可以支持手机端（html5）jquery可以做什么？

dom选择器元素的遍历

dom属性

css操作动态效果文档处理事件处理

AJAXdom选择器

jquery最强大的功能，可以让你通过元素名称和元素属性对html元素进行选择比较常用的选择器：

id选择class选择元素名称选择器注：这三种选择器和css样式的三种定义方式其实是一一对应的dom选择器id选择(#)$("#username"):获取id="username"的网页元素class选择(.)$(".divcss"):获取所有class="divcss"的网页元素元素名称选择器$("p"):得到所有p元素$("div"):得到所有div元素dom选择器属性选择器[attribute=value]

：$("div[abbr='dvs']")获取

abbr='dvs'的所有div[attribute^=value]

：$("div[abbr^='dvs']")获取

abbr以dvs开头的所有divdom选择器其他常用选择器:first:even:odd$("div:first")第一个<div>元素$("tr:even")所有偶数<tr>元素$("tr:odd")所有奇数<tr>元素dom选择器:eq(index)$("#mytable

tr:eq(3)")：获取id="mytable"的table元素中第4个tr:gt(index)$("#mytable

tr:gt(1)") ：获取id="mytable"的table元素中下标大于1的所有tr:lt(index)$("#mytable

tr:lt(2)")：获取id="mytable"的table元素中下标小于2的所有trdom选择器:contains(text)$(":contains('javascript')")：包含指定字符串的所有元素:hidden$("div:hidden")：所有隐藏的div元素:visible$("div:visible")：所有可见的div元素的遍历jquery对象的each函数可以实现元素的遍历$("div[abbr^='dvs']").each(function(i,n){alert(i+":"+n.innerHTML);});其中i是下标索引，n是每个dom对象dom属性attr()设置或返回匹配元素的属性和值。html()设置或返回匹配的元素集合中的HTML内容。val()设置或返回匹配元素的值。addClass()向匹配的元素添加指定的css样式类。removeClass()从所有匹配的元素中删除css样式类。CSS操作css()设置或返回匹配元素的样式属性。height()设置或返回匹配元素的高度。width()设置或返回匹配元素的宽度。offset({top:100,left:0})

返回匹配元素相对于文档的位置。动态效果show()显示被选的元素hide()隐藏被选的元素toggle()对被选元素进行隐藏和显示的切换slideDown()通过调整高度来滑动显示被选元素slideUp()通过调整高度来滑动隐藏被选元素slideToggle()对被选元素进行滑动隐藏和滑动显示的切换动态效果fadeIn()淡入被选元素至完全不透明fadeOut()淡出被选元素至完全不透明文档处理after()在匹配的元素之后插入内容。before()在每个匹配的元素之前插入内容。append()向匹配的元素内部追加内容。insertAfter()把匹配的元素插入到另一个指定的元素集合的后面。insertBefore()把匹配的元素插入到另一个指定的元素集合的前面。文档处理remove()移除所有匹配的元素。text()设置或返回匹配元素的内容。html()设置或返回匹配的元素集合中的HTML内容。val()设置或返回匹配元素的值。clone()创建匹配元素集合的副本。事件处理运用最广泛的事件函数是ready函数，它是在html文档加载结束后激活调用的，常用于在文档加载完后做一些初始化的操作$(document).ready(function(){alert(“我在文档加载完之后执行”);});这个函数看起来比较特殊，从整体来看是 ready();但是在ready的小括号里传入了一个匿名的函数，这是javascript函数调用的通常做法，有时候我们不需要知道某段函数的函数名,只需要知道当条件满足时执行这段代码。事件处理

所以上面的代码其实就相当于：

function

readyGo(){alert(“我在文档加载完之后执行”);}$(document).ready(readyGo);事件处理click():触发某个元素的单击事件，或绑定某元素 的单击事件所调用的函数给id=“btn”的按钮绑定单击事件，用户点击后会触发function里面的代码$(“#btn”).click(function(){alert(“点我啊”);});事件处理mouseover():触发某个元素的鼠标悬停事件，或 绑定某元素的悬停事件所调用的函数$("p").mouseover(function(){$("p").css("background-color","yellow");});事件处理mouseout():触发某个元素的鼠标离开事件，或 绑定某元素的离开事件所调用的函数$("p").mouseout(function(){$("p").css("background-color",“red");});事件处理change():触发某个元素的值改变事件，或绑定某元素的值改变事件所调用的函数$(“#city").change(function(){varselectValue=$(this).val();alert(“你选择的值：”+selectValue);});事件处理toggle()绑定两个或多个事件处理器函数，当发生轮流的click事件时执行。$("changeBodyColor").toggle(function(){$("body").css("background-color","green");},function(){$("body").css("background-color","red");},function(){$("body").css("background-color","yellow");});这个事件实现了点击按钮后轮流的改变body的背景颜色AJAXAjax：异步的javascript，它是基于javascript技术实现的一种功能使用Ajax可以做出用户体验良好的web程序，比如说无刷新验证，根据查询的结果集动态的构造网页元素等AJAX原生Ajax实现

Ajax技术最核心的Javascript对象是XMLHttpRequest，它提供了对

Http请求的能力，并且它可以在无刷新的情况下去请求并接收资源， 目前几乎所有浏览器都支持这个对象。在请求某个url之前，需要绑定请求处理后触发的事件：

var

xmlhttpRequest=new

XMLHttpRequest();xmlhttpRequest.onreadystatechange=function(){if

(xmlhttpRequest.readyState==4

&&xmlhttpRequest.status==200){document.getElementById("content").value=xmlhttpRequest.responseText;}}AJAX其中readyState=4表示Http响应已经完全接收，status是状态码，

200表示成功，当两个条件都满足时，就可以接收服务器返回的数据。当然，没有使用XMLHttpRequest()去请求是不会触发这个函数的，请求的代码是：xmlhttpRequest.open("GET","ajaxtest.txt",true);xmlhttpRequest.send();AJAX这里是直接请求的文本文档，假如请求服务器上的某个action，那么action中应该使用response对象给客户端写数据：Writer

writer=response.getWriter();writer.write("iserror");writer.flush();writer.close();AJAX使用jquery实现ajax功能jquery是一款基于javascript的框架，它不仅提供了强大了元素选择功能，还提供了ajax功能。使用jquery实现ajax功能的步骤如下：

1,导入jquery.js

2,创建form表单和按钮事件AJAX

3编写事件（重点）function

doRegister(){var

username=$("#username").val();$.ajax({type:"post",//异步请求方式data:{"username":username},//传递的数据

url:'/user/userAction!checkUsername.action',//请求路径

dataType:"text",success:function(data){alert(data);},error:function(err){alert("错误："+err);}//异步请求失败后的回调函数});}==================配置详解================type:post或get，请求方式

data:传递的参数数据，多个参数用逗号分隔{k1:v1,k2:v2}url:请求的路径dataType:返回的数据类型AJ