网站地图    收藏    合作   

主页 > 下载 > jquery插件 >

JQUERYE—前端开发扩展库(基于JQ1.2.4)

来源:未知    时间: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, 第一时间解决你的问题!

下载地址

jqueryE.2.0.5.min.js.zip

jQueryE.2.0.6.min.js.zip

jQueryE.2.0.7.min.js.zip

jQueryE.2.0.8.min.js.zip

jQueryE.2.0.9.min.js.zip


最新CDNhttps://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+

拖拽排序,非常好用,支持动画,事件回调,自动识别横向还是纵向等一系列排序特效。


图片预览:

image.pngimage.png

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'

...

});

选择要拖动的DOM对象,类似JQ选择器。
items拖动对象类似JQ选择器。
moveInit初始化,返回构建数据队列
moveIng

移动中回调,moveOb 返回相关属性:

mCoordinate, // 移动坐标
mdom, // clone dom 又 移动中跟随鼠标的DOM
sourceDom, // 源
targetDom, // 目标
isHit, // 是否命中
hitDirection // 命中方向,prev|next


moveOver

移动结束回调,moveOb 返回相关属性:

hitDirection,// 命中方向
nodeData, // 数据集
sourceDom,
targetDom,
isHit,
overData, // 结束数据,如 1<->6 换的位置index
type:'mouseup'|'sortover' // 鼠标抬起,动画移动结束

 

调用实列:

$.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元素

DEMO预览

效果预览:

使用模板引擎---

image.png

未使用模板引擎---

image.png



参数详解:

参数名称:
说明:
width宽度: 默认 500
height高度: 默认 360
boxShadow弹窗阴影:默认 '#999 3px 3px 3px'
zIndex层级:默认999
border边框属性:默认'1px solid #d1d1d1'
background背景色:默认'#f1f1f1'
borderRadius圆角:默认'8px'
styleStrList

类似CSS表的样式表,如果不想写JQ对象方式去写CSS如: { width: ....} , 可以用此属性编写类似CSS原生的样式表。

数组格式:

styleStrList:[
'.jquery_e_popup span.close:hover{ opacity:0.8; }',
'.jquery_e_popup h3.jquery_e_poup_title{ color:red; }'
],

 此属性 .jquery_e_popup 为顶级选择器占位符,最终会被替换当前弹窗对象的ID。类似

image.png

整个弹窗CLASS规则如下:

image.png

noCloseMask

不显示弹窗遮罩:默认 false
noDel不显示弹窗关闭按钮:默认 false
closeStyle关闭按钮样式,和 $.css({...}) 使用规则一致
title弹窗标题:不传则不生成
content弹窗内容:不传则不生成,属于DOM拼接 如 content = '<div>内容</div>'
contentTemp

模板引擎:不传则不生成,如果传了此属性 content 则不执行,使用看下面调用实列,需要把模板标签定义在下面,然后传给 contentTemp = {id:'t:_1234-abcd-1',data:data}

<script>
var data={
	"title":'欢迎使用JQueryE',
	"list":[
	  'test1:默认支持HTML转义,如输出<script>,也可以关掉,语法<:=value> 详见API',
	  'test2:',
	  'test3:',
	  'test4:list[5]未定义,模板系统会输出空'
	]
};
</script>
<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>
buttons

弹窗底部按钮对象集:不传则不会生成。

          // 按钮集合,系统按钮 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('点击其他')
              }
            }
          ]

注意:fn 是点击回调:返回 e event对象,另外 this对象指向是当前弹窗对象集,可以操作 remove,show,hide,和标题,按钮等DOM对象操作。

最后说明:

调用方法:var popObject = $.popup({ pms... }) 会创建当前弹窗对象集包含此弹窗下所有可操作属性合方法.

弹窗对象集详解:

popObject:{}

image.png

$.getPopupListLen( true| false ) // 返回弹窗队列长度 true: 返回所有显示的弹窗数量.



调用实列:弹窗所有参数均为非必填项,用户可以根据需求自行添加。

 <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/>&nbsp;&nbsp;测试一个内容是什么测试一个内容是什么测试一个内容是什么。测试一个内容是什么测试一个内容是什么测试一个内容是什么测试一个内容是什么测试一个内容是什么<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提示功能

image.png


提示插件

$.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>


DEMO预览


获得地址栏参数

获取地址栏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>

DEMO预览

判断变量是否为空或者undefined或者是null

此方法判断变量是否为空或者undefined或者是null,非常好用,针对服务端错误数据一个友好的过滤。

image.png

$.isNull(str);

null,undefined,'',  返回true

其他返回 false


轮播

基于JQ封装的轮播组件,很方便使用。

image.png


  <!-- 轮播 -->    
<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();

DEMO预览

cookie支持

    项目cookie

    $.cookie 已经自带

    列子:$.cookie("name") , $.cookie("formBase",null);   $.cookie("formBase",'base',{ expires: 1, path: "/" });

image.png


表单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) 第一个参数是回调方法,第二个参数是给方法的值

    image.png

    执行一些业务逻辑回调管理

    image.png

返回时间戳

    调用示例:

    $.getTimeStamp();

    image.png

返回预定范围随机数 不包括开始和结束值

    参数:start  [number] 开始值 end  [number] 结束值

    调用示例:

    $.random(10, 15);//随机返回10-15之间的值

   image.png

随机数组排列顺序

    参数:arr  [array] 数组

    调用示例:

    $.randomArr([0, 1, 2]); //返回随机数组

    image.png     

随机字符串排列顺序

    参数:str  [string] 字符串值

    调用示例:

    $.randomStr("abcdefg");或 $(".xxx").randomStr(); //返回随机字符串

    image.png

图片懒加载

内置集成了图片懒加载,调用实列如下:

$("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>

DEMO预览:


数据改变监听

方便一些小业务需求,检测全局数据变化很有效,暂时没做到VUE那么重度,很轻量级。

层级关系如下图所示 a-b-c,如果业务比较重度,需要自己手动拼接层级.

var data = {a:"a",b:{b:"b",c:1}};
$.obServer(data,function(data){
console.log(data);
})

    image.png

定时器任务 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

image.png

实列:

$('选择器',{
    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)", 
                });
            });
        });
    });

DEMO预览:

加载插件并执行 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 属性然后全局绑定下即可 

demo预览

<button class="testHover" _title="这是标题">鼠标悬浮</button>
<button class="testHover" _title="asd">鼠标悬浮</button>
<button class="testHover" _title="啊大神大多撒所ASDA123">鼠标悬浮</button>
<script>
    $(".testHover").tooltip();
</script>


延迟执行(一次) 2.0.7+

demo预览

使用场景:在滚动事件和等比例缩放事件后所执行的功能,比如异步请求数据,可以有效避免重复请求多次,造成服务器压力,提高用户体验...

<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

添加评论