当前位置：
文档之家› jquery培训教材PPT课件
jquery培训教材PPT课件
• 配置：无需安装，只需有库文件即可(库的替代：见备注) • 网页中引入 jQuery 库：
<head> <script type="text/javascript" src="jquery.js"></script> </head>
注意：<script> 标签应该位于页面的 <head> 部分。
在 HTML5 中，不必在 <script> 标签中使用type="text/javascript" 。 JavaScript 是 HTML5 以及所有现代浏览器中的默认脚步语言！
// 隐藏当前元素 // 隐藏所有段落 // 隐藏所有 class="test" 的段落 // 隐藏第 id="test" 的元素
jQuery 代码风格
• 链式操作风格
$("has_children").click(function(){ $(this) .addClass("highLight") .children("a").show().end() .siblings().removeClass("highLight") .children("a").hide();
});
– 对于同一对象不超过3个操作，可直接写一行 – 对同一对象的操作较多，建议每行写一个操作 • 添加必要的注释
文档就绪函数
• $(document).ready()：类似 window.onload 定义文档加载完后执行的函数
<head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript">
$(document).ready(function(){ alert("Hello World!");
}); </script> </head>
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。 如果在文档没有完全加载之前就运行函数，操作可能失败。 例如：试图隐藏一个不存在的元素
获得未完全加载的图像的大小
进入 jQuery 世界
• 获得 jQuery 库（） jQuery 库位于一个 JavaScript 文件中，其中包含了所 有的 jQuery 函数。 – jquery-版本号.js（无压缩版, 用于测试、学习） – jquery-版本号.min.js（压缩版, 用于产品、项目)
var $test = $("#test"); var test = $test[0]; 或 var test = $test.get(0);
//jQuery对象是一个数组，可通过索引得到DOM对象 //用jQuery提供的get(index)方法得到DOM对象
• DOM 对象转成 jQuery 对象
jquery培训教材PPT课件
jquery 培训教材
-作者：罗露
第一章 jquery简介 第二章jquery选择器 第三章jquery中的DOM操作 第四章jquery中的事件和动画
jquery培训教材PPT课件
jQuery 培训教材
第一章 jQuery 简介
JavaScript 库
• 为简化 JavaScript 的开发 • 封装了很多预定义的对象和函数 • 兼容各大浏览器
写得更少，做得更多（write less, do more）
jQuery 有优势
• 轻量级 • 强大的选择器 • 出色的 DOM 操作 • 可靠的事件处理机制 • 完善的 Ajax
• 不污染顶级变量 • 出色的浏览器兼容性 • 链式操作方式 • 隐式迭代 • 行为层与结构层分离 • 跟丰富的插件支持 • 完善的文档 • 开源
文档就绪函数
window.onload 与 $(document).ready() 的对比
window.onload
$(document).ready()
执行 必须等网页中所有内容加载 网页中所有DOM结构绘制完后就 时机 完后（包括图片）才能执行 执行
编写 个数
不能编写多个 window.onload=function(){}; window.onload=function(){}; 此时第二个覆盖第一个
var test = document.getElementById("test");
var $test = $(test);
//用jQuery的工厂方法
解决 jQuery 与其它库的冲突
• jQuery 在其它库之后导入 – jQuery.noConflict(); 让出$使用权 – 然后用 jQuery 而不用 $
能同时编写多个 $(document).ready(function(){}); $(document).ready(function(){}); 两个函数都执行
简化 写法
无
$( )
jQuery 对象与 DOM 对象
• DOM 对象：HTML的文档对象模型中的元素对象。可通 过 javascript 的以下方法获取
常见的 JavaScript 库
• Prototype • Dojo • YUI • Ext JS • Moo Tools • jQuery
认识 jQuery
• jQuery 是一个 JavaScript 库 • jQuery 极大地简化了 JavaScript 编程 • jQuery 很容易学习 • jQuery 的理念：
jQuery 基础语法
• 基础语法是：$(selectoห้องสมุดไป่ตู้).action()
– 美元符号定义 jQuery （又称工厂函数） – 选择器（selector）“查询”和“查找”
HTML 元素 – action() 执行对元素的操作
• 示例
$(this).hide() $("p").hide() $("p.test").hide() $("#test").hide()
document.getElementById("test") document.getElementsByTagName("p")
• jQuery 对象：经jQuery包装后的DOM对象
$("#test") $("p")
• 两者拥有的方法不同
jQuery 对象与 DOM 对象相互转换
• jQuery 对象转成 DOM 对象
