jQuery学习笔记

 
  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.     }  

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值