jQuery学习笔记

  1. $() = $(document)  
  2. //实现window.onload()效果  
  3. $().ready(  
  4.     function(){  
  5.         //需要执行的内容  
  6.     }  
  7. );  
  8. //获取DOM元素(返回值为jQuery对象)  
  9. $("element"//相应元素名的  
  10. $(".classname"//class值匹配的  
  11. $("element.classname"//相应元素中,class值匹配的  
  12. $("#id"//id匹配的  
  13. $("element#id"//相应元素中,id匹配的  
  14. $("element1 > element2"//元素一 下 的所有元素二(只包括儿子)  
  15. $("element1 element2")      //元素一 中 的所有元素二(包括子孙等)  
  16. $("element1 + element2")    //元素一 后 的所有元素二(代码后)  
  17. $("element1 ~ element2")    //与元素一 并列 的所有元素二(兄弟元素二)  
  18. $("#id").html("")   //设置 getElementById("id").innerHTML = ""  
  19. $("#id").html()     //取出 getElementById("id").innerHTML  
  20. //动画出现效果  
  21. $("#id").show(speed, [callback])  
  22. $("#id").slideDown(speed, [callback])  
  23. ……  
  24.   
  25. /*========= 
  26.  2009-1-16 
  27. =========*/  
  28. //在<p>外面包围另一个结构(html代码/元素)  
  29. $("p").wrap("<div class='wrap'></div>")  
  30. $("p").wrap(document.getElementById('content'))  
  31. $("p").append("<b>Hello</b>");  //<p>I would like to say: <b>Hello</b></p>  
  32. $("p").prepend("<b>Hello</b>"); //<p><b>Hello</b>I would like to say: </p>  
  33. $("p").before("<b>Hello</b>");  //<b>Hello</b><p>I would like to say: </p>  
  34. $("p").after("<b>Hello</b>");   //<p>I would like to say: </p><b>Hello</b>   
  35. //【删除相应class的p元素】  
  36. //<p class="classname">AAA</p> BBB <p>CCC</p>  
  37. //BBB <p>CCC</p>  
  38. $("p").remove(".classname");  
  39. /*========= 
  40.  2009-1-18 
  41. =========*/  
  42. //获取具有某属性值的相应元素  
  43. $("input[name=qq]"//获取<input name="qq" type="text" />元素  
  44. //属性与值关系  
  45. =   //等于  
  46. *=  //包含该值  
  47. !=  //不包含该值  
  48. ^=  //以该值开头  
  49. $=  //以该值结尾  
  50. //为每一个匹配的元素执行该函数  
  51. $("element").each(function(){  
  52.     //需要执行的内容  
  53. })    
  54. /*========= 
  55.  2009-1-19 
  56. =========*/  
  57. /* 
  58. jQuery中用post和get方法 
  59. (ajax高层抽象方法,对ajax方法进行了封装) 
  60. 【当JQ中用post方式】 
  61. PHP用$_POST接收时,只有n2 
  62. PHP用$_GET接收时,只有n1 
  63. 【当JQ中用get方式】 
  64. PHP用$_GET接收,n1 n2都有 
  65. PHP用$_POST接收时,都没有 
  66. */  
  67. $.post("do.php?n1=a", {n2: "b"},      
  68.     function(data){  
  69.         ;  
  70.     }  
  71. );  
  72. /*========= 
  73.  2009-1-20 
  74. =========*/  
  75. //DOM对象 -> jQuery对象  
  76. //$(DOM对象)  
  77. var v = document.getElementById("id");  //DOM对象 v   
  78. var $v = $(v); //jQuery对象 $v  
  79. //jQuery对象 -> DOM对象  
  80. //jQuery对象.get(0) 或者 jQuery对象[0]  
  81. var $v = $("#id");  //jQuery对象 $v  
  82. var v = $v.get(0); //DOM对象 v  
  83. var v = $v[0]; //DOM对象 v  
  84. $("element").get(); //获取指定元素的集合  
  85. //jQuery用ajax方法(ajax低层方法)  
  86. $.ajax({  
  87.     type:   "POST"//POST时PHP中用$_POST接收,GET反之。  
  88.     url:    "do.php",  
  89.     data:   "n1="+x+"&n2="+y,  
  90.     success: function(data){ ; }   
  91. });  
  92. /*========= 
  93.  2009-1-21 
  94. =========*/  
  95. //序列表表格内容为请求字符串  
  96. //返回值:(例)name=linvo&age=22  
  97. $("form").serialize() //序列化整个表单元素内容  
  98. $("input[type=text]").serialize() //序列化指定元素内容(例)  
  99. $("element").empty(); //移除指定元素下所有元素  
  100. /* 
  101.  CSS设置 
  102. */  
  103. $("element").addClass("classname"); //为指定元素添加css样式  
  104. $("element").removeClass("classname"//移除指定元素的css样式  
  105. $("element").toggleClass("classname"//指定元素的css样式,有则删除,无则添加  
  106. $("element").css("attname"); //获取指定元素相应属性的值(attname例:color)  
  107. $("element").css("attname","value"); //设置……属性值(例:"color","#FF0000")  
  108. $("element").css({ "margin-left""10px""background-color""blue" });   
  109. //使用“名/值对”进行批量设置……(例子见自身)  
  110. /*========= 
  111.  2009-1-22 
  112. =========*/  
  113. $("element1").next(element2) //与指定元素一 紧邻 的指定元素二  
  114. $("element1").parent().is(element2) //元素一的父元素在元素二的集合中吗   
  115. //模仿鼠标悬停事件  
  116. //hover(over,out)  
  117. //over:在上方执行 | out:移出时执行  
  118. $("element").hover(  
  119.     function(){  
  120.         //在上方执行  
  121.     }, function(){  
  122.         //移出时执行  
  123.     }  

Lad.li
posted @ 2009-04-05 23:29  silverPerson  阅读(186)  评论(0编辑  收藏  举报