jQuery是一个非常优秀的JavaScript库。
?
使用jQuery动态更新HTML页面只需要两个步骤：
-
获取jQuery对象，jQuery对象通常是对DOM对象的包装
-
调用jQuery对象的方法来改变自身
学习jQuery只要掌握两点，一就是获取jQuery对象，二就是怎样灵活使用jQuery对象的方法。
?
让jQuery与其他JavaScript库共存：
-
如Prototype，要使他们两共存，就要解决$()函数的使用，解决办法就是取消jQuery中的$()函数，使用其他的代替?，请看下面的代码
<html> <head> <base href="<%=basePath%>"> <title>取消$()函数，使用其他的代替</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="js/jquery-1.4.3.js"></script> </head> <body> <div id="a"></div> <script type="text/javascript"> var j = jQuery.noConflict(); var d = j("#a"); d.html("我要学习jQuery") </script> </body>?
获取jQuery对象，看下面的代码
<body>
<center>
<h3>
获取jQuery对象，jQuery()函数是获得jQuery对象的根本途径,有四种获得方式：
</h3>
<h3>
第一种CSS选择器jQuery(CSS选择器)获得
</h3>
<h3>
第二种HTMLjQuery(HTML)获得
</h3>
<h3>
第三种element元素jQuery(element元素)获得
</h3>
<h3>
第四种callback函数jQuery(callback)获得
</h3>
</center>
<div id="msg1"></div>
<div id="msg2"></div>
<script type="text/javascript">
//获取所有<div.../>标签对应的DOM对象
$("div").append("新增的内容");
//使用字符串创建一个DOM对象，并将添加到body元素内
$("<input type='button' value='单击我'/>").appendTo(document.body);
//直接将一个DOM对象包装成jQuery对象
$(document.getElementById('msg1')).css("background-color", "#aaffaa").css(
"border", "1px solid black");
//指定页面加载完成后
$(function() {
alert("页面加载完成");
});
</script>
</body>
?使用jQuery函数，通过css选择器来访问DOM元素
<!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>
<title>使用jQuery()函数(以CSS选择器访问DOM元素)</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<style type="text/css">
.test {
font-size: 20pt;
}
</style>
<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
</head>
<body>
<ul>
<li id="java">
Java
</li>
<li id="javaee" class="test">
Java EE
</li>
<li id="ajax">
Ajax
</li>
<li id="xml">
XML
</li>
<li id="ejb">
EJB
</li>
<li>
<span id="hibernate">Hibernate</span>
</li>
</ul>
<script type="text/javascript">
//获取id为java的元素(#id),文档处理，使用append(content)函数
$("#java").append("<b> 是id为java的元素</b>");
//获取所有包含id属性的<li.../>元素，为它们增加背景色(tagName[attribute]),操作CSS使用css(name, value)函数
$("li[id]").css("background-color", "#bbbbff");
//获取class属性为test的元素，并为它们增加边框(.class)的css选择器,操作CSS使用CSS(name, value)函数
$(".test").css("border", "3px dotted black");
//同时获取id为xml、hibernate的元素
$("#xml,#hibernate").append("<b> 是id为xml、hibernate其中之一的元素</b>");
//获取ul之内，id为hibernate的元素
$("ul #hibernate").append("<br /><b> 位于ul之内、id为hibernate的子元素</b>");
//获取ul之内，id为ajx的直接子元素
$("ul>#ajax").append("<b>ul之内、id为ajax的子元素</b>").css("border",
"2px solid black");
//获取id为ajax之后的所有li元素
$("#ajax~li").css("background-color", "#ff5555");
</script>
</body>
</html>
?使用jQuery函数，通过css选择器来访问DOM元素（附加限定）
<!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>
<title>使用jQuery()函数(选择器附加限定词)</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<style type="text/css">
.test {
font-size: 20pt;
}
</style>
<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
</head>
<body>
<ul>
<li id="java">
Java
</li>
<li id="javaee" class="test">
Java EE
</li>
<li id="ajax">
Ajax
</li>
<li id="xml">
XML
</li>
<li id="ejb">
EJB
</li>
<li>
<span id="hibernate">Hibernate</span>
</li>
</ul>
<script type="text/javascript">
//访问ul元素下第一层的第一个li子元素。
$("ul>li:first").append("<b> 是ul元素之内第一个li子元素</b>");
//访问ul元素之内，没有id属性的li子元素
$("ul>li:not([id])").append("<b> 是ul元素之内、没有id属性li子元素</b>");
//访问ul元素之内，索引为奇数的li子元素，并为它们添加背景色
$("ul>li:even").css("background-color", "#ccffcc");
//访问ul元素之内，索引大于4的li子元素(元素索引从0开始)
$("ul>li:gt(4)").append("<br/><b> 是ul元素之内、索引大于4的li子元素</b>").css("border",
"1px dashed black");
//访问ul元素之内，且包含span元素的li子元素
$("ul>li:has('span')").append("<br/><b> 是ul元素之内、且包含span元素的li子元素</b>");
//访问li元素之内，且可见的span子元素
$("li>span:visible").append("<b> 是li元素之内，且可见的span子元素</b>").css(
"background-color", "#bbbbbb");
</script>
</body>
</html>
?使用jQuery()函数(表单相关选择器)
<!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>
<title>使用jQuery()函数(表单相关选择器)</title>
<meta name="website" content="http://www.crazyit.org" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
</head>
<body>
<input id="user" type="text" />
<br />
<input id="pass" type="password" />
<br />
<textarea id="intro"></textarea>
<br />
<select id="gender">
<option value="male" selected="selected">
男
</option>
<option value="female">
女
</option>
</select>
<br />
<br />
<br />
<input id="pass" type="checkbox" checked="checked" value="xx" />
<br />
<script type="text/javascript">
//获取所有的input、textarea、button、select元素,也可以使用tagName("input")
$(":input").val("test");
//获取所有指定了selected="selected"的元素
$(":selected").css("border", "2px dashed black");
//获取所有指定了checked="checked"的元素,并取消它们的选中
$(":checked").attr("checked", "");;
</script>
</body>
</html>
?
?