测品娱乐
您的当前位置:首页jQuery实用教程总结

jQuery实用教程总结

来源:测品娱乐

JQuery

jQuery是一个“写的更少,但做的更多”的轻量级JavaScript库。通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。基础语法是:$(selector).action()

美元符号定义jQuery

选择符(selector)“查询”和“查找”HTML元素

jQueryaction()执行对元素的操作

$(document).ready(function(){

$("p").click(function(){

$(this).hide();

Ifyouclickonme,Iwilldisappear.

$(document).ready()等同于jQuery(document).ready()等同于js中的onload()方法

XXX选择器

JQuery选择器完全继承了CSS风格,可以非常快捷的找出特定DOM元素,然后添加相应行为。JQuery选择器获取的永远是对象,即使没有此元素也不会报错,因此当要用JQuery检查某个元素在网页是否存在时,要用长度或转换为DOM对象进行判断,如:错误:

If($(“tt“)){}

应该这样:

if($(“tt”).length>0){….}或者if($(“tt”)[0]){…}

1.1基本选择器

1.2层级选择器

1.3过滤选择器

基本选择器描述

返回示例

1.4表单选择器

XXX操作

2.1对象操作

jQuery遍历函数包括了用于筛选、查找和串联元素的方法。

2.2属性操作

下面列出的这些方法获得或设置元素的DOM属性。

这些方法对于_ML文档和HTML文档均是适用的,除了:html()。

2.3文本操作

2.4样式操作

面列出的这些方法设置或返回元素的CSS相关属性。

2.5动画操作

2.6对象数组操作

$.each(object,function)

object填写数组对象,function是遍历后的回调函数

$.eachnd(boolean,object1,object2,[objectN])

boolean布尔值(true/false)。object与function为必填项,此方法主要用于合并两个数组,相同的下标将有第二个数组对象中的值替换第一个数组对象中相同位置的内容$.grep(array,function,boolean)

array填写数组,function是遍历后的回调函数,boolean设置为true则从数组中排除function中符合条件的选项。

$.makeArray(object)

将【类】数组对象转换为数组对象

$.map(array,function(i))

将array:数组通过function:回调函数根据条件转换为一个新数组

$.inArray(value,array)

value:用于在数组中查找是否存在的条件,array待查找的数组

$.toArray()

把jQuery集合中所有的DOM元素转换成一个数组

$.merge(object1,object2)

此方法主要用于合并两个数组,相同的下标不会被替换

$.unique(array)

删除数组中重复元素。只处理删除DOM元素数组,而不能处理字符串或者数字数组。

$.parseJSON(json)

解析一个【标准的】JSON字符串,详见案例。

3.事件

3.1绑定事件

$("Element").bind("type",[data],function)

表示为某一个元素绑定特定的事件

type:事件类型

data:返回类型(可选)

function:普通的js方法或者jQuery方法

$("Element").live("type",function)

表示为某一个元素绑定特定的事件,推荐使用此方法代替上面的bind

$("Element").unbind([type],function)

与bind方法相反,删除匹配的元素所绑定的某个特定的事件

type:事件类型(可选)

function:反绑定的事件处理函数(可选)

如果以上参数均无,则表示将所匹配元素的所有事件取消绑定

$("Element").die("type",function)

[quote]表示为某一个元素解除特定的事件,推荐使用此方法代替上面的unbind

$("Element").one("type",[data],function)表示为某一个元素绑定一次性的特定事件

type:事件类型

data:返回类型(可选)

function:普通的js方法或者jQuery方法

此方法看似与bind相似,使用方法亦是如此,但是功能差距很大,因为这个事件是一次性的,如果在一个页面中不刷新,绑定的这个事件只能使用一次。

$("Element").trigger("type",[data])

在每个匹配的元素上绑定某类事件

type:事件类型

data:附加参数(可选)

$("form:first").trigger("submit")表示页面中的第一个form表单提交。我们知道一般将按钮放在form中,点击此按钮才会提交他所在的form表单,如果使用此方法,即使按钮在表单区域之外,也同样会使其提交。另外如果这个按钮有浏览器默认的事件,它也会执行,你设置的事件也会执行。如果要阻止默认事件,那么此方法返回false或者使用下面的的方法都可。

$("Element").triggerHandler("type",[data])

在每个匹配的元素上绑定某类事件,但不会执行浏览器默认的事件

type:事件类型

data:返回类型(可选)

使用方法如上,不同的是不会执行浏览器默认事件

3.2鼠标键盘事件

$("Element").hover(over,out)

模拟鼠标悬停的事件,当鼠标移入移出选定元素的时候分别触发over和out事件。参数:over:functionout:function

$("Element").toggle(function,function)

与上面的方法雷同,当鼠标第一次点击的时候触发前者,当鼠标第二次点击的时候触发后者。

鼠标单击:

$("Element").click(function)

当鼠标点击的时候触发,具体的应用方法我想不用具体讲解了。因为大家看了我过去的所写的案例就已经有数了。

鼠标双击:

$("Element").dblclick(function)与鼠标单击一样,只不过这个是鼠标双击事件。也就是说只有鼠标在选定的元素上双击才会触发此事件。dbl是Double的缩写。

鼠标点击前后:$("Element").mousedown(function)

当鼠标点击后触发,从表面上看类似click事件,其实有本质上的区别。

$("Element").mouseup(function)

当鼠标点击释放的时候触发。就是鼠标点击了元素当你松开鼠标按键的时候触发。

鼠标的移动:$("Element").mousemove(function)

当鼠标在选定的元素上来回移动的时候触发。

$("Element").mouseover(function)

当鼠标在移入选定的元素范围的时候触发。

$("Element").mouseenter(function)当鼠标在移入选定的元素范围的时候触发。与mouseover有很大的区别就是它不冒泡的事件,点击子元素的时候不会触发父级元素

$("Element").mouseout(function)

当鼠标移出选定的元素范围的时候触发。

$("Element").mouseleave(function)

当鼠标移出选定的元素范围的时候触发。与mouseenter一样,不是冒泡事件

键盘按下:

$("Element").keydown(function)

当键盘按下的时候触发此事件,并绑定一个处理方法。

键盘敲击:

$("Element").keypress(function)当键盘按下的时候触发此事件,并绑定一个处理方法。

注:虽然从表面上理解keypress与keydown是一个意思,但二者的本质区别是:系统由keydown返回键盘的代码,然后由TranslateMessage函数翻译成字符,由keypress返回字符值.因此在keydown中返回的是键盘的代码,而keypress返回的是ASCII字符.所以根据你的目的,如果只想读取字符,用keypress,如果想读各键的状态,用keydown。

键盘弹起:

$("Element").keyup(function)

当键盘按键释放的时候触发并绑定一个处理方法。

3.3焦点事件

触发焦点:

$("Element").focus(function)

事件会在获得焦点的时候触发,既可以是鼠标行为,也可以是按tab键导航触发的行为,并且绑定一个处理方法。

失去焦点:

$("Element").blur(function)

事件会在元素失去焦点的时候触发,既可以是鼠标行为,也可以是按tab键离开的行为,并且绑定一个处理方法。

改变焦点:

$("Element").change(function)

在每一个匹配元素的change事件中绑定一个处理函数。

3.4其他事件$("Element").load(type,function)

在元素后面绑定一个处理函数,当元素内容加载完毕后自动调用。就如同每次写jQuery的时候都写jQuery,$(document).reday()或者$的方式差不多。

$("Element").unload(function)与上面的函数相反,在每一个匹配元素的卸载事件中绑定一个处理函数。比如页面卸载的时候弹出一个警告框。$(document).unload(function(){alert("Byenow!");});

$("Element").resize(function)

当窗口大小发生改变的时候触发,比如$(window).resize(function(){alert("你正在试图改变窗口的大小");});

$("Element").scroll(function)

当滚动条发生改变的时候触发$(window).scroll(function(){alert("你正在试图改变滚动条");});

$("Element").select()

触发每一个匹配元素的select事件,这个函数会调用执行绑定到select事件的所有函数,包括浏览器的默认行为。比如触发所有input元素的select事件,$("input").select();

$("Element").select(function)

当用户在文本框(包括input和te_tarea)中选中某段文本时会触发select事件。

$("Element").submit()函数会调用执行绑定到submit事件的所有函数,包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。$("form:first").submit();表示第一个form提交的时候触发。

$("Element").submit(function)

在每一个匹配元素的submit事件中绑定一个处理函数。

$("Element").error()这个函数会调用所有绑定到error事件上的函数,包括在对应元素上的浏览器默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。error事件通常可以在元素由于点击或者tab导航失去焦点时触发。

$("Element").error(function)对于error事件,没有一个公众的标准。在大多数浏览器中,当页面的JavaScript发生错误时,window对象会触发error事件;当图像的src属性无效时,比如文件不存在或者图像数据错误时,也会触发图像对象的error事件。

XXX

(1)$.load(url,[data],[callback])方法说明:载入远程HTML文件代码并插入至DOM中。url:待装入HTML网页地址。

data:(可选)发送至服务器的key/value(键值对)数据。

callback:(可选)载入成功时回调函数。过去并没有对回调函数进行说明,今天稍微的说一下,jQuery中的回调函数意思是指当某个操作执行完毕后要执行的函数。

举例:要求:1、随便建立两个页面,假设为XXX和XXX

2、在B中随便写几个DIV

3、推荐在XXX中定义B中的DIV样式,因为$("html").load()只载入HTML不会载入【外链】样式。

写法:function(){

$("html").load("XXX");

(2)$.get(url,[data],[callback])方法说明:简单的Get的请求。

url:请求HTML网页地址。

data:(可选)发送至服务器的key/value(键值对)数据。

callback:(可选)载入成功时回调函数。

(3)$.post(url,[data],[callback])

方法说明:简单的Post请求,

url:请求HTML网页地址

data:(可选)发送至服务器的key/value(键值对)数据。

callback:(可选)载入成功时回调函数。

(4)$.getJSON(url,[data],[callback])

方法说明:简单的GET请求载入JSON数据

url:请求HTML网页地址。

data:(可选)发送至服务器的key/value(键值对)数据。

callback:(可选)载入成功时回调函数。

(5)$.getScript(url,[callback])

方法说明:简单的GET请求载入script脚本数据并执行

url:请求HTML网页地址

data:(可选)发送至服务器的key/value(键值对)数据。

callback:(可选)载入成功时回调函数。

(6)$.Aja_(options)

此方法只要用于返回创建的_MLHttpRequest对象。大家如果看了jQueryAPI对Aja_的参数的讲解,肯定会觉得此方法

的内容较多,其实此方法只有一个值,是key/value(也就是我们常说的“键值对”),下面将对此方法的参数进行逐一讲解。

注意:参数options是可选的其中键值对也都是可选的。

async:Boolean类型此键值对默认情况下为true,也就是异步请求(局部刷新);如果设置为false,将会变成同步请求,那么此时将会锁住浏览器,用户无法对其进行其他操作,必须等待请求完毕后才会解锁。

global(Boolean类型)表示是否触发全局,默认为触发(true),Aja_的全局设置将在后面的章节讲,设置全局则表示所有的Aja_将能够使用此全局内容,比如所有的Aja_事件都触发同一个路径。

type(String):(默认:"GET")请求方式("POST"或"GET"),默认为"GET"。注意:其它HTTP请求方法,如PUT和DELETE也可以使用,但仅部分浏览器支持。

cache:(Boolean类型)设置false将不会从浏览器缓存中加载信息,用于jQuery1.2或更高的版本。

contentType:(String类型)用于设置编码格式,默认为:"application/_-www-form-urlencoded")格式,一般推荐此格式。

ifModified(Boolean):(默认:false)仅在服务器数据改变时获取新数据。

processData(Boolean):(默认:true)默认情况下,发送的数据将被转换为对象。

timeout(Number):设置置请求超时时间(毫秒)。此设置为全局设置。

dataType:(String类型)用于设置服务器返回的数据类型,但填写的内容也是有的,可

用值如下

┠_ml设置此值服务器端将_ML文档,如果大家对Aja_比较了解,我想大家也知道Aja_中的_代表是什么了吧因此叫做A(Asynchronous)j(javascript)a(and)_(_ml)

┠html服务器返回HTML格式文档,(根据个人理解,如果按照遭上面的理解_ml表示_的话,那么此类型不就表示ajah了嘛)。

┠script服务器返回【纯文本】的脚本,不会执行或进行计算。

┠json返回Json格式的文档

┠te_t返回纯文本

┗jsonpJSONP是一个非官方的协议,它允许在服务器端集成Scripttags返回至客户端,通过javascriptcallback的形式实现跨域访问,比如用户想得到["kwoojan","KwooShung"],如果设置了jsonp那么服务器将返回callbackFunction(["kwoojan","KwooShung"])

data(String类型)此方法至关重要,主要用于将数据发送至服务器。格式为键值对,如那么服务器接受到的userName相对应的值就是CSS学习网

url(String):(默认:当前页地址)发送请求的地址,也就是你的data数据需要被处理的地址。

beforeSend(function)此键值为函数方法,当你发送请求之前调用此方法。例如当用户进行了某个操作,这时页面上显示出“正在加载中,请稍后”等类似的字样,多数情况下此键值对用于给予用户友好的提示。

success(Function)当Aja_请求成功时,调用此方法,一般用于解析服务器所返回的数据。

error(Function)求失败时调用此方法。

complete(Function)当Aja_请求完毕的时候调用此方法。

因篇幅问题不能全部显示,请点此查看更多更全内容