四、JS04 初识 jQuery
四、初识 jQuery
4.1 jQuery 简介
4.1.1 jQuery 简介
- jQuery 是一个快速，小型且功能丰富的 javaScript 函数库
- 借助易于使用的API（可在多种浏览器中使用），使HTML文档的遍历和操作，事件处理，动画和Ajax等事情变得更加简单
- Query是JavaScript的一个工具库，工具库就是指封装好的JavaScript函数，可以直接在程序中进行调用
4.1.2 jQuery 的用途
jQuery 是 JavaScript 的程序库之一，因此，许多使用 JavaScript 能实现的交换特效，使用 jQuery 也能够完美实现
下面简单介绍一下 jQuery 的应用场合
1、访问和操作 DOM 元素
- 使用 jQuery 可以很方便地获取和修改页面中指定的元素
- jQuery 提供了一套方便、快捷的方法，可以对元素进行删除、移动、复制
- 大大提高了用户对页面的体验度
2、控制页面元素
- 通过引入 jQuery ，程序开发人员可以很便捷地控制页面的 CSS 文件
- jQuery 操作页面的样式可以很好地兼容各种浏览器
3、对页面事件的处理
- 引入 jQuery 后，可以是页面的表现层与功能开发分离
- 开发者更多地专注于程序的逻辑与功效
- 通过事件绑定，可以很轻松地实现两者结合
4、方便地使用 jQuery 插件
- 引入 jQuery 后，可以使用大量的 jQuery 插件来完善页面的功能和效果
- 如 jQuery UI 插件库、Form 插件、Validate 插件库
- 这些插件的使用极大地丰富了页面的展示效果
5、与 Ajax 技术的完美结合
- 利用 Ajax 异步读取服务器数据的方法，极大地方便了程序的开发
- 增强了页面的交互，提升了用户体验
4.1.3 jQuery 的优势
- 轻量级 jQuery 单独体积较小，压缩之后，大约只有 100KB
- 强大的选择器 jQuery 支持几乎所有的 CSS 原则器，以及 jQuery 自定义的特有选择器
- 出色的 DOM 封装 jQuery 封装了大量常用的 DOM 操作，使开发者在编写 DOM 操作相关的程序的时候，更加得心应手
- 可靠的事件处理机制 jQuery 的事件处理机制吸收了 JavaScript 中的事件处理函数的精华，使 jQuery 在处理事件绑定更可靠
- 出色的浏览器兼容性 jQuery 能同时兼容 IE 6.0+、Firefox 3.6+、Safari 5.0+、Opera 和 Chrome 等多种浏览器
- 隐式迭代 当使用 jQuery 查找到相同名称的元素后隐藏他们时，无需循环遍历每个返回的元素，它会自动操作所匹配的对象集合
- 丰富的插件支持 jQuery 的易扩展性，吸引了来自全球的开发者来编写 jQuery的扩展插件
5.2 jQuery 语法
5.2.1 编写第一个 jQuery 程序
- 编写程序前，需要先导入所对应的 jQuery包
- 编写一个程序：在页面完成加载时，弹出一个对话框，显示 “Hello”
- 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹出窗口特效</title>
</head>
<body>
<script type="text/javascript" src="../JQuery/jquery-1.12.4.js"></script>\
<script type="text/javascript" >
$(document).ready(function (){
alert("Hello");
});
</script>
</body>
</html>
- 以上 $(document).ready() 语句中的 ready() 方法类似于 JS 中的 onload() 方法
- ready() 是jQuery中的页面载入事件，意味着在页面加载完成时，执行事件
window.onload 与 $(document).ready() 的对比
| window.onload | $(document).ready() | |
|---|---|---|
| 执行时机 | 必须等待网页中所有的内容加载完毕后 (包括图片、Flash、视频等) 才能执行 | 网页中所有的 DOM 文档结构绘制完毕后即刻执行，可 能与 DOM 元素关联的内容（图片、Flash、视频等） 并没有加载完毕 |
| 编写个数 | 同一页面不能同时编写多个 执行以下代码： window.οnlοad=function(){ alert(“小明学习不好”); } window.οnlοad=function(){ alert(“小明学习不好”); } 结果只会输出一次"小明学习不好" | 同一页面能同时编写多个 执行以下代码： $(document).ready(function(){ alert(“小明学习不好”); }); (document).ready(function(){ alert(“小明学习不好”); }); 结果输出两次"小明学习不好" |
| 简化写法 | 无 | 可以简写成 $(function(){ //执行代码 }); |
- 实际开发中，通常需要在页面加载后使用 JavaScript 执行一些初始化工作
- 一般的做法是在 $(document).ready() 方法中执行这些工作
5.2.2 jQuery 语法结构
- jQuery 的语句主要包括三大部分：$()、document 和 ready()
- 这三大部分在 jQuery 中分别被称为工厂函数、选择器和方法
- 语法结构如下
$(selector).action();
1、工厂函数 $()
- 美元符号等价于 jQuery，即 $()=jQuery()
- $() 的作用是将 DOM 对象转化为 jQuery 对象，只有将 DOM 对象转为 jQuery 对象后，才能使用 jQuery 方法
- 当 $() 的参数是 DOM 对象时，该对象无须使用双引号包括起来
2、选择器 selector
- jQuery 支持 CSS 1.0 到 CSS 3.0 规则中几乎所有的选择器，如标签选择器、类选择器、ID 选择器和后代选择器
- 使用 jQuery 选择器和 $() 工厂函数可以非常方便地获取需要操作的 DOM 元素
- 语法格式如下
$(selector)
- ID 选择器、标签选择器、类选择器的用法如下所示
$("#userName"); //获取 DOM 为 id 为 userName 的元素
$("div"); //获取 DOM 中所有的 div 元素
$(".content"); //获取 DOM 中 class 为 content 的元素
3、方法 action()
- jQuery 中提供了一系列方法，在方法中，一类重要的方法就是事件处理方法
- 主要是用来绑定 DOM 元素的事件和事件处理方法
- 许多基础事件、如鼠标事件、键盘事件和表单事件等、都可以通过事件方法进行绑定
- 对应的在 jQuery 中则写作 click()、mouseover() 和 mouseout() 等
jQuery 中常用的方法
| 方法名 | 描述 |
|---|---|
| jQuery对象.addClass([样式名]) | 向被选元素添加一个或多个类样式，样式名可以是一个，也可以多个 多个样式名需要用空格隔开 |
| jQuery对象.css(“属性”,“属性值”); | 为匹配的元素添加一个 CSS 样式 |
| jQuery对象.css(“属性1”:“属性值1”,“属性2”:“属性值2”,…); | 为匹配的元素同时这是多个 CSS 属性 |
| jQuery对象.children(); | 查找匹配的元素的所有直接的子元素 |
| jQuery对象.siblings(); | 查找除匹配的元素的所有兄弟元素 |
| jQuery对象.next(); | 返回匹配元素的下一个同辈元素 |
| jQuery对象.show(); | 显示匹配对象元素 |
| jQuery对象.hide()); | 隐藏匹配对象元素 |
5.2.3 jQuery 程序的代码风格
1、“$” 的使用
- 在 jQuery 程序中，使用最多的时美元符号 “$”
- 无论是页面元素的选择器，还是功能函数的前缀，都必须使用该符号
- 它是 jQuery 程序的标志，即 $ 等同于 jQuery
2、链式操作
- jQuery 代码中采用了一种链式编程模式
- 它可以对一个对象进行多重操作，并将操作结果返回给该对象，以便于将返回结果应用于该对象的下一次操作
- 代码示例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>你是人间的四月天</title>
<link rel="stylesheet" href="css/april.css">
</head>
<style>
body,h1,h2,p,div{margin: 0; padding: 0;}
body{font-size: 14px; line-height: 28px; font-family: "���ź�";}
#book{
margin: 0 auto;
width: 800px;
overflow: hidden;
padding-top: 10px;
}
img{float: left; margin-right: 10px;}
h1{font-size: 32px; line-height: 45px;}
.intro{clear: both; display: none;}
h2{line-height: 45px; background: #999999; padding-left: 15px; color: #ffffff;}
.intro p{text-indent: 2em;}
.title{
font-size: 24px;
color: #0000ff;
}
</style>
<body>
<div id="book">
<img src="images/book.gif" /><h1>你是人间的四月天</h1>
<p>
笑响亮了四面风<br/>
轻灵在春的光艳中交舞看变<br/>
你是一月早天的云烟<br/>
黄昏吹着风的软<br/>
....<br/>
<a href="#" class="whole">查看全部</a><br/>
</p>
<div class="intro">
<h2>内容简介</h2>
<p>你是人间四月天是永正图书推出的“比烟花寂寞”系列之三。“比烟花寂寞”系列包括《民国女子》《爱眉小札》《你是人间四月天》《你是我眉心未完的诗》。这系列以前所未有的包装形式推出，引起读者尖叫连连。一经上市，便引发各大报纸、媒体的一致报道。
</p><p>有人崇拜她，把她当做女神、偶像；也有人放出话来，“喜欢她的女人，品行有问题；喜欢她的男人，脑子有问题。”
</p><p>她是缺乏幽娴品德的女人，她喜好与人辩论，她用诗句表达她的哀愁，她精通文理，学贯中西。她对文学和艺术，具有本能的、直接的感悟。生长富贵，命运坎坷，修养让她把热情藏在里面，热情却是她生活的支柱。
她，就是那个万千宠爱于一身的一代才女——林徽因。
</p><p>《你是人间四月天》是林徽因的一本小说、诗歌、散文、剧本集，几乎收录了林徽因所有的经典文学作品。其散文成就颇大，虽然数量不多，但风格独特，知识性强。诗歌尤多，其诗作融人中国古典诗歌和西方唯美派的一些表现手法，每篇文章都是她灵动思绪和满腹才华的凝结。她的语言温婉淡雅，如行云流水，又如拂面的春风。可以说。她的文字拥有超越时间的魅力。笔下流露出令人惊讶的对民间百态的深谙。</p>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" >
$(document).ready(function (){
alert("ni");
$("#book h1").click(function(){
$(this).addClass("title").next().css("color","green");
})
$(".whole").click(function(){
$(".intro").show();
})
})
</script>
</body>
</html>
- 由上面可以看出，在设置完 “class” 属性后，紧接着又在后面设置了下一个元素的字体颜色
- 这就是 jQuery 强大的连缀模式
3、隐式迭代
- 当获取多个元素时，设置元素字体时，不需要遍历所有元素，就可以直接设置元素的样式
- 这就是隐式迭代，在 jQuery 中获取一个集合后会默认遍历内部的所有元素
5.3 DOM 对象和 jQuery 对象
5.3.1 jQuery 对象与 DOM 对象的相互转换
DOM 对象：通过 DOM 的方法获取的元素节点就是 DOM 对象及 DOM元素
jQuery 对象：通过 jQuery 包装 DOM 对象后产生的对象
DOM 对象和 jQuery 对象都由一些特有的方法
DOM 对象无法调用 jQuery 对象的方法
jQuery 对象 也无法调用 DOM 对象的方法
这就需要用到对象的相互转换了
1、将 jQuery 对象转为 DOM 对象
- jQuery 对象类似于一个数组的对象，可以通过 [index] 的方法得到相应的 DOM 对象
- 格式如下
var $txtName=$("#txtName"); //jQuery 对象
var txtName=$txtName[0]; //DOM 对象
- jQuery 对象转换成 DOM 对象在实际开发中并不多见
- 除非希望使用 DOM 对象特有的成员
2、DOM 对象转换成 jQuery 对象
- 将 DOM 对象使用函数 $() 包装起来，就可以获得一个 jQuery 对象
- 格式如下
var txtName=document.getElementById("txtName"); //DOM 对象
var $txtName=$(txtName); //jQuery 对象