本文介绍jQuery这一流行的JavaScript库，包括其特点、选择器的使用方法、属性操作、CSS操作及事件编程等内容，帮助初学者快速掌握jQuery的基础知识。
1.JQuery简介。
jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。全球前10000个访问最高的网站中，有59%使用了jQuery，是目前最受欢迎的JavaScript库。简单来说就是一款免费且开放源代码的JavaScript代码库，类似的JavaScript代码库还有比如：jQuery、dojo、prototype、ExtJS。
2.JQuery特点。
-
动态特效
-
AJAX
-
通过插件来扩展
-
方便的工具 - 例如浏览器版本判断
-
渐进增强
-
链式调用
-
多浏览器支持，支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+（在2.0.0中取消了对Internet Explorer6,7,8的支持）。
3.JQuery中的选择器
在JQuery中，获得页面中元素的方式就称做选择器。
-
基本
-
层级
-
简单
-
内容
-
可见性
-
属性
-
子元素
-
表单
-
表单对象属性
3.1.基本
-
#id ：通过id属性值获取元素
-
Element ：通过元素名获取元素selector1,selector2 ：获取列表中指定的所有元素.
-
class ：获取使用class样式的所有元素
3.2简单
-
first ：匹配第一个元素
-
last ：匹配最后一个元素
-
even ：匹配索引为偶数的元素
-
odd ：匹配索引为奇数的元素
-
eq(index) ：匹配索引为指定值的元素
-
gt(index) ：匹配索引大于指定值的元素
-
lt(index) ：匹配索引小于指定值的元素
-
not(selector) ：匹配除了指定选择器之外的所有元素
3.3层级
-
ancetor descendant：匹配祖先元素下的后代元素
-
parent > child ：匹配父元素下的子元素
-
prev + next ：匹配上一个元素的后面的元素，必须是挨着的
-
prev~siblings ：匹配前一个元素的所有平辈元素，在prev元素后面才能匹配
3.4内容
-
:contains(text)：匹配内容中包含指定内容的元素
-
:empty ：匹配内容为空的元素
-
:has(selector)：匹配内容中包含指定选择器的元素
-
:parent：匹配内容不为空的元素
3.5可见性
-
hidden：匹配隐藏的元素
-
visible：匹配显示的元素
3.6属性
-
[attribute]：匹配具有指定属性的元素
-
[attribute=value]：匹配属性值等于指定值的元素
-
[attribute!=value]：匹配属性值不等于指定值的元素
-
[attribute^=value]：匹配属性值以指定值的开始的元素
-
[attribute$=value]：匹配属性值以指定值的结束的元素
-
[attribute*=value]：匹配属性值中包含指定值的元素
-
[selector1][selector2][selectorN]：同时满足所有条件，则匹配
3.7子元素
-
:nth-child(index/even/odd)：匹配指定索引的元素，从1算起
-
:first-child：匹配第一个子元素
-
:last-child：匹配最后一个元素
-
:only-child：如果子元素是父元素的唯一元素，则匹配
3.8表单
-
:input：匹配所有表单元素
-
:text：匹配文本框
-
:password：匹配密码框
-
:radio：匹配单选按钮
-
:checkbox：匹配复选框
-
:submit：匹配提交按钮
-
:reset：匹配重置按钮
-
:image：匹配图像按钮
-
:button：匹配按钮
-
:file：匹配文件框
-
:hidden：匹配隐藏域
3.9表单对象属性
-
:enabled：匹配状态可用的表单元素
-
:disabled：匹配状态不可用的表单元素
-
:checked：匹配被选中的元素 单选或复选
-
:selected：匹配被选中的元素 匹配的是option
4.0 JQuery对象与dom对象
4.1什么是dom对象
以上方式获取回来的是dom对象，dom对象可以调用dom属性和相关方法，dom对象不能调用JQuery方法。
4.2什么是JQuery对象
以上方式获取回来的是JQuery对象，其实，jQuery对象本身就是一个数组，选择器匹配回来几个数组元素，jQuery对象（数组）长度就是元素个数。每个jQuery对象下的某个元素都是一个dom对象。
4.3dom对象与JQuery对象的相互转换
1)JQuery对象转dom对象
语法: JQuery[0]或JQuery.get(0)
2)dom对象转JQuery对象
语法: $(dom)
5、属性操作
5.1基本属性
-
attr(name)：获取指定属性的值
-
attr(key,value)：获取指定属性的值
-
attr(properties)：一次设置多个属性的值，要求参数必须是json对象
-
attr(key,fn)：通过一个函数的返回值设置指定属性的值
-
removeAttr(name)：删除指定的属性
5.2css
-
addClass(class)：添加样式
-
removeClass(class)：移除样式
-
toggleClass(class)：切换样式
-
hasClass(class)：判断是否使用了摸个样式，返回true:有，false:没有
5.3html/文本/值
-
html()
-
html(val)
-
text()
-
text(val)
-
val()
-
val(val)
6、css操作
6.1 基本css
css(name)：获取指定样式的值 css(name,value)：设置指定样式的值 css(properties)：一次设置多个样式的值，要求参数的json对象
6.2 位置
offset()：获取元素的位置，返回json对象，包含left和top属性 offset(coordinates) ：设置元素的位置，要求参数json对象，必须包含left和top
6.3尺寸
width()：获取宽度 width(value)：设置宽度 height()：获取高度 height(value)：设置高度
7、事件编程
7.1页面载入
js中
window.onload=function(){ //页面初始化}
JQuery中封装了方法用于页面加载
$(document).ready(function(){ //页面初始化});
7.2基本事件
change(fn)：内容改变 click(fn)：点击 dblclick(fn)：双击 focus(fn)：获取焦点 keydown(fn)：键盘按下 keyup(fn)：键盘抬起 keypress(fn)：键盘点击 load(fn)：页面加载 unload(fn)：页面关闭 mousedown(fn)：鼠标按下 mouseup(fn)：鼠标抬起 mousemove(fn)：鼠标移动 mouseover(fn)：鼠标经过 mouseout(fn)：鼠标离开 resize(fn)：改变尺寸 scroll(fn)：滚动条滚动 select(fn)：选择内容 submit(fn)：提交按钮
6.3事件切换
hover(over,out) #over：鼠标经过时执行的事件处理程序 #out：鼠标离开时执行的事件处理程序 toggle(fn,fn) #当鼠标点击时的事件绑定 #第一次点击时触发第一个事件处理程序 #第二次点击时触发第二个事件处理程序
7.4事件处理
bind(type,[data],fn) #绑定事件 type：事件名 [data]：事件发生时传递的参数 fn：事件处理程序
bind({type:fn,type:fn})
one(type,[data],fn) 绑定事件，只触发一次 type：事件名 [data]：事件发生时传递的参数 fn：事件处理程序
unbind([type])
7.5事件冒泡
什么是事件冒泡，之所以称之为冒泡，是因为事件会按照dom层次结构向水泡一样上升至最顶端
<body><div>
</div>
</body>
取消事件冒泡
function display(event){
7.6默认行为
有些html元素会有自己的行为，如：点击按钮时提交表单
<form>
阻止默认行为
function display(event){
如果觉得我的文章对您有用，请你多多支持，多多订阅。当然如果写的不好的地方也请你海涵。您的支持，就是创作的最大动力。
扫一扫
470
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
