如果你会使用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()