Not aQuery

The brand new JS function library, and killed IE friendly

Only 14kB minified and gzipped. Can also be included as an AMD module

Download gQuery vlatest Docs 起步
gQuery made with love.
加载聊天记录中......

Let's try gQuery

gQuery: 取值操作
  1. let val = $('#exGetValues').text();
  2. $('#exPutValues li:nth-child(1)').text( val );
  3. // .text([]) 将返回有序数组
  4. val = $('#exGetValues li').text([]);
  5. $('#exPutValues li:nth-child(2)').text( val.join(',')+'。' );
  6. $('#exPutValues li:nth-child(3)').html('<i>—— 张爱玲</i>');

#exGetValues

  • 你问我爱你值不值得
  • 其实你应该知道
  • 爱就是不问值不值得

#exPutValues

  • ...
  • ...
  • ...
gQuery: fade 操作
  1. $('.exFadeShow').html("It's").append('<i class="gi icon-arrows-cw ga-spin ml-2">');
  2. // wait 实现更优雅的 setTimeout
  3. $('.exFadeShow').wait(500).fadeToggle(800,function(){
  4. $(this).html('gQuery').fadeIn(800);
  5. });

.exFadeShow

gQuery

gQuery

gQuery

gQuery: 事件绑定 & slide 操作
  1. $('.exSlideShow > .header > .bullets > .bg-gold,.exSlideShow > .header > .bullets > .bg-green').off('click').on('click', function(){
  2. let body = $(this).parent().parent().next();
  3. if( $(this).hasClass('bg-gold') ){
  4. body.slideUp(300);
  5. } else {
  6. body.slideDown(300);
  7. }
  8. });
  9. // 事件委托
  10. // $('.exSlideShow > .header > .bullets').off('click').on('click', 'span', function(){...});
试试点击黄色/绿色按钮

gQuery Slide

gQuery: storage 操作
  1. var storageEx = [];
  2. $.storage.remove('exampleData');
  3. storageEx.push( JSON.stringify( $.storage.local() ) );
  4. $.storage.set('exampleData',storageEx);
  5. storageEx.push( $.storage.get('exampleData') );
  6. $.storage.set('exampleData','gQuery');
  7. storageEx.push( $.storage.get('exampleData') );
  8. $.storage.push('exampleData','is');
  9. $.storage.push('exampleData','a');
  10. $.storage.push('exampleData','Smaller and faster modern JavaScript function library');
  11. storageEx.push( $.storage.get('exampleData') );
  12. storageEx.push( $.storage.get('exampleData','array').join(' ') );
  13. $('#exStorageData').html( storageEx.join('\n\n') );
Result: storageEx
						
gQuery: cookie 操作
  1. var cookieEx = [];
  2. $.cookie.set('uid', 1);
  3. $.cookie.set('gtoken', '1c591208a6b7ca72322cf159e606a2774c2ac62dc769b00292fedb2f205c9e2e', {expire:7, flag:'token'});
  4. cookieEx.push( JSON.stringify( $.cookie.get() ) );
  5. cookieEx.push( $.cookie.get('gtoken') );
  6. $('#exCookieData').html( cookieEx.join('\n\n') );
Result: #exCookieData
						
gQuery: 网络请求
$('#exFetch').text('加载中...');

$.fetch('/lib/js/LICENSE', 'text').then(rsp=>{
    $('#exFetch').text(rsp);
});

/* aslo POST:
$.fetch('/lib/js/LICENSE', {
    token:'gquery-fetch', v:1
}, 'text').then(rsp=>{
    $('#exFetch').text(rsp);
});
*/
Result: #exFetch
						
gQuery: Date 操作
let $date = $('#exDate > li');

$date.eq(0).text( $.date().format() );

$date.eq(1).text( $.date(1630862585909).format('本世纪第yy年的m月d日 hh:ii:ss') );

$date.eq(2).text( $.date('2002-2-14 2:30:00').format() );

$date.eq(3).text( $.date('-3d').calc('+4 hours').calc('-2h').format() );

$date.eq(4).text( $.date().diff('-3d').ago() );

// console.log( $.date() )

#exDate

gQuery: 元素浮现动画
gxz.el.show = function(opts){
    if(typeof opts !== 'object') {return 'empty object';}
    opts.el = ( typeof opts.el === 'object' ? opts.el : $(opts.el) );
    isNaN(opts.duration) && (opts.duration=500);
    isNaN(opts.wait) && (opts.wait=0);
    isNaN(opts.delay) && (opts.delay=0);

    opts.ani = ( (opts.top || opts.left) ? 1 : 0 );
    opts.top || (opts.top='0px');
    opts.left || (opts.left='0px');

    opts.el.css({'opacity':0});
    opts.el.each(function(){
        let _this = $(this);opts.css = {};

        if(opts.ani){
            opts.css.pos = _this[0].style.position || 'relative';
            _this.css({'position':opts.css.pos,'top':opts.top,'left':opts.left})
        }

        setTimeout(()=>{
            this.animate([
                {opacity: 0,top: opts.top,left: opts.left},
                {opacity:1,top:'0px',left:'0px'}
            ],opts.duration);

            setTimeout(()=>{
                _this[0].style.opacity = '';
                if(opts.ani){_this.css({position:'',top:'',left:''});}
            },opts.duration);
        },opts.wait);

        opts.wait += opts.duration+opts.delay;
    });
}

gxz.el.show({el:$('#exElShow .box'),wait:500,duration:500,top:'50px',left:'-50px'});

#exElShow

1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
页面加载缓慢

请检查网络或尝试刷新重试