当前位置: 首页 > Web前端 > HTML

JQuery使用总结

时间:2023-04-02 15:43:38 HTML

目前接触最多的页面开发基本上都是用JQuery。主要原因是基于:操作方便;简单的页面;兼容性好;很多新手。。。没有一个能配合其他解决方案的。因此,写这篇文章是为了好玩和抱怨。WriteLess,DoMore是JQuery的核心理念。所以你应该停止在工作中制造轮子!1.ajax绝对禁止同步请求!一定要处理好所有可能出现的情况!常见示例:functiongetData(){varparams={}$.ajax({type:'post',dataType:'json',url:'xxxxx',data:params,beforeSend:function(){},成功:function(data){if(data.code!=1){//failuremethodreturn;}//successmethod},error:function(){},complete:function(){}});}大部分兼容的要求不高。公司使用相同的接口,但参数不同。因此,常见的ajax请求方案是:functionreqAjax(params){vardeferred=$.Deferred();$.ajax({type:'post',dataType:'json',url:'xxxx',data:params,success:function(data){deferred.resolve(data);},error:function(err){deferred.reject(错误);}});returndeferred;}主要使用JQuery(>1.5)的deferred对象。请求示例:functiongetData(){//1、校验,或其他方法获取参数varparams={}//2、自定义beforeSend//3、请求数据varp=reqAjax(params);//4、自定义成功方法p.done(function(data){});//5.自定义错误方法,一般属于超时或者网络异常p.fail(function(err){});//上面执行成功后可以链式调用下一步p.then(function(){});}如果想单独使用Ajax,一般来说推荐两种方案:Zepto.js和go自己去github搜索。有些元素需要反复添加。除了基本的模板插件,还可以充分利用JQuery的clone方法,尽量不要拼接字符串!假设dom结构为:

字段1:

字段2:

字段3:

接口请求成功,处理dom://处理循环functionaddList(arr){//模拟请求数据vardata={test1:Math.random().toFixed(5),test2:Math.random().toFixed(5),test3:Math.random().toFixed(5)}//假设父domvarpDom=$('.xxx');//直接clone写入和隐藏的模板,去掉隐藏vardom=pDom.find('.test.hidden').clone().removeClass('hidden');//取巧的方法,根据字段标识的名字取dom元素,然后赋值。一般来说还需要做其他处理for(varkeyindata){dom.find('.'+key).text(data[key])}//处理完成,添加pDom.append(dom);}主要因为我不喜欢拼接字符串,我太懒了,改别人的BUG很恶心。3.事件可以多看教程使用,但是具体怎么用还需要自己琢磨一下。例如:不要在$(document).ready()中初始化所有乱七八糟的方法,很难找到...对于新添加的元素,添加对于点击(或其他)事件,可以使用$(parentDom).on('点击','newDom',function(){});or$(newDom).live('click',function(){})四、动效作为前端,不要只想着js,至少学会animate.css在PC上使用动效是可以的side,但是移动网页,比如slideUp,animate等,最好改用css样式,不然会有卡顿效果。...为什么还在移动端使用jquery?jquery压缩版一般为80~90kb,对于今天的网络来说是可以接受的。当然,最好改用zepto.js。完成任务后请考虑优化...5.没有JQuery除非没有更好的选择,否则不要将不熟悉的东西带入工作。如果不想用jQuery,也不考虑兼容性,可以参考:You-Dont-Need-jQueryMiscellaneous有时间记得重构代码~本想写点实用的,但是有JQuery的特性网上已经有很多了,我就不赘述了,给新手一点提示。