导航

jQuery<转>

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