最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

关于jqueryDOM&事件的讲解

来源:动视网 责编:小采 时间:2020-11-27 19:48:27
文档

关于jqueryDOM&事件的讲解

关于jqueryDOM&事件的讲解:在学习中经常会遇到jquery DOM&事件,本篇将会详解jquery DOM&事件。库和框架的区别?库就是提供了很多方法,相当于仓库里有各种小工具,需要什么工具的时候就直接用。框架就是搭好了一个架子,大的主体已经确定,只需要往里面填充各种工具。jque
推荐度:
导读关于jqueryDOM&事件的讲解:在学习中经常会遇到jquery DOM&事件,本篇将会详解jquery DOM&事件。库和框架的区别?库就是提供了很多方法,相当于仓库里有各种小工具,需要什么工具的时候就直接用。框架就是搭好了一个架子,大的主体已经确定,只需要往里面填充各种工具。jque


在学习中经常会遇到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网。

文档

关于jqueryDOM&事件的讲解

关于jqueryDOM&事件的讲解:在学习中经常会遇到jquery DOM&事件,本篇将会详解jquery DOM&事件。库和框架的区别?库就是提供了很多方法,相当于仓库里有各种小工具,需要什么工具的时候就直接用。框架就是搭好了一个架子,大的主体已经确定,只需要往里面填充各种工具。jque
推荐度:
标签: 事件 讲解 详解
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top