热门搜索 :
男性养生
您的当前位置:首页正文

关于jqueryDOM&事件的讲解

2023-11-30 来源:淡苒养生网

在学习中经常会遇到jquery DOM&事件,本篇将会详解jquery DOM&事件。

库和框架的区别?

库就是提供了很多方法,相当于仓库里有各种小工具,需要什么工具的时候就直接用。

框架就是搭好了一个架子,大的主体已经确定,只需要往里面填充各种工具。

jquery 能做什么? jquery 对象和 DOM 原生对象有什么区别?如何转化?

jquery可以遍历HTML文本、DOM节点的操作、事件的处理、动画也以及ajax功能,让你不用考虑兼容性在更多的平台去使用它。特点是:轻量级(32kb)、兼容css3、跨浏览器、

jquery 对象和 DOM 原生对象的区别是jqery对象是原生对象经过包装后的对象,它拥有的是jquery对象专属的一些方法,使用起来很方便。

query直接使用数组的方法([索引数下标])将转化为原生DOM对象,如果使用eq方法则结果还为query对象。而原生对象转化为jquery对象只需要用$()包裹住就可以了。如:

jquery对象转原生 > $(#head)[0]

原生对象转jquery > $(原生对象)

jquery中如何绑定事件?bind、unbind、delegate、live、on、off都有什么作用?推荐使用哪种?使用on绑定事件使用事件代理的写法?

在jquery中可以绑定事件用如下写法:

$("button").click(function() { alert(1);} );$("button").bind('click', function(e){ console.log(e); alert(2);});$("button").on('click', function(){ console.log(e); console.log(this); console.log($(this));});

bind 为元素添加一个绑定事件 (1.7版本之后建议使用on代替bind)

unbind 解除一个元素绑定事件 (1.7版本前使用的方法)

delegate 相当于事件代理(可指定元素)为元素添加一个或多个绑定事件 (1.7版本之后建议用on代替)

live 相当于使用了事件代理(对于根节点),为元素添加一个或多个绑定事件 (在1.7版本之后被废除,用on代替)

on 在被选元素及子元素上添加一个或多个事件处理程序 (最建议使用的方法)

off 是用来移除.on()方法添加的事件处理程序

on()的方法把上面几种方法统一了,所以现在推荐使用.on()的方法,写法为:

$( "#members" ).on( "click","li a",function( e ) {} );这里注意子元素的位置在click之后,代表使用了事件代理

jquery 如何展示/隐藏元素? jquery 动画如何使用?

展示元素: $(selector).show(speed,callback);

隐藏元素: $(selector).hide(speed,callback);

展示和隐藏切换: $(selector).toggle(speed,callback);

淡入淡出:

$(selector).fadeIn(speed,callback); //淡入$(selector).fadeOut(speed,callback); //淡出$(selector).fadeToggle(speed,callback); //淡入淡出切换$(selector).fadeTo(speed,opacity,callback); //渐变到透明度

滑入滑出:

$(selector).slideDown(speed,callback); //滑入$(selector).slideUp(speed,callback); //滑出$(selector).slideToggle(speed,callback); //切换

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

jquery动画 $(selector).animate({parmas},speed,callback);

params为必选参数,是动画的css属性。speed是可选参数,规定动画效果的时长,取slow、fast、或毫秒值。classback为动画完成后所执行的函数。

如何设置和获取元素内部HTML内容?如何设置和获取元素内部文本?

设置或者获取HTML内容:$(selector).html()

设置或者获取文本内容:$(selector).text()

有参数代表设置,没有参数代表获取。

如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性?

设置或者获取表单用户输入内容$('#input').val()

设置或者获取表单选择内容$('input:checked')或$(':checked')

设置或者获取元素属性 $("div").attr(e,d) e代表获取,d代表需要设置的属性,为空时代表获取

获取带有某个属性的元素$('[data-img]')或者$('[data-img="xxx“]')

本篇讲解了jquery DOM&事件,更多相关知识请关注Gxl网。

小编还为您整理了以下内容,可能对您也有帮助:

JavaScript中利用jQuery绑定事件的几种方式小结_jquery


开发过程中经常要给DOM元素添加一些事件,下面介绍几种方式:

先写几个好看的button

//引入JQuery
效果如下:




1、直接在btn1使用onclick,这种方式称为内联事件,简单粗暴,好处是可以清晰地看到button绑定了click事件;这种方式等同于:(element).onclick;

这种方式的缺点,一个元素只能指定一个内联事件,添加了这段代码之后会发现onclick="alert('hello btn1');"被覆盖了:

2、使用原生JS给多个元素绑定事件,在 IE 9 之前的版本中,需要使用 attachEvent替代addEventListener

3、第二种方式逻辑比较简单,*格会高一点,但是代码量比较多,而且还需要考虑IE的兼容性问题,由于我们的项目一般都会使用到JQuery,所以就可以这样写了:

上面使用到的on和bind方法效果是一样的;

4、使用on,给多个元素绑定一个或多个事件:

这是我现在在开发中最常用的一种方法,有个好处,举个栗子:

这样动态添加元素的时候可以自动添加click事件,比如我们经常使用AJAX加载一些数据动态添加到页面上,这样就简单多了。

另外:使用原生JS利用事件委托实现也比较简单,


JavaScript中利用jQuery绑定事件的几种方式小结_jquery


开发过程中经常要给DOM元素添加一些事件,下面介绍几种方式:

先写几个好看的button

//引入JQuery
效果如下:




1、直接在btn1使用onclick,这种方式称为内联事件,简单粗暴,好处是可以清晰地看到button绑定了click事件;这种方式等同于:(element).onclick;

这种方式的缺点,一个元素只能指定一个内联事件,添加了这段代码之后会发现onclick="alert('hello btn1');"被覆盖了:

2、使用原生JS给多个元素绑定事件,在 IE 9 之前的版本中,需要使用 attachEvent替代addEventListener

3、第二种方式逻辑比较简单,*格会高一点,但是代码量比较多,而且还需要考虑IE的兼容性问题,由于我们的项目一般都会使用到JQuery,所以就可以这样写了:

上面使用到的on和bind方法效果是一样的;

4、使用on,给多个元素绑定一个或多个事件:

这是我现在在开发中最常用的一种方法,有个好处,举个栗子:

这样动态添加元素的时候可以自动添加click事件,比如我们经常使用AJAX加载一些数据动态添加到页面上,这样就简单多了。

另外:使用原生JS利用事件委托实现也比较简单,


“JQuery对象”和“DOM对象”的区别?

1.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对象转换成 dom对象

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

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

复制代码 代码如下:

var $cr=$("#cr"); //jquery对象

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

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

dom对象转换成jquery对象

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

复制代码 代码如下:

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

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

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

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

JQuery中$(document)是什么意思有什么作用_jquery

首先我解释一下jQuery jQuery有一个用来作为DOM快速载入javascript的得心应手的小函数,那就是ready? 他在页面加载完成之前执行。

为什么不用window.onload(),因为window.onload函数执行的时候,要说明所有东西已经载入,包括图像和横幅等等。要知道较大的图片下载速度会比较慢,因此用户必须等待大图片下载完毕才能看到window.onload()执行的代码效果,这样就花费了很长的等待时间,这不是我们想要的。

但是 $(document).ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。

简单地说,这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数. $(document).ready(function(){ // 你的代码 });

$(document)意思是说,获取整个网页文档对象(类似的于window.document),

$(document).ready意思就是说,获取文档对象就绪的时候。上面这段代码的意思是检查文档对象直到它能够允许被操作(译者注:这样做比window.onload()函数要快的多,因为只要文档对象载入完成就能够执行代码了,而不需要等待页面中的图片下载是否已经完成)---这是我们想要的。

淡苒养生网还为您提供以下相关内容希望对您有帮助:

jquery中的DOM的理解

用我自己的理解和你说一遍,网页说到底就是容器的嵌套,也就是DOM树,是最外层的容器,接着是、,在这两个容器我们可以继续加别的东西,形象一点就是大盒子里放小盒子,小盒子里面再放盒子,这是直观的理解,抽象一点就是...

jquery中有哪些dom操作

HTML 代码 我想说: jQuery代码: $("你好").prependTo("p"); 结果你好我想说 after() 在每个匹配的元素之后插入内容 HTML代码 我想说: jQuery代码: $("p").after("你好"); 结果: 我想说:你好 insertAfter() 将所有匹配的...

jQuery事件详解之$(document).ready()

而$(document).ready()中绑定的事件是在 dom完全就绪 时就可以被调用,此时对于jQuery来说都是可以被访问的(关联的资源可能并没有被加载完毕)。举个例子来说,在$(document).ready()中定义了图片的宽高,但由于此时图...

前端开发JS框架之jQuery的基础知识分享

事件绑定方式:注意:DOM定义的事件可以用 .on()方法来绑定事件,但是jQuery定义的事件就不可以 常用事件有:移除事件:把on改成off,就是移除 .on()绑定的事件 阻止后续事件执行:事件函数中添加 return false; (常用于阻...

帮我解释一下jQuery,ajax,bom,DOM这些是什么,有什么联系,还有我的Java...

dom dom就指页面的html元素吧 bom跟dom的关系 通过bom来操作dom 比如document.getElementById("elem") document就是bom里面的对象,通过这个对象的getElementById或者了id叫elem的dom元素,获取了元素之后我们可以为dom增加事件...

jQuery是什么?

jQuery官方解释的很清楚jQuery是一个快速、简洁、功能丰富的JavaScript库,重点在jQuery是一个库(library)库(library)就是一系列方法组成的集合,开发人员在使用库的过程中,想要什么功能就可以调用库中提供的对应方法就行。有点...

使用jquery对dom元素进行事件绑定,有几种方法?有哪些事件可以绑定

Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){});(2)target.bind("click",function(){});(3)target.live("click",function(){});使用click、change、mouseout等 ...

jquery 简介

jQuery是免费、开源的,使用MIT许可协议。jQuery的语法设计可以使开发更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外,jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松...

“JQuery对象”和“DOM对象”的区别?

1.jQuery对象和DOM对象 第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery对象和DOM对象以及它们之间的关系.DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery...

jquery自定义事件有什么用

自定义额外数据:JavaScript 框架允许你在触发自定义事件时,向事件处理器传送额外的数据。jQuery 可以向事件处理器传递任意数量的额外参数。通用事件 API:只用 Dojo 保留了操作原生 DOM 事件的正常API。而操作自定义事件需要...

Top