jquery框架学习(keep update)-摩杜云开发者社区

1.  jquery在日常的开发中，是较为常用的一种技术，所以今天也不算较为系统详细的学习吧。
2.  主要是对jquery当中，许多常用的方法进行学习和总结吧
3.  jquery当中主要的特点就是：选择器，js当中呢，主要就是dom树结构。
4.  下面就不多说了，开始我们jquery当中方法的学习。

1. ①：触发函数的两种方式：
2. <!-- jquery函数 -->
   <script type="text/javascript">
   /* 函数触发方式一 */
   $(function(){
   //$(type="[name='method1']").click(function(){
   $("button").click(function(){
   $(this).hide();
   });
   });
   /* 函数触发方式二 */
   function onClick(){
   $("p").slideToggle();
   }
   </script>
   </head>
   
   <body>
   <button name="method1">函数触发方式一:点击按钮一隐藏</button>
     <input type="button" οnclick="onClick();" value="函数触发方式二:点击文字隐藏"/>
     <p>i am show content!</p>
   </body>3.

1. ②：选择器的使用： 
2. 选择器一共分为4中： 
3. 基本选择器（id选择器，类选择器，标签选择器，多路选择器） 
4. 层次选择器（后代选择器，儿子选择器，后续所有兄弟选择器，第一个兄弟选择器）   
5. 表单选择器 过滤选择器（简单过滤选择器，内容过滤选择器，可见性过滤选择器，属性过滤选择器，子元素过滤选择器，表单对象属性过滤选择器） 
6. 
7. 1）基本选择器 
8.  <!-- jquery函数 -->   
9.  <script type="text/javascript">   
10.  /* 基本选择器 */   
11.  /* id选择器 */   
12.  /* $(function(){   
13. $("#btn").click(function(){   
14. $("p").slideToggle();   
15. })   
16.  }) */   
17.  
18.  /* 类选择器 */   
19.  /* $(function(){   
20. $(".btn").click(function(){   
21. $("p").hide();   
22. })   
23.  }) */   
24.  
25.  /* 标签选择器 */   
26.  /* $(function(){   
27. $("input").click(function(){   
28. $("p").slideToggle();   
29. })   
30.  }) */  
31.   
32.  /* 多路选择器 */ 
33.  /* $(function(){   
34. $("p ,.btn").click(function(){   
35. alert("ni dian ji l wo !");   
36. }); 
37.  }) */   
38.  </script>      
39.  </head>      
40.  <body>   
41. <div id="controller">     
42. <input id="btn" class="btn" type="button" value="点击文字隐藏"/>     
43. <p>i am show content!</p>   
44. </div>   
45.  </body> 
46.  
47. 2）层次选择器
48.  <!-- jquery函数 -->
   <script type="text/javascript">
   /* 后代选择器 (后代)*/
   /* $(function(){
   $("#controller input,p").click(function(){
   alert("你使用的是后代选择器");
   })
   }) */49.  
   /* 儿子选择器 （兄弟）*/
   /* $(function(){
   $("#controller > p,button").click(function(){
   alert("你使用的是儿子选择器");
   })
   }) */50.  
   /* 后续所有兄弟选择器  */
   $(function(){
   $("#controller ~ div").click(function(){
   alert("你选择的是后续所有兄弟选择器!");
   })
   })51.  
  /* 下一个兄弟选择器 */
  $(function(){
  $("#controller + div").click(function(){
  alert("你选择的是下一个兄弟选择器!");
  })
  })
   </script>
   </head> 
   <body>
<div>
<p>i am first p!</p>
</div>
   <div id="controller">
   <div>
    <input id="btn" class="btn" type="button" value="点击文字隐藏"/>
     <input id="btn2" class="btn2" type="button" value="点击文字隐藏2"/>
     <p>i am son and son!</p>
   </div>
    <p>i am son!</p>
    <button>i am son button</button>
   </div>
   <div id="controller2">
     <input id="btn3" class="btn3" type="button" value="点击文字隐藏3"/>
     <input id="btn4" class="btn4" type="button" value="点击文字隐藏4"/>
    <p>i am show content2!</p>
   </div>
   <div id="controller3">
   <button>i am button3!</button>
   </div>
   <button>i am brother button</button>
<p>i am brother p!</p>
   </body>52.  
53. 3）过滤选择器
54. <!-- jquery函数 -->
   <script type="text/javascript">
   /* 简单过滤器 */
   $(function(){
  /* :first的使用 */
  //$("ul li:first").css("backgroundColor","red");
   
  /* :last的使用 */
   //$("ul li:last").css("backgroundColor","red");
   
   /* :even的使用 */
   //$("ul li:even").css("backgroundColor","red");
   
/* :odd的使用 */
   //$("ul li:odd").css("backgroundColor","red");
   
   /* :eq(0)的使用  */
   //$("ul li:eq(0)").css("backgroundColor","green");
   
   /* :gt(0)的使用 (获取大于指定索引的元素)*/
   //$("ul li:gt(0)").css("backgroundColor","green");
   
   /* :lt(0)的使用 (获取大于指定索引的元素)*/
   //$("ul li:lt(0)").css("backgroundColor","blue");
   })
   </script>
   </head>
   
   <body>
   <h1>基本选择器</h1>
<ul>
<li class="def">item0</li>
<li class="def">item1</li>
<li class="not">item2</li>
<li class="def">item3</li>
</ul>
<span id="sp">span</span>
   </body>55. 4）内容过滤选择器
56.  <!-- jquery函数 -->
   <script type="text/javascript">
   /* 简单过滤器 */
   /* :contains(text) (显示包含给定文本的元素) */
   $(function(){
  $("div:contains('E')").css("backgroundColor","red");
   });
   
   /* :empty (所有不包含子元素或者文本为null的元素) */
   $(function(){
   $("div:empty").css("backgroundColor","blue");
   });
   
