jQuery,顾名思义是JavaScript和查问(Query),jQuery是收费、开源的。前端培训它能够简化查问DOM对象、处理事件、制作动画、解决Ajax交互过程且兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多)。
jQuery劣势
- 体积小,应用乖巧(只需引入一个js文件)。
- 不便的抉择页面元素(模拟CSS选择器更准确、灵便)。
- 动静更改页面款式/页面内容(操作DOM,动静增加、移除款式)。
- 管制响应事件(动静增加响应事件)。
- 提供根本网页特效(提供已封装的网页特效办法)。
- 疾速实现通信(ajax)。
- 易扩大、插件丰盛。
- 反对链式写法。
一、jQuery选择器
• ID选择器:$(“#box”);
• 类名选择器:$(“.box”);
• 标签选择器:$(“div”);
• 后辈选择器:$(“#box p”);
• :first:获取第一个元素。
• :last:获取最初一个元素。
• :even:匹配所有索引值为偶数的元素,从 0 开始计数。
• :odd:匹配所有索引值为奇数的元素,从 0 开始计数。
• :eq(index):匹配一个给定索引值的元素,从 0 开始计数。
• :not(selector):去除所有与给定选择器匹配的元素。
• :has(selector):匹配含有选择器所匹配的元素的元素。
二、jQuery属性和款式CSS
操作属性:
attr(name|properties|key,value|fn):设置或返回被选元素的属性值。
removeAttr(name):从每一个匹配的元素中删除一个属性。
prop(name|properties|key,value|fn):获取在匹配的元素集中的第一个元素的属性值。
removeProp(name):用来删除由.prop()办法设置的属性集。
区别:attr能够操作(增删改查)自定义的节点属性,而prop不能够(增删改查)。attr和prop对input的disabled属性的返回值不统一,attr返回disabled或者undefined,而prop返回布尔值。
操作Class:
addClass(class|fn) :为每个匹配的元素增加指定的类名。
removeClass([class|fn]) :从所有匹配的元素中删除全副或者指定的类。
toggleClass(class|fn[,switch]):如果存在(不存在)就删除(增加)一个类。
操作内容:
html([val|fn]):获得第一个匹配元素的html内容。这个函数不能用于XML文档。但能够用于XHTML文档。
text([val|fn]):获得所有匹配元素的内容。后果是由所有匹配元素蕴含的文本内容组合起来的文本。这个办法对HTML和XML文档都无效。
val([val|fn|arr]):取得匹配元素的以后值。如果多选,将返回一个数组,其蕴含所选的值。
操作CSS:
css(name|pro|[,val|fn]):拜访匹配元素的款式属性。
操作地位:
offset([coordinates]):获取匹配元素在以后文档的绝对偏移。返回的对象蕴含两个整型属性:top 和 left,以像素计。办法只对可见元素无效。
position():获取匹配元素绝对父元素的偏移。返回的对象蕴含两个整型属性:top 和 left。为准确计算结果,请在补白、边框和填充属性上应用像素单位。此办法只对可见元素无效。
scrollTop([val]):获取匹配元素绝对滚动条顶部的偏移。此办法对可见和暗藏元素均无效。
scrollLeft([val]):获取匹配元素绝对滚动条左侧的偏移。此办法对可见和暗藏元素均无效。
操作尺寸:
height([val|fn]):获得匹配元素以后计算的高度值(px)。
width([val|fn]):获得第一个匹配元素以后计算的宽度值(px)。
innerHeight():获取第一个匹配元素外部区域高度(包含补白、不包含边框)。此办法对可见和暗藏元素均无效。
innerWidth():获取第一个匹配元素外部区域宽度(包含补白、不包含边框)。此办法对可见和暗藏元素均无效。
outerHeight([options]):获取第一个匹配元素内部高度(默认包含补白和边框)。此办法对可见和暗藏元素均无效。
outerWidth([options]):获取第一个匹配元素内部宽度(默认包含补白和边框)。此办法对可见和暗藏元素均无效。
注:设置options为true,计算margin在内。
三、过滤查找
过滤元素:
eq(index|-index):获取第N个元素。这个元素的地位是从0算起,如果是正数,则从汇合中的最初一个元素开始倒数。
first():获取第一个元素。
last():获取最初一个元素。
hasClass(class):查看以后的元素是否含有某个特定的类,如果有,则返回true。
has(expr|ele):保留蕴含特定后辈的元素,去掉那些不含有指定后辈的元素。
not(expr|ele|fn):删除与指定表达式匹配的元素。
查找元素:
children([expr]):获得一个蕴含匹配的元素汇合中每一个元素的所有子元素的元素汇合。只思考子元素而不思考所有后辈元素。
find(expr|obj|ele):搜寻所有与指定表达式匹配的子元素。
parent([expr]):获得一个蕴含着所有匹配元素的惟一父元素的元素汇合。
offsetParent():返回第一个匹配元素用于定位的父节点。
next([expr]):获得一个蕴含匹配的元素汇合中每一个元素紧邻的前面同辈元素的元素汇合。
nextAll([expr]):查找以后元素之后所有的同辈元素。
prev([expr]):获得一个蕴含匹配的元素汇合中每一个元素紧邻的前一个同辈元素的元素汇合。
prevAll([expr]):查找以后元素之前所有的同辈元素。
siblings([expr]):获得一个蕴含匹配的元素汇合中每一个元素的所有惟一同辈元素的元素汇合。能够用可选的表达式进行筛选。
串联操作:
add(expr|ele|html|obj[,con]):把与表达式匹配的元素增加到jQuery对象中。这个函数能够用于连贯别离与两个表达式匹配的元素后果集。返回的后果将始终以元素在HTML文档中呈现的程序来排序,而不再是简略的增加。
andSelf():将先前所选的退出以后元素中。
end():回到最近的一个"破坏性"操作之前。即,将匹配的元素列表变为前一次的状态。如果之前没有破坏性操作,则返回一个空集。所谓的"破坏性"就是指任何扭转所匹配的jQuery元素的操作。
四、jQuery事件
页面载入事件:
ready(fn):当DOM载入就绪能够查问及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数,因为它能够极大地提高web应用程序的响应速度。简略地说,这个办法纯正是对向window.load事件注册事件的代替办法。
绑定事件:
on(events,[selector],[data],fn):在抉择元素上绑定一个或多个事件的事件处理函数。
off(events,[selector],[fn]):在抉择元素上移除一个或多个事件的事件处理函数。
bind(type,[data],fn):为每个匹配元素的特定事件绑定事件处理函数。
unbind(type,[data|fn]]):bind()的反向操作,从每一个匹配的元素中删除绑定的事件。如果没有参数,则删除所有绑定的事件。
one(type,[data],fn):为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。
hover([over,]out):当鼠标挪动到一个匹配的元素下面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。
click([[data],fn]):触发每一个匹配元素的click事件。这个函数会调用执行绑定到click事件的所有函数。
注:其余事件办法应用形式一样。例如:mouseover、mouseout、dblclick、change、blur、focus、keydown、keyup、keypress、mousedown、mouseup、mousemove、mouseenter、mouseleave、resize、scroll、select、submit、unload等。