jQuery的一些简单例子
jQuery 是一个 JavaScript 库。
?
以下代码来自度娘或W3Cschool。
?
一、入门实例
<html><head><title>入门实例</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="script/jquery-1.8.0.js"></script><!-- 当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。ready() 函数规定当 ready 事件发生时执行的代码。ready() 函数仅能用于当前文档，因此无需选择器。允许使用以下三种语法：1.$(document).ready(function)2.$().ready(function)3.$(function)提示：ready() 函数不应与 <body onload=""> 一起使用。 --><script type="text/javascript"> // jQuery 函数位于一个 document ready 函数中,这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码$(document).ready(function(){ $('#div1').append('<b>Hello World</b>'); }); </script></head><body><div id="div1"></div></body></html>?
?
二、使用jQuery的html()和text()方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><html> <head> <title>使用jQuery的html()和text()方法</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="script/jquery-1.8.0.js"></script> <script type="text/javascript">$(document).ready(function(){//$(selector).html(content) 改变被选元素的（内部）HTML $('#divResult').html($('#p1').text()); //text()方法，设置或返回被选元素的文本内容。$('#divResult2').html($('#p1').html()); }); </script> </head> <body><div id="div1"> <p id="p1"><b>W3Cschool</b></p> <p id="p2">jQuery太好了</p> </div> <div id="divResult"></div> <div id="divResult2"></div> </body></html>?
?
三、对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" /><title>对class进行动态操作 </title><script src="script/jquery-1.8.0.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function() {$("#table tr").mouseover(function() {$(this).addClass("over");});$("#table tr").mouseout(function() {$(this).removeClass("over");});// 选择每个相隔的（偶数） <tr> 元素，触发的事件$("#table tr:even").addClass("double");});// 去除样式function removeEvenTdClass() { $("#table tr:even").removeClass(); } // 增加样式 function addEvenTdClass() { $("#table tr:even").addClass("double"); }</script><style type="text/css">th {background: gray;color: white;}table {width: 30em;height: 10em;}td {border-bottom: 1px solid #95bce2;text-align: center;}tr.over td {font-weight: bold;}tr.double td {background: #DAF3F1;}</style></head><body><table id="table" border="0" cellpadding="0" cellspacing="0"><tr><th>姓名</th><th>年龄</th><th>籍贯</th><th>手机</th></tr><tr><td>aaaa</td><td>18</td><td>上海</td><td>13088888888</td></tr><tr><td>bbbb</td><td>20</td><td>广州</td><td>13088888888</td></tr><tr><td>ccccc</td><td>23</td><td>上海</td><td>13088888888</td></tr><tr><td>ddddd</td><td>24</td><td>上海</td><td>13088888888</td></tr><tr><td>eeeee</td><td>43</td><td>北京</td><td>13088888888</td></tr><tr><td>fffff</td><td>26</td><td>上海</td><td>13088888888</td></tr><tr><td>gggggg</td><td>19</td><td>上海</td><td>13088888888</td></tr><tr><td>hhhhhh</td><td>43</td><td>上海</td><td>13088888888</td></tr><tr><td>iiiiii</td><td>32</td><td>上海</td><td>13088888888</td></tr></table><input id="btnRemoveClass" name="btnRemoveClass" type="button" value="removeEvenTdClass" onclick="removeEvenTdClass()"/> <input id="btnAddClass" name="btnAddClass" type="button" value="addEvenTdClass" onclick="addEvenTdClass()"/> </body></html>?
?
四、对表格的操作，选择器的使用
<!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" /><title>对表格的操作，选择器的使用 </title><script src="script/jquery-1.8.0.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function() {$("#table tr").mouseover(function() {$(this).addClass("over");});$("#table tr").mouseout(function() {$(this).removeClass("over");});// 选择每个相隔的（偶数） <tr> 元素，触发的事件$("#table tr:even").addClass("double");});</script><style type="text/css">th {background: gray;color: white;}table {width: 30em;height: 10em;}td {border-bottom: 1px solid #95bce2;text-align: center;}tr.over td {font-weight: bold;}tr.double td {background: #DAF3F1;}</style></head><body><table id="table" border="0" cellpadding="0" cellspacing="0"><tr><th>姓名</th><th>年龄</th><th>籍贯</th><th>手机</th></tr><tr><td>aaaa</td><td>18</td><td>上海</td><td>13088888888</td></tr><tr><td>bbbb</td><td>20</td><td>广州</td><td>13088888888</td></tr><tr><td>ccccc</td><td>23</td><td>上海</td><td>13088888888</td></tr><tr><td>ddddd</td><td>24</td><td>上海</td><td>13088888888</td></tr><tr><td>eeeee</td><td>43</td><td>北京</td><td>13088888888</td></tr><tr><td>fffff</td><td>26</td><td>上海</td><td>13088888888</td></tr><tr><td>gggggg</td><td>19</td><td>上海</td><td>13088888888</td></tr><tr><td>hhhhhh</td><td>43</td><td>上海</td><td>13088888888</td></tr><tr><td>iiiiii</td><td>32</td><td>上海</td><td>13088888888</td></tr></table></body></html>?
?
五、jQuery的隐藏特效hide()方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><html> <head> <title>jQuery的隐藏特效hide()方法</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="script/jquery-1.8.0.js"></script><!-- 演示 jQuery hide() 函数，隐藏当前的 HTML 元素。$(selector).hide(speed,callback), speed：可选。规定元素从可见到隐藏的速度。默认为 "0"。 callback：可选。hide 函数执行完之后，要执行的函数 --><script type="text/javascript"> $(document).ready(function(){ $("#table").hide(4000,function(){ alert("Animation Done!"); }); });</script> </head> <body><table id="table" border="1" cellpadding="0" cellspacing="0"><tr> <th width="50">姓名</th> <th width="50">年龄</th> <th>手机</th> </tr> <tr> <td>阿狸</td> <td>21</td> <td>13800138000</td> </tr> <tr> <td>桃子</td> <td>21</td> <td>13800138000</td> </tr> <tr> <td>影子</td> <td>21</td> <td>13800138000</td> </tr></table></html>?
?
六、对DOM的简单操作
<html><head><title>对DOM的简单操作</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="script/jquery-1.8.0.js"></script><!-- insertBefore() 方法在被选元素之前插入 HTML 标记或已有的元素。注释:如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之前。语法:$(content).insertBefore(selector)content：必需。规定要插入的内容。可能的值：selector：必需。规定在何处插入被选元素。 after() 方法在被选元素后插入指定的内容。语法：$(selector).after(content)content 必需。规定要插入的内容（可包含 HTML 标签）。 --><script type="text/javascript"> function sure(){$("<b>Hello</b>").insertBefore("#p1"); $("#p1").after("<b>World</b>"); }; </script></head><body><p id="p1">这是一个段落</p><br/>在文字前面加上Hello，后面加上World<input type='button' onclick="sure();" value="确定"/></body></html>?
?
七、对CSS的操作
<html><head><title>对CSS的操作</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="script/jquery-1.8.0.js"></script><!-- css() 方法设置或返回被选元素的一个或多个样式属性。 --><script type="text/javascript">$(document).ready(function(){$("p").css({ "margin-left": "10px", "background-color": "blue" }); }); </script></head><body><p id="p1">这是一个段落</p></body></html>?
?
八、有关attr属性的应用，2个例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><html> <head> <title>有关attr属性的应用1</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="script/jquery-1.8.0.js"></script> <!-- :gt() 选择器选取 index 值高于指定数的元素。index 值从 0 开始。 语法：$(":gt(index)") index：必需。规定要选择的元素。 attr() 方法设置或返回被选元素的属性值。 语法：$(selector).attr(attribute,value) attribute：规定属性的名称。 value：规定属性的值。 --> <script>function sure(){ $("button:gt(0)").attr("disabled","disabled"); }; </script> <style> button { margin:10px; } </style> </head> <body> <button>0th Button</button> <button>1st Button</button> <button>2nd Button</button> 除第一个按钮以外，其它禁用 <input type="button" value="确定" onclick="sure();" /> </body></html>?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><html> <head> <title>有关attr属性的应用2</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="script/jquery-1.8.0.js"></script> <!-- attr() 方法设置或返回被选元素的属性值。 语法：$(selector).attr(attribute) attribute：规定要获取其值的属性。 --> <script> function sure(){ var title = $("em").attr("title"); $("div").text(title); }; </script> <style> em { color:blue; font-weight;bold; } div { color:red; }</style> </head> <body> <!-- <em> 把文本定义为强调的内容。 --> <p> Once there was a <em title="huge, gigantic">large</em> dinosaur... </p> The title of the emphasis is:<div></div> 获取em的title属性 <input type='button' onclick='sure();' value='确定' /> </body></html>?
?
九、demos
JQuery-BaseDemo.zip