什么是jQuery?
jQuery是JavaScript的程序库之一,它是JavaScript对象和实用函数的封装。而且使用jQuery制作交互特效的语法更为简单,代码量大大减少了。此外,使用jQuery与单纯使用JavaScript相比最大的优势是能使页面在各浏览器中保持统一的显示效果,即不存在浏览器兼容性问题。JavaScript是一种面向Web的脚本语言,而JavaScript本身存在两个弊端:一个是复杂的文档对象模型,另一个是不一致的浏览器实现。
jQuery的用途?
1.访问和操作DOM元素
2.控制页面样式
3.对页面事件的处理
4.方便地使用jQuery插件
5.与Ajax技术完美的结合
jQuery的优势?
jQuery 的主旨是write less,de more (以更少的代码,实现更多的功能)。jQuery独特的选择器、链式操作,事件处理机制和封装,以及完善的Ajax 都是其他JavaScript 库望尘莫及的。总体来说,jQuery 主要有以下优势。
1) 轻量级。jQuery 的体积较小,压缩之后,大约只有100KB。
2)强大的选择器。jQuery 支持几乎所有的CSS 选择器,以及jQuery 自定义的特有选择器。由于jQuery 具有支持选择器这一特性,使得具备一定CSS经验的开发人员学习jQuery更加容易。
3) 出色的DOM 封装。jQuery 封装了大量常用的DOM操作,使开发者在编写DOM操作相关程序的时候能够更加得心应手。jQuery 能够轻松地完成各种使用JavaScript 编写时非常复杂的操作,即使JvaScript 新手也能编写出出色的程序。
4)可靠的事件处理机制。jQuery 的事件处理机制吸收了JavaScript 中的事件处理函数的精华,使得jQuery在处理事件绑定时非常可靠。
5)出色的浏览器兼容性。作为一个流行的JavaScript 库,解决浏览器之间的兼容性是必备的条件之一。jQuery能够同时兼容IE 6.0+.Firefox 3.6+、Safari 5.0+.Opera和Chrome等多种浏览器,使显示效果在各浏览器之间没有差异。
6) 隐式迭代。当使用jQuery 查找到相同名称(类名、标签名等) 的元素后隐藏它们时,无须循环遍历每个返的元素,它会自动操作所匹配的对象集合,而不是单独的对象,这一举措使得大量的循环结构变得不再必要,从而大幅地减少了代码量。
(7) 丰富的插件支持。jQuery 的易扩展性,吸引了来自全球的开发者来编写jQuery 的扩展插件。目前已经有成百上干的官方插件支持,而且不断有新插件面世。
配置jQuery环境?
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在页面中引入jQuery库文件</title>
</head>
<body>
<!--在body标签中引入jQuery库文件-->
<script src="JS/jquery-1.8.3.js" type="text/javascript"></script>
</body>
</html>
编写第一个jQuery程序
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹出窗口特效</title>
</head>
<body>
<script src="JS/jquery-1.8.3.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
alert("我欲乘风破浪,踏遍黄沙海浪!");
});
</script>
</body>
</html>
jQuery中页面载入事件的方法:
语法:
$(document).ready(function () {
//执行代码
});
类似于如下JavaScript代码
window.οnlοad=function(){
//执行代码
}
jQuery语法结构
语法:
$(selector).action();
1.工厂函数
在jQuery 中,美元符号"$"等价于jQuery ,即$()=jQuery ()。$( )的作用是将DOM对象转化为jQuery 对象,只有将DOM对象转化为jQuery 对象后,才能使用jQuery 的方法。
2.选择器selector
jQuery支持CSS 1.0到CSS 3.0规则中几乎所有的选择器,如标签选择器、类选择器,ID选择器和后代选择器等,使用jQuery选择器和$( )工厂函数可以非常方便地获取需要操作的DOM 元素,语法格式如下。
语法
$(selector)
D选择器、标签选择器、类选择器的用法如下所示。
$ ("#userName) ;//获取DOM中id为userName的元素
$("div") ;//获取DOM中所有的div 元素
$(".content") ;//获取DOM中class 为content的元素
3.方法action( )
jQuery 中提供了一系列方法。在这些方法中,一类主要的方法就是事件处理方法,主要用来绑定DOM元素的事件和事件处理方法。
jQuery 程序的代码风格?
包含$符号和连缀操作。
可以将DOM 对象转换成jQuery 对象,以使用jQuery 提供的丰富功能: 也可以将jQuery 对象转换成DOM 对象,使用DOM 对象特有的成员提供的功能。
可以使用addClass( )方法和css( )方法为DOM 元素添加样式。
使用next( )方法可以获得所匹配元素集合中每个元素其后紧邻的同辈元素。
使用show( )和hide( )可以设置元素的显示和隐藏。