3 Star 15 Fork 1

Ganxiaozhe / gQuery

Create your Gitee Account
Explore and code with more than 12 million developers,Free private repositories !:)
Sign up
Clone or Download
contribute
Sync branch
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README
MIT

gQuery

The brand new JavaScript function library, and killed IE

  • Only 9.4kB minified and gzipped. Can also be included as an AMD module
  • Supports CSS3 selectors to find elements as well as in style property manipulation
  • Use native animation API. Support all major browsers

Why gQuery

众所周知 jQuery 是一个非常健壮的 JavaScript 库,它提供的 API 易于使用且兼容众多浏览器(例如令开发者头痛的 Internet Explorer)。

毫无疑问它曾改变了前端代码书写的模式,并且延续至今。

不过随着现代浏览器不断迭代的 API,在家庭电脑中几乎已无法见到 IE 的影子,而 Windows 默认浏览器也早已换成 Edge(并已放弃 EDGEHTML 而使用 Chromium)。

如今现代浏览器中,jQuery 难免显得有些臃肿,且绝大多数开发者并未完全使用其函数。各大平台(Github ...)和框架(Bootstrap 5 ...)也都和 jQuery 逐渐告别。

在这一境况下,我决定在新项目中也不再引入 jQuery 库,而转头重写了 gQuery 这更为精小的函数库。在继承 jQuery 中的常用函数同时,拓展了许多我平时常用的操作函数。其代码大小在压缩后仅有 14kB,并完全在 MIT 下开源。

另外,大多数 jQuery 插件仅需小量修改即可适用于 gQuery。

如果不考虑兼容 IE,同时喜欢极简自由的开发,强烈建议使用 gQuery 以获得更好的体验。

gQuery 及 GQUI 良好兼容 Electron 及 NW.js,并已开发过成熟商业软件。

Docs [过时]

https://www.gquery.net/docs/

Let's try gQuery

gQuery: 取值操作

let val = $('#exGetValues').text();
$('#exPutValues li:nth-child(1)').text( val );

// .text([]) 将返回有序数组
val = $('#exGetValues li').text([]);
$('#exPutValues li:nth-child(2)').text( val.join('')+'' );

$('#exPutValues li:nth-child(3)').html('<i>—— 张爱玲</i>');

gQuery: 事件委派

$('#todoList').on('click', 'li', function(){
    $(this).remove();
});

$('#todoList').on({
    mousedown: function(e){
        console.log(this, e);
    },
    mouseup: function(e){
        console.log(this, e);
    }
}, 'li');

gQuery: fade 操作

$('.exFadeShow').html("It's").append('<i class="gi icon-arrows-cw ga-spin ml-2">');

// wait 实现更优雅的 setTimeout
$('.exFadeShow').wait(500).fadeToggle(800,function(){
    $(this).html('gQuery').fadeIn(800);
});

gQuery: slide 操作

$('.exSlideShow > .header > .bullets > .bg-red,.exSlideShow > .header > .bullets > .bg-green').off('click').on('click',function(){
	let body = $(this).parent().parent().next();
	if( $(this).hasClass('bg-red') ){
		body.slideUp(300);
	} else {
		body.slideDown(300);
	}
});

gQuery: array{}

let CHAT_RECORD = [
    {id:0,name:'甘大蔗',msg:'为什么会有人把大花被穿身上啊?'},
    {id:1,name:'甘小蔗',msg:'小燕子穿花衣'},
    {id:2,name:'甘小蔗',msg:'年年春天来这里'},
    {id:3,name:'甘小蔗',msg:'我问燕子你为啥来'},
    {id:4,name:'甘大蔗',msg:'呃呃'},
    {id:5,name:'甘小蔗',msg:'燕子说'},
    {id:6,name:'甘小蔗',msg:'“先他妈管好你自己”'},
    {id:7,name:'甘大蔗',msg:'乌鱼子'},
];

let newArr = $.array.finder(CHAT_RECORD, {name:'甘大蔗'}, {limit:2});

$('#ex-array-finder').text( JSON.stringify(newArr) );

gQuery: cookie{}

$.cookie.get(key:String [, json:Boolean])
$.cookie.set(key:String, value:Mixed [, options:Object])
$.cookie.remove(key:String)

gQuery: storage{}

var storageEx = [];
$.storage.remove('exampleData');
storageEx.push( JSON.stringify( $.storage.local() ) );
 
$.storage.set('exampleData',storageEx);
storageEx.push( $.storage.get('exampleData') );
 
$.storage.set('exampleData','gQuery');
storageEx.push( $.storage.get('exampleData') );
 
$.storage.push('exampleData','is');
$.storage.push('exampleData','a');
$.storage.push('exampleData','Smaller and faster modern JavaScript function library');
storageEx.push( $.storage.get('exampleData') );
 
storageEx.push( $.storage.get('exampleData','array').join(' ') );
 
$('#exStorageData').html( storageEx.join('\n\n') );

Result: storageEx

{"theme":"light","indexInit":"1"}

["{\"theme\":\"light\",\"indexInit\":\"1\"}"]

gQuery

["gQuery","is","a","Smaller and faster modern JavaScript function library"]

gQuery is a Smaller and faster modern JavaScript function library

gQuery: get{}

$.get.queryParam(name:String)
$.get.browserSpec()
$.get.json(url:String, data:Object)

gQuery: fetch 操作

$.fetch(url:String:Object [, data:Object, bodyMethod:String])

$.fetch('/lib/js/gquery.ui.js', 'text').then(data => {
    console.log(data);
});

$.fetch('/lib/json/enneagram.json', 'json').then(data=>{
    console.log(data);
})

$.fetch('/lib/php/user/info.php', {
    id: 168,
    token: 'a6440a91c528dadfc7d5323dc626686a'
}, 'json').then(data => {
    console.log(data);
});

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() )

......

MIT License Copyright (c) 2020-present, JU Chengren (Ganxiaozhe) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

About

JavaScript 函数库,丰富组件及调及用,高效构建快速且强大的前端项目。 expand collapse
JavaScript
MIT
Cancel

Releases

No release

Contributors

All

Activities

Load More
can not load any more
JavaScript
1
https://gitee.com/ganxiaozhe/gQuery.git
git@gitee.com:ganxiaozhe/gQuery.git
ganxiaozhe
gQuery
gQuery
master

Search