JQuery总结

JQuery

能做什么？

         ·访问和操作DOM元素

         ·控制页面样式

         ·对页面事件进行处理

         ·扩展新的JQuery插件

         ·与AJAX技术完美结合

注：JQuery能做的JavaScript也都能做，但使用JQuery能大幅提高开发效率。

优势？

         ·体积小，压缩后只有100KB左右

         ·强大的选择器

         ·出色的DOM封装

         ·可靠的事件处理机制

         ·出色的浏览器兼容性

         ·使用隐式迭代简化编程

         ·丰富的插件支持

DOM对象：直接使用JavaScript获取的节点对象

JQuery对象：使用JQuery包装DOM对象后产生的对象，它能够使用JQuery中的方法。

注：DOM对象和JQuery对象分别拥有一套独立的方法，不能混用。

注：JQuery对象命名一般约定以$开头，在事件中经常使用$(this)，this是触发该事件的对象。

 

JQuery选择器分类：

         ---类CSS选择器

                   ·基本选择器

名称	语法构成	描述	示例
标签选择器	element	根据给定的标签名匹配元素	$(“h2”)
类选择器	.class	根据给定的class匹配元素	$(“.title”)
ID选择器	#id	根据给定的id匹配元素	$(“#title”)
并集选择器	selector1,selector2…	将每一个选择器匹配的元素合并	$(“div,p,title”)
全局选择器	*	匹配所有元素	$(“*”)

                   ·层次选择器

名称	语法构成	描述	示例
后代选择器	ancestor descendant	选取ancestor元素里的所有descendant(后代)元素	$(“#menu span”)
子选择器	parent>child	选取parent元素下的child(子)元素	$(“#menu>span”)
相邻元素选择器	prev+next	选取紧邻prev元素之后的next元素	$(“h2+dl”)
同辈元素选择器	prev~sibings	选取prev元素之后的所有siblingd元素	$(“h2~dl”)

·属性选择器

语法构成	描述	示例
[attribute]	选取包含给定属性的元素	$(“[href]”)
[attribute=value]	选取等于给定属性是某个值的元素	$(“[href = ’#’]”)
[attribute!=value]	选取不等于给定元素是某个特定值的元素	$(“[href != ’#’]”)
[attribute^=value]	选取给定属性是以某些特定值开始的元素	$(“[href ^= ‘en’]”)
[attribute$=value]	选取给定属性是以某些特定值结尾的元素	$(“[href $= ‘txt’]”)
[attribute *= value]	选取给定属性是以包含某些值的元素	$(“[href *= ‘txt’]”)
[selector][selector2][selectorN]	选取满足多个条件的复合属性的元素	$(“li[id][title=新闻要点]”)

         ---过滤选择器

                   ·基本过滤选择器

语法描述	描述	实例
:first	选取第一个元素	$(“li:first”)
:last	选取最后一个元素	$(“li:last”)
:even	选取索引是偶数的所有元素(index从0开始)	$(“li:even”)
:odd	选取索引是奇数的所有元素(index从0开始)	$(“li:odd”)
:eq(index)	选取索引等于index的元素(index从0开始)	$(“li:eq(6)”)
:gt(index)	选取索引大于index的元素(index从0开始)	$(“li:gt(6)”)
:lt(index)	选取索引小于index的元素(index从0开始)	$(“li:lt(6)”)
:not(selector)	选取去除所有与给定选择器匹配的元素	$(“li:not(.three)”)
:header	选取所有标题元素，如h1~h6	$(“:header”)
:focus	选取当前获取焦点的元素	$(“:focus”)

                   ·可见性过滤选择器

语法描述	描述	实例
:visible	选取所有可见的元素	$(“:visible”)
:hidden	选取所有隐藏的元素	$(“:hidden”)

·表单对象过滤选择器

                   ·内容过滤选择器、子元素过滤选择器……

JQuery中的事件

---基础事件

         ·window事件

         ·鼠标事件

方法	描述	执行时机
click()	触发或将函数绑定到指定元素的click事件	单击鼠标时
mouseover()	触发或将函数绑定到指定元素的mouseover事件	鼠标移过时
mouseout()	触发或将函数绑定到指定元素的mouseout事件	鼠标移出时

         ·键盘事件

方法	描述	执行时机
keydown()	触发或将函数绑定到指定元素的keydown事件	按下键盘时
keyup()	触发或将函数绑定到指定元素的keyup事件	释放键盘时
keypress()	触发或将函数绑定到指定元素的keypress事件	产生可打印字符时

注：回车的keyCode是13。

         ·表单事件

方法	描述	执行时机
focus()	触发或将函数绑定到指定元素的focus事件	获得焦点
blur()	触发或将函数绑定到指定元素的blur事件	失去焦点
bind()	为多个事件绑定方法
unbind()	移除事件

---复合事件是多个事件的组合

         ·鼠标光标悬停

hover()事件

         ·鼠标连续点击

click()事件

 

JQuery动画效果

---控制元素显示与隐藏

         show()和hide()  toggle()

---控制元素淡入淡出

         fadeIn()和fadeOut()  fadeToggle()

---改变元素高度

         slideDown()和slideUp()