jQuery培训讲义版（实用）.ppt

jQuery概述 1.1 基本概念 jQuery是一个轻量级javascript库 兼容CSS3，还兼容各种浏览器 使用户能更方便地处理HTML文档、事件、实现动画效果，并且方便地为网站提供Ajax交互 jQuery概述 1.2 能做什么 以插件的形式持续地通过开发加入新的功能 获取页面的部分内容 修改页面的外观 修改页面的内容 在页面中响应用户的交互 给页面加上动画 无刷新返回服务器端的信息 还提供了改进基本的 JavaScript 结构，如迭代和数组操作 jQuery概述 1.3 其他javascript库 Prototype YUI Dojo mooTools jQuery不会与全局命名空间冲突，简洁，只要花很少的时间去学习 性能测试： /slickspeed jQuery开始前的准备 2.1 jQuery下载 当前版本1.2.3 官方网站下载：/ 三种版本，Minified and Gzipped、Uncompressed、Packed 2.2 jQuery安装 在页面头部head中，添加js jQuery基础 3.1 页面载入 $(document).ready(callback) $(callback) （缩写） 绑定一个在DOM文档载入完成后执行的函数 同一个页面上可以多次使用 请确保在 body 元素的onload事件中没有注册函数，否则不会触发$(document).ready()事件 jQuery基础 3.2 核心函数 $(expression,[context]) 接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素 jQuery 的核心功能都是通过这个函数实现的 $(html) 根据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素 jQuery基础 $(elements) 将一个或多个DOM元素转化为jQuery对象 jQuery基础 3.3 选择器 返回jQuery对象 #id 根据给定的ID匹配一个元素 element 根据给定的元素名匹配所有元素 jQuery基础 .class 根据给定的class名匹配所有元素 * 匹配所有元素 selector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回 jQuery基础 3.4 属性 attr(name) 取得第一个匹配元素的属性值 attr(properties) 将一个“名/值”形式的对象设置为所有匹配元素的属性 attr(key,value) 为所有匹配的元素设置一个属性值 jQuery基础 3.5 class addClass(class) 为每个匹配的元素添加指定的class removeClass(class) 从所有匹配的元素中删除全部或者指定的class jQuery基础 3.6 HTML html() 取得第一个匹配元素的html内容 html(val) 设置每一个匹配元素的html内容 3.7 文本 text()、text(val) 和HTML类似 jQuery基础 3.8 值 val() 获得第一个匹配元素的当前值 val(val) 设置每一个匹配元素的值 jQuery基础 3.9 内部插入 append(content) 向每个匹配的元素内部追加内容 appendTo(content) 把所有匹配的元素追加到另一个、指定的元素元素集合中 jQuery基础 3.10 CSS css(properties) 把一个“名/值对”对象设置为所有匹配元素的样式属性 属性名包含 -的话，必须使用引号 css(name,value) 在所有匹配的元素中，设置一个样式属性的值 jQuery基础 3.11 事件 click(fn) 在每一个匹配元素的click事件中绑定一个处理函数 jQuery基础 3.12 效果 show() 显示隐藏的匹配元素 show(speed,[callback]) 以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数 hide() 隐藏显示的元素 jQuery基础 hide(speed,[callback]) 以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数 toggle() 切换元素的可见状态 jQuery基础 3.13 Ajax $.ajax(options) 通过 HTTP 请求加载远程数据 3.14 综合应用 表格背景色的交替显示，鼠标悬停，行背景变色 插件机制 jQuery.fn.extend(object) 扩展 jQuery 元素集来提供新的方法，可一次扩充多个 jQuery.extend(object) 扩展jQuery对象本身 jQ