jQuery简介解读.pptx

第9讲 jQuery简介 jQuery是什么？ jQuery 是一个 JavaScript 库，它极大地简化了 JavaScript 编程，jQuery 很容易学习 使用jQuery的目的就是保证代码简洁并可重用 jQuery能做什么？ 获取页面内容 修改页面内容 修改页面外观 在页面响应用户的交互 给页面加上动画 无刷新返回服务器端的信息 简化JavaScript任务 除了jQuery指定的文档特性外，这个库还提供了改进基本JavaScript结构，如迭代和数组操作。 简单 向页面添加jQuery库 jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数 共有两个版本的 jQuery 可供下载：一份是精简过的，另一份是未压缩的（供调试或阅读），都可从?jQ?下载。 如果您不愿意在自己的计算机上存放 jQuery 库，那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件 head script type=text/javascript src=jquery.js/script /head 简单例子 head script src=/jquery/jquery-1.11.1.min.js /script script $(document).ready(function(){ $(p).click(function(){ $(this).hide(); }); }); /script /head body p如果您点击我，我会消失。/p p点击我，我会消失。/p p也要点击我哦。/p /body 效果是点击文档中所有p标签时，将隐藏自身内容。 $(“p) 是一个jQuery选择器 $本身表示一个jQuery类 $()是构造一个jQuery对象 click()是这个对象的方法 同理$(document)也是一个jQuery对象 ready( )是$(document)的方法，表示当document全部下载完毕时执行函数 文档就绪函数 jQuery 函数位于一个 document ready 函数中 为了防止文档在完全加载（就绪）之前运行 jQuery 代码 如果在文档没有完全加载之前就运行函数，操作可能失败。例如： 试图隐藏一个不存在的元素 获得未完全加载的图像的大小 $(document).ready(function(){ --- jQuery functions go here ---- }); 更多实例 实例1 jQuery语法 jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作 基础语法是：$(selector).action() “$”定义 jQuery selector）表示选择符，“查询”和“查找” HTML 元素 action() 执行对元素的操作 jQuery选择器 jQuery元素选择器 使用 CSS 选择器来选取 HTML 元素 $(p) 选取 p 元素。 $(ro) 选取 class=intro 的 p 元素 $(p#demo) 选取 id=demo 的 p 元素 $(this)选取当前HTML元素 jQuery 属性选择器 使用 XPath 表达式选择带有给定属性的元素 $([href]) 选取所有带有 href 属性的元素 $([href=#]) 选取所有带有 href 值等于 # 的元素 $([href!=#]) 选取所有带有 href 值不等于 # 的元素 $([href$=.jpg]) 选取所有 href 值以 .jpg 结尾的元素 jQuery CSS 选择器 jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性 例如：$(p).css(background-color,red); jQuery 事件 jQuery 是为事件处理特别设计的 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法 实例 jQuery完成 jQuery 效果 jQuery 隐藏/显示: hide() / show() /toggle() jQuery 淡入淡出 fadeIn()/fadeOut()/fadeToggle()/fadeTo() jQuery 滑动 slideDown()/slideUp()/slideToggle() jQuery 动画: animate() jQuery stop(): stop() 用于在动画或效果完成前对它们进行停止 jQuery Callback: 当前动画 100% 完成之后执行 jQuery Chaining: 把动作/方法链接起来 链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条 jQue