3 Unstar Star 12 Fork 0

Ganxiaozhe / gQuery

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

gQuery

The brand new JavaScript function library, and killed IE

  • Only 4.7kB 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 中的常用函数同时,拓展了许多我平时常用的操作函数。其代码大小在压缩后仅有 9kB,并完全在 MIT 下开源。

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

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

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: CSS强制查询

$('p').css('line-height');
// [undefined,undefined,undefined,...]
$('p').css('!line-height');
// ["15.6px","25.6px","25.6px",...]

gQuery: 事件委派

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

gQuery: fade 操作

l$('.exFadeShow').html("It's").append('<i class="gi icon-arrows-cw ga-spin ml-2">');
setTimeout(()=>{
	$('.exFadeShow').fadeToggle(800,function(){
		$(this).html('gQuery').fadeIn(800);
	});
},500);

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: 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

......

Comments ( 3 )

Sign in for post a comment

About

The brand new JavaScript function library, and killed IE friendly spread retract
Cancel

Releases

No release

Gitee Metrics

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

132457 8cb2edc1 1899542 131848 70c8d3a4 1899542