1. 出自

new:http://www.jianshu.com/users/1967b163cb61/latest_articles

  1.  
  2. 1、JQuery简介
  3.  
  4.       普通JavaScript的缺点：每种控件的操作方式不统一，不同浏览器下有区别，要编写跨浏览器的程序非常麻烦。因此出现了很多对JavaScript的封装库，比如Prototype、Dojo、ExtJS、JQuery等，这些库对JavaScript进行了封装，简化了开发。这些库是对JavaScript的封装，也就是咱们调用JQuery的一句函数，JQuery内部这句函数帮我们调用JavaScript中的代码几十句，因为JQuery就是JavaScript语法写的一些函数类，内部仍然是调用JavaScript实现的，所以并不是代替JavaScript的。使用JQuery的代码、编写JQuery的扩展插件等仍然需要JavaScript的技术，Jquery本身就是一堆JavaScript函数。
  5.  
  6.            （1、Jquery是最火的JavaScript库，已集成到VS2010，MS的Ajax toolkit和JQuery结合也是最方便，JQuery的扩展插件也是非常多。
  7.            （2、JQuery的优点：尺寸小、使用简单方便（Write Less, Do More，吃得少干得多。
  8.                      链式编程（$("#div1").draggble().show().hide().fly()）、
  9.                      隐式迭代  （自动对于多个元素进行迭代方法调用））、
  10.                     屏蔽浏览器差异跨浏览器兼容性好（IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome）、插件丰富、 开源、免费。
  11.            （3、VS中JavaScript、JQuery的自动完成功能：在VS2010中直接有，VS008需要安装VisualStudio 和VS90SP1-KB958502-x86补丁会更强更好用, 下
  12.                    载地址见备注。然后引用jquery-1.4.1.js，jquery-1.4.1-vsdoc.js放到同目录下，不需要在页面引用。
  13.            （4、vsdoc是vs2008sp1以后增加的一个技术，将js文件对应的vsdoc（相当于js库提供的方法的说明库）放到和js一起，就有会第三方js的自动提示的功能
  14.  
  15. 2、简单的JQuery之Ready
  16.  
  17.      （1、注册事件的函数，和普通的dom不一样，不需要在元素上标记on**这样的事件。
  18. $(document).ready(function(){
  19.            alert("加载完毕！");
  20.        });
  21. （2、当页面Dom元素加载完毕时执行代码，可以简写为：
  22.         $(function(){
  23.            alert("加载完毕！");
  24.       });
  25.       （3、和onload类似，但是onload只能注册一次（没有C#中的+=机制），后注册的取代先注册的，而ready则可以多次注册都会被执行。
  26.                     window.onload=function(){alert("1")};window.onload=function(){alert("2")};//结果只弹出2
  27.       （4、JQuery的ready和Dom的onload的区别(*)：onload是所有Dom元素创建完毕、图片、Css等都加载完毕后才被触发，而ready则是Dom元素创建完毕后就被触发，这样可以提高网页的响应速度。在jQuery中也可以用$(window).load()来实现onload那种事件调用的时机。
  28.            $(function(){alert("1111");});//简写方式
  29.  
  30. 3、JQuery的函数
  31.     $.map(array,fu) 得到函数的返回值和$.each(array,fn)调用函数处理没有返回值
  32.  
  33. 复制代码
  34.  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  35.  2 <html xmlns="http://www.w3.org/1999/xhtml">
  36.  3 <head>
  37.  4     <title></title>
  38.  5     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
  39.  6     <script type="text/javascript">
  40.  7         /*$.map(array,fu)
  41.  8         var arr1 = [1, 2, 3];
  42.  9         var arrOne = $.map(arr1, function (item) { return item * 2; });
  43. 10         alert(arrOne);*/
  44. 11
  45. 12         /*$.each(array,fn)*/
  46. 13         var arr2 = [1, 2, 3];
  47. 14         //$.each(arr2, function (key, item) { alert(key+" and "+item); });//两个参数返回的是key+值
  48. 15         //$.each(arr2, function (item) { alert(item); });//一个参数返回的是key
  49. 16         $.each(arr2, function () { alert(this); });//没有参数自觉返回值
  50. 17      </script>
  51. 18 </head>
  52. 19 <body>
  53. 20
  54. 21 </body>
  55. 22 </html>
  56. 复制代码
  57. 4、JQuery对象和Dom对象
  58.  
  59.          （1、$('#div1')得到的就是jQuery对象，jQuery对象只能调用jQuery对象封装的方法，不能调用Dom对象的方法，Dom对象也不能调用jQuery对象的方法，所
  60.                  以 alert($('#div1').innerHTML是错的，因为innerHTML是DOM对象的属性。
  61.          （2、Array是JS语言本身的对象，不是Dom对象，因此不需要转换为Jquery对象才能用
  62.          （3、将Dom对象转换为JQuery对象的方法，$(dom对象)；当调用jQuery没有封装的方法的时候必须用Dom对象，转换方法：vardomobj = jqobj[0]或者
  63.                   vardomobj=jqobj.get(0)
  64.          （4、在引用外部js的Script标签内不能再写js代码，引用外部js的Script标签也不能用简写方法闭合。
  65.  
  66. 复制代码
  67.  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  68.  2 <html xmlns="http://www.w3.org/1999/xhtml">
  69.  3 <head>
  70.  4     <title></title>
  71.  5     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
  72.  6     <script type="text/javascript">
  73.  7         /*JQuery 对象*/
  74.  8         //$(function () { alert($('#div1').html()); });
  75.  9
  76. 10         /*Dom对象转化为JQuery对象*/
  77. 11         //$(function () { var dom1 = document.getElementById("div1"); $(dom1).html("<font color='black'>测试black</font>"); });
  78. 12
  79. 13         /*JQuery对象转化为Dom对象 +一个[0]*/
  80. 14         //$(function () { var jquery1 = $(div1)[0]; alert(jquery1.innerHTML); });
  81. 15
  82. 16         /*JQuery 修改样式css 还有val*/
  83. 17         //$(function () { $('#div1').css("background", "gray"); });//css两个参数是设置值
  84. 18         //$(function () { alert($('#div1').css("background")); }); //css一个参数是取值
  85. 19         //$(function () { $('#myInput').val(new Date()); }); //val一个参数是设置值
  86. 20         //$(function () { alert($('#myInput').val()); }); //val没有参数是取值
  87. 21
  88. 22      </script>
  89. 23 </head>
  90. 24 <body>
  91. 25     <div id="div1">
  92. 26        <font color="red">测试red</font>
  93. 27         <input type="text" name="name" value="kong" id="myInput" />
  94. 28     </div>
  95. 29 </body>
  96. 30 </html>
  97. 复制代码
  98. 5、JQuery 选择器
  99.  
  100.     （1、$(“#div1”).html();
  101.  
  102.     （2、$("TagName")来获取所有指定标签名的jQuery对象，相当于getElementsByTagName：
  103.  
  104.                例如获得所有的P：$("p").html("我们都是P");
  105.  
  106.      （3、标签选择器，拥有样式的标签选择器
  107.  
  108.              ☆ 多条件选择器：$("p,div,span.menuitem")，同时选择p标签、div标签和拥有menuitem样式的span标签元素（类似于CSS选择器）
  109.              ☆ 注意选择器表达式中的空格不能多不能少。易错！
  110.              ☆ 层次选择器：
  111. ☆☆$("div li")获取div下的所有li元素（后代，子、子的子……）
  112. ☆☆$("div > li")获取div下的直接li子元素
  113. ☆☆$(".menuitem +div")获取样式名为menuitem之后的第一个div元素（不常用）
  114. ☆☆$(".menuitem ~div")获取样式名为menuitem之后所有的div元素（不常用）
  115.  
  116.  案例1：
  117.  
  118. 复制代码
  119.  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  120.  2 <html xmlns="http://www.w3.org/1999/xhtml">
  121.  3 <head>
  122.  4     <title></title>
  123.  5     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
  124.  6
  125.  7     <script type="text/javascript">
  126.  8         $(function () {
  127.  9             $('.test').click(
  128. 10                 function () {
  129. 11                     alert($(this).text());
  130. 12                 }
  131. 13              );
  132. 14         });
  133. 15     </script>
  134. 16     <style type="text/css">
  135. 17          .test{ background-color:Red}
  136. 18      </style>
  137. 19 </head>
  138. 20 <body>
  139. 21     <div id="div1">
  140. 22         <p class="test">
  141. 23             test1</p>
  142. 24         <p class="test">
  143. 25             test2</p>
  144. 26         <p class="test">
  145. 27             test3</p>
  146. 28     </div>
  147. 29 </body>
  148. 30 </html>
  149. 复制代码
  150. 6、JQuery的迭代
  151.  
  152.       如何判断对象是否存在，jQuery选择器返回的是一个对象数组(数组中的每个对象还是Dom对象)，调用text()、html()、click()之类方法的时候其实是对数组中每个元素迭代调用每个方法，因此即使通过id选择的元素不存在也不会报错，如果需要判断指定的id是否存在，应该写：
  153.  
  154. if($("#btn1").length <= 0) {
  155.                 alert("id为btn1的元素不存在！");
  156. }
  157.  7、节点遍历
  158.         （1、  next() 方法用于获取节点之后的挨着的第一个同辈元素，
  159.         （2、$(".menuitem").next("div") 、 nextAll() 方法用于获取节点之后的所  有同辈元素， $(".menuitem").nextAll("div")  prev 、 prevAll 之前的元素
  160.         （3、siblings() 方法用于获取所有同辈元素，$(".menuitem").siblings("li")   siblings 、next 等所有能传递选择器的地方能够使用的语法都和 $() 语法一样。
  161.  
  162. 复制代码
  163.  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  164.  2 <html xmlns="http://www.w3.org/1999/xhtml">
  165.  3 <head>
  166.  4     <title></title>
  167.  5     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
  168.  6     <script type="text/javascript">
  169.  7         /*next() 和nextAll()的用法
  170.  8         $(function () {
  171.  9             $("div").click(function () {
  172. 10             //alert($(this).next().text());
  173. 11             //alert($(this).next("p").text());
  174. 12             //alert($(this).nextAll().text());
  175. 13             //alert($(this).nextAll("div").text());
  176. 14         });
  177. 15         });*/
  178. 16         /*高亮显示所以next*/
  179. 17         //$(function () { $("div").click(function () { $(this).nextAll("div").css("background","red"); }); });
  180. 18         /*高亮显示自己而已*/
  181. 19         //$(function () { $("div").click(function () { $(this).css("background", "red"); $(this).siblings().css("background","white"); }); });
  182. 20         $(function () { $("div").click(function () { $(this).css("background", "red").siblings().css("background", "white"); }); });
  183. 21
  184. 22
  185. 23     </script>
  186. 24 </head>
  187. 25 <body>
  188. 26     <div>
  189. 27         aa</div>
  190. 28     <div>
  191. 29         bb</div>
  192. 30     <div>
  193. 31         cc</div>
  194. 32     <p>
  195. 33         p1</p>
  196. 34     <p>
  197. 35         p2</p>
  198. 36     <div>
  199. 37         dd</div>
  200. 38     <div>
  201. 39         ee</div>
  202. 40 </body>
  203. 41 </html>
  204. 复制代码
  205. 8、链式编程
  206.  
  207.       链式编程就是对象一棒棒向下传，能不能正确传下来要看返回值，html()不能传，prevAll().nextAll()也传错。
  208.  
  209.                $("#tableRating td").click(function() {$(this).prevAll().next().html("a"); });//经典！
  210.  
  211. 案例1：样式的增删：addClass和removeClass
  212.  
  213. 复制代码
  214.  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  215.  2 <html xmlns="http://www.w3.org/1999/xhtml">
  216.  3 <head>
  217.  4     <title></title>
  218.  5      <style type="text/css">
  219.  6          .menuitem{background-color:Yellow; }
  220.  7          .highlight { background-color: Red;}
  221.  8      </style>
  222.  9     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
  223. 10     <script type="text/javascript">
  224. 11         $(function () { $(".menuitem").click(function () { $(this).addClass("highlight").siblings().removeClass("highlight"); }); });
  225. 12
  226. 13     </script>
  227. 14 </head>
  228. 15 <body>
  229. 16      <p class="menuitem">111111</p><br />
  230. 17      <p class="menuitem">111111</p><br />
  231. 18      <p class="menuitem">111111</p><br />
  232. 19 </body>
  233. 20 </html>
  234. 复制代码
  235. 案例2：五角星评分
  236.  
  237. 复制代码
  238.  1 /*
  239.  2             $(function() {
  240.  3             $("#ratings td").html("<img src='images/star_off.gif' />")
  241.  4             .mouseover(function() { $("#ratings td").html("<img src='images/star_on.gif' />"); $(this).nextAll().html("<img src='images/star_off.gif' />"); });
  242.  5
  243.  6             });
  244.  7             */
  245.  8
  246.  9             $(function() {
  247. 10             $("#ratings td").html("<img src='images/star_off.gif' />")
  248. 11                 .mouseover(function() { $("#ratings td").html("<img src='images/star_on.gif' />")
  249. 12                 .siblings().html("<img src='images/star_on.gif' />");
  250. 13                 $(this).nextAll().html("<img src='images/star_off.gif' />");
  251. 14             });
  252. 15
  253. 16             });
  254. 17
  255. 18
  256. 19 <table id=ratings>
  257. 20     <tr><td></td><td></td><td></td><td></td><td></td></tr>
  258. 21     </table>
  259. 复制代码
  260.  9、基本过滤选择器
  261.            （1、:first  选取第一个元素。 $("div:first") 选取第一个 <div>
  262.            （2、:last  选取最后一个元素。 $("div:last") 选取最后一个 <div>
  263.            （3、:not( 选择器 )  选取不满足 " 选择器 " 条件的元素，
  264.                       $("input:not(.myClass)") 选取样式名不是 myClass 的 <input>
  265.            （4、:even 、 :odd ，选取索引是奇数、偶数的元素： $("input:even") 选
  266.                       取索引是奇数的 <input>
  267.            （5、:eq( 索引序号 ) 、 :gt( 索引序号 ) 、 :lt( 索引序号 )  选取索引等于、大于、小于索引序号的元素，比如 $("input:lt(5)") 选取索引小于 5 的 <input>         
  268.  
  269.            （6、$(":header") 选取所有的 h1 …… h6 元素（ * ）
  270.                   $("div:animated") 选取正在执行动画的 <div> 元素。   （ * ）
  271. 案例1：
  272.  
  273.         $("#table1 tr:last").css("color", "red");
  274.         $("#table1 tr:gt(0):lt(3)").css("color", "red");//lt(3)是从gt(0)后得到的新序列中的序号，不要写成lt(4);
  275.         $("#table1 tr:gt(0):even").css("background", "red"); //表头不参与"正文表格的奇数行是红色背景",所以gt(0)去掉表头
  276.  
  277. 10、相对选择器
  278.  
  279.        不仅可以使用选择器进行进行绝对定位，还可以进行相对定位， （双重选择）
  280.  
  281.        只要在 $() 指定第二个参数，第二个参数为相对的元素 .  $("ul", $(this)).css("background", "red");  //ul下面的+包含本身=ul下面的本身
  282.  
  283. 复制代码
  284.  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  285.  2 <html xmlns="http://www.w3.org/1999/xhtml">
  286.  3 <head>
  287.  4     <title></title>
  288.  5
  289.  6     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
  290.  7     <script type="text/javascript">
  291.  8         $(function () {
  292.  9             $("#t1 tr").click(function () {
  293. 10                 $("td", $(this)).css("background", "Yellow");
  294. 11             });
  295. 12         });
  296. 13     </script>
  297. 14 </head>
  298. 15 <body>
  299. 16      <table id="t1">
  300. 17         <tr><td>姓名</td><td>成绩</td></tr>
  301. 18         <tr><td>tom</td><td>100</td></tr>
  302. 19         <tr><td>lucy</td><td>99</td></tr>
  303. 20         <tr><td>jim</td><td>95</td></tr>
  304. 21         <tr><td>david</td><td>85</td></tr>
  305. 22         <tr><td>candy</td><td>84</td></tr>
  306. 23         <tr><td>平均分</td><td>90</td></tr>
  307. 24     </table>
  308. 25 </body>
  309. 26 </html>
  310. 复制代码
  311. 11、属性过滤选择器：
  312.         （1、$("div[id]") 选取有 id 属性的 <div>
  313.         （2、 $("div[title=test]") 选取 title 属性为 " test " 的 <div> ， JQuery 中没有对getElementsByName 进行封装，用 $("input[name=abc]")
  314.         （3、$("div[title!=test]") 选取 title 属性不为 " test " 的 <div>
  315.                还可以选择开头、结束、包含等，条件还可以复合。（ * ）
  316.  
  317. 复制代码
  318.  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  319.  2 <html xmlns="http://www.w3.org/1999/xhtml">
  320.  3 <head>
  321.  4     <title></title>
  322.  5     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
  323.  6     <script type="text/javascript">
  324.  7         $(function () {
  325.  8             $("input[value=显示选中项]").click(function () {
  326.  9                 alert($("input:checked").val());
  327. 10             });
  328. 11             $("input[type=checkbox]").click(function () {
  329. 12                 $("input:checked").css("background-color", "Red");
  330. 13                 alert($("input:checked").css("background-color"));
  331. 14             });
  332. 15
  333. 16         });
  334. 17
  335. 18     </script>
  336. 19 </head>
  337. 20 <body>
  338. 21     <input type="checkbox" value="北京" />北京<br />
  339. 22     <input type="checkbox" value="南京" />南京<br />
  340. 23     <input type="checkbox" value="东京" />东京<br />
  341. 24     <input type="checkbox" value="西安" />西安<br />
  342. 25     <input type="checkbox" value="开封" />开封<br />
  343. 26     <input type="button" value="显示选中项" /><br />
  344. 27 </body>
  345. 28 </html>
  346. 复制代码
  347.  12、表单对象选择器
  348.  
  349.         $("#form1:enabled") 选取 id 为 form1 的表单内所有启用的元素
  350.      $("#form1:disabled") 选取 id 为 form1 的表单内所有禁用的元素
  351.      $("input:checked") 选取所有选中的元素（ Radio 、 CheckBox ）
  352.      $("select:selected") 选取所有选中的选项元素（下拉列表）
  353.  
  354. 复制代码
  355.  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  356.  2 <html xmlns="http://www.w3.org/1999/xhtml">
  357.  3 <head>
  358.  4     <title></title>
  359.  5     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
  360.  6     <script type="text/javascript">
  361.  7         $(function () {
  362.  8             $("input[name=names]").click(function () {
  363.  9                 var names = $("input[name=names]:checked");
  364. 10                 var msg = $("#msgNames");//ID记得加#
  365. 11                 var array = new Array();
  366. 12
  367. 13                 //$(value)是将Dom对象转化为JQuery对象,即将元素的value值更新到key上
  368. 14                 names.each(function (key, values) {
  369. 15                     array[key] = $(values).val();
  370. 16                 });
  371. 17
  372. 18                 msg.text("共选中" + names.length + "个,他们是：" + array.join(","));
  373. 19             });
  374. 20         });
  375. 21     </script>
  376. 22 </head>
  377. 23 <body>
  378. 24     <input type="checkbox" name="names" value="tom" />tom
  379. 25     <input type="checkbox" name="names" value="jim" />jim
  380. 26     <input type="checkbox" name="names" value="lily" />lily
  381. 27     <p id="msgNames">
  382. 28     </p>
  383. 29 </body>
  384. 30 </html>
  385. 复制代码
  386.  13、JQuery的Dom操作
  387.  
  388.    （1 、使用 html() 方法读取或者设置元素的 innerHTML ：
  389.                   alert($("a:first").html());
  390.                   $("a:first").html("hello");
  391.       （2 、使用 text() 方法读取或者设置元素的 innerText ：
  392.                   alert($("a:first").text());
  393.                   $("a:first").text("hello");
  394.       （3 、 使用 attr() 方法读取或者设置元素的属性，对于JQuery没有封装的属性（所有浏览器没有差异的属性）用 attr 进行操作。
  395.                   alert($("a:first").attr("href"));
  396.                   $("a:first").attr("href", "http://www.rupeng.com");
  397.       （4 、使用 removeAttr 删除属性。删除的属性在源代码中看不到，这是和清空属性的区别 
  398.  
  399.  14、动态创建Dom节点
  400.  
  401.        （1、使用 $(html 字符串) 来创建 Dom 节点，并且返回一个 jQuery 对象，然后调用 append 等方法将新创建的节点添加到 Dom 中：
  402.           例子：var link = $("<a href='http://www.baidu.com'> 百度 </a>");
  403.                $("div:first").append(link);
  404.     （2、$() 创建的就是一个 jQuery 对象，可以完全进行操作
  405.              var link = $("<a href='http://www.baidu.com'> 百度 </a>");
  406.               link.text("百度");
  407.               $("div:first").append(link); 
  408.  
  409. 复制代码
  410.  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  411.  2 <html xmlns="http://www.w3.org/1999/xhtml">
  412.  3 <head>
  413.  4     <title></title>
  414.  5     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
  415.  6     <script type="text/javascript">
  416.  7         /*$(function () {
  417.  8             var link = "<a href='http://www.cnblogs.com/daomul' >myBlog</a>";
  418.  9             $("#myTable").append(link);
  419. 10         });*/
  420. 11
  421. 12         $(function () {
  422. 13             var data = { "daomul": "http://www.cnblogs.com/daomul", "bokeyuan": "http://www.cnblogs.com" };
  423. 14             $.each(data, function (key, value) {
  424. 15                 var tr = "<tr><td>" + key + "</td><td><a href=" + value + ">"+key+"</a></td></tr>";
  425. 16                 $("#myTable").append(tr);
  426. 17             });
  427. 18         });
  428. 19     </script>
  429. 20 </head>
  430. 21 <body>
  431. 22     <table border="0" cellpadding="0" cellspacing="0" id="myTable">
  432. 23         <tr>
  433. 24             <td>
  434. 25             </td>
  435. 26         </tr>
  436. 27     </table>
  437. 28 </body>
  438. 29 </html>
  439. 复制代码
  440.  
  441.     （3、append 方法用来在元素的末尾追加元素。
  442.  
  443.          //$("#select1 option:selected").remove().appendTo($("#select2")) ;
  444.             $("#select1 option:selected").appendTo($("#select2")) ;
  445.          prepend ，在元素的开始添加元素。
  446.          after ，在元素之后添加元素（添加兄弟）
  447.          before ：在元素之前添加元素（添加兄弟）
  448.  
  449. 15、删除节点
  450.      （1、remove() 删除选择的节点
  451.                案例：清空 ul 中的项， $("ul li.testitem").remove();  删除 ul 下 li 中有 testitem 样式的元素。
  452.            remove 方法的返回值是被删除的节点对象，还可以继续使用被删除的节点。比如重新添加到其他节点下
  453.                   var lis = $("#ulSite li").remove();
  454.                   $("#ulSite2").append(lis);
  455.      （2、remove掉后再重新移动： var items = $("#select1 option:selected").remove();  $("#select2").append(items);
  456.                            更狠的： $("#select1 option:selected").appendTo($("#select2")) 
  457.  
  458. 复制代码
  459.  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  460.  2 <html xmlns="http://www.w3.org/1999/xhtml">
  461.  3 <head>
  462.  4     <title></title>
  463.  5     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
  464.  6     <script type="text/javascript">
  465.  7         $(function () {
  466.  8             $("#moveToRight").click(function () {
  467.  9                 var item = $("#select1 option:selected").remove();
  468. 10                 item.attr("selected", false);
  469. 11                 $("#select2").append(item);
  470. 12             });
  471. 13             $("#moveToLeft").click(function () {
  472. 14                 var item = $("#select2 option:selected").remove();
  473. 15                 item.attr("selected", false);
  474. 16                 $("#select1").append(item);
  475. 17             });
  476. 18             $("#AllToRight").click(function () {
  477. 19                 var item = $("#select1 option").remove();
  478. 20                 $("#select2").append(item);
  479. 21             });
  480. 22             $("#AllToLeft").click(function () {
  481. 23                 var item = $("#select2 option").remove();
  482. 24                 $("#select1").append(item);
  483. 25             });
  484. 26
  485. 27         });
  486. 28     </script>
  487. 29 </head>
  488. 30 <body>
  489. 31     <select style="float: left; width: 15%; height: 100px" id="select1" multiple="multiple">
  490. 32         <option>添加</option>
  491. 33         <option>删除</option>
  492. 34         <option>修改</option>
  493. 35         <option>查询</option>
  494. 36         <option>打印</option>
  495. 37     </select>
  496. 38     <div style="float: left; width: 15%">
  497. 39         <input style="float: left; width: 100%;" type="button" id="moveToRight" value=">" />
  498. 40         <input style="float: left; width: 100%;" type="button" id="moveToLeft" value="<" />
  499. 41         <input style="float: left; width: 100%;" type="button" id="AllToRight" value=">>" />
  500. 42         <input style="float: left; width: 100%;" type="button" id="AllToLeft" value="<<" />
  501. 43     </div>
  502. 44     <select style="float: left; width: 15%; height: 100px" id="select2" multiple="multiple">
  503. 45     </select>
  504. 46 </body>
  505. 47 </html>
  506. 复制代码
  507.  
  508.      （3、empty() 是将节点清空，不像 remove 那样还可以添加到其他元素中。 
  509.  
  510.  16、Dom实例改编
  511.  
  512. 案例1：加法计算器
  513.  
  514. 复制代码
  515.  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  516.  2 <html xmlns="http://www.w3.org/1999/xhtml">
  517.  3 <head>
  518.  4     <title></title>
  519.  5     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
  520.  6     <script type="text/javascript">
  521.  7         $(function () {
  522.  8             $("#eq").click(function () {
  523.  9                 var text1 = $("#txt1").val();//有参数则说明是设置值
  524. 10                 var text2 = $("#txt2").val();
  525. 11                 var txt3 = parseInt(text1, 10) + parseInt(text2, 10);
  526. 12                 $("#txt3").val(txt3);
  527. 13             });
  528. 14         });
  529. 15     </script>
  530. 16 </head>
  531. 17 <body>
  532. 18      <input type="text" id="txt1" />+
  533. 19     <input type="text" id="txt2" />
  534. 20     <input type="button" id="eq" value="=" />
  535. 21     <input type="text" id="txt3" />
  536. 22 </body>
  537. 23 </html>
  538. 复制代码
  539. 案例2：全选全部选按钮
  540.  
  541. 复制代码
  542.  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  543.  2 <html xmlns="http://www.w3.org/1999/xhtml">
  544.  3 <head>
  545.  4     <title></title>
  546.  5     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
  547.  6     <script type="text/javascript">
  548.  7         $(function () {
  549.  8             $("#selAll").click(function () {
  550.  9                 $("#playlist input").attr("checked", true);
  551. 10             });
  552. 11             $("#unselAll").click(function () {
  553. 12                 $("#playlist input").attr("checked", false);
  554. 13             });
  555. 14             $("#reverse").click(function () {
  556. 15                 $("#playlist input").each(function () {
  557. 16                     //关键语句！！！
  558. 17                     $(this).attr("checked", !$(this).attr("checked"));
  559. 18                 });
  560. 19             });
  561. 20         });
  562. 21     </script>
  563. 22 </head>
  564. 23 <body>
  565. 24    <div id="playlist">
  566. 25         <input type="checkbox" />1111111111<br />
  567. 26         <input type="checkbox" />22222222222<br />
  568. 27         <input type="checkbox" />33333333333<br />
  569. 28         <input type="checkbox" />4444444444<br />
  570. 29         <input type="checkbox" />444<br />
  571. 30     </div>
  572. 31     <input type="button" value="全选" id="selAll" />
  573. 32     <input type="button" value="全不选" id="unselAll" />
  574. 33     <input type="button" value="反选" id="reverse" />
  575. 34
  576. 35 </body>
  577. 36 </html>
  578. 复制代码
  579. 案例3：倒计时注册页面
  580.  
  581. 复制代码
  582.  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  583.  2 <html xmlns="http://www.w3.org/1999/xhtml">
  584.  3 <head>
  585.  4     <title></title>
  586.  5     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
  587.  6     <script type="text/javascript">
  588.  7         var InteruptID;
  589.  8         var stopSecond=10;
  590.  9         $(function () {
  591. 10             $("#btnReg").attr("disabled", true);
  592. 11             InteruptID = setInterval("stopTimeRole()",1000);
  593. 12         });
  594. 13
  595. 14         function stopTimeRole() {
  596. 15             if (stopSecond <= 0) {
  597. 16                 $("#btnReg").attr("disabled", false);
  598. 17                 $("#btnReg").val("同意");
  599. 18                 clearInterval(InteruptID);
  600. 19                 return;
  601. 20             }
  602. 21             stopSecond--;
  603. 22             $("#btnReg").val("同意，还剩下"+stopSecond+"秒，请阅读注册事项");
  604. 23         }
  605. 24     </script>
  606. 25 </head>
  607. 26 <body>
  608. 27    <input type="button" id="btnReg" value="同意" />
  609. 28 </body>
  610. 29 </html>
  611. 复制代码
  612. 案例4：球队选择
  613.  
  614. 复制代码
  615.  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  616.  2 <html xmlns="http://www.w3.org/1999/xhtml">
  617.  3 <head>
  618.  4     <title></title>
  619.  5     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
  620.  6     <script type="text/javascript">
  621.  7         $(function () {
  622.  8             $("#myUL li").css("cursor", "pointer").mousemove(function () {
  623.  9                 $(this).css("background", "red").siblings().css("background", "white");
  624. 10             }).click(function () {
  625. 11                 $(this).css("background","white").appendTo("#newUL");
  626. 12             });
  627. 13         });
  628. 14     </script>
  629. 15 </head>
  630. 16 <body>
  631. 17     <ul id="myUL">
  632. 18         <li>中国</li>
  633. 19         <li>美国</li>
  634. 20         <li>日本</li>
  635. 21         <li>新加坡</li>
  636. 22         <li>意大利</li>
  637. 23         <li>法国</li>
  638. 24         <li>德国</li>
  639. 25     </ul>
  640. 26     <ul id="newUL">
  641. 27     </ul>
  642. 28 </body>
  643. 29 </html>
  644. 复制代码
  645. 17、节点操作
  646.  
  647.         （1、替换节点： $("br").replaceWith("<hr/>");
  648.              例子：将 <br/> 替换为 <hr/> ：$("br").replaceWith("<hr/>");
  649.         （2、包裹节点 ：wrap() 方法用来将所有元素逐个用指定标签包裹：
  650.                 $("b").wrap("<font color='red'></font>")  将所有粗体字红色显示  
  651.  
  652. 18、样式操作
  653.  
  654.     （1、获取样式   attr("class") ，设置样式 attr("class","myclass myclass2 myclass3") ，追加样式 addClass("myclass")( 不影响其他样式 ) ，
  655.            移除样式 removeClass("myclass") ，切换样式（如果存在样式则去掉样式，如果没有样式则添加样式） toggleClass("myclass") ，
  656.            判断是否存在样式： hasClass("myclass")
  657.       例子：开关灯：$(document.body).toggleClass(”night“);
  658. 19、练习
  659. 练习1：黑白切换，设置body中的颜色切换Filter
  660.  
  661. 复制代码
  662.  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  663.  2 <html xmlns="http://www.w3.org/1999/xhtml">
  664.  3 <head>
  665.  4     <title>黑白切换</title>
  666.  5     <style type="text/css">
  667.  6         .blackwhite{filter:Gray;}
  668.  7     </style>
  669.  8
  670.  9     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
  671. 10     <script type="text/javascript">
  672. 11         $(function () {
  673. 12             $("#btn").click(function () {
  674. 13                 $(document.body).toggleClass("blackwhite");
  675. 14             });
  676. 15         });
  677. 16     </script>
  678. 17 </head>
  679. 18 <body>
  680. 19     <input type="button" value="切换" id="btn" /><br />
  681. 20     <img src="data:images/DSCF3362.JPG" alt=""/>
  682. 21 </body>
  683. 22 </html>
  684. 复制代码
  685. 练习2：聚集控件高亮：$("body  *") ，选择器 * 表示所有类型的控件
  686.  
  687. 复制代码
  688.  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  689.  2 <html xmlns="http://www.w3.org/1999/xhtml">
  690.  3 <head>
  691.  4 <!--
  692.  5    练习：聚焦控件的高亮显示。 颜色定义为 class 样式。  $("body  * ") ，选择器 * 表示 所有类型的控件。
  693.  6 -->
  694.  7
  695.  8     <title>聚集控件高亮</title>
  696.  9     <style type="text/css">
  697. 10         .highlight{background-color:Gray;}
  698. 11     </style>
  699. 12
  700. 13     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
  701. 14     <script type="text/javascript">
  702. 15         $(function () {
  703. 16             $("body * ").click(function () {
  704. 17                 $(this).addClass("highlight").siblings().removeClass("highlight");
  705. 18             });
  706. 19         });
  707. 20     </script>
  708. 21 </head>
  709. 22 <body>
  710. 23     <input type="text" />
  711. 24     <div>
  712. 25         daomul
  713. 26     </div>
  714. 27     <p>
  715. 28         http://www.cnblogs.com/daomul/
  716. 29     </p>
  717. 30
  718. 31 </body>
  719. 32 </html>
  720. 复制代码
  721. 练习3：搜索框
  722.  
  723. 复制代码
  724.  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  725.  2 <html xmlns="http://www.w3.org/1999/xhtml">
  726.  3 <head>
  727.  4 <!--
  728.  5    练习：聚焦控件的高亮显示。 颜色定义为 class 样式。  $("body  * ") ，选择器 * 表示 所有类型的控件。
  729.  6 -->
  730.  7
  731.  8     <title>搜索框效果</title>
  732.  9
  733. 10     <!--练习：搜索框效果。焦点放入控件，如果文本框中的值是 " 请输入关键词 " ，那么
  734. 11         将文本清空，并且颜色设置为黑色。如果焦点离开控件，如果文本框中是空值，
  735. 12         那么将文本框填充为 " 请输入关键词 " ，颜色设置为灰色（ Gray ）。 颜色定义为
  736. 13         class 样式。-->
  737. 14
  738. 15     <style type="text/css">
  739. 16         .Graycolor{background-color:Gray;}
  740. 17     </style>
  741. 18
  742. 19     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
  743. 20     <script type="text/javascript">
  744. 21         $(function () {
  745. 22             $("#myInput").addClass("Graycolor")
  746. 23             .focus(function () {
  747. 24                 if ($(this).val() == "请输入关键词") {
  748. 25                     $(this).val("").removeClass("Graycolor");
  749. 26                 }
  750. 27             })
  751. 28             .blur(function () {
  752. 29                 if ($(this).val() == "") {
  753. 30                     $(this).val("请输入关键词").addClass("Graycolor");
  754. 31                 }
  755. 32             });
  756. 33         });
  757. 34     </script>
  758. 35 </head>
  759. 36 <body>
  760. 37     <input type="text" value="请输入关键词" id="myInput"/>
  761. 38
  762. 39 </body>
  763. 40 </html>
  764. 复制代码
  765. 20、RadioButton的操作
  766.  
  767.       （1、取得 RadioButton 的选中值 ：$("input[name=gender]:checked").val()
  768.           <input id="Radio2" checked="checked" name="gender"  type="radio" value=" 男 " /> 男
  769.           <input  id="Radio1" checked="checked" name="gender"  type="radio" value=" 女 " /> 女
  770.           <input id="Radio3" checked="checked" name="gender" type="radio"  value=" 未知 " /> 未知 </p>
  771.      （2、设置 RadioButton 的选中值： $("input[name=gender]").val([" 女 "]);
  772.                                               或者 $(":radio[name=gender]").val([" 女 "]);
  773.             注意 val 中参数的 [] 不能省略
  774.  
  775. 复制代码
  776.  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  777.  2 <html xmlns="http://www.w3.org/1999/xhtml">
  778.  3 <head>
  779.  4     <!--
  780.  5    练习：聚焦控件的高亮显示。 颜色定义为 class 样式。  $("body  * ") ，选择器 * 表示 所有类型的控件。
  781.  6 -->
  782.  7     <title>RadioButton</title>
  783.  8
  784.  9     <style type="text/css">
  785. 10
  786. 11     </style>
  787. 12     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
  788. 13     <script type="text/javascript">
  789. 14         $(function () {
  790. 15             $("#getValue").click(function () {
  791. 16                 alert($("input[name=gender]:checked").val());
  792. 17             });
  793. 18             $("#setValue").click(function () {
  794. 19                 $("input[name=gender]").val(["女"]);
  795. 20                 $(":checkbox").val(["篮球", "冰球"]);
  796. 21                 $(":checkbox[value=羽毛球]").attr("checked", true);
  797. 22             });
  798. 23         });
  799. 24     </script>
  800. 25 </head>
  801. 26 <body>
  802. 27     <input name="gender" type="radio" value="男" />男<br />
  803. 28     <input name="gender" type="radio" value="女" />女<br />
  804. 29     <input name="gender" type="radio" value="保密" />保密<br />
  805. 30     <input type="checkbox" value="篮球" />篮球<br />
  806. 31     <input type="checkbox" value="足球" />足球<br />
  807. 32     <input type="checkbox" value="羽毛球" />羽毛球<br />
  808. 33     <input type="checkbox" value="冰球" />冰球<br />
  809. 34     <input type="button" value="设值" id="setValue" />
  810. 35     <input type="button" value="取值" id="getValue" />
  811. 36 </body>
  812. 37 </html>
  813. 复制代码
  814.  
  815.       （3、对 RadioButton 的选择技巧对于 CheckBox 和 Select 列表框也适用。除了可以使用 val 批量设置 RadioButton 、 CheckBox 等的选中以
  816.              外，还可以设定 checked 属性来单独设置控件的选中状态
  817.                                 $("#btn1").attr("checked",true)
  818.  
  819.  21、JQuery事件
  820.  
  821.        （1、事件绑定： $("#btn").bind("click",function(){}) ，每次都这么调用太麻烦，所以 jQuery 可以用 $("#btn").click(function(){}) 来进行简化
  822.        （2、合成事件 hover ， hover(enterfn,leavefn) ，当鼠标放在元素上时调用enterfn 方法，当鼠标离开元素的时候调用 leavefn 方法
  823.  
  824. 复制代码
  825.  1 <head>
  826.  2     <title>合成事件_hover</title>
  827.  3
  828.  4     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
  829.  5     <script type="text/javascript">
  830.  6         $(function() {
  831.  7             /*
  832.  8             $("p").mouseenter(function() {
  833.  9                 $(this).text("客官来了！");
  834. 10             })
  835. 11             .mouseleave(function() {
  836. 12                 $(this).text("大爷慢走！");
  837. 13             });
  838. 14             */
  839. 15             $("p").hover(function() { $(this).text("来了") }, function() { $(this).text("慢走")});
  840. 16         });
  841. 17     </script>
  842. 18 </head>
  843. 19 <body>
  844. 20     <p>你好！</p>
  845. 21 </body>
  846. 复制代码
  847.       （3、事件冒泡： JQuery 中也像 JavaScript 一样是事件冒泡。如果想获得事件相关的信息，只要给响应的匿名函数增加一个参数： e ，
  848.                              e 就是调用事件对象的 stopPropagation() 方法终止冒泡。 e. stopPropagation();
  849.                   $("tr").click(function(e) { alert("tr 被点击 "); e.stopPropagation(); });// 注意函数的参数是 e
  850.       （4、阻止默认行为：有的元素有默认行为，比如超链接点击后会转向新链接、提交按钮默认会提交表单，
  851.                                  如果想阻止默认行为只要调用事件对象的preventDefault() 方法和 window.event.returnValue=false 效果一样。
  852.                   $("a").click(function(e) { alert(" 所有超链接暂时全部禁止点击 ");
  853.                                                      e.preventDefault(); });
  854.  
  855. 复制代码
  856.  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  857.  2 <html xmlns="http://www.w3.org/1999/xhtml">
  858.  3 <head>
  859.  4     <!--
  860.  5    练习：聚焦控件的高亮显示。 颜色定义为 class 样式。  $("body  * ") ，选择器 * 表示 所有类型的控件。
  861.  6 -->
  862.  7     <title>RadioButton</title>
  863.  8
  864.  9     <style type="text/css">
  865. 10
  866. 11     </style>
  867. 12     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
  868. 13     <script type="text/javascript">
  869. 14         $(function () {
  870. 15             //$("#p1").click(function (e) { alert(e.pageX + ":" + e.pageY); });
  871. 16             //$("#tr1").click(function (e) { });
  872. 17
  873. 18             $("#p1").click(function (e) { alert("下面是p的："); alert($(this).html()); alert($(e.target).html()); });
  874. 19             $("#tr1").click(function (e) { alert("下面是tr的："); alert($(this).html()); alert($(e.target).html()); });
  875. 20         });
  876. 21
  877. 22     </script>
  878. 23 </head>
  879. 24 <body>
  880. 25    <table id="t1">
  881. 26         <tr id="tr1">
  882. 27             <td id="td1">
  883. 28                 <p id="p1">nihao</p>
  884. 29             </td>
  885. 30         </tr>
  886. 31     </table>
  887. 32 </body>
  888. 33 </html>
  889. 复制代码
  890.  
  891.  22、事件其他（ * ）
  892.       （1、属性： pageX 、 pageY 、 target获得触发事件的元素 ( 冒泡的起始，和this不一样) which如果是鼠标事件获得按键（1左键，2中键，3右键）。
  893.              altKey 、 shiftKey 、 ctrlKey 获得 alt 、shift、ctrl 是否按下，为bool值。 keyCode 、 charCode 属性发生事件时的keyCode （键盘码，小
  894.             盘的1和主键盘的 keyCode 不一样）、charCode （ ASC 码）。
  895.       （2、移除事件绑定： bind() 方法即可移除元素上所有绑定的事件，如果 unbind("click") 则只移除 click 事件的绑定。 bind:+= ； unbind:-=
  896.       （3、一次性事件：如果绑定的事件只想执行一次随后立即 unbind 可以使用 one() 方法进行事件绑定：
  897.                        $(":button").one("click", function() { alert("点了"); });
  898.  23、鼠标
  899.     （1、获得发生事件时鼠标的位置
  900.                 $(document).mousemove(function(e) {
  901.                        document.title = e.pageX + "," + e.pageY;
  902.                  });
  903.     （2、在 mousemove 、 click 等事件的匿名响应函数中如果指定一个参数 e ，那么就可以从 e 读取发生事件时的一些信息，比如对mousemove 等鼠标事件   来
  904.            说，就可以读取 e.pageX 、 e.pageY 来获得发生事件时鼠标在页面的坐标。
  905.  案例1：跟着鼠标飞
  906.  
  907. 复制代码
  908.  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  909.  2 <html xmlns="http://www.w3.org/1999/xhtml">
  910.  3 <head>
  911.  4     <title></title>
  912.  5
  913.  6     <style type="text/css">
  914.  7
  915.  8     </style>
  916.  9     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
  917. 10     <script type="text/javascript">
  918. 11         $(function () {
  919. 12             $(document).mousemove(function (e) {
  920. 13                 $("#fly").css("left", e.pageX).css("top",e.pageY);
  921. 14             });
  922. 15         });
  923. 16
  924. 17     </script>
  925. 18 </head>
  926. 19 <body>
  927. 20    <div id="fly" style="position:absolute">
  928. 21         <img src="data:images/DSCF3362.JPG" style="width:100px;height:100px;" alt=""/>
  929. 22     </div>
  930. 23 </body>
  931. 24 </html>
  932. 复制代码
  933. 案例2：点击小图显示详情
  934.  
  935. 复制代码
  936.  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  937.  2 <html xmlns="http://www.w3.org/1999/xhtml">
  938.  3 <head>
  939.  4     <title></title>
  940.  5     <style type="text/css">
  941.  6
  942.  7     </style>
  943.  8     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
  944.  9     <script type="text/javascript">
  945. 10         var data = { "images/1小.bmp": ["images/1.JPG", "zzz", "21"],
  946. 11             "images/2小.bmp": ["images/2.jpg", "yyy", "22"],
  947. 12             "images/3小.bmp": ["images/3.JPG", "xxx", "23"]
  948. 13         };
  949. 14         $(function () {
  950. 15             $.each(data, function (key, value) {
  951. 16                 var smallPic = $("<img src='" + key + "' style='width:100px;height:100px;'></img>");
  952. 17                 //给小图加上三个额外的属性
  953. 18                 smallPic.attr("bigPci", value[0]);
  954. 19                 smallPic.attr("Name", value[1]);
  955. 20                 smallPic.attr("Height", value[2]);
  956. 21                 smallPic.mouseover(function (e) {
  957. 22                     $("#ditailImg").attr("src", $(this).attr("bigPci"));
  958. 23                     $("#detailName").text("Name:"+$(this).attr("Name"));
  959. 24                     $("#detailHeight").text("Height:"+$(this).attr("Height"));
  960. 25                     $("#details").css("left", e.pageX).css("top", e.pageY).css("display", "");
  961. 26                 });
  962. 27                 $("body").append(smallPic);
  963. 28             });
  964. 29             $("#closeDetails").click(function () {
  965. 30                 $("#details").css("display","none");
  966. 31             });
  967. 32         });
  968. 33
  969. 34     </script>
  970. 35 </head>
  971. 36 <body>
  972. 37     <div style="display: none; position: absolute;" id="details">
  973. 38         <img id="ditailImg" src="" style="width:200px;height:200px;"/>
  974. 39         <p id="detailName">
  975. 40         </p>
  976. 41         <p id="detailHeight">
  977. 42         </p>
  978. 43         <p><input id="closeDetails" type="button" value="关闭" /></p>
  979. 44     </div>
  980. 45 </body>
  981. 46 </html>
  982. 复制代码
  983. 24、动画及QQ风格控件
  984.  
  985.      （1、show() 、 hide() 方法会显示、隐藏元素。用 toggle() 方法在显示、隐藏之间切换
  986.                      $(":button[value=show]").click(function() { $("div").show(); });
  987.                      $(":button[value=hide]").click(function() { $("div").hide(); });
  988.     （2、 如果 show 、 hide 方法不带参数则是立即显示、立即隐藏，如果指定速度参数则会用指定时间进行动态显示、隐藏，单位为毫秒 ，也可以使用三个内置的速
  989.             度： fast （200 毫秒）、 normal （400 毫秒）、 slow （600 毫秒）， jQuery 动画函数中需要速度的地方一般也可以使用这个三个值。
  990.  
  991. 复制代码
  992.  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  993.  2 <html xmlns="http://www.w3.org/1999/xhtml">
  994.  3 <head>
  995.  4     <title></title>
  996.  5     <style type="text/css">
  997.  6         ul{list-style-type:none;}
  998.  7         .header{background-color:Green;}
  999.  8         .body{border-color:Blue;border-style:solid;border-width:5px;}
  1000.  9     </style>
  1001. 10     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
  1002. 11     <script type="text/javascript">
  1003. 12         //有body样式的li
  1004. 13         $(function () {
  1005. 14             $("#qq li:odd").addClass("body"); //偶数行
  1006. 15             $("#qq li:even").addClass("header").click(function () {//奇数行
  1007. 16                 $(this).next("li.body").show("fast").siblings("li.body").hide("fast");
  1008. 17             });
  1009. 18             //初始打开第一个表头
  1010. 19             $("#qq li:first").click();
  1011. 20         });
  1012. 21     </script>
  1013. 22 </head>
  1014. 23 <body>
  1015. 24    <h1 style="margin-left:50px">QQTab效果</h1>
  1016. 25     <ul id="qq" style="width:30%">
  1017. 26         <li>我的好友</li>
  1018. 27         <li>mm<br />baba<br />mama<br /></li>
  1019. 28         <li>我的女友<br /></li>
  1020. 29         <li>gemen<br /></li>
  1021. 30         <li>陌生人</li>
  1022. 31         <li>meinv<br />shuaige<br /></li>
  1023. 32     </ul>
  1024. 33
  1025. 34 </body>
  1026. 35 </html>
  1027. 复制代码
  1028.  25、JQuery Cookie 使用
  1029.       （1、使用方法， Cookie 保存的是键值对
  1030.            *1 、添加对 jquery.cookie.js
  1031.            *2 、设置值， $.cookie(' 名字 ', ' 值 ') 。 cookie 中保存的值都是文本。
  1032.            *3 、读取值， var v=$.cookie(' 名字 ')
  1033.                       alert($.cookie(" 用户名 "));
  1034.                       $.cookie(" 用户名 ","tom"); 在同域名的另外一个页面中也能读取到。
  1035.       （2、设置值的时候还可以指定第三个参数， $.cookie(' 名字 ', ' 值 ', { expires: 7, path: '/',domain: 'itcast.cn', secure: true }) ，
  1036.               expires 表示要求浏览器保留 Cookie 几天，这个值只是给浏览器的建议，可能没到时间就已经被清除了。可以实现 " 勾选 【 记录我的用户
  1037.               名 10 天 】 " 的功能。如果不设定 expires 在浏览器关闭以后就清除， options 参数用哪个设置哪个  
  1038.  
  1039.  案例：记住背景色
  1040.  
  1041. 复制代码
  1042.  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  1043.  2 <html xmlns="http://www.w3.org/1999/xhtml">
  1044.  3 <head>
  1045.  4     <title></title>
  1046.  5     <style type="text/css">
  1047.  6     </style>
  1048.  7     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
  1049.  8     <script src="js/jquery.cookie.js" type="text/javascript"></script>
  1050.  9     <script type="text/javascript">
  1051. 10         if ($.cookie("UserName")) { //读取上次记录的用户名
  1052. 11             $("username").val($.cookie("UserName"));
  1053. 12         }
  1054. 13         $("#btnLogin").click(function () {
  1055. 14             $.cookie("UserName", $("#username").val())//用户填写的用户名保存到Cookie中
  1056. 15         });
  1057. 16
  1058. 17         $(function () {
  1059. 18             $("#tableColor td").click(function () {
  1060. 19                 var bgColor = $(this).css("background-color");
  1061. 20                 $(document.body).css("background-color", bgColor);
  1062. 21                 $.cookie("backcolor", bgColor, {expires:2});
  1063. 22             });
  1064. 23
  1065. 24             if ($.cookie("backcolor")) {
  1066. 25                 $(document.body).css("background-color", $.cookie("backcolor"));
  1067. 26             }
  1068. 27         });
  1069. 28
  1070. 29     </script>
  1071. 30 </head>
  1072. 31 <body>
  1073. 32     <table id="tableColor">
  1074. 33         <tr>
  1075. 34             <td style="background-color: Red">
  1076. 35                 红色
  1077. 36             </td>
  1078. 37             <td style="background-color: Green">
  1079. 38                 绿色
  1080. 39             </td>
  1081. 40             <td style="background-color: Yellow">
  1082. 41                 黄色
  1083. 42             </td>
  1084. 43         </tr>
  1085. 44     </table>
  1086. 45     <input type="text" id="username" />
  1087. 46     <input type="button" value="登录" id="btnLogin" />
  1088. 47 </body>
  1089. 48 </html>
  1090. 复制代码
  1091. 26、JQueryUI
  1092.  
  1093.  下载地址：http://jqueryui.com/下发包
  1094.  
  1095. 复制代码
  1096.  1 <head>
  1097.  2     <title>JQueryUI的使用</title>
  1098.  3     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
  1099.  4     <link href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
  1100.  5     <script src="js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
  1101.  6
  1102.  7     <script type="text/javascript">
  1103.  8         $(function() {
  1104.  9             $("#mydialog").dialog();
  1105. 10             $("#testtab").tabs();
  1106. 11         });
  1107. 12     </script>
  1108. 13 </head>
  1109. 14 <body>
  1110. 15     <div id="mydialog">你好，我是对话框</div>
  1111. 16     <div id="testtab">
  1112. 17         <ul>
  1113. 18             <li><a href="#tabBasic">基本设置</a></li>
  1114. 19             <li><a href="#tabAdv">高级设置</a></li>
  1115. 20         </ul>
  1116. 21             <div id="tabBasic">用户名：<input type="text"/></div>
  1117. 22             <div id="tabAdv">刷新频率：<input type="text" /></div>
  1118. 23     </div>
  1119. 24 </body>
  1120. 复制代码

JQuery 学习总结及实例 !! （转载）的更多相关文章

  1. 很不错的jQuery学习资料和实例

    这些都是学习Jquery很不错的资料,整理了一下,分享给大家. 希望能对大家的学习有帮助. 帕兰 Noupe带来的51个最佳jQuery教程和实例, 向大家介绍了jQuery的一些基本概念和使用的相关 ...

  2. 转载最佳JQuery学习网站

    转载文章,原出处: http://www.gbin1.com/technology/jquery/learningjquerywebsites/ jQuery是目前最流行的 JavaScript    ...

  3. （私人收藏）[开发必备]最全JQuery离线快速查找手册（可查询可学习，带实例）

    [开发必备]最全JQuery离线快速查找手册(可查询可学习,带实例) https://pan.baidu.com/s/16bUd4iA3p0c5RHbzaC60IQe4zh

  4. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  5. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  6. 大量Javascript/JQuery学习教程电子书合集

    ［推荐分享］大量Javascript/JQuery学习教程电子书合集,送给有需要的人   不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pd ...

  7. ［推荐分享］大量Javascript/JQuery学习教程电子书合集，送给有需要的人

    不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pdf 274.79 KB   21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...

  8. jQuery学习笔记之Ajax用法详解

    这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...

  9. Activiti学习之 多实例实现会签功

    转: Activiti学习之 多实例实现会签功能 2014年11月26日 11:27:11 程诺 阅读数:26185   版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog ...

随机推荐

  1. java 并发(五)---AbstractQueuedSynchronizer

    文章部分图片和代码来自参考文章. LockSupport 和 CLH 和 ConditionObject 阅读源码首先看一下注解 ,知道了大概的意思后,再进行分析.注释一开始就进行了概括.AQS的实现 ...

  2. Cheatsheet: 2017 02.01 ~ 02.28

    Web Debouncing and Throttling Explained Through Examples What is TypeScript? An Absolute Beginner's ...

  3. curl POST JSON

    1. 场景 Controller接收json格式数据 封装bean @RequestMapping(value = "/bb", method = RequestMethod.PO ...

  4. mockito測試框架

    1. code package com.springinaction.knights; import static org.mockito.Mockito.*; import org.junit.Te ...

  5. lua中使用table实现类和继承

    --因为只有当读写不存在的域时,才会触发__index和__newindex classA = {className = "classA",name="classAIns ...

  6. ES6入门——数值的扩展

    1.二进制和八进制表示法 ES6提供了二进制和八进制数值的新的写法,分别用前缀0b或0B和0o或0O表示. 2.Number.isFinite(),Number.isNaN() ES6在Number对 ...

  7. 'weblogic.kernel.Default (self-tuning) 问题weblogic层面解决办法

    声明:出现这个问题有程序方面.网络方面.weblogic设置方面等等原因,此文章主要讲述由于weblogic设置而导致的解决办法. 因为: 1.程序问题,需要项目自己去解决,weblogic在做优化处 ...

  8. GPDB 5.x PSQL Quick Reference

    General \copyright show PostgreSQL usage and distribution terms \g [FILE] or ; execute query (and se ...

  9. Idea中Git的使用和两种类型的冲突解决

    一.Git冲突解决 在idea开发工具中使用Git时,主要用到的快捷按钮如下五个:   这五个按钮的使用说明及在idea中如何配置和使用git可参考https://github.com/DayThin ...

  10. tree 向下查找 （删除整条tree）

    需求:通过点击获取需要删除的id(即获取到整条信息),如果该条数据没有子集,通过id删除即可,如果有子集,则该数据下所有的子集都需要删 删除后页面的数据更新在 下一篇 讲解 1 const id =' ...