1.jQuery 是一个 JavaScript 库。
2.jQuery 库包含以下特性:
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
3.jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数。
4.JQuery 库不需要安装,只有一个js文件。可以下载下来导入或者使用一些网站提供,比如:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
html5中:<script> 标签中可以不使用 type="text/javascript" ,因为为默认脚本文件
5.语法:通常会把 jQuery 代码放到 <head>部分的事件处理方法中:
元素选择同css类似:可以使用元素名字访问或者使用id访问(id前面加#)或者使用类名访问(class前加.);但是注意Javascript中没有直接的类名访问,这是编写函数实现。
jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合
基础语法是:$(selector).action()
美元符号定义 jQuery
选择符(selector)“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
实例:$(this).hide() - 隐藏当前元素
jQuery函数位于document ready()函数中有利于防止完全加载文档之前运行jQuery,从而造成失败(隐藏不存在元素,或者未加载完成图像)。
6.jQuery 选择器:通常会把 jQuery 代码放到 <head>部分的事件处理方法中:
jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择;选择器允许您对 HTML 元素组或单个元素进行操作;
jQuery 元素选择器:jQuery 使用 CSS 选择器来选取 HTML 元素。
jQuery 属性选择器:jQuery 使用 XPath 表达式来选择带有给定属性的元素;
jQuery CSS 选择器:例:$("p").css("background-color","red");
7.事件:jQuery 名称冲突:jQuery 使用名为 noConflict() 的方法来解决该问题;var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替$符号;不定义jq则为Jquery。
遵循以下原则时:
把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突,则重命名 jQuery 库
8.效果函数:$(selector).funciton(speed,callback);
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
1)hide(speed,callback) 隐藏被选的元素;
show(speed,callback) 显示被选的元素;
toggle() 切换 hide() 和 show() 方法;
注意隐藏的元素依然存在只是不可见;
2)fadeIn(speed,callback) jQuery fadeIn() 用于淡入已隐藏的元素。
fadeOut(speed,calback) jQuery fadeOut() 方法用于淡出可见元素。
fadeTo(speed,callback/opacity)逐渐改变透明度到给定值。opacity(透明度):0到1;
$(selector).fadeToggle(speed,callback): 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
3)slideDown(speed,callback) 方法通过使用滑动效果,显示隐藏的被选元素。不适用于 visibility:hidden 的元素;
slideUp(speed,callback) 方法通过使用滑动效果,隐藏被选元素。
slideToggle() 对被选元素进行滑动隐藏和滑动显示的切换;
4)$(selector).clearQueue(queueName)方法停止队列中所有仍未执行的函数。
5) $(selector).animate(styles,speed,easing,callback)方法执行 CSS 属性集的自定义动画。easing 函数swing linear;参数之间“,”隔开。
一、所有 HTML 元素都有一个静态位置,且无法移动。如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!
二、几乎可以用 animate() 方法来操作所有 CSS 属性,但之间“-”必须去掉后面字母改为大写;
三、也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=;
四、 opacity:透明度;您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle":具体值为上述中函数名。
五、使用队列功能:即多个animate函数一起使用个,具体顺序为队列顺序,先入先出,先写先执行;注意:当所有style属性写在同一个animate函数中时,
所有样式同步改变,没有先后之分。
6)$(selector).stop(stopAll,goToEnd);适用于所有 jQuery 效果函数;
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行,可选的 goToEnd 参数规定是否立即完成当前动画。
默认是 false。因此,默认地,stop() 会清除在被选元素上指定的当前动画。具体如下:
stop()停止当前,后续animate可以继续执行。
stop(true)停止所有,后续animate不执行,停在当前状态。
stop(true,true)停止但要完成,即停止后状态改为animate后最终结果。
7)speed 或 duration 参数可以设置许多不同的值,比如 "slow", "fast", "normal" 或毫秒。
8)有一种名为链接(chaining)的技术,允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条。您可以按照希望的格式来写,包含折行和缩进;
例如:$("#p1").css("color","red").slideUp(2000).slideDown(2000);
9.获取:
1)dom获取方式:无参数返回,有参数修改,attr略有差别,见(4)分析说明:
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记,但标记为里面标记,元素节点(所选择节点)不包含在内;
val() - 设置或返回表单字段的值, 方法获得输入字段的值,能返回节点的值,但是不能返回元素节点后的text节点。value只是属性里面的一个。
attr() 方法用于获取属性值;比如获取href。attr() 方法也允许您同时设置多个属性,用“,”隔开。
2)文档操作:
(1)$(selector).addClass(class)方法向被选元素添加一个或多个类名。注意,这里的类名前面不加“.”。用“”包围,如需添加多个类,请使用空格分隔类名但所有类名在一个“”里。该方法不会移除已存在的类,只是添加。
$(selector).addClass(function(index,oldclass)):使用函数向被选元素添加类。index - 可选。选择器的 index 位置。class - 可选。选择器的旧的类名。
$(selector).remove():方法移除被选元素,包括所有文本和子节点。remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。测试可知删除后的信息暂时无法恢复,但是可以在删除时使用这些信息从而达到移动效果。
$(selector).removeAttr(attribute):从被选元素中移除属性;
(2)$(selector).after(content):在被选元素后插入指定的内容,参数必须。 $(selector).after(function(index)),使用函数在被选元素之后插入指定的内容;
$(selector).before(content):在被选元素前插入指定的内容;$(selector).before(function(index)):使用函数在指定的元素前面插入内容。
(3) $(selector).append(content):方法在被选元素的结尾(仍然在内部)插入指定内容。 $(selector).append(function(index,html)):使用函数在指定元素的结尾插入内容;
$(content).appendTo(selector):被选元素的结尾(仍然在内部)插入指定内容。append() 和 appendTo() 方法执行的任务相同。不同之处在于:内容和选择器的位置,以及 append() 能够使用函数来附加内容。
注意:after和append不同之处:after插入后节点的parentnode相同,即那说明插入节点和此节点只有兄弟关系,而append插入后的节点为此节点的子节点,为父子关系。
(4) $(selector).attr(attribute):返回被选元素的属性值。
$(selector).attr(attribute,value):设置被选元素的属性和值。
$(selector).attr(attribute,function(index,oldvalue)):使用函数来设置属性/值;注意与上面的微妙区别,若第二个参数为确定的值是返回,若第二个参数为函数的返回值就是设置。
$(selector).attr({attribute:value, attribute:value ...}):为被选元素设置一个以上的属性和值。一定要使用{}包围。
(5)$(selector).clone(includeEvents)方法生成被选元素的副本,包含子节点、文本和属性。includeEvents为可选参数,默认为false,如果需要拷贝事件处理器则需要设置为true。
(6)$(selector).detach():移除被选元素,包括所有文本和子节点;这个方法会保留 jQuery 对象中的匹配的元素,因而可以在将来再使用这些匹配的元素。detach() 会保留所有绑定的事件、附加的数据,这一点与 remove() 不同。
依然可以在移除时使用append实现移动。 使用detach和prepend可以实现删除再显示,remove也有简单的效果但是由于删除了联系所以复杂情况可能会出错。、
(7)$(selector).empty():empty() 方法从被选元素移除所有内容,包括所有文本和子节点。
(8)$(selector).hasClass(class):检查被选元素是否包含指定的 class。
(9) $(content).insertAfter(selector):在被选元素之后插入 HTML 标记或已有的元素。如果该方法用于已有元素,这些元素会被从当前位置移走,然后被添加到被选元素之后。
$(content).insertBefore(selector):在被选元素之前插入 HTML 标记或已有的元素。如果该方法用于已有元素,这些元素会被从当前位置移走,然后被添加到被选元素之前。
(10)$(selector).prepend(content):在被选元素的开头(仍位于内部)插入指定内容。$(selector).prepend(function(index,html)): 使用函数在被选元素的开头插入指定的内容。
$(content).prependTo(selector):在被选元素的开头(仍位于内部)插入指定内容。prepend() 和 prependTo() 方法作用相同。差异在于语法:内容和选择器的位置,以及 prependTo() 无法使用函数来插入内容。
(11) $(selector).removeClass(class):从被选元素移除一个或多个类.如果没有规定参数,则该方法将从被选元素中删除所有类。
(12)$(content).replaceAll(selector):用指定的 HTML 内容或元素替换被选元素。
$(selector).replaceWith(content):replaceAll() 与 replaceWith() 作用相同。差异在于语法:内容和选择器的位置,以及 replaceWith() 能够使用函数进行替换。
(13)$(selector).toggleClass(class,switch):对设置或移除被选元素的一个或多个类进行切换;switch 可选。布尔值。规定是否添加或移除 class,false 为只能添加,true为只能删除。class 必需。
规定添加或移除 class 的指定元素。如需规定若干 class,请使用空格来分隔类名。
$(selector).toggleClass(function(index,class),switch):使用函数来切换类;
(14)$(selector).unwrap():删除被选父元素。解包裹。
$(selector)wrap():把每个被选元素放置在指定的 HTML 内容或元素中。。包裹。
$(selector)wrapAll():为所有被选元素添加同一个父元素,即把所有符合条件的元素联合在一起,重组文档。
$(selector).wrapInner(wrapper):使用指定的 HTML 内容或元素,来包裹每个被选元素中的所有内容 (inner HTML)。
区别:wrap:为每个选中的元素添加各一个外包,即添加一个父元素节点;wrapAll:为每个选中的元素添加同一个外包,即同一个父元素节点。
wrapInner:为每个选中的元素添加各一个内包,即添加一个子元素节点包含选中元素的所有子元素节点。
10.属性操作:
1)$(selector).addClass(class):向被选元素添加一个或多个类。
$(selector).addClass(function(index,oldclass)):利用函数向被选元素添加一个或多个类。
2)$(selector).removeAttr(attribute):从被选元素中移除属性。
11.css操作:
1)$(selector).css(name):方法返回或设置匹配的元素的一个或多个样式属性;当用于返回一个值时,不支持简写的 CSS 属性;
$(selector).css(name,value):设置所有匹配元素的指定 CSS 属性;
$(selector).css(name,function(index,value)):所有匹配的元素中样式属性的值。;
$(selector).css({property:value, property:value, ...}):设置多个 CSS 属性/值对;注意一定要使用{},各参数需要用“”包围
2)$(selector).scrollLeft():返回第一个匹配元素的水平滚动条位置。
$(selector).scrollTop():返回第一个匹配元素的垂直滚动条位置。
12.添加元素:我们将学习用于添加新内容的四个 jQuery 方法:详解看上面。
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
13.jQuery 尺寸 方法:jQuery 提供多个处理尺寸的重要方法:
width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。带参数时为设置宽度。
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。带参数时为设置高度。
innerWidth() 方法返回元素的宽度(包括内边距)。
innerHeight() 方法返回元素的高度(包括内边距)。
outerWidth() 方法返回元素的宽度(包括内边距、边框)。
outerHeight() 方法返回元素的高度(包括内边距、边框)。
outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)。
outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)。
14.遍历:
1).add() 将元素添加到匹配元素的集合中。参数可为:selector,elements,html,jQueryObject,(selector,context)
2).andSelf() 把堆栈中之前的元素集添加到当前集合中。
3).children() 获得匹配元素集合中每个元素的所有直接子元素(但是不返回文本节点)。无参数时,返回所有儿子元素。有参数时,返回选择相同。与大多数 jQuery 方法一样,
.children()不返回文本节点;如果需要获得包含文本和注释节点在内的所有子节点,请使用 .contents()。
4).closest() 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素。.parents() 和 .closest() 方法类似,它们都沿 DOM 树向上遍历;区别:closest()从当前元素开始(即当前元素包含在内),找到匹配就停止,
closest()从父元素开始,将其所有祖先以及父类添加到一个临时的集合中,再从中找出所有的匹配元素。
5).contents() 获得匹配元素集合中每个元素的子元素,包括文本和注释节点。
6)$(selector).each(function(index,element)) 对 jQuery 对象进行迭代,为每个匹配元素执行函数。
7).end() 结束当前链中最近的一次筛选操作,并将匹配元素集合返回到前一次的状态。请注意,index 是基于零的,并且是在 jQuery 对象中引用元素的位置,而不是在 DOM 树中。找不到时为0;
8).eq(index) 将匹配元素集合缩减为位于指定索引的新元素。从零开始,如果为负值返回最后一个元素;
9).filter(selector) 将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。jQuery对象中再找。从0开始, “:even”为0,2,4,6。。。(偶数)“:odd”为1,3,5,7。。。。(奇数)
10).find() 获得当前匹配元素集合中每个元素的后代,由选择器进行筛选。
11).first() 将匹配元素集合缩减为集合中的第一个元素。
12).has() 将匹配元素集合缩减为包含特定元素的后代的集合。
13).is() 根据选择器检查当前匹配元素集合,如果存在至少一个匹配元素,则返回 true。对基于函数而非选择器的相关元素的表达式进行求值。对于每个元素来说,如果该函数返回 true,则 .is() 也返回 true;
14).last() 将匹配元素集合缩减为集合中的最后一个元素。
15).map() 把当前匹配集合中的每个元素传递给函数,产生包含返回值的新 jQuery 对象。
16).next() 获得匹配元素集合中每个元素紧邻的同辈元素。不包括自己。
17).nextAll() 获得匹配元素集合中每个元素之后的所有同辈元素,由选择器进行筛选(可选)。
18).nextUntil() 获得每个元素之后所有的同辈元素,直到遇到匹配选择器的元素为止。但不包含被参数匹配的元素;
.nextUntil(selector,filter):下封底。
.nextUntil(element,filter)
19).not() 从匹配元素集合中删除元素。参数可为selector,element,function。
20).offsetParent() 获得用于定位的第一个父元素。
21).parent() 获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选)。是jQuery对象,里面有多个元素。
22).parents() 获得当前匹配元素集合中每个元素的祖先元素,由选择器筛选(可选)。是jQuery对象,里面有多个元素。
23).parentsUntil() 获得当前匹配元素集合中每个元素的祖先元素,直到遇到匹配选择器的元素为止。.parentsUntil(selector,filter);.parentsUntil(element,filter);但不包括由 .parentsUntil() 方法规定的选择器匹配的那个元素。
24).prev() 获得匹配元素集合中每个元素紧邻的前一个同辈元素,由选择器筛选(可选)。
25).prevAll() 获得匹配元素集合中每个元素之前的所有同辈元素,由选择器进行筛选(可选)。
26).prevUntil() 获得每个元素之前所有的同辈元素,直到遇到匹配选择器的元素为止。上封顶。
27).siblings() 获得匹配元素集合中所有元素的同辈元素,由选择器筛选(可选)。
28).slice(index1,index2) 将匹配元素集合缩减为指定范围的子集。包括前不包括后。负数的情况下表示从末尾开始匹配
15.id选择时通过正则表达式匹配,对特殊字符敏感,对于特殊字符需要在前面使用//。
16.jQuery - AJAX load() 方法:
1)$(selector).load(URL,data,callback):load() 方法从服务器加载数据,并把返回的数据放入被选元素中。可以在URL中加入选择器。
2)$.get(URL,callback):$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
3)$.post(URL,data,callback):$.post() 方法通过 HTTP POST 请求从服务器上请求数据。
17.$.noConflict():释放$使其他的语言也可以使用$;此时的使用方法为jQuery代替$;或者把此值赋给另一个字符集,下次用之代替;
18。
1)bind(event,function)或者bind(event1:function,event2:function2,event3:function3...)或者bind(event,data,function):对选定的元素发生事件时执行相应的函数;
或者:bind(“event1 event2 event3",function);
2) selector.blur():失去焦点时发生的事件。
selector.focus():获得焦点时发生的事件。
3)change():只适用于文本域(text field),以及 textarea 和 select 元素; select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生。
4)$(selector).delegate(childSelector,event,data,function):为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
5)die() 方法移除所有通过 live() 方法向指定元素添加的一个或多个事件处理程序。
6)error() 触发、或将函数绑定到指定元素的 error 事件;
7)event.result 包含由被指定事件触发的事件处理器返回的最后一个值。
8)event.target 触发该事件的 DOM 元素。
9)keypress 事件与 keydown 事件类似。当按钮被按下时,会发生该事件。它发生在当前获得焦点的元素上。
10)timeStamp 属性包含从 1970 年 1 月 1 日到事件被触发时的毫秒数。
19.1)$(selector).data(name,value):name可以是未定义但是不能省略。返回元素添加数据。
$(selector).data(object):
$(selector).data(name):返回元素数据。,假如不存在则创建并使之关联。
$(selector).removedata(name):删除数据。
2)queue() 方法显示或操作在匹配元素上执行的函数队列。一般使用queue以后需要使用dequeue删除添加的函数队列保证后面能运行。
3)hasDate()方法用于检查是否有匹配的任何jQuery元素。不会创建。
20. .get() 获得由选择器指定的 DOM 元素。
.index() 返回指定元素相对于其他指定元素的 index 位置。
.size() 返回被 jQuery 选择器匹配的元素的数量。
.toArray() 以数组的形式返回 jQuery 选择器匹配的元素。
当调用 .dequeue() 时,会从序列中删除下一个函数,然后执行它
原文:http://www.cnblogs.com/ineweyer/p/5055645.html