JQuery——$对象，选择器，对象转换

1. //alert($);  
2.   
3.   
4.   
5.   
6. /*window.onload = function(){ 
7.     var msgDiv = document.getElementById("msg"); 
8.     alert(msgDiv); 
9. };*/  
10. //类似上面 *****必须掌握******  
11. //把document对象转换为jqueryObject对象,并且文档(页面)加载完毕后,调用callback  
12. $(document).ready(function(){  
13.     //console.debug("执行该句,表达文档(页面)加载完毕");  
14. });  
15.   
16. //如果参数是一个函数,类似上面 *****必须掌握******  
17. $(function(){  
18.     //console.debug("执行该句,表达文档(页面)加载完毕");  
19. });  
20.   
21.   
22.   
23. /*****************************jquery基础知识******************************/  
24. $(function(){  
25.     /*  
26.      * "jQuery对象就是通过jQuery包装DOM对象后产生的对象。" 
27.      * jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法 
28.      *  
29.      * 虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法， 
30.      * 同理DOM对象也不能使用jQuery里的方法.乱使用会报错 
31.      */  
32.     console.debug(document.getElementById("msg").innerHTML);  
33.       
34.     //获取ID为test的元素内的html代码,类似于上面  
35.     console.debug($("#msg").html());  
36.       
37.     //现在已经有一个DOM对象,如何转换为jquery对象  
38.     var msgDiv = document.getElementById("msg");//DOM对象  
39.     var jqueyObject = $(msgDiv);//DOM转JqueryObject  
40.       
41.     //jQuery对象转成DOM对象  
42.     console.debug(jqueyObject[0]);//第一种,jQuery2DOM  
43.     console.debug(jqueyObject.get(0));//第一种,jQuery2DOM  
44.       
45. });  
46. /*****************************jquery选择器(非常非常重要)******************************/  
47. //基本选择器  
48. $(function(){  
49.      $("#id");//等价于    document.getElementById("id");  
50.      $("tagName");//等价于   document.getElementsByTagName("tagName");  
51.        
52.      console.debug("------------------基本选择器--------------------");  
53.        
54.      //#id 根据给定的ID匹配一个元素.getElementById()  
55.      console.debug("#msg",$("#msg"));  
56.      //element 根据给定的元素名匹配所有元素 getElementsByTagName()  
57.      console.debug("div",$("div"));  
58.      //.class 根据给定的类匹配元素。根据元素的class属性来进行查找  
59.      console.debug(".my",$(".my"));  
60.      //*匹配所有元素  
61.      console.debug("*",$("*"));  
62.      //selector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回。  
63.      console.debug(".my,#msg",$(".my,#msg,p,#p1"));  
64.      //获取页面中class=my的div元素  
65.      console.debug("class=my的div元素",$("div.my"));  
66.        
67.      console.debug("------------------基本选择器--------------------");  
68. });  
69.   
70. //层次选择器  
71. $(function(){  
72.     console.debug("------------------层次选择器--------------------");  
73.       
74.     //ancestor descendant 在给定的祖先元素下匹配所有的后代元素(子 孙子)  
75.     console.debug("form input",$("form input"));  
76.       
77.     //parent > child 在给定的父元素下匹配所有的子元素(只包含儿子)  
78.     console.debug("form > input",$("form > input"));  
79.       
80.     //prev + next 匹配所有紧接在 prev 元素后的 next 元素  
81.     console.debug("label + input",$("label + input"));  
82.       
83.     //prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素  
84.     console.debug("label ~ input",$("label ~ input"));  
85.       
86.     console.debug("------------------层次选择器--------------------");  
87. });  
88.   
89. //过滤选择器,该选择器都以 “:” 开头  
90. $(function(){  
91.       
92.     console.debug("------------------基础过滤选择器--------------------");  
93.     //:first获取第一个元素  
94.     console.debug("ul li:first",$("ul li:first"));//注意只取第一个  
95.     //:last获取最后一个元素  
96.     console.debug("ul li:last",$("ul li:last"));//注意只取第一个  
97.     //:not 去除所有与给定选择器匹配的元素  
98.     console.debug("div:not(.my)",$("div:not(.my)"));  
99.       
100.     //:even 匹配所有索引值为偶数的元素，从 0 开始计数  
101.     console.debug("table tr:even",$("table tr:even"));  
102.     //:odd 匹配所有索引值为奇数的元素，从 0 开始计数  
103.     console.debug("table tr:odd",$("table tr:odd"));  
104.       
105.     //:eq 匹配一个给定索引值的元素  
106.     console.debug("table tr:eq(3)",$("table tr:eq(3)"));  
107.       
108.     //:gt 匹配所有大于给定索引值的元素  
109.     console.debug("table tr:gt(1)",$("table tr:gt(1)"));  
110.       
111.     //:lt 匹配所有小于给定索引值的元素  
112.     console.debug("table tr:lt(1)",$("table tr:lt(1)"));  
113.       
114.     //:header 匹配如 h1, h2, h3...h6之类的标题元素  
115.     console.debug(":header",$("div > :header"));  
116.       
117.     console.debug("------------------基础过滤选择器--------------------");  
118.       
119. });  
120.   
121.   
122. //过滤选择器,该选择器都以 “:” 开头  
123. $(function(){  
124.     console.debug("------------------内容过滤选择器--------------------");  
125.       
126.     //:contains 匹配包含给定文本的元素  
127.     console.debug("div:contains(我是IT)",$("div:contains(我是IT美)"));  
128.     //:empty 匹配所有不包含子元素或者文本的空元素  
129.     console.debug("p:empty",$("p:empty"));  
130.     //:has 匹配含有选择器所匹配的元素的元素  
131.     console.debug("div:has(.myb)",$("div:has(.myb)"));  
132.       
133.     //:parent 匹配含有子元素或者文本的元素  
134.     console.debug("div:parent",$("div:parent"));  
135.       
136.     console.debug("------------------内容过滤选择器--------------------");  
137. });  
138.   
139. //过滤选择器,该选择器都以 “:” 开头  
140. $(function(){  
141.     //console.debug("------------------可见度过滤选择器--------------------");  
142.       
143.     //:hidden 匹配所有不可见元素，或者type为hidden的元素  
144.     console.debug("input:hidden",$("input:hidden"));  
145.       
146.     //:visible 匹配所有的可见元素  
147.     console.debug("input:visible",$("input:visible"));  
148.       
149.     //console.debug("------------------可见度过滤选择器--------------------");  
150. });  
151.   
152. //过滤选择器,该选择器都以 “:” 开头  
153. $(function(){  
154.     //console.debug("------------------属性过滤选择器--------------------");  
155.       
156.     //[attribute]匹配包含给定属性的元素  
157.     console.debug("div[id]",$("div[id]"));  
158.     //[attribute=value] 匹配给定的属性是某个特定值的元素  
159.     console.debug("div[id=msg]",$("div[id=msg]"));  
160.     //[selector1][selector2][selectorN]  
161.     console.debug("div[id=msg][name]",$("div[id=msg][name$=g]"));  
162.     //console.debug("------------------属性度过滤选择器--------------------");  
163. });  
164.   
165. //过滤选择器,该选择器都以 “:” 开头  
166. $(function(){  
167.       
168.     //console.debug("------------------子元素过滤选择器--------------------");  
169.       
170.     //:nth-child 匹配其父元素下的第N个子或奇偶元素  index从1开始  
171.     console.debug("table tr:nth-child(3n)",$("table tr:nth-child(3n)")); //table tr:first  
172.       
173.     //:only-child  如果某个元素是父元素中唯一的子元素，那将会被匹配  
174.     console.debug("tr td:only-child",$("tr td:only-child")); //table tr:first  
175.       
176.     //console.debug("------------------子元素过滤选择器--------------------");  
177.       
178. });  
179.   
180.   
181. //过滤选择器,该选择器都以 “:” 开头  
182. $(function(){  
183.       
184.     //console.debug("------------------表单对象属性过滤选择器--------------------");  
185.       
186.     //:input 匹配所有 input, textarea, select 和 button 元素  
187.     console.debug(":input",$(":input"));  
188.       
189.     //:text 匹配所有的单行文本框  
190.     console.debug(":text",$(":text"));  
191.       
192.     //:enabled 匹配所有可用元素  
193.     console.debug(":enabled",$(":enabled"));  
194.       
195.     //:disabled 匹配所有可用元素  
196.     console.debug(":disabled",$(":disabled"));  
197.       
198.     //:checked 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)  
199.     console.debug(":checked",$(":checked"));  
200.       
201.     //:selected 匹配所有选中的option元素  
202.     console.debug(":selected",$(":selected"),"jquery中d0m个数 = ",$(":selected").length,$(":selected").size());  
203.       
204.     //console.debug("------------------表单对象属性过滤选择器--------------------");  
205. });