jQuery
一、jQuery
1.什么是jQuery?
jQuery是一款轻级量的JavaScript框架;
2.jQuery能否取代JavaScript?
原生Javascript由ECMAScript(简称ES)、DOM、BOM;
ECMAScript主要规定变量、数据类型、流程语句、内置对象等;
不可能;jQuery在DOM处理方法性能优于原生的JS,但其无法提供ES及BOM处理;
3.下载jQuery
官网:http://www.jquery.com
4.引用外部的jQuery文件
<script src="jQuery文件URL"></script>
5.jQuery特性
A.set all and get one;
B.set and get in one;
6.jQuery对象与JavaScript对象
jQuery对象是对JavaScript对象封装之后的对象;
jQuery对象转换成JavaScript DOM对象 jQuery[下标] 或者 jQuery.get(下标)
JavaScript DOM对象转换成jQuery对象 $(JavaScript DOM对象)
二、选择器
jQuery支持CSS2和CSS3的选择器;
1.基本选择器
通配选择器 -- *
标记选择器 -- 标记名称
ID选择器 -- #id
类选择器 -- .类名称
群组选择器 -- 选择器,...
2.层次选择器
后代选择器 -- 选择器 选择器 ...
子代选择器 -- 选择器>选择器>...
3.基本过滤器
:first
:last
:eq(n)
:lt(n)
:gt(n)
:odd
:even
:not(selector)
4.属性选择器
[attribute],存在指定的属性名称
[attribute=value],存在指定属性名称和值的对象
[attribute!=value],属性值不是指定值或没有指定属性的对象
5.表单元素选择器
:text
:password
:radio
:checkbox
:file
:submit
:reset
:button
:checked
:selected
:disabled
三、控制属性
attr(string attributeName)
描述:获取对象的属性
语法:string jQuery.attr(string attributeName)attr(string attributeName,string value)
描述:设置对象的属性(单个属性)
语法:jQuery jQuery.attr(string attributeName,string value)attr({attributes})
描述:设置对象的属性(多个属性)
语法:jQuery jQuery.attr({
attribute:value,
attribute:value,
...
})removeAttr(string attributeName)
描述:删除属性
语法:jQuery jQuery.removeAttr(string attributeName)prop(string propertyName)
描述:获取对象属性
语法:anything jQuery.prop(string propertyName)prop(string propertyName,anything value)
描述:设置对象属性
语法:jQuery jQuery.prop(string propertyName,anything value)removeProp(string propertyName)
描述:删除对象属性
语法:jQuery jQuery.removeProp(string propertyName)
四、控制行内样式
css(string propertyName)
描述:获取行内样式(单个)
语法:string jQuery.css(string propertyName)css(array propertyNames)
描述:获取行内样式(多个)
语法:object jQuery.css(array propertyNames)
说明:在获取多个CSS样式时,CSS属性名称使用"驼峰标记法";
如.css(['borderTop','marginTop','paddingBottom'])css(string propertyName,string value)
描述:设置行内样式(单个)
语法:jQuery jQuery.css(string propertyName,string value)css(properties)
描述:设置行内样式(多个)
语法:jQuery jQuery.css({
property:value,
property:value,
...
})
说明:A.如果CSS属性采用CSS语法结构,而且当属性名称包含短横线时,需要将属性名称使用引用括起来;
B.如果CSS属性采用"驼峰标记法"表示,则可以直接书写,
例如:
//CSS语法结构
.css({
"background-color": "#ffe",
"border-left": "5px solid #ccc"
})
//驼峰标记法
.css({
backgroundColor: "#ffe",
borderLeft: "5px solid #ccc"
})
五、迭代jQuery对象
jQuery jQuery.each(function(integer index,element DOMElement){
...
...
})说明: A.index将返回每个集合对象的索引值;
B.DOMElement代表每个集合DOM对象,可以使用this关键字来引用;
六、操纵CSS类
addClass(string className)
描述:添加CSS类
语法:jQuery jQuery.addClass(string className ...)
说明:多个CSS类名称之前以空格分隔;removeClass([string className])
描述:删除CSS类
语法:jQuery jQuery.removeClass([string className])
说明: A.如果省略className参数,则删除所有CSS类(仍然保留空的class属性);
B.如果不想存在空的class属性的话,则应直接使用removeAttr()方法直接删除class属性;
C.如果要删除多个CSS类的话,CSS类名称之间以空格分隔;toggleClass(string className ...)
描述:添加/删除CSS类
语法:jQuery jQuery.toggleClass(string className ...)
说明:多个CSS类名称之前以空格分隔;hasClass()
描述:返回是否应用指定的CSS类
语法:boolean jQuery.hasClass(string className)
七、过滤器(强调节点之间的关系)
parent([selector])
描述:返回当前对象的父对象
语法:jQuery jQuery.parent([selector])children([selector])
描述:返回当前对象的子对象
语法:jQuery jQuery.children([selector])parents([selector])
描述:返回当前对象的祖先对象
语法:jQuery jQuery.parents([selector])finds([selector])
描述:返回当前对象的后代对象
语法:jQuery jQuery.find([selector])prev([selector])
描述:返回当前对象的上一个兄弟对象
语法:jQuery jQuery.prev([selector])next([selector])
描述:返回当前对象的下一个兄弟对象
语法:jQuery jQuery.next([selector])prevAll()
描述:返回当前对象之前的所有兄弟对象
语法:jQuery jQuery.prevAll([selector])nextAll()
描述:返回当前对象之后的所有兄弟对象
语法:jQuery jQuery.nextAll([selector])siblings([selector])
描述:返回当前对象之前和之后的所有兄弟对象
语法:jQuery jQuery.siblings([selector])
八、操作文本和值
text(void)
描述:获取对象的文本内容
语法:string jQuery.text(void)text(string text)
描述:设置对象的文本内容
语法:jQuery jQuery.text(string text)html(void)
描述:获取对象的HTML内容
语法:string jQuery.html(void)html(string html)
描述:设置对象的HTML内容
语法:jQuery jQuery.html(string html)val(void)
描述:获取表单元素对象的值
语法:string|number|array jQuery.val(void)val(string value)
描述:设置表单元素对象的值
语法:jQuery jQuery.val(string|number|array value)
九、节点的增/删操作
1.在内部增加
append(html|element|jQuery)
描述:追加子对象
语法:jQuery jQuery.append(html|element|jQuery)appendTo()
描述:把子对象追加到父对象内
语法:jQuery jQuery.appendTo(selector|html|element|jQuery)
说明:append()方法返回父对象;appendTo()方法返回子对象;prepend(html|element|jQuery)
描述:在对象的开始位置添加子对象
语法:jQuery jQuery.append(selector|html|element|jQuery)prependTo(selector|html|element|jQuery)
描述:把子对象添加到对象的开始位置
语法:jQuery jQuery.prependTo(selector|html|element|jQuery)
提示:JavaScript中的switch语句进行严格类型比较,即进行全等运算;2.在周围增加(兄弟关系)
after(html|element|jQuery)
描述:在指定对象之后添加新对象
语法:jQuery jQuery.after(html|element|jQuery)before(html|element|jQuery)
描述:在指定对象之前添加新对象
语法:jQuery jQuery.before(html|element|jQuery)insertAfter(selector|html|jQuery)
描述:把新对象添加到指定对象之后
语法:jQuery jQuery.insertAfter(selector|html|jQuery)insertBefore()
描述:把新对象添加到指定对象之前
语法:jQuery jQuery.insertBefore(selector|html|jQuery)3.在"外部"添加
wrap(selector|html|jQuery)
描述:将每一个匹配的元素使用指定的HTML结构包裹起来
语法:jQuery jQuery.wrap(selector|html|jQuery)wrapAll()
描述:将所有匹配的元素使用指定的HTML结构包裹起来
语法:jQuery jQuery.wrapAll(selector|html|jQuery)wrapInner(html|jQuery|selector)
描述:使用HTML结构包裹指定对象的所有内容
语法:jQuery jQuery.wrapInner(html|jQuery|selector)unwrap(void)
描述:移除指定对象的父对象
语法:jQuery jQuery.unwrap(void)4.删除对象
empty(void)
描述:删除所有的子对象
语法:jQuery jQuery.empty(void)remove([selector])
描述:删除对象
语法:jQuery jQuery.remove([selector])
十、控制特殊的行内样式
width(void)
描述:获取对象的宽度
语法:number jQuery.width(void)width(number value)
描述:设置对象的宽度
语法:jQuery jQuery.width(number value)height(void)
描述:获取对象的高度
语法:number jQuery.height(void)height(number value)
描述:设置对象的高度
语法:jQuery jQuery.height(number value)position(void)
描述:获取对象相对于其父对象的位置
语法:object jQuery.position(void)
说明:返回包含left和top属性的对象offset(void)
描述:获取对象相对于其文档对象的位置
语法:object jQuery.offset(void)
说明:返回包含left和top属性的对象offset(object)
描述:设置对象相对于其文档对象的位置
语法:jQuery jQuery.offset(object)
说明:object参数需要有left和top两个属性;scrollLeft(void)
描述:获取滚动条的水平位置
语法:number jQuery.scrollLeft(void)scrollTop(void)
描述:获取滚动条的垂直位置
语法:number jQuery.scrollTop(void)scrollLeft(number value)
十一、动画处理
1.基本动画
show(void)
描述:显示对象
语法:jQuery jQuery.show(void)show(number|string duration)
描述:显示对象
语法:jQuery jQuery.show([number|string duration][,complete])
说明: A.duration是指完成动画效果所需要的时间(单位为毫秒);
B.complete是指在完成动画效果后需要调用的函数;hide(void)
描述:隐藏对象
语法:jQuery jQuery.hide(void)hide(number|string duration)
描述:显示对象
语法:jQuery jQuery.hide([number|string duration][,complete])toggle(void)
还不快抢沙发