3.2 JavaScript与jQuery
jQuery是一个兼容多种浏览器的JavaScript库，其核心理念是write less,do more（用最少的代码实现更丰富的效果）。jQuery的语法设计可以使开发者在实现相同动态效果时比应用JavaScript更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能方面，代码更简洁、易读。除此以外，jQuery还提供了API让开发者自由编写插件。其模块化的使用方式使开发者可以很轻松就能开发出功能强大的静态或动态网页。jQuery的优点如下。
（1）兼容多款浏览器；
（2）以CSS选择器为基础查找DOM对象；
（3）允许自定义插件；
（4）在线学习文档齐全。
下面简单介绍一下jQuery的使用步骤，希望对想入门的读者有所帮助。
1. 下载jQuery库
jQuery库在jQuery官网（http://jquery.com/）中单击Download jQuery，可以下载到不同使用版本。
（1）Production version：用于实际的网站中，已压缩。
（2）Development version：用于测试和开发，未压缩。
2. 引入jQuery库
在XHTML文档中使用jQuery库来实现动态效果时，只需将JQuery库当作外部js文件引入XHTML文档。
例如：
<html> <head> <title>如何引入jQuery库</title> <script src="存放jquery库的目录名称/jquery.js"></script> </head> <body> </body> </html>
3．jQuery基础语法
jQuery是针对HTML元素编写的，因此可以对HTML元素执行各种操作，见表3-14所示。
表3-14 jQuery基本选择器
| 语法 | 描述 |
| $(this) | 当前HTML元素 |
| $("p") | 所有<td>元素 |
| $(".intro") | 所有class="intro" 的元素 |
| $("#intro") | id="intro" 的元素 |
| $("ul li:first") | 每个<ul>的第一个<li>元素 |
| $("[href]") | 选取所有带有href属性的元素 |
| $("[href='#']") | 选取所有带有href值等于“#”的元素 |
| $("[href!='#']") | 选取所有带有href值不等于“#”的元素 |
| $("[href$='.jpg']") | 选取所有href值以“.jpg”结尾的元素 |
| $("p").css("background-color","red"); | CSS选择器 |
基础语法：
$(selector).action()
其中：
（1）美元符号（$）定义jQuery对象；
（2）选择器（selector）获取HTML元素；
（3）jQuery的action()执行对元素的操作。
下面演示具体应用实例。
3-21.html
<html>
<head>
<title>比较 jQuery与 JavaScript</title>
<script src="jquery.js"></script>
</head>
<body>
体验使用 jQuery获取元素节点与 JavaScript有什么不同，主要看简化方面。</p>
<h2 class="intro">看 class属性如何使用 jQuery</h2>
<h1 id="intro">看 id属性如何使用 jQuery</h2>
<script>
//JavaScript方式
//获取 p元素节点,返回节点列表
document.getElementsByTagName("p");
//获取 id=intro元素节点，返回该节点对象
document.getElementById("intro");
//jQuery方式
//获取 p节点元素的文本节点
$("p").innerHTML;
//获取 class=intro元素节点的文本节点
$(".intro").innerHTML;
//获取 id=intro元素节点的文本节点
$("#intro").innerHTML;
</script>
</body>
</html>
在线客服
共有条评论 网友评论