/* :has(selector) (含有选择器所匹配的元素的元素)*/
$(function(){
$("div:has(span)").css("backgroundColor","green");
});

/* :parent (所有含有子元素或者文本的元素)*/
$(function(){
$("div:parent").css("backgroundColor","purple")
});
   </script>
   </head>
   
   <body>
   <div>ABCD</div>
   <div><span>qq</span></div>
   <div>EPaH</div>
   <div></div>
   </body>57.  5）可见性过滤选择器
58. <!-- jquery函数 -->
   <script type="text/javascript">
   /* 可见性过滤器 */
   /* :hidden (获取所有不可见元素或者type为hidden的元素)*/
   $(function(){
   /* 使隐藏的元素显示出来 */
   /* $("span:hidden").show(); */
   /* 给显示的元素添加背景 */
   /* $("div:visible").css("backgroundColor","red"); */
   /* 使隐藏的元素显示并且添加背景颜色 */
   $("span:hidden").show().css("backgroundColor","yellow");
   })
   </script>
   </head>
   
   <body>
   <span style="display:none">Hidden</span>
   <div>visible</div>
   </body>59. 6）属性过滤选择器
60.  <!-- jquery函数 -->
   <script type="text/javascript">
   /* 属性过滤选择器 */
   $(function(){
  /* [attribute] (获取包含给定属性的元素) */
  //$("div[id]").hide(2000);
  /* [attribute=value] (获取等于给定的属性是某个特定值的元素) */
  //$("div[title='A']").hide(2000);
  /* [attribute!=value] (获取不等于给定的属性是某个特定值的元素) */
  //$("div[title!='A']").hide(2000);
  /* [attribute^value] (获取给定的属性是以某些值开始的元素) */
  //$("div[title^='A']").hide(2000);
  /* [attribute$=value] (获取给定的元素是以某些值结尾的元素) */
  //$("div[title$='A']").hide(2000);
  /* [attribute*=value] (获取给定的属性是以包含某些值的元素) */
  //$("div[title*='C']").hide(2000);
  /* [selector1][selector2]... (获取满足多个条件的符合属性的元素) */
  $("div[id$='B'][title*='B']").hide(2000);(两个筛选器之间不可以有空格)
   })
   </script>
   </head>
   
   <body>
   <div id="divID">ID</div>
   <div id="divB" title="A">title a</div>
   <div id="divAB" title="AB">id</div>
   <div title="ABC">title abc</div>
   </body>61. 7）子元素过滤选择器
62. <!-- jquery函数 -->
   <script type="text/javascript">
   /* 子元素过滤选择器 */
   $(function(){
  /* :nth-child(2) (获取每个父元素下的特定位置元素，索引从1开始) */
  //$("li:nth-child(2)").hide(1000);
   /* :first-child (获取每个父元素下的第一个元素) */
   $("li:first-child").css("backgroundColor","red");
   /* :last-child (获取每个父元素下的最后一个子元素) */
   //$("li:last-child").hide(2000);
   /* :only-child (获取每个父元素下的仅有的一个子元素) */
   //$("li:only-child").hide(2000);
   })
   </script>
   </head>
   
   <body>
   <ul>
   <li>1-0</li>
   <li>1-1</li>
   <li>1-2</li>
   <li>1-3</li>
   </ul>
   <ul>
   <li>2-0</li>
   <li>2-1</li>
   <li>2-2</li>
   <li>2-3</li>
   </ul>
   </body>63. 8）表单对象属性过滤选择器
64. <!-- jquery函数 -->
   <style type="text/css">
.GetFocus{
background-color:red;border:solid 1px yellow
}
</style>
   <script type="text/javascript">
   /* 表单对象属性过滤选择器 */
   $(function(){
  /* :enabled (获取表单中所有属性为可用的元素) */
  $("#form1 input:enabled").addClass("GetFocus")
  /* :disabled (获取表单中所有属性为不可用的元素) */
  //$("#form1 input:disabled").hide(2000);
  /* :checked (获取表单中所有被选中的元素) */
  //$("#form1 input:checked").hide(2000);
  /* :selected (获取表单中所有被选中option的元素) */
  //$("#span2").html("选中的选项是:"+$("select option:selected").text())
   })
   </script>
   </head>
   
   <body>
   <form id="form1" style="width:241px;">
   <div id="divA">
   <input type="text" value="可用文本框"/>
   <input type="text" disabled="disabled" value="不可用文本框"/>
   </div>
   <div id="divB">
   <input type="checkbox" checked="checked" value="1"/>选中
   <input type="checkbox" value="0"/>未选中
   </div>
   <div id="divC">
   <select mutiple="mutiple">
   <option value="0">item0</option>
   <option value="1" selected="selected">item1</option>
   <option value="2">item2</option>
   <option value="3" selected="selected">item3</option>
   </select>
   <span id="span2"></span>
   </div>
   </form>
   </body>65. 9）表单选择器
66. 下午搬家帮忙去

1. ②：鼠标点击的四种方式：/隐藏元素

第一种方式：

$(document).ready(           function           (){          


            $(           "#clickme"           ).click(           function           (){          


                       alert(           "Hello World click"           );          


            });

第二种方式：

$(           '#clickmebind'           ).bind(           "click"           ,           function           (){          


            alert(           "Hello World bind"           );          


            });

第三种方式：

$(           '#clickmeon'           ).on(           'click'           ,           function           (){          


                       alert(           "Hello World on"           );          


            });          


            });

注意：第三种方式只适用于jquery 1.7以上的版本