[工学]AJAX培训课件--第8章 jQuery一.ppt

课程回顾 ASP.NET Ajax框架包括5个组成部分： 框架类库 核心组件 控件工具包 增值组件 示例代码 ASP.NET Ajax框架中的核心组件主要包括以下控件： ScriptManager UpdatePanel UpdateProgress Timer ScriptManagerProxy ControlToolkit包中的AutoComplete通过调用Web Service，实现自动完成功能 ControlToolkit包中AsyncFileUpload控件可以实现无刷新的异步文件上传 本章内容 jQuery选择器 jQuery操作DOM jQuery事件处理 jQuery动画基础 本章目标 能够使用jQuery选择器获得操作对象 能够使用jQuery操作DOM 能够使用jQuery处理页面事件 能够使用jQuery动画方法创建简单动画 1. jQuery选择器 1.1 jQuery简介 1.2 编写第一个jQuery应用 编写第一个jQuery应用 1.3 选择器 1.3 选择器 1.3 选择器 小结1 2. jQuery DOM操作 节点操作 节点操作 2.2 样式操作 小结2 3. jQuery 事件和动画 3.1 jQuery事件处理 jQuery事件处理 jQuery事件处理 jQuery事件处理 jQuery事件处理 jQuery事件处理 3.2 jQuery动画 jQuery动画 jQuery动画 jQuery动画 jQuery动画 jQuery动画 jQuery动画 jQuery动画 jQuery动画 jQuery动画 3.2 jQuery动画 jQuery动画 小结3 本章总结 jQuery方法被封装在jQuery对象中，使用工厂函数$()可以获取一个jQuery对象 $(document).ready(function(){})方法可以重复调用而不会被覆盖 选择器是jQuery的根基，jQuery支持CSS选择器、XPath选择器和自定义选择器 jQuery可以操作DOM节点和样式 jQuery为制作动画提供了4类方法： 基本动画函数：show()、hide()和toggle() 滑动动画函数：slideDown()、slideUp()和slideToggle() 淡入淡出动画函数：fadeIn()、fadeOut()和fadeTo() 自定义动画函数：animate()和stop() 自定义动画函数 animate()函数可以使用户自定义动画，而且可以通过stop()函数取消动画 animate(params,speed [,callback]) 语法说明： params：包含样式属性/值对的集合 例如：{width: 90% ,height:”30%”} speed：速度，动画完成需要的时间 callback：动画执行结束后的回调函数，可选参数 //点击id=a1的元素，在class=an的元素高度和透明度在600毫秒内交替隐藏和显示 $(document).ready(function() { $(#a1).toggle(function() { $(.an).animate({ height: hide, opacity: hide }, slow).css(cursor,hand).css(border,1px solid blue); }, function() { $(.an).animate({ height: show, opacity: show }, slow).css(); }); }); //点击class=an的元素，在2秒内left累加100px，top变为500px $(document).ready(function() { $(.an).click(function() { $(this).css(position,absolute).animate({ left: +=100, top: 500px }, 2000); }); }); //使用链式语法连续执行多个动画，并在执行完毕后执行回调函数 $(document).ready(function() { $(.an).mouseover(function() { $(this).animate({ left: 400px, heigth: 300px, opacity: 0.5 }, slow) .animate({top:200px,width:200px}, 3000, function