《系列基础理论》PPT课件.ppt

1,基础,jQuery系列,2,让网页动起来,网站欣赏： /demo/,3,课程目标,了解jQuery 掌握jQuery核心-选择器 使用jQuery控制页面元素、属性和样式 了解和使用jQuery插件，让页面更加丰富多彩,4,本章任务,了解jQuery 获得jQuery jQuery智能提示 jQuery核心函数 完成第一个jQuery程序 掌握jQuery基本选择器 编写jQuery事件 常见动画效果,5,从官方网站获取jQuery库 添加jQuery智能提示 完成第一个jQuery程序,本章目标,6,jQuery框架,jQuery是继Prototype之后又一个优秀的Javascript库 jQuery由美国人John Resig创建于2006年1月 jQuery包括核心库、UI和插件等几部分 jQuery的宗旨： Write less, do more. 写更少的代码，做更多的事情。,7,jQuery优势,轻量级 强大的选择器 出色的浏览器兼容性 链式操作方式 隐式迭代 行为层与结构层的分离 丰富的插件支持 开源,8,获取jQuery,官方网站： / 下载jQuery库： /Downloading_jQuery 当前最新版本：1.4.3 压缩版：jquery-1.4.3.min.js 未压缩版：jquery-1.4.3.js,9,智能提示,VS2008 1.安装VS2008 sp1和补丁KB958502 2.从官方网址下载-vsdoc.js文件 3.将js文件添加到页面即可使用 VS2010 VS2010对jQuery全面支持可直接获得智能提示,10,智能提示,Eclipse插件 1、在线安装：Help-Install New Software.-Add.-Name: “Aptana” Location:/tools/studio/plugin/install/studio下载完毕重启Eclipse,Aptana插件安装成功,支持javascript智能提示功能,但还不支持jQuery智能提示,需要再安装支持jQuery智能提示的插件。 2、 Window-My Studio打开Aptana的首页,单击首页上面的Plugins,选择Ajax下面的jQuery Support,单击Get It即可安装jQuery智能提示的插件。 3、新建一个js文件就会有jQuery智能提示了。,11,智能提示,Aptana独立版本 1、从官方网址/ 下载Aptana独立版本 2、安装独立版本后，在线添加jQuery智能提示插件。,12,jQuery核心函数,核心函数jQuery，简写为$,13,jQuery核心函数,window.onload VS $(document).ready(),HelloWorld 参见示例文件：jQuery_ch01_HelloWorld.htm 关键代码：,14,第一个jQuery程序, / 等待DOM元素加载完毕 $(function () / 弹出提示对话框 alert(“Hello World!“); ); ,15,基本选择器,#id 根据ID取得元素 例：$(“#test”) element 根据标签名取得一组元素 例：$(“div”) .class 根据样式名取得一组元素 例：$(“.highlight”),16,常见操作,html() 获取或设置内部HTML代码 html() 获取 html(“HTML代码”) 设置 text() 获取或设置内部文本 text() 获取 text(“文本”) 设置 val() 获取或设置表单元素的value值 val() 获取 val(“值”) 设置,17,jQuery对象和DOM对象,jQuery对象是一个封装的集合，只有jQuery对象才能使用jQuery提供的各种方法。 转换 DOM = jQuery：$(DOM) jQuery = DOM：jQuery0 注：可以通过firebug观察jQuery对象,18,事件,语法,jQuery对象.事件名(function() );,/ 为按钮btnTest添加点击事件 $(“#btnTest”).click(function() );,/ 为所有层添加点击事件 $(“div”).click(function() );,19,事件切换,hover(over, out) 一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。 toggle(fn1, fn2, ) 每次点击后依次调用函数。,20,动画效果,显示/隐藏（show/hide） 滑动(slideDown/slideUp) 淡入淡出(fadeIn/fadeOut),21,jQuery的优势有哪些？ 总共8个 jQuery的核心函数？