JQuery Learn.ppt

主讲人:张荣华 QQMSN:zhangrh1008@ Email:zhangrh1008@ Blog: jQuery概述 1.1 基本概念 jQuery是John Resig建立的一个轻量级javascript库. 兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+） 使用户能更方便地处理HTML文档、事件、实现动画效果，并且方便地为网站提供Ajax交互 jQuery概述 1.2 能做什么 以插件的形式持续地通过开发加入新的功能 获取页面的部分内容 修改页面的外观 修改页面的内容 在页面中响应用户的交互 给页面加上动画 无刷新返回服务器端的信息 还提供了改进基本的 JavaScript 结构，如迭代和数组操作 jQuery概述 1.3 主流javascript库 Prototype YUI Dojo mooTools jQuery:短小精悍，支持xpath查询，dom1-3，css支持；简单的动画实现，支持自定义动画；支持插件开发，现有插件多；完整的api文 档以及范例，易学；拥有官方UI程序供使用，效果好。 性能测试：/slickspeed jQuery下载和安装 2.1 jQuery下载 当前版本1.3.1 官方网站下载：/ 2.2 jQuery安装 在页面头部head中，添加js script type=text/javascript src=./script/jquery.js/script 2.3 VS2008中可以实现jQuery的智能提示 /zhangronghua/archive/2008/10/15/1311400.html jQuery基础 3.1 页面载入 $(document).ready(callback) 绑定一个在DOM文档载入完成后执行的函数 同一个页面上可以多次使用 Demo jQuery基础 3.2 核心函数 $(expression,[context]) 接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素 jQuery 的核心功能都是通过这个函数实现的 $(html) 根据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素 jQuery基础 $(elements) 将一个或多个DOM元素转化为jQuery对象 jQuery基础 3.3 选择器 返回jQuery对象 基本选择器*, class,element, id, selector1, selector2等. 层级选择器ancestor descendant, parent child, prev + next , prev ` siblings 简单选择器even, odd, eq[index], last, first等 内容选择器contains[text], empty, parent, has[selector]等. jQuery基础 可见性选择器hidden, visible. 属性选择器[attribute *=value], [attribute =value], [attribute]等 子元素选择器first-child, last-child, nth-child(index), only-child. 表单选择器button, checkbox, file, hidden等. 表单对象属性选择器checked, disabled, enabled, selected. Demo jQuery基础 3.4 属性 attr(name) 取得第一个匹配元素的属性值 attr(properties) 将一个“名/值”形式的对象设置为所有匹配元素的属性 attr(key,value) 为所有匹配的元素设置一个属性值 Demo jQuery基础 3.5 class addClass(class) 为每个匹配的元素添加指定的class removeClass(class) 从所有匹配的元素中删除全部或者指定的class Demo jQuery基础 3.6 HTML html() 取得第一个匹配元素的html内容 html(val) 设置每一个匹配元素的html内容 jQuery基础 3.7 文本 text()、text(val) 和HTML类似 Demo jQuery基础 3.8 值 val() 获得第一个匹配元素的当前值 val(val) 设置每一个匹配元素的值 Demo jQuery基础 3.9 DOM文档处理 内部插入append(content), appendTo(content), prepend(content), pre