《jQuery框架和AJAX技术课件》由会员分享,可在线阅读,更多相关《jQuery框架和AJAX技术课件(21页珍藏版)》请在金锄头文库上搜索。
1、本书介绍,jQuery是继Prototype之后又一个优秀的JavaScript库,是一个由John Resig创建于2006年1月的开源项目。现在的jQuery团队主要包括核心库、UI和插件等开发人员以及推广和网站设计维护人员。 jQuery凭借简介的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发AJAX的操作。其独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。总之,无论是网页设计师、后台开发者、还是项目管理者,也无论是JavaScript初学者还是JavaScript高手,都有足够多的理
2、由去学习jQuery。,目标,jQuery简介 编写简单的jQuery程序 jQuery对象和DOM对象 jQuery中的基本选择器 包装集的管理,JQuery简介,jQuery是一套Javascript脚本库.使用jQuery将极大的提高编写javascript代码的效率, 让写出来的代码更加优雅, 更加健壮. 同类JS库:Dojo Extjs,JQuery的优势,提供了强大的功能函数 解决浏览器兼容问题 实现丰富的UI 丰富的插件,jQuery起步,jQuery特点 jQuery强调的理念是写的少,做得多(write less,do more) jQuery封装了大量常用的DOM操作 jQ
3、uery灵活的事件处理机制 jQuery中拥有完善的AJA能,jQuery的下载和使用,jQuery官方网站,单击页面中的Download(jQuery)链接 下载该jQuery核心库 jQuery不需要安装,把下载的jQuery库放到网站的一个公共位置,想要在某个页面上使用jQuery时,只需要在相关的HTML文档中引入该库文件即可。,jQuery基本语法,jQuery基本语法 jQuery(“选择器”)或者$(“选择器”) 其中: jQuery 是JQuery中的核心对象 $是jQuery的简写形式,二者是等价的 “选择器” 是我们本章讲解的重点,编写简单的jQuery程序,页面加载事件语
4、法格式,两种写法效果一样,和onload的区别 window.onload 方法是在整个页面完全加载之后执行语句。及资源显示完毕之后调用、而jQuery的ready方式仅仅是在DOM对象加载完成后就调用。并且jQuery的ready方法可以指定多次,$(document).ready(function() / 在这里写你的代码.),$(function() /在这里写你的代码.);,jQuery中的链式操作,在jQuery中,通常调用jQuery对象的每一个方法后,都会将该对象作为返回值返回,所以可以使用链式操作。,jQuery对象和DOM对象,DOM对象 使用JavaScript中的DOM
5、API操作获得的元素对象 jQuery对象 jQuery对象就是通过jQuery包装DOM对象后产生的对象。,传统的javascript,var div = document.getElementById(testDiv);var divs = document.getElementsByTagName(div);,获取的Dom对象,JQuery包装集,Dom对象和JQuery包装集,jQuery包装集,var jQueryObject = $(#testDiv);,jQuery对象和DOM对象的转换,jQuery对象转换成DOM对象方法一,jQuery对象转换成DOM对象方法二,DOM对象转
6、换成jQuery对象方法,选择器和包装集,选择器 带有特定语法格式的字符串,用于对页面元素进行筛选 包装集 将选择器所选择的元素封装在一个类似于数组的jQuery对象中,该对象封装了所选择的元素,jQuery中的基本选择器,选择器语法,1、通过ID选取元素 语法:$(#id) 2、通过类名获取元素 语法:$(.className) 3、通过标签名获取元素 语法:$(tagName) 4、一次性获取多个元素 语法:$(selector1, selector2, select3 .),确定包装集的大小,1、使用size()方法,2、jQuery元素包装集运行起来与数组非常相似:像JavaScrip
7、t数组那样拥有length属性。而这个属性的值,就是包装元素的个数。,获得元素在包装集中的位置,index(element),对包装集进行筛选,添加元素到包装集:add(expression) 删除包装集中的元素:not(expression) 对包装集中的元素进行过滤:filter(expression) 获取包装集的子集:slice(begin, end),总结,jQuery简介 编写简单的jQuery程序 jQuery对象和DOM对象 jQuery中的基本选择器 包装集的管理,作业,简述jQuery的优势。 简述jQuery对象和DOM对象的转换。 简述jQuery中的基本选择器及其使用方法。 简述操作包装集的常用方法。,