jquery文档处理有哪些(jquery库的作用)

admin 390 0

很多朋友对于jquery文档处理有哪些和jquery库的作用不太懂,今天就由小编来为大家分享,希望可以帮助到大家,下面一起来看看吧!

一、jquery的主要功能有哪些

1、快速获取文档元素:jQuery的选择机制构建于css的选择器,它提供了快速查询DOM文档中元素的能力,而且大大强化了JavaScript中获取页面元素的方式。

2、提供漂亮的页面动态效果:JQuery中内置了一系列的动画效果,可以开发出非常漂亮的网页,目前许多知名的网站都使用了jQuery的内置的效果,比如淡入淡出,元素移除等动态特效。

3、创建Ajax无刷新网页:Ajax是异步的JavaScript和XML的简称,可以开发出非常灵敏无刷新的网页,特别是开发服务器端网页时,比如PHP网站,需要往返地与服务器沟通,如果不使用Ajax,每次数据更新不得不重新刷新网页,而使用了Ajax特效后,可以对页面进行局部刷新,提供非常动态的效果。

4、提供对JavaScript语言的增强:JQuery提供了对基本JavaScript结构的增强,比如元素选代和数组处理等操作。

5、增强的事件处理:jQuery提供了各种页面事件,它可以避免程序员在HTML中添加太多事件处理代码,最重要的是,它的事件处理器消除了各种浏览器兼容性问题。

6、更改网页内容:JQuery可以修改网页中的内容,比如更改网页的文本、插入或转网页图像,jQuery简化了原本使用JavaScript代码需要处理的方式。

二、DOM对象与jquery对象有什么不同

jQuery对象和DOM对象使用说明,需要的朋友可以参考下。

第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery对象和DOM对象以及它们之间的关系.

DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象;

var domObj= document.getElementById("id");//DOM对象

var$obj=$("#id");//jQuery对象;

jQuery对象就是通过jQuery包装DOM对象后产生的对象,它是jQuery独有的。如果一个对象是jQuery对象,那么就可以使用jQuery里的方法,例:

$("#foo").html();//获取id为foo的元素内的html代码,html()是jQuery特有的方法;

document.getElementById("foo").innerHTML;

注意:在jQuery对象中无法使用DOM对象的任何方法。

例如$("#id").innerHTML和$("#id").checked之类的写法都是错误的,可以用$("#id").html()和$("#id").attr("checked")之类的 jQuery方法来代替。同样,DOM对象也不能使用jQuery方法。学习jQuery开始就应当树立正确的观念,分清jQuery对象和DOM对象之间的区别,之后学习 jQuery就会轻松很多的。

2.jQuery对象和DOM对象的互相转换

在上面第一点说了,jquery对象和dom对象是不一样的!比如jquery对象不能使用dom的方法,dom对象不能使用jquery方法,那假如我 jquery没有封装我要的方法,那能怎么办呢?

这时我们可以将jquer对象转换成dom对象

jquery提供了两种方法将一个jquery对象转换成一个dom对象,即[index]和get(index)。可能有人会觉得奇怪,怎么是用下标呢,没错,jquery对象就是一个数组对象.

下面代码将演示一个jquery对象转换成dom对象,再使用dom对象的方法

var cr=$cr[0];//dom对象也可写成 var cr=$cr.get(0);

alert(cr.checked);//检测这个checkbox是否给选中

对于一个dom对象,只需要用$()把dom对象包装起来,就可以获得一个jquery对象了,方法为$(dom对象);

var cr=document.getElementById("cr");//dom对象

var$cr=$(cr);//转换成jquery对象

转换后可以任意使用jquery中的方法了.

通过以上的方法,可以任意的相互转换jquery对象和dom对象.

最后再次强调,dom对象才能使用dom中的方法,jquery对象不可以使用dom中的方法,但 jquery对象提供了一套更加完善的工具用于操作dom,关于jquery的dom操作将在后面的文章进行详细讲解.

ps:平时用到的jquery对象都是通过$()函数制造出来的,$()函数就是一个jquery对象的制造工厂.

建议:如果获取的对象是 jquery对象,那么在变量前面加上$,这样方便容易识别出哪些是jquery对象,例如:

如果获取的是dom对象,则定义如下:

三、jquery中有哪些事件处理程序

dblclick()添加/触发 double click事件

delegate()向匹配元素的当前或未来的子元素添加处理程序

die()在版本 1.9中被移除。移除所有通过 live()方法添加的事件处理程序

error()在版本 1.8中被废弃。添加/触发 error事件

event.currentTarget在事件冒泡阶段内的当前 DOM元素

event.data包含当前执行的处理程序被绑定时传递到事件方法的可选数据

event.delegateTarget返回当前调用的 jQuery事件处理程序所添加的元素

event.isDefaultPrevented()返回指定的 event对象上是否调用了 event.preventDefault()

event.isImmediatePropagationStopped()返回指定的 event对象上是否调用了 event.stopImmediatePropagation()

event.isPropagationStopped()返回指定的 event对象上是否调用了 event.stopPropagation()

event.namespace返回当事件被触发时指定的命名空间

event.pageX返回相对于文档左边缘的鼠标位置

event.pageY返回相对于文档上边缘的鼠标位置

event.preventDefault()阻止事件的默认行为

event.relatedTarget返回当鼠标移动时哪个元素进入或退出

event.result包含由被指定事件触发的事件处理程序返回的最后一个值

event.stopImmediatePropagation()阻止其他事件处理程序被调用

event.stopPropagation()阻止事件向上冒泡到 DOM树,阻止任何父处理程序被事件通知

event.target返回哪个 DOM元素触发事件

event.timeStamp返回从 1970年 1月 1日到事件被触发时的毫秒数

event.type返回哪种事件类型被触发

event.which返回指定事件上哪个键盘键或鼠标按钮被按下

event.metaKey事件触发时 META键是否被按下

focusin()添加事件处理程序到 focusin事件

focusout()添加事件处理程序到 focusout事件

hover()添加两个事件处理程序到 hover事件

keydown()添加/触发 keydown事件

keypress()添加/触发 keypress事件

live()在版本 1.9中被移除。添加一个或多个事件处理程序到当前或未来的被选元素

load()在版本 1.8中被废弃。添加一个事件处理程序到 load事件

mousedown()添加/触发 mousedown事件

mouseenter()添加/触发 mouseenter事件

mouseleave()添加/触发 mouseleave事件

mousemove()添加/触发 mousemove事件

mouseout()添加/触发 mouseout事件

mouseover()添加/触发 mouseover事件

mouseup()添加/触发 mouseup事件

off()移除通过 on()方法添加的事件处理程序

one()向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次

$.proxy()接受一个已有的函数,并返回一个带特定上下文的新的函数

ready()规定当 DOM完全加载时要执行的函数

toggle()在版本 1.9中被移除。添加 click事件之间要切换的两个或多个函数

trigger()触发绑定到被选元素的所有事件

triggerHandler()触发绑定到被选元素的指定事件上的所有函数

unbind()从被选元素上移除添加的事件处理程序

undelegate()从现在或未来的被选元素上移除事件处理程序

unload()在版本 1.8中被废弃。添加事件处理程序到 unload事件

contextmenu()添加事件处理程序到 contextmenu事件

$.holdReady()用于暂停或恢复.ready()事件的执行

好了,关于jquery文档处理有哪些和jquery库的作用的问题到这里结束啦,希望可以解决您的问题哈!