JQuery基础学习笔记(1)
博客专区 > ForingY 的博客 > 博客详情
JQuery基础学习笔记(1)
ForingY 发表于2年前
JQuery基础学习笔记(1)
  • 发表于 2年前
  • 阅读 9
  • 收藏 0
  • 点赞 0
  • 评论 0
  1. //------------------------- 第一章 认识JQuery -------------------------

  2. ·页面加载事件(可以写多个ready())

  3. $(document).ready(function(){

  4.     alert("hello world");

  5. })

  6. ·链式操作:JQuery允许你在一句代码中操做任何与其相关联的元素,包括其子元素、父元素等

  7. //选择名称为myDiv的元素,为其自身添加css1的样式,然后再选择其所有子元素a,为其移除css2样式

  8. $("#myDiv").addClass("css1").children("a").removeClass("css2");

  9. ·JQuery中获得一个对象的所有子元素内容

  10. $("#myDiv").html()


  11. ·JQuery中的变量 与 DOM中的变量

  12. var $myVar = "";

  13. var myVar = "";


  14. ·DOM对象 转换成 JQuery对象

  15. var obj = documnet.getElementById("myDiv");

  16. var $obj = $(obj);


  17. ·JQuery对象 转换成 DOM对象

  18. var $obj = $("#myDiv");

  19. var obj = $obj.get(0);  //或者var obj = $obj[0];


  20. ·释放JQuery对$符号的控制权

  21. JQuery.noConflict();



  22. //---------------------------- 第二章 JQuery选择器 -------------------------------


  23. ·JQuery完善的处理机制

  24. document.getElementById("test").style.color = "red"; //如果test不存在,则页面出现异常

  25. $("#test").css("color","red"); //哪怕页面没有名称为test的元素,也不会报错。它是一个JQuery对象


  26. ·判断页面是否选择的对象

  27. if( $(".class").length > 0 ){

  28.     // todo something

  29. }


  30. ·基本选择器

  31. $("#myDiv")    //根据给定的ID选择匹配的元素,返回:单个元素

  32. $(".myClass") //根据给定的样式名称选择匹配的元素,返回:集合元素

  33. $("div") //根据给定的元素名称选择匹配的元素,返回:集合元素

  34. $("#myDiv,div.myClass,span") //根据给定的规则选择匹配的元素,返回:集合元素

  35. $("*") //选择页面所有元素,返回:集合元素


  36. ·层次选择器

  37. $("div span") //选择所有DIV元素下的所有SPAN元素(所有后代元素),返回:集合元素

  38. $("div>span") //选择所有DIV元素下的SPAN子元素(仅子元素),返回:集合元素

  39. $(".myClass+div") //选择样式名称为myClass的下一个DIV元素,返回:集合元素

  40. $(".myClass+div") //等价于 $(".myClass").next("div");

  41. $(".myClass~div") //选择样式名称为myClass之后的所有DIV元素,返回:集合元素

  42. $(".myClass~div") //等价于 $(".myClass").nextAll();

  43. $(".myClass").siblings("div") //选择样式名称为myClass的元素的所有同辈DIV元素(无论前后),返回集合元素


  44. ·过滤选择器(index从0开始)

  45. $("div:first") //选择所有DIV元素下的第一个DIV元素,返回:单个元素

  46. $("div:last") //选择所有DIV元素下的最后一个DIV元素,返回:单个元素

  47. $("div:not(.myClass)") //选择所有样式不包括myClass的DIV元素,返回:集合元素

  48. $("div:even") //选择所有索引是偶数的DIV元素,返回:集合元素

  49. $("div:odd") //选择所有索引是奇数的DIV元素,返回:集合元素

  50. $("div:eq(index)") //选择所有索引等于index的DIV元素,返回:集合元素

  51. $("div:gt(index)") //选择所有索引大于index的DIV元素,返回:集合元素

  52. $("div:lt(index)") //选择所有索引小于index的DIV元素,返回:集合元素

  53. $(":header") //选择所有标题元素(h1,h2,h3),返回:集合元素

  54. $("div:animated") //选择所有正在执行去画的DIV元素,返回:集合元素


  55. ·子元素过滤选择器(index从1开始)

  56. $(":nth-child(index/even/odd)") //选择每个父元素下的第index/偶数/奇数个子元素,返回:集合元素

  57. $(":first-child") //选择每个父元素下的第一个子元素,返回:集合元素

  58. $(":last-child") //选择每个父元素下的最后一个子元素,返回:集合元素

  59. $("ul li:only-child") //在UL元素中选择只有一个LI元素的子元素,返回:集合元素


  60. ·内容过滤选择器

  61. $(":contains(text)") //选择所有内容包含text的元素,返回:集合元素

  62. $("div:empty") //选择所有内容为空的DIV元素,返回:集合元素

  63. $("div:has(span)") //选择所有含有SPAN子元素的DIV元素,返回:集合元素

  64. $("div:parent") //选择所有含有子元素的DIV元素,返回:集合元素


  65. ·可见性选择器

  66. $(":hidden") //选择所有不可见的元素(type="hidden" style="display:none" style="visibility:none"),返回:集合元素

  67. $(":visible") //选择所有可见的元素,返回:集合元素


  68. ·属性过滤选择器

  69. $("[id]") //选择所有含有id属性的元素,返回:集合元素

  70. $("[class=myClass]") //选择所有class属性值是myClass的元素,返回:集合元素

  71. $("[class!=myClass]") //选择所有class属性值不是myClass的元素,返回:集合元素

  72. $("[alt^=begin]") //选择所有alt属性值以begin开始的元素,返回:集合元素

  73. $("[alt^=end]") //选择所有alt属性值以end结束的元素,返回:集合元素

  74. $("[alt*=some]") //选择所有alt属性值含有some的元素,返回:集合元素

  75. $("div[id][class=myClass]") //选择所有含有id属性的并且class属性值是myClass的元素,返回:集合元素


  76. ·表单对象属性选择器

  77. $("#myForm:enabled") //选择ID属性为myForm的表单的所有可用元素,返回:集合元素

  78. $("#myForm:disabled") //选择ID属性为myForm的表单的所有不可用元素,返回:集合元素

  79. $("#myForm:checked") //选择ID属性为myForm的表单的所有所有被选中的元素,返回:集合元素

  80. $("#myForm:selected") //选择ID属性为myForm的表单的所有所有被选中的元素,返回:集合元素


  81. ·表单选择器

  82. $(":input") //选择所有<input> <select> <button> <textarea>元素,返回:集合元素

  83. $(":text") //选择所有单行文本框元素,返回:集合元素

  84. $(":password") //选择所有密码框元素,返回:集合元素

  85. $(":radio") //选择所有单选框元素,返回:集合元素

  86. $(":checkbox") //选择所有复选框元素,返回:集合元素

  87. $(":submit") //选择所有提交按钮元素,返回:集合元素

  88. $(":image") //选择所有图片按钮元素,返回:集合元素

  89. $(":reset") //选择所有重置按钮元素,返回:集合元素

  90. $(":button") //选择所有按钮元素,返回:集合元素

  91. $(":file") //选择所有上传域元素,返回:集合元素

  92. $(":hidden") //选择所有不可见域元素,返回:集合元素

  93. $(":text") //选择所有单选文本框元素,返回:集合元素



  94. //---------------------------- 第三章 JQuery中的DOM操作 -------------------------------


  95. ·查找元素节点

  96. var str = $("#myDiv").text(); //<div id="myDiv" title="hello">123</div>

  97. alert(str); //结果:123


  98. ·查找属性节点

  99. var str = $("#myDiv").attr("title"); //<div id="myDiv" title="hello">123</div>

  100. alert(str); //结果:hello


  101. ·创建元素节点

  102. var $li1 = $("<span></span>"); //传入元素标记,自动包装并创建第一个li元素对象

  103. var $li2 = $("<span></span>"); //第二个,创建时需要遵循XHTML规则(闭合、小写)

  104. $("#myDiv").append($li1); //往id为myDiv的元素中添加一个元素

  105. $("#myDiv").append($li2); //结果:<div id="myDiv"><span></span><span></span></div>


  106. $("#myDIv").append($li1).append($li2); //客串:传说中的链式写法,省一行代码 ^_^


  107. ·创建文本节点

  108. var $li1 = $("<span>first</span>");

  109. var $li2 = $("<span>second</span>");

  110. $("#myDIv").append($li1).append($li2);

  111. //结果:<div id="myDiv"><span>first</span><span>second</span></div>


  112. ·创建属性节点

  113. var $li1 = $("<span title="111">first</span>");

  114. var $li2 = $("<span title="222">second</span>");

  115. $("#myDIv").append($li1).append($li2); 

  116. //结果:<div id="myDiv"><span title="111">first</span><span title="222">second</span></div>


  117. ·插入节点

  118. $("#myDiv").append("<span></span>"); //往id为myDiv的元素插入span元素

  119. $("<span></span>").appendTo("#myDiv"); //倒过来,将span元素插入到id为myDiv的元素


  120. $("#myDiv").prepend("<span></span>"); //往id为myDiv的元素内最前面插入span元素

  121. $("<span></span>").prependTo("#myDiv"); //倒过来,将span元素插入到id为myDiv的元素内的最前面


  122. $("#myDiv").after("<span></span>"); //往id为myDiv的元素后面插入span元素(同级,不是子元素)

  123. $("<span></span>").insertAfter("#myDiv"); //倒过来,将span元素插入到id为myDiv的元素后面(同级,不是子元素)


  124. $("#myDiv").before("<span></span>"); //往id为myDiv的元素前面插入span元素(同级,不是子元素)

  125. $("<span></span>").insertBefore("#myDiv"); //倒过来,将span元素插入到id为myDiv的元素前面(同级,不是子元素)


  126. ·删除节点

  127. $("#myDiv").remove(); //将id为myDiv的元素移除


  128. ·清空节点

  129. $("#myDiv").remove("span"); //将id为myDiv的元素内的所有span元素移除


  130. ·复制节点

  131. $("#myDiv span").click( function(){ //点击id为myDiv的元素内的span元素,触发click事件

  132.     $(this).clone().appendTo("#myDiv"); //将span元素克隆,然后再添加到id为myDiv的元素内

  133.     $(this).clone(true).appendTo("#myDiv"); //如果clone传入true参数,表示同时复制事件

  134. })


  135. ·替换节点

  136. $("p").replaceWith("<strong>您好</strong>"); //将所有p元素替换成后者 <p>您好</p> --> <strong>您好</strong>

  137. $("<strong>您好</strong>").replaceAll("p"); //倒过来写,同上


  138. ·包裹节点

  139. $("strong").wrap("<b></b>"); //用b元素把所有strong元素单独包裹起来 <b><strong>您好</strong></b><b><strong>您好</strong></b>

  140. $("strong").wrapAll("<b></b>"); //用b元素把所有strong元素全部包裹起来 <b><strong>您好</strong><strong>您好</strong></b>

  141. $("strong").wrapInner("<b></b>"); //把b元素包裹在strong元素内 <strong><b>您好</b></strong>


  142. ·属性操作

  143. var txt = $("#myDiv").arrt("title"); //获取id为myDiv的元素的title属性

  144. $("#myDiv").attr("title","我是标题内容"); //设置id为myDiv的元素的title属性的值

  145. $("#myDiv").attr({"title":"我是标题内容", "alt":"我还是标题"); //一次性设置多个属性的值

  146. $("#myDiv").removeArrt("alt"); //移除id为myDiv的元素的title属性


  147. ·样式操作

  148. var txt = $("#myDiv").arrt("class"); //获取id为myDiv的元素的样式

  149. $("#myDiv").attr("class","myClass"); //设置id为myDiv的元素的样式

  150. $("#myDiv").addClass("other"); //在id为myDiv的元素中追加样式

  151. $("#myDiv").removeClass("other"); //在id为myDiv的元素中移除other样式

  152. $("#myDiv").removeClass("myClass other"); //在id为myDiv的元素中移除myClass和other多个样式

  153. $("#myDiv").removeClass(); //在id为myDiv的元素中移除所有样式

  154. $("#myDiv").toggleClass("other"); //切换样式,在有other样式和没other样式之间切换

  155. $("#myDiv").hasClass("other"); //判断是否有other样式


  156. ·设置和获取HTML、文本和值

  157. alert( $("#myDiv").html() ); //获取id为myDiv的元素的HTML代码(相当于innerHTML)

  158. $("#myDiv").html("<span>hello</span>"); //设置id为myDiv的元素的HTML代码


  159. alert( $("#myDiv").text() ); //获取id为myDiv的元素的HTML代码(相当于innerText)

  160. $("#myDiv").text("hello"); //设置id为myDiv的元素的HTML代码


  161. alert( $("#myInput").val() ); //获取id为myDiv的元素的value值(支持文本框、下拉框、单选框、复选框等)

  162. $("#myInput").val("hello"); //设置id为myDiv的元素的value值(下拉框、单选框、复选框带有选中效果)


  163. ·遍历节点

  164. var $cList = $("#myDiv").children(); //获取id为myDiv的元素的子元素(只考虑子元素,不考虑后代元素)

  165. var $sNext = $("#myDiv").next(); //获取id为myDiv的元素的下一个同辈元素

  166. var $sPrev = $("#myDiv").prev(); //获取id为myDiv的元素的上一个同辈元素

  167. var $sSibl = $("#myDiv").siblings(); //获取id为myDiv的元素的所有同辈元素

  168. var $pClos = $("#myDiv").closest("span"); //获取id为myDiv的元素本身开始,最接近的span元素(向上查找)


  169. ·CSS-DOM操作

  170. $("#myDiv").css("color"); //获取id为myDiv的元素的color样式的值

  171. $("#myDiv").css("color", "blue"); //设置id为myDiv的元素的color样式的值

  172. $("#myDiv").css({"color":"blue", "fontSize":"12px"}); //设置id为myDiv的元素的color样式的值(多个)


  173. $("#myDiv").css("opacity", "0.5"); //设置id为myDiv的元素的透明度(兼容浏览器)


  174. $("#myDiv").css("height"); //获取id为myDiv的元素的高度(单位:px,兼容浏览器)

  175. $("#myDiv").height(); //同上(实际高度)


  176. $("#myDiv").css("width"); //获取id为myDiv的元素的宽度(单位:px,兼容浏览器)

  177. $("#myDiv").width(); //同上(实际宽度)


  178. var offset = $("#myDiv").offset(); //获取id为myDiv的元素在当前窗口的相对偏移量

  179. alert( offset.top + "|" + offset.left );


  180. var offset = $("#myDiv").position(); //获取id为myDiv的元素相对于最近一个position设置为relative或absolute的父元素的相对偏移量

  181. alert( offset.top + "|" + offset.left );


  182. $("#txtArea").scrollTop(); //获取id为txtArea的元素滚动条距离顶端的距离

  183. $("#txtArea").scrollLeft(); //获取id为txtArea的元素滚动条距离左侧的距离

  184. $("#txtArea").scrollTop(100); //设置id为txtArea的元素滚动条距离顶端的距离

  185. $("#txtArea").scrollLeft(100); //设置id为txtArea的元素滚动条距离左侧的距离





共有 人打赏支持
粉丝 24
博文 252
码字总数 156129
×
ForingY
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: