一、什么是jQuery?
jQuery是一个JavaScript的函数库,也是一个轻量级的“写的少,做的多”的JavaScript框架。
二、为什么使用jQuery?
(1)轻量级:jQuery非常小,压缩包只有18K左右。
(2)强大的选择器:jQuery不仅支持CSS中的所有selector,还有自己独有的selector。
(3)出色的DOM操作封装:封装了大量常用的DOM操作
(4)兼容性好:能够兼容不同的浏览器,同时还修复了一些web之间的差异
(5)链式编程:对发生在同一jQuery对象上的一组动作,可以直接连写无需重复获取对象。这使得jQuery代码无比优雅。
(6)隐式迭代:当使用jQuery找到找到带有“.class”的全部元素然后隐藏它们时,无需循环遍历每个返回元素。
(7)行为与结构分离
(8)丰富的插件支持
(9)开源
三、jQuery的功能。
(1)HTML元素的选取和操作以及事件函数
(2)CSS操作
(3)JavaScript特效和动画
(4)HTML 中DOM遍历和修改
(5)AJAX
(6)Utilities
(7)还提供了大量的插件
如果网站包含许多页面且希望jQuery的函数易于维护,则应考虑将其放到独立的“ ***.js ”文件中。
四、jQuery语法
jQuery语法是通过选取HTML元素,并对选取的元素执行某些操作。
基础语法:$(selector).action() 。其中$ 用于定义jQuery,selector:选择符,
例如:$(this).hide() 隐藏当前的元素。
$("p").hide() 隐藏所有的段落。
$("p.test").hide() 隐藏所有class = "test" 的段落
$("#test").hide() 隐藏所有 id = "test" 的段落
五、jQuery选择器
主要是用于对HTML中元素组或者单个元素进行操作,基于元素,id,类,属性,属性值等查找(选择)HTML元素。所有选择器都是以$开头:$().
(1) 元素选择器
元素选择器基于元素名选取元素。在页面中选取所有的<p> 元素:$("p").
(2) id选择器
通过HTML元素的id属性选择指定元素。页面中元素的id应是唯一的,所以在页面中选唯一元素需要通过id选择器:$("#id").
(3) class选择器
通过指定的class选择元素 $(".class").
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("#commentForm").validate(); //id选择器
$("p:first").select( alert("first <p>")); //元素选择器 选择第一个P元素
$(".cmxform").css("background","red") //class选择器
})
</script>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">名字 (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url">
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
</body>
</html>
(4)其他选择器
$("*") 选择所有元素
$("p.into") 选择class = into 的<p>元素
$("p:first") 选择第一个<p>元素
$("[href]") 选择带有href属性的元素
$("a[target = _black]") 选择所有target属性值等于''_black''的元素
$(":button") 选择type = "button"的元素
$("tr:even") 选择偶数位置的<tr>元素
六、什么是jQuery事件
jQuery是为事件处理特别设计的。页面对不同访问者的相应叫做事件。事件处理程序:当HTML中发生某些事件时所调用的方法
七、jQuery事件的方法
$("p").click(function(){ }); click()就是一个事件,function(){ } 就是事件方法:定义什么时间出发该事件
PS:什么是DOM
DOM是文档对象模型,假如把文档看做成一个单独的对象,DOM就是如何用HTML或者XML 对这个对象进行操作和控制的标准。