《锋利的JQuery》学习笔记

JQuery--write less and do more 

【欢迎大家留言交流~也让作者更有动力写下去~】

【纯手打，求鼓励~】

1.$是JQuery的简写，在代码里$等价于JQuery。

 

2.Window.onload 和$(function)的区别

(a) ready方法不需要加载Dom中的具体内容(图片等)

(b) Ready方法可以正确执行多个

(c) 可以简写成$(function)

 

3.DOM对象只能调用DOM方法，JQuery对象只能调用JQuery方法

(a) document.getElementById()---获得DOM对象，DOM对象可以使用JavaScript方法

(b) $(“#id”)--JQuery包装DOM对象获得JQuery对象，可以使用JQuery方法

 

4.DOM元素和JQuery元素之间的相互转换

(a) var domObj = document.getElementById("p"); // Dom对象
   var $jQueryObj = $(domObj);  //jQuery对象

(b) var $jQueryObj = $(“#p”);  //jQuery对象

   Var domObj=$jQueryObj[0]; //DOM对象

(c) var $jQueryObj = $("#p");  //jQuery对象
   var domObj=$jQueryObj.get(0); //DOM对象

 

5.判断一个复选框是否被选中：

(a) DOM.check是否为true

(b) JQuery.is(":checked")是否是true

 

6.CSS的选择器

主要：

(a) 标签选择器

(b) ID选择器

(c) 类选择器

补充：

(d) 群组选择器

(e) 后代选择器

(f) 通配选择器 *{   }

不常用：

(g) 伪类选择器 E:D{A}

(h) 子选择器   e>f{C}

(i) 临近选择器  E+F{C}

(j) 属性选择器 E[attr]{C}

 

7.当网页上的DOM元素不存在时

(a) document.getElementById(“”)==null

(b) $(“”)为Object对象，不为空

处理方法

(1)转换成DOM元素

(2)$(“”).length方

 

8.JQuery中的选择器

基本选择器				部分省略$(“   ”)
	1	id选择器	#
	2	类选择器	.
	3	标签选择器	标签
	4	通配选择器	*
	5	群组选择器	$(“1,2,3”)
层次选择器
	1	后代[子孙]选择器	$(“div span”)	选中div中所有的span
	2	子选择器	$(“div>span”)	选中div子元素中所有的span
	3	同级(下一个)选择器	$(“.div+span”) $(“div”).next(“span”)	选中紧接class为div的元素的下一个span同级元素
	4	同级(之后所有)选择器	$(”.div~span”) $(“.div”).nextAll(“span”)	选中class为div的元素的之后的所有同级span元素
	5	同级(所有)选择器	$(“.div”).siblings(“span”)	选中class为div的元素的所有同级span元素
过滤选择器
	1	基本过滤选择器	:first 返回单个元素	div:first 选取所有div里面的第一个div元素
			:last 返回单个元素	div:last 选择最后一个div元素
			:not(selector) 返回集合元素	div:not(.one) 选择class不为one的 所有div元素
			:even 返回集合元素	Input:even 选择索引是偶数的input元素,从0开始
			:odd 返回集合元素	Input:odd 选择索引是奇数的input元素,从0开始
			:eq(index) 返回单个元素	Input:eq(0) 选择指定索引的元素
			:gt(index) 返回集合元素	Input:gt(1[) 选择index>1的input元素,不包括1,从0开始
			:lt(index) 返回集合元素	小于索引,例子同gt
			:header 返回集合元素	:header 选取所有的标题标签，如h1,h2,h3
			:animated 返回集合元素	div:animated 选取正在进行动画的div标签
		有用★	:focus 返回集合元素	:focus 选取当前获得焦点的元素
	2	内容过滤选择器
		有用★	:contains(text) 返回集合元素	div:contains(‘我’) 选取含有文本’我’的div元素
			:empty 返回集合元素	div:empty 选取不包含任何子元素的空div元素
			:has() 返回集合元素	div:has(p) 选取含有p标签的div元素
			:parent 返回集合元素	div:parent 选取拥有子元素的div元素
	3	可见性过滤选择器
			:hidden 返回集合元素	:hidden 选取input隐藏域，display:none,visibility:hidden的元素
			:visible	div:visible 选取所有可见元素
	4	属性过滤选择器
			[] 返回集合元素	div[id] 选取拥有id属性的div元素
			[attr=value] 返回集合元素	div[title=test] 选取title属性为test的div元素
			[attr!=value] 返回集合元素	div[title!=test] 选取title属性不为test的div元素，包括没有title属性的div
			[attr^=value] 返回集合元素	div[title^=test] 选取title属性以test开始的div元素
			[attr$=value] 返回集合元素	div[title$=est] 选取 属性title值 以 est 结束 的div元素
			[attr*=value] 返回集合元素	div[title*=es] 选取 属性title值 含有 es  的div元素
		不常用	[attr|=value] 返回集合元素	div[title|=”en”] 选取属性title=en或已en为前缀’-’为划分符的div元素
		不常用 (但提示了属性命名可以使用空格)	[attr~=value] 返回集合元素	div[title~=”uk”] 选取用空格分隔的字符中包含uk的元素
		有用★	[条件1][条件2][条件3][条件4] 返回集合元素	div[id][title*=es] 组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有 es 的元素
	5	子元素过滤选择器
			:nth-child(index/even/odd/equation) 返回集合元素	选取每个父元素下的第index个子元素，index从0开始 注意：:nth-child(3n+1)    n从1开始
			:first-child 返回集合元素	选取每个父元素下的第一个子元素
			:last-child 返回集合元素	选取每个父元素下的最后一个子元素
			:only-child   返回集合元素	div.one :only-child 如果父元素下的仅仅只有一个子元素，那么选中这个子元素
	6	表单对象属性过滤选择器
		表征表单属性的状态(固定)	:enable 返回集合元素	#form1 input:enabled 选取#form元素下所有可用的input元素
			:disabled 返回集合元素	#form1 input:disabled 选取#form元素下所有不可用的input元素
			:checked 返回集合元素	Input:checked 选取所有被选中的input
			:selected 返回集合元素	select option:selected 选中所有被选中的选项元素
	7	表单选择器	:input 返回集合元素	选取所有的input textarea select button标签·
			:text	.length属性用于统计个数
			:password
			:radio
			:checkbox
			:submit
			:image
			:reset
			:button
			:file
			:hidden

 

 

 

 

 

 

持续更新中