来源:未知 时间:2021-06-12 19:48 作者:小飞侠 阅读:次
[导读] 插件地址: https://imagecdn.vgs.lenovo.com.cn/public/js/gweb.2.01.min.js https://imagecdn.vgs.lenovo.com.cn/public/js/gweb.2.02.min.js Gweb-api 注意: 2.0 版本后 G 换成 $,基于JQ1.2内核,支持JQ所有方法 $ .browser.ve...
作者前言JQueryE 是一款基于JQuery1.24版本的附加功能插件,包含了常用网页的功能集合,便于网页开发。完全支持jq所有方法,所以使用起来非常方便。 如果您有什么疑问请加入我们的qq群,群号:287460651 ,纯前端群:410138145,或者联系站长邮箱:904561283@qq.com 我们一起讨论学习。 如需新增功能:也可联系站长邮箱或者qq-904561283, 第一时间解决你的问题! 下载地址最新CDN:https://gamedown.vgs.lenovo.com.cn/public/js/jQueryE.2.0.8.min.js JQUEYE-api 注意:基于JQ1.2内核,支持JQ所有方法,本次更新集成了jquery懒加载方法。 兼容:IE7及以上 jquery文档:https://www.zixuephp.com/webshouce/jquery1.12.1/ 鼠标拖拽排序2.0.9+拖拽排序,非常好用,支持动画,事件回调,自动识别横向还是纵向等一系列排序特效。 图片预览: DEMO预览 横向:https://www.zixuephp.com/static/test/JqueryE/test_drag.html 纵向:https://www.zixuephp.com/static/test/JqueryE/test_drag2.html 参数说明:
调用实列: $.drag({ items:'#dragBox li', moveInit:function(moveOb){ console.log('初始化---',moveOb) }, moveIng:function(moveOb){ // console.log(moveOb) moveOb.sourceDom.css({ opacity:0.3 }); }, moveOver:function(moveOb){ console.log('move-over',i, moveOb) if (moveOb.type === "sortover"){ moveOb.sourceDom.css({ background:'#d1d1d1' }); } moveOb.sourceDom.css({ opacity:1 }); } }); 万能弹窗2.0.8+版本:2.0.8 解决前端开发人员针对弹窗,遮罩这些常用功能交互的痛点。实现可定制,可系统的皮肤+事件+DOM元素 效果预览:
参数详解:
调用实列:弹窗所有参数均为非必填项,用户可以根据需求自行添加。 <button id="btn">生成一个弹窗</button> <button id="btn2">显示弹窗</button> <button id="btn3">销毁</button> <!--引入测试JS--> <script> var pop = null; $('#btn').bind('click',function(e){ pop = $.popup({ width:500, // 宽度 默认:500 height:360, //高度 默认:360 // 关闭按钮样式 closeStyle:{ width:30,height:30,position:'absolute',top:'5px',right:'5px',textAlign:'center',lineHeight:'30px',background:'#e1e1e1',cursor:'pointer',borderRadius:'30px' }, // 关闭按钮html closeHtml:'+', // noDel:true // 不生成关闭按钮 title:'测试弹窗标题', //手工拼接DOM,或者AJAX读取,dom读取等 content:'测试一个内容是什么,<br/> 测试一个内容是什么测试一个内容是什么测试一个内容是什么。测试一个内容是什么测试一个内容是什么测试一个内容是什么测试一个内容是什么测试一个内容是什么<br/>测试一个内容是什么测试一个内容是什么', // 模板引擎对象,传入上面的模板ID即可,存在模板对象则不执行 content contentTemp:{ id:'t:_1234-abcd-1', data:data }, // 按钮集合,系统按钮 ok 和 cancel ,用户自定义传 other 注意:如果是other,style都需要自己写 buttons:[ { name:'取消',type:'cancel',fn:function(e){ // this 是当前弹窗对象,包含了DOM节点,显示,隐藏,销毁等操作 console.log('点击取消',this,e) } }, { name:'确认',type:'ok',fn:function(){ console.log('点击确认') } }, { name:'其他',type:'other',style:{ width:80, height:30, background:'blue', color:"white", background:'red', },fn:function(){ console.log('点击其他') } } ] }); }); $('#btn2').bind('click',()=>{ if (!pop){ return $.toast('需要生成一个弹窗'); } pop.show(); }); $('#btn3').bind('click',()=>{ console.log(pop) if (!pop){ return $.toast('需要生成一个弹窗'); } pop.remove(); pop = null; }); </script> 获取浏览器类型$.browser.versions browser成员变量 用于获取浏览器版本和信息 userAgent //浏览器版本信息 versions //浏览器版本 maxthon //遨游 opera //opera zhLenovo //智慧联想 lenovoCent //联想游戏中心端 ie //ie edge //edge firefox //火狐浏览器 chrome //Chrome浏览器 safari //Safari浏览器 mobile //是否为移动终端 ios //ios终端 android //android终端或者uc浏览器 iPhone //是否为iPhone或者QQHD浏览器 iPad //是否iPad mac //是否mac电脑 webApp //是否web应该程序,没有头部与底部 weixin //是否微信 qq //是否QQ wp //是否WindwowPhone手机 windows //是否windows系统 IEVersion //判断IE浏览器版本 IE //成员变量 其下包括判断个ie浏览器版本 ie6、ie7、ie8、ie9、ie10、ie11 language //页面语言 isPC //判断pc机(补充方法) isH5browser //是否为支持H5的浏览器 调用示例: $.browser.versions.iPhone(); 获得IE版本 $.browser.versions.IEVersion(); 获得浏览器语言 $.browser.versions.language(); 获得UA $.browser.versions.userAgent; $.browser.ismobile() 检测是否是手机 $.browsers() 返回浏览器种类,ie,firefox,opera , chrome , safari other 适配插件(基于px的等比例缩放)很方便的纯px转换的适配插件,经常用在移动端或者客户端内嵌H5的项目中。 使用场景:在一些纯px开发的web应用中,一次产品要求改为等比例缩放,那你就傻逼了,,,难道你要用rem重构吗???不不不,只需几行代码就可以搞定等比例缩放.... 调用实列: px适配插件,调用方法 //适配插件 $.adaptation({ size:960, //适配宽度,以设计图为准,默认640 isall:true,//全局适配 startcss:"/*startdom*/", //不写就读取CSS里面全部CSS endcss:"/*enddom*/", //不写就读取CSS里面全部CSS maxauto:false, // 自动放大,默认false cssUrl:[ "css/common.css", //要适配的样式表,支持 ID CLASS 和远程 "#styleid", //要适配的样式表,支持 ID CLASS 和远程 "#styleclass", //要适配的样式表,支持 ID CLASS 和远程 ], // metaview:"",//meta参数默认不加 response:true, //响应式 主要针对页面 .wap .pad .pc .wap-pad .pad-p 进行响应式操作 默认关闭,.wap <=640 .pad=""> 640 <= 960="" .pc="">960 , .wap-pad 和 pad.pc 属于过度样式 responsecbk:function(msg){ //响应式回调 console.log(msg); }, lastpx:0.5,//最小PX cbk:function(){ //适配成功后回调函数 console.log("改变成功123"); } }); 参数详解: @size: 这个是设计图的基准,适配插件会按这个基准等比例放大和缩小 @isall: true/false css文件全部适配,如果为true则不会走 startcss/endcss 规则。 @startcss: css里面的头尾适配范围,后面的值要写到css文件里面,如果不写插件会适配全部css @endcss: css里面的头尾适配范围,后面的值要写到css文件里面,如果不写插件会适配全部css @maxauto true/false 是否全适配,如果为true则按基准无限放大和缩小,如果为false则只大于或等于基准数。 @cssUrl: 支持三种css引入规则 @response: 是否开启响应 @responsecbk: 响应式回调,处理自己的业务逻辑 @lastpx: 0.5 最小运算数,浮动范围 @cbk: fn 适配成功后回调 预览地址:原联想视频就是用的站长插件实现的 http://mini.vgs.lenovo.com.cn/ 附加一个rem适配方法,因为站长大力推进上面的PX转换插件,所以额外rem的就不给文档了。 // 附加REM适配 $.remStyle({ fontSize:默认100,// 设置根级字体大小 maxW:适配宽度 // 默认640 }); 图片预加载往往做预处理时候用到,比如H5活动等等。 调用实列: $.imgLoad({ imglist:[ 'https://t12.baidu.com/it/u=605649497,2910551155&fm=76', 'http://www.zixuephp.com/uploads/allimg/c180207/151OaGEKF-21413_lit.jpg', 'http://www.zixuephp.com/uploads/allimg/180110/1-1P1100959250-L.jpg' ], progress:function(e){ // console.log(e); }, success:function(e){ console.log(e); } });
JS预加载调用实列: $.jsLoad({ jslist:[ 'http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js', 'http://www.zixuephp.com/templets/zixuephp/js/scroll.jquery.js', 'http://www.zixuephp.com/templets/zixuephp/js/index.js' ], progress:function(e){ console.log(e); }, success:function(e){ console.log(e); } }); CSS预加载调用实列:2.07- $.loadCss({ id:"可以不传,会随机生成" url: "css/common.css", callback:function(data){ console.log('远程请求CSS回调',data); } }) cas预加载2.0 2.07+ $.cssLoad({ cssList:[ "http://www.zixuephp.com/static/css/common.css", "http://www.zixuephp.com/static/css/article.css", "https://gamedown.vgs.lenovo.com.cn/public/css/shCoreDefault.css" ], callback: function() { console.log('远程请求CSS回调123---->A'); } }) 正则校验以下是常用正则校验方法,方便常用校验... $.reg.isName(str); //校验用户名/^[a-zA-Z]{6,30}$/ $.reg.isDigit(str); //校验是否全由数字组成 $.reg.isPasswd(str); //校验密码:只能输入6-20个字母、数字、下划线 $.reg.isTel(str); //校验普通电话、传真号码:可以“+”开头,除数字外,可含有“-” $.reg.isMobil(str);//校验手机号码:必须以数字开头,除数字外,可含有“-” $.reg.isPostalCode(str);//校验邮政编码 $.reg.isIP(str); //ip $.reg.isEmail(str); //mail $.reg.isUrl(str); //url $.reg.isHtml(str); //html $.reg.isQQ(str); //qq $.reg.isPrice(str); //校验价格 /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/ [2.0.7+] 模拟alert提示功能提示插件 $.toast(txt,position,timeout); 参数讲解: txt //提示文本 string position //位置,top,center,bottom stirng timeout //结束显示时间,默认2秒,单位1000 int 2.0.6+ $.toast(txt,pms); txt //提示文本 string pms: object position //位置,top,center,bottom timeout //结束显示时间,默认2秒,单位1000 <h3>模拟alert提示</h3> <button id="btn">点击</button> <!--引入测试JS--> <script> $('#btn').bind('click',function(){ $.toast('测试提示',{ position:'top', timeout:1000 }); }); </script> 获得地址栏参数获取地址栏get参数 $.request("匹配参数名","url"); 注意:第二个参数如果不传默认读取地址栏URL 返回 string 参数 或者 空字符串 实列: <div class="item"> 当前地址栏test值是<span id="v1"><span> </div> <button id="btn">获得地址栏信息</button> <div class="item"> 当前URL[http://www.zixuephp.com/static/test/JqueryE/test_request.html?test=456]栏test值是<span id="v2"><span> </div> <button id="btn2">获得指定URL信息</button> <!--引入测试JS--> <script> $('#btn').bind('click',function(){ $('#v1').html($.request("test")); }); $('#btn2').bind('click',function(){ $('#v2').html($.request("test", "http://www.zixuephp.com/static/test/JqueryE/test_request.html?test=456")); }); </script> 判断变量是否为空或者undefined或者是null此方法判断变量是否为空或者undefined或者是null,非常好用,针对服务端错误数据一个友好的过滤。 $.isNull(str); null,undefined,'', 返回true 其他返回 false 轮播基于JQ封装的轮播组件,很方便使用。 <!-- 轮播 --> <div class="lunbobox pes" id="lunbobox"> <ul> <li> <a href="http://www.zixuephp.com/html/javascript/2020_04/44983.html" title="anmate.js动画库" target="_blank"><img data-src="/uploads/allimg/200403/1-2004031140380-L.jpg" src="/uploads/allimg/200403/1-2004031140380-L.jpg" alt="anmate.js动画库" style="display: inline;"></a> </li> <li> <a href="http://www.zixuephp.com/h5game/Phaser/" title="Phaser游戏引擎" target="_blank"><img data-src="/uploads/allimg/190821/1-1ZR10959180-L.jpg" src="/uploads/allimg/190821/1-1ZR10959180-L.jpg" alt="Phaser游戏引擎" style="display: inline;"></a> </li> <li> <a href="http://www.zixuephp.com/html/javascript/2020_04/44983.html" title="anmate.js动画库" target="_blank"><img data-src="/uploads/allimg/200403/1-2004031140380-L.jpg" src="/uploads/allimg/200403/1-2004031140380-L.jpg" alt="anmate.js动画库" style="display: inline;"></a> </li> </ul> <div class="btn pos btnLeft iconfont"><</div> <div class="btn pos btnRight iconfont">></div> </div> <!-- 轮播 --> <!--引入测试JS--> <script> var lunboObject = $.lunbo({ scrollObj:$("#lunbobox ul"), // 轮播对象 scrollBox:$("#lunbobox"), // 轮播父级对象 btnLeft:$("#lunbobox .btnLeft"), // 轮播按钮左侧 btnRight:$("#lunbobox .btnRight"), // 轮播按钮右侧 progressBar:true, //开启进度条 progressBarAutoStyle:true, // 进度条默认样式开启 //轮播按钮样式,未定义有默认样式 progressBarStyle:{ hcolor:"#f00", bcolor:"#999", w:10, h:10 }, scrollToCbk(index){ //滚动开始回调 console.log('开始滚动') }, scrollCbk:function(index){ //每次轮播后回调方法 console.log('滚动位置',index) } }); </script> </body> </html> 扩展用到 lunboObject.scrollImg 会保存当前轮播对象 lunboObject.scrollImg.destruction(); //删除当前实列 lunboObject = null; 单页应用会用到,清除所有注册的轮播 $.clearLunbo(); cookie支持 项目cookie $.cookie 已经自带 列子:$.cookie("name") , $.cookie("formBase",null); $.cookie("formBase",'base',{ expires: 1, path: "/" }); 表单placeholder兼容IE表单提示placeholder pms可以不写 $(dom对象).placeholder("提示信息",pms) 或者 $(dom对象).attr("msg","值").placeholder(null,pms) pms = { css:{jq设置的css属性} cssAuto:true/false 自动css属性添加 } 以下2.0.6+新增,会自己兼容原声placeholder, ie9及以下版本自动创建dom浮动层,参数缩减一个pms对象,对象内容和上面一致 <div class="inputBox"> <input type="text" placeholder="测试OK" class="inputs"> </div> <script> $(function(){ // 用法1,使用默认样式 $(".inputs").placeholder({cssAuto:true}); // 用法2, 自定义样式 $(".inputs").placeholder({ cssAuto:false, css:{color:red,fontSize:'12px'} }); }); </script> 回调函数用于方法回调等 $.callback(fuc,pms) 第一个参数是回调方法,第二个参数是给方法的值 执行一些业务逻辑回调管理 返回时间戳调用示例: $.getTimeStamp(); 返回预定范围随机数 不包括开始和结束值参数:start [number] 开始值 end [number] 结束值 调用示例: $.random(10, 15);//随机返回10-15之间的值 随机数组排列顺序参数:arr [array] 数组 调用示例: $.randomArr([0, 1, 2]); //返回随机数组 随机字符串排列顺序参数:str [string] 字符串值 调用示例: $.randomStr("abcdefg");或 $(".xxx").randomStr(); //返回随机字符串 图片懒加载内置集成了图片懒加载,调用实列如下: $("img.lazy").lazyload({ placeholder : "img/grey.gif", //用图片提前占位 或者透明图片: "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" // placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏 effect: "fadeIn", // 载入使用何种效果 // effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn threshold: 200, // 提前开始加载 // threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉 event: 'click', // 事件触发时才加载 // event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试… container: $("#container"), // 对某容器中的图片实现效果 // container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片 failurelimit : 10 // 图片排序混乱时 // failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况, failurelimit意在加载N张可见区域外的图片,以避免出现这个问题. }); 注意:event 是 sporty 需要动态触发,比如轮播内默认只加载首屏,其余等滚动到才加载. var type = "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs="; $("img.lbimg").lazyload({ effect: "show", placeholder: type, threshold: 20, failure_limit: 50, skip_invisible: true, data_attribute:"src", event: 'sporty' }); $("#lunbobox ul.lunbo li img").trigger('sporty'); /* 滚动懒加载1 */ $('.LiveList').find('img').lazyload({ effect: "fadeIn", threshold: 0, event: 'sporty', skip_invisible: true, }); demo:可以查看自学php网首页效果即可。 api构造器描述:API构造器主要用于页面所有接口的预加载/闲暇加载 注意:如果直接调用某个KEY下API,这时候没有触发闲暇加载事件,此时直接获取的API数据会存起来,等闲暇机制触发时候不会再次请求该KEY下的数据。 创建说明【 @pms1: object,所有接口的构造实列 @pms2 object 而外配置项 autoTime:延迟多久进行闲暇机制加载接口 】 $.apiConstructor({ a:{url:"json.data",type:"api",apitype:"json",requestType:"POST"} //2.0.6+ requestType默认GET ,b:{url:"json.data",type:"api",apitype:"json"} ,c:{url:"json.data",type:"api",apitype:"json"} ,d:{url:"json.data",type:"api",apitype:"json"} ,e:{url:"json.data",type:"api",apitype:"json"} ,f:{url:"json.data",type:"api",apitype:"json"} ,g:{url:"json.data",type:"api",apitype:"json"} },{ autoTime:5000 }); 获取说明 【 @pms1: string,调用构造器的key @pms2 fn 回调方法 】 $.apiConstructor("a",function(data){ console.log("获得数据a",data); }); 本地储存一个可以控制到期时间的本地存储,原声localStorage不能控制时间。 //储存 @pms1 key @pms2 value @pms3 过期时间单位秒 $.localStorage.set("key1","key-value",5) //获取 未找到返回null $.dump($.localStorage.get("key1")) //删除 $.localStorage.delete("key1") 监听横竖屏移动端或者做PC MOBILE 双端时候非常方便 $.winorientation(function(data){ //portrait 竖屏 //andscape 横屏 console.log(data) }); 地址改变事件 hashChange用于SPA单页模式下,检测地址栏变化。 hashChange用于单页应用 $.hashChange(function(oldURL,newURL){ oldURL //上次URL newURL//新URL }); bindHtml 绑定模板bindHtml 绑定模板 * 绑定模板对象 * @param dom DOM对象,将模板解析到生成对象上 * @param tpl 模板对象,可以是str或者某个ID实列,注意:如果是ID不能加 # 直接传ID名称即可。 * @param data 绑定数据 实列: <div class="item"> 当前渲染内容是 <br> <div id="v1"></div> </div> <button id="btn">测试1</button> <button id="btn2">测试2</button> <!-- 模板1开始,可以使用script(type设置为text/html)来存放模板片段,并且用id标示 --> <script id="t:_1234-abcd-1" type="text/html"> <div> <!-- 我是注释,语法均为Javascript原生语法,默认分割符为 <% %> ,也可以自定义,参见API部分 --> <!-- 输出变量语句,输出title --> <h1>title:<%=title%></h1> <!-- 判断语句if else--> <%if(list.length>1) { %> <h2>输出list,共有<%=list.length%>个元素</h2> <ul> <!-- 循环语句 for--> <%for(var i=0;i<5;i++){%> <li><%=list[i]%></li> <%}%> </ul> <%}else{%> <h2>没有list数据</h2> <%}%> </div> </script> <!-- 模板1结束 --> <!--引入测试JS--> <script> $('#btn').bind('click',function(){ $.bindHtml("#v1","<div>要渲染的DOM内容是<%=aa%></div><ul><li><%=li%></li></ul>",{aa:"模板数据载入222", li: "li的内容333"}); }); $('#btn2').bind('click',function(){ var data={ "title":'欢迎使用JQueryE', "list":[ 'test1:默认支持HTML转义,如输出<script>,也可以关掉,语法<:=value> 详见API', 'test2:', 'test3:', 'test4:list[5]未定义,模板系统会输出空' ] }; $.bindHtml("#v1","t:_1234-abcd-1",data); }); </script> 数据改变监听方便一些小业务需求,检测全局数据变化很有效,暂时没做到VUE那么重度,很轻量级。 层级关系如下图所示 a-b-c,如果业务比较重度,需要自己手动拼接层级. var data = {a:"a",b:{b:"b",c:1}}; $.obServer(data,function(data){ console.log(data); }) 定时器任务 2.0.6+支持2种调用方法 @pms1 date对象 || 几秒后触发 @pms2 fn 回调方法 $.timeoutDo(new Date('2020/07/12 17:35:50'),function(){ console.log('倒计时 5 秒 ---- '); }); $.timeoutDo(5,function(){ console.log('倒计时 5 秒'); }); 注意:以下是 2.0.7+ ,2.0.6+只能用于1秒以上的,且必须是整数,而2.0.7的可以是 0.05 0.5 等,单位是秒。 $.timeoutDo('2020/07/12 17:35:50',function(){ console.log('倒计时 5 秒 ---- '); }); $.timeoutDo(5,function(){ console.log('倒计时 5 秒'); }); 强化动画 2.0.6+非常好用的动画扩展,非常精简的代码量换来种类繁多的动画效果。 单独动画插件延伸阅读--->:http://www.zixuephp.com/html/javascript/2020_04/44983.html 实列: $('选择器',{ css属性设置和jquery一致,目前集成了 width,height,top,left,right,bottom,background,color,borderColor,fontSize,opacty,transform 其中:transform 包括( rotate,scale,translate,skew) },2000,function(item){ 回调结束,item包括DOM对象和各个选项,可以打印查看 console.log('触发完成',item); },A.Easing.Quadratic.In); A.Easing.Quadratic.In,加速运动,不传就是匀速运动,包括如下选项: 和tween.js一致。 var logEl = $("#log"); logEl.append("<li>我是动画盒子我要执行:left:50,top:50,width:100,opacity:0.5的动画</li>"); $("#anm-test-004").anm({ left:50, top:50, width:100, opacity:0.5, },1000,function(domEl){ logEl.append("<li>我是动画盒子我要执行:left:10,top:10,width:200,opacity:1,background:\"#00eeff\"的动画</li>"); $(domEl.dom).anm({ left:10, top:80, width:200, opacity:1, background:"#00eeff" },2000,function(domEl){ logEl.append("<li>我是动画盒子我要执行:left:130,top:120,width:600,height:600,opacity:1,borderRadius:100,background:\"#ff0000\"的动画</li>"); $(domEl.dom).anm({ left:130, top:120, width:300, height:300, opacity:1, borderRadius:1000, background:"#ff0000" },3000,function(domEl){ logEl.append('<li>我是动画盒子我要执行:transform:"rotate(360edg)",borderRadius:0,的动画</li>'); $(domEl.dom).anm({ transform:"rotate(360edg)", borderRadius:0, },1500,function(domEl){ logEl.append('<li>我是动画盒子我要执行:width:100,height:100,transform:"skew(20deg,20deg)"的动画</li>'); $(domEl.dom).anm({ width:100, height:100, transform:"skew(20deg,20deg)", }); }); }); }); 加载插件并执行 2.0.6+注意:内部会判断如果已经加载就绕过加载直接执行 //加载某个插件执行 $.loadPluginsDo("https://gamedown.vgs.lenovo.com.cn/public/js/message.min.1.0.1.js","message",function(){ console.log("Messenger 是否存在",typeof Messenger) }); 类似A标签title 2.0.7+经常遇到鼠标悬停出现提示标题,只要在DOM上添加 _title 属性然后全局绑定下即可 <button class="testHover" _title="这是标题">鼠标悬浮</button> <button class="testHover" _title="asd">鼠标悬浮</button> <button class="testHover" _title="啊大神大多撒所ASDA123">鼠标悬浮</button> <script> $(".testHover").tooltip(); </script> 延迟执行(一次) 2.0.7+使用场景:在滚动事件和等比例缩放事件后所执行的功能,比如异步请求数据,可以有效避免重复请求多次,造成服务器压力,提高用户体验... <div id="timeout"></div> <div id="timeoutB"></div> <script> var num = 1,numB=1; $(window).resize(function(){ $("#timeout").html('请求'+num+'次'); num ++; $.timeOutOnceDo(function(){ $("#timeoutB").html('执行'+numB); numB ++; },500); }) </script> |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com