欢迎来到天天文库
浏览记录
ID:38938308
大小:2.00 MB
页数:38页
时间:2019-06-21
《使用jQuery快速高效制作网页交互特效TP03》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、初识jQuery第三章回顾及作业点评setInterval()方法有什么作用?如何改变浏览器地址栏中的网址?getElementByXXX()系列方法有哪些?提问2/38预习检查JavaScript与jQuery是什么关系?使用jQuery需要导入什么文件?DOM对象和jQuery对象有什么区别?提问3/38本章任务编写第一个jQuery程序使用jQuery变换网页效果使用addClass()为图片添加边框使用jQuery方式弹出消息4/38本章目标会在网页中导入jQuery框架掌握jQuery的基本语法掌握jQuery对象与DOM对象的相互转换会使用jQuery实现简单特效5/
2、38jQuery简介jQuery由美国人JohnResig于2006年创建jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装它的设计思想是writeless,domore6/38初识jQuery示例$("tr:even").css("background-color","#ccc");实现隔行变色效果,只需一句关键代码7/38jQuery能做什么访问和操作DOM元素控制页面样式对页面事件进行处理扩展新的jQuery插件与Ajax技术完美结合提示jQuery能做的JavaScript也都能做,但使用jQuery能大幅提高开发效率8/38
3、jQuery的优势体积小,压缩后只有100KB左右强大的选择器出色的DOM封装可靠的事件处理机制出色的浏览器兼容性使用隐式迭代简化编程丰富的插件支持9/38获取jQuery进入jQuery官网:http://jquery.com点击此处下载10/38jQuery库文件jQuery库分开发版和发布版在页面中引入jQuery名称大小说明jquery-1.版本号.js(开发版)约268KB完整无压缩版本,主要用于测试、学习和开发jquery-1.版本号.min.js(发布版)约91KB经过工具压缩或经过服务器开启Gzip压缩,主要应用于发布的产品和项目4、uery-1.8.3.js"type="text/javascript">11/38jQuery基本语法使用jQuery弹出提示框演示示例1:第一个jQuery程序为页面加载事件绑定方法12/38$(document).ready()$(document).ready()与window.onload类似,但也有区别window.onload$(document).ready()执行时机必须等待网页中所有的5、内容加载完毕后(包括图片、flash、视频等)才能执行网页中所有DOM文档结构绘制完毕后即刻执行,可能与DOM元素关联的内容(图片、flash、视频等)并没有加载完编写个数同一页面不能同时编写多个同一页面能同时编写多个简化写法无$(function(){//执行代码}) ;13/38学员操作—编写第一个jQuery程序需求说明在DreamweaverCS5.5中配置jQuery开发环境打开页面时,弹出窗口,提示信息为“我编写的第一个jQuery程序!^^”练习完成时间:10分钟14/38共性问题集中讲解常见问题及解决办法代码规范问题调试技巧共性问题集中讲解15/38DOM模型3-6、1浏览器可以把HTML文档显示成可视图形演示示例2:DOM模型问题浏览器怎样才能正确解析复杂的HTML文档呢?16/38DOM模型3-2浏览器把HTML文档的元素转换成节点对象,所有节点组成了一个树状结构17/38DOM模型3-3把这些节点对象按照一定顺序绘制到浏览器窗口中以对象描述文档的方式就是DOM节点对象就被称为DOM对象文档对象模型18/38节点类型元素节点:文档中的所有元素……你最喜欢的食品是?……
4、uery-1.8.3.js"type="text/javascript">11/38jQuery基本语法使用jQuery弹出提示框演示示例1:第一个jQuery程序为页面加载事件绑定方法12/38$(document).ready()$(document).ready()与window.onload类似,但也有区别window.onload$(document).ready()执行时机必须等待网页中所有的
5、内容加载完毕后(包括图片、flash、视频等)才能执行网页中所有DOM文档结构绘制完毕后即刻执行,可能与DOM元素关联的内容(图片、flash、视频等)并没有加载完编写个数同一页面不能同时编写多个同一页面能同时编写多个简化写法无$(function(){//执行代码}) ;13/38学员操作—编写第一个jQuery程序需求说明在DreamweaverCS5.5中配置jQuery开发环境打开页面时,弹出窗口,提示信息为“我编写的第一个jQuery程序!^^”练习完成时间:10分钟14/38共性问题集中讲解常见问题及解决办法代码规范问题调试技巧共性问题集中讲解15/38DOM模型3-
6、1浏览器可以把HTML文档显示成可视图形演示示例2:DOM模型问题浏览器怎样才能正确解析复杂的HTML文档呢?16/38DOM模型3-2浏览器把HTML文档的元素转换成节点对象,所有节点组成了一个树状结构17/38DOM模型3-3把这些节点对象按照一定顺序绘制到浏览器窗口中以对象描述文档的方式就是DOM节点对象就被称为DOM对象文档对象模型18/38节点类型元素节点:文档中的所有元素
你最喜欢的食品是?
7、接使用JavaScript获取的节点对象varobjDOM=document.getElementById("title");varobjHTML=objDOM.innerHTML;jQuery对象:使用jQuery包装DOM对象后产生的对象,它能够使用jQuery中的方法$("#title").html();等同于document.getElementById("title").innerHTML;提示DOM对象和jQuery对象分别拥有一套独立的方法,不能混用20/38jQu
此文档下载收益归作者所有