全部章节 >>>>
本章目录
6.1 jQuery概述
6.1.1 初识 jQuery
为了解决开发过程中的兼容性问题，产生了许多JavaScript库，目前被频繁使用的JavaScript库包括 jQuery、Prototype、Spry 和 Ext JS
其中使用最广泛的JavaScrip库是jQuery, 是于2006年创建的一个JavaScript库
- 集 JavaScript、CSS、DOM 和 Ajax 于一体的强大框架体系
- 它的主旨是以更少的代码实现更多的功能（Write less,do more）
6.1.2 jQuery 基本功能
jQuery 基本功能
- 访问和操作 DOM 元素
- 对页面事件的处理
- 大量插件在页面中的运用
- 与 Ajax 技术的完美结合
- 大幅提高开发效率
6.1.3 搭建 jQuery 开发环境
- 下载 jQuery 文件库（http://jquery.com）
- 引入 jQuery 文件库
在页面<head></head> 标签对中加入如下代码：
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
示例：单击按钮时，隐藏的 <div> 逐渐放大并显示出来
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn").click(function() {
$("#info").show(2000);//show(2000) 表示用 2 秒显示标签
});
});
</script>
<input type="button" value=" 显示 " id="btn"/>
<div id="info" style= "display:none">
<img src="../img/mobile.jpg" width="350"/>
</div>
6.1.4 编写一个简单的 jQuery 应用
- $(document).ready(function(){ }); 类似JavaScript代码:window.οnlοad=function(){ }
- $(document).ready 在页面框架下载完毕后就执行；而 window.onload 必须在页面全部加载完毕（包括下载图片）后才能执行
- $(document).ready(function(){ }) 可以简写成 $(function(){ })
- $(“#btn”).click(function(){ }); 使用 click() 方法，将函数绑定到指定元素的 click 事件中，单击按钮时，绑定的函数就会执行
6.1.5 jQuery代码的特点
示例：单击 <h3> 标签时，切换属性值，同时后面的兄弟元素会切换其显示或隐藏状态
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("h3").click(function() {
$(this).toggleClass("highLight").next("ul").toggle();
});
});
</script>
- $符号标志：是JQuery对象的简写形式，$()等效于jQuery()，是jQuery程序的标志
- 隐式循环：当使用jQuery查找符合要求的元素后，无须一一遍历每一个元素，直接通过jQuery命令操作符合要求的元素
- 链式书写：可以将针对于同一个对象多个操作命令写在一个语句中，还可以插入换行和空格
