系列基础理论.ppt

《系列基础理论.ppt》由会员分享，可在线阅读，更多相关《系列基础理论.ppt（22页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、系列基础理论 Still waters run deep.流静水深流静水深,人静心深人静心深 Where there is life,there is hope。有生命必有希望。有生命必有希望2让网页动起来 网站欣赏：http:/ 了解jQuery掌握jQuery核心-选择器使用jQuery控制页面元素、属性和样式了解和使用jQuery插件，让页面更加丰富多彩4本章任务了解jQuery获得jQueryjQuery智能提示jQuery核心函数完成第一个jQuery程序掌握jQuery基本选择器编写jQuery事件常见动画效果 5从官方网站获取jQuery库添加jQuery智能提示完成第一个jQu

2、ery程序 本章目标6jQuery框架jQuery是继Prototype之后又一个优秀的Javascript库jQuery由美国人John Resig创建于2006年1月jQuery包括核心库、UI和插件等几部分jQuery的宗旨：Write less,do more.写更少的代码，做更多的事情。7jQuery优势轻量级强大的选择器出色的浏览器兼容性链式操作方式隐式迭代行为层与结构层的分离丰富的插件支持开源8获取jQuery官方网站：http:/ 1.安装VS2008 sp1和补丁KB958502 2.从官方网址下载-vsdoc.js文件 3.将js文件添加到页面即可使用VS2010 VS20

3、10对jQuery全面支持可直接获得智能提示 10智能提示Eclipse插件 1、在线安装：Help-Install New Software.-Add.-Name:“Aptana”Location:http:/ Studio打开Aptana的首页,单击首页上面的Plugins,选择Ajax下面的jQuery Support,单击Get It即可安装jQuery智能提示的插件。3、新建一个js文件就会有jQuery智能提示了。11智能提示Aptana独立版本 1、从官方网址http:/www.aptana.org/下载Aptana独立版本 2、安装独立版本后，在线添加jQuery智能提示插件。

4、12jQuery核心函数核心函数jQuery，简写为$函数函数功能功能jQuery(expression,context)根据表达式，查找匹配的一组元素jQuery(html,ownerDocument)动态创建jQuery包装的DOM元素jQuery(elements)将DOM元素转化为jQuery对象jQuery(callback)$(document).ready()的简写13jQuery核心函数window.onload VS$(document).ready()window.onload$(document).ready()执行时机必须等待网页中所有内容加载完毕后(包括图片)才能执行

5、网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完 编写个数不能同时编写多个后面的方法会覆盖前面的参照示例：jQuery_ch01_VS(js).htm能同时编写多个参照示例：jQuery_ch01_VS(jQuery).htm简化写法无$(function();HelloWorld参见示例文件：jQuery_ch01_HelloWorld.htm 关键代码：14第一个jQuery程序 /等待DOM元素加载完毕$(function()/弹出提示对话框 alert(Hello World!););15基本选择器#id 根据ID取得元素例：$(“#test”)element

6、 根据标签名取得一组元素例：$(“div”).class 根据样式名取得一组元素例：$(“.highlight”)16常见操作html()获取或设置内部HTML代码html()获取html(“HTML代码”)设置text()获取或设置内部文本text()获取text(“文本”)设置val()获取或设置表单元素的value值 val()获取 val(“值”)设置17jQuery对象和DOM对象jQuery对象是一个封装的集合，只有jQuery对象才能使用jQuery提供的各种方法。转换DOM=jQuery：$(DOM)jQuery=DOM：jQuery0注：可以通过firebug观察jQuery

7、对象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