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

1,基础,jQuery系列,2,让网页动起来,网站欣赏：,3,课程目标,了解jQuery掌握jQuery核心-选择器使用jQuery控制页面元素、属性和样式了解和使用jQuery插件，让页面更加丰富多彩,4,本章任务,了解jQuery获得jQueryjQuery智能提示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,官方网站：http:/,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:http:/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的核心函数？jQuery(expression,context)jQuery(elements)jQuery(callback)jQuery(html,ownerDocument),总结,22,作业,作业：作业.txt,