精简版jQuery,15k

1,262 阅读2分钟
原文链接: www.ilinme.com

如果你会使用jquery,那么你也会使用jq。

因为平时开发过程中经常使用到jquery,但由于现在的jquery太臃肿了,许多功能都用不到,于是自己动手写了一个jq,大神勿喷,实现了jquery绝大部分常用功能,也添加了些额外的功能。

兼容性:绝大部分功能ie8以上,动画相关的ie10及以上。

有许多不足之处望大家体谅,若大家发现了bug及对jq有建议欢迎对我提出您的宝贵意见。

邮箱地址:363639121@qq.com
体积大小:压缩版15k;
	

===========================================================================

使用方法

<script src="http://www.ilinme.com/jq.min.js"></script>

以下是于jquery不同的地方,请注意

jqueryconversion(elements);//将js对象转为jq对象

each();//遍历jq数组
$(selector).each(function(idx,arr){
	idx为当前的索引
	arr为当前所遍历的对象
})

$(selector).css();
可接受字符串或者json,采用小驼峰式写法
$(selector).css('color','red');
$(selector).css({
	fontSize:'14px',
	backgroundColor:'red'
});

ajax相关
$.ajax({
	url:'',//请求地址,
	data:{},//json格式,附带数据,可选
	type:'get',//请求方式,默认get,可选get,post,jsonp,可选
	async:true,//布尔类型,是否异步请求,默认true,可选
	dataType:'jsonp',//表示jsonp请求,此时忽略type的值,可选
	success:function(res){//成功回调函数

	},
	error:function(res){//失败回调函数,可选

	}
})

get,post,jsonp请求
$.get(url,data,successCallback,errorCallback);
$.post(url,data,successCallback,errorCallback);
$.jsonp(url,data,successCallback);
url为请求的地址,
data为附加数据,json格式,可选
successCallback成功回调函数
errorCallback失败回调函数,可选
//url中不需要写回调函数.
$.jsonp(url,function(res){
	console.log(res);
})


$(selector).childrens();//注意多一个s
用法与jquery中children相同,返回元素的所有直接子元素

$(selector).offsetParents()//多一个s
用法与jquery中offsetParent相同,返回元素第一个具有定位属性的父元素

$(selector).position()
获取元素相对于具有定位属性的父元素或直接父元素的位置
$(selector).position()返回第一个具有定位属性的父元素的边框之间位置
$(selector).position(true)返回直接父元素的边框之间位置

$(selector).scrollLeft()
设置或返回水平滚动条的位置,可支持动画效果,只支持窗口的滚动条
$(selector).scrollLeft(500,true)//滚动到500位置,具有动画效果

$(selector).scrollTop()
设置或返回垂直滚动条的位置,可支持动画效果,只支持窗口的滚动条
$(selector).scrollTop(500,true)//滚动到500位置,具有动画效果

=====================================================================

以下方法用法与jquery类似;

加载完毕后
$(selector).ready()//dom加载完毕,先触发
$(function(){//页面加载完毕,后触发

})

内容操作
$(selector).html()
$(selector).val()

属性操作
$(selector).attr()
$(selector).removeAttr()

类操作
$(selector).addClass()
$(selector).removeClass()
$(selector).hasClass()

dom操作
$(selector).append()
$(selector).prepend()
$(selector).after()
$(selector).before()

$(selector).remove()
$(selector).empty()
$(selector).replaceWith()

$(selector).parent()
$(selector).parents()
$(selector).childrens()
$(selector).siblings()
$(selector).find()
$(selector).next()
$(selector).nextAll()
$(selector).prev()
$(selector).prevAll()
$(selector).first()
$(selector).last()
$(selector).eq()
$(selector).not()

$(selector).clone()

动画相关
$(selector).animate()
$(selector).show()
$(selector).hide()
$(selector).fadeIn()
$(selector).fadeOut()
$(selector).slideDown()
$(selector).slideUp()

事件
$(selector).click()
$(selector).dblclick()
$(selector).mousedown()
$(selector).mouseup()
$(selector).mousemove()
$(selector).mouseover()
$(selector).mouseout()
$(selector).mouseenter()
$(selector).mouseleave()
$(selector).focus()
$(selector).blur()
$(selector).change()
$(selector).select()
$(selector).submit()
$(selector).keydown()
$(selector).keyup()
$(selector).hover()
$(selector).scroll()
$(selector).resize()

事件绑定及解绑
$(selector).on()
$(selector).off()

尺寸
$(selector).width()
$(selector).height()
$(selector).innerWidth()
$(selector).innerHeight()
$(selector).outerWidth()
$(selector).outerHeight()

位置相关
$(selector).offsetParents()
$(selector).offset()
$(selector).position()

滚动条
$(selector).scrollLeft()
$(selector).scrollTop()