第9讲 jQuery简介 信息学院孙辉
第9讲 信息学院 孙辉 jQuery简介
jQuery是什么.？ jQuery是一个JavaScript库，它极大地简化了 JavaScript编程，jQuery很容易学习 ■使用jQuery的目的就是保证代码简洁并可重用
jQuery是什么？ ▪jQuery 是一个 JavaScript 库，它极大地简化了 JavaScript 编程，jQuery 很容易学习 ▪使用jQuery的目的就是保证代码简洁并可重用
jQuery能做什么.？ ■获取页面内容 ■修改页面内容 ·修改页面外观 ■在页面响应用户的交互 简单 ·给页面加上动画 ■无刷新返回服务器端的信息 "简化JavaScript任务 "除了jQuery指定的文档特性外，这个库还提供了改 进基本JavaScript结构，如迭代和数组操作
jQuery能做什么？ ▪获取页面内容 ▪修改页面内容 ▪修改页面外观 ▪在页面响应用户的交互 ▪给页面加上动画 ▪无刷新返回服务器端的信息 ▪简化JavaScript任务 ▪除了jQuery指定的文档特性外，这个库还提供了改 进基本JavaScript结构，如迭代和数组操作
向页面添加jQuery库 jQuery库位于一个JavaScript文件中，其中包 含了所有的jQuery函数 ■共有两个版本的jQuery可供下载：一份是精 简过的，另一份是未压缩的（供调试或阅读) 都可从jQuery.com下载。 <head> <script type="text/javascript"src="jquery.js"></script> </head> "如果您不愿意在自己的计算机上存放jQuery 库，那么可以从Google或Microsoft加载 CDN jQuery核心文件
向页面添加jQuery库 ▪jQuery 库位于一个 JavaScript 文件中，其中包 含了所有的 jQuery 函数 ▪共有两个版本的 jQuery 可供下载：一份是精 简过的，另一份是未压缩的（供调试或阅读）， 都可从 jQuery.com 下载。 ▪如果您不愿意在自己的计算机上存放 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标签时： $("p").click(function( 将隐藏自身内容。 $(this).hide(); 。 $("p)是一个jQuery选择器 ·$本身表示一个jQuery类 : ·$0是构造一个jQuery对象 </script> ·click(是这个对象的方法 </head> ·同理$(document)也是一个 <body> jQuery对象 <p>如果您点击我，我会消失。<p>·ready()是$(document)的方法， <p>点击我，我会消失。<p> 表示当document全部下载完毕 时执行函数 <p>也要点击我哦。<p> </body>
简单例子 <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全部下载完毕 时执行函数