JQuery顾名思义就是JavaScript和Query。jQuery是免费和开源的。可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互,兼容多种浏览器的javascript库。核心思想是少写多做
JQuery顾名思义就是JavaScript和Query。jQuery是免费和开源的。可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互,兼容多种浏览器的javascript库。核心思想是少写多做(少写多做)。
jQuery的优势体积小,使用灵巧(只需引入一个js文件)。方便的选择页面元素(模仿CSS选择器更精确、灵活)。动态更改页面样式/页面内容(操作DOM,动态添加、移除样式)。控制响应事件(动态添加响应事件)。提供基本网页特效(提供已封装的网页特效方法)。快速实现通信(ajax)。易扩展、插件丰富。支持链式写法。
I. 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具有不一致的返回值。attr返回disabled或undefined,而prop返回布尔值。
操作类:
AddClass(class|fn):为每个匹配的元素添加指定的类名。
RemoveClass([class|fn]):从所有匹配的元素中删除所有或指定的类。
Togleclass (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():获取第一个匹配元素的内部区域的宽度(包括填充,不包括边框)。此方法对可见元素和隐藏元素都有效。
Outheight ([options]):获取第一个匹配元素的外部高度(默认情况下包括填充和边框)。此方法对可见元素和隐藏元素都有效。
OuterWidth([options]):获取第一个匹配元素的外部宽度(默认情况下包括填充和边框)。此方法对可见元素和隐藏元素都有效。
注意:将选项设置为true,包括边距。
第三,过滤和搜索过滤元素:
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]):获取一个元素集,该元素集包含匹配元素集中每个元素的下一个同级元素。
Next ([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)绑定一个一次性事件处理程序。
悬停([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等。