[JSLite.io]

如有疑问欢迎到这些地方交流，欢迎加入JSLite.io组织团伙共同开发！

QQ交流群：397463673
segmentfault社区 | 官方网站 | 官方文档-更详细 | Issues

jQuery 的目标是兼容所有主流浏览器，这就意味着它的大量代码对移动端的浏览器是无用或者低效的。

而 JSLite 只针对先进浏览器(支持HTML5,CSS3)、移动端浏览器编写，使用js新方法实现jQuery API，因此体积更小、效率更高.

更重要的是，JSLite 的 API 完全仿照 jQuery ，所以学习成本也很低。

JSLite与jQuery有着绝大部分类似的api，通用库只有5-10k，手机上每一kb都是钱。

让web开发更迅速，下载执行更快、量级更轻，针对现代高级浏览器的JavaScript库。推进前端开发标准对于攻城师来说，人人有责。

浏览器兼容

此兼容，是根据我使用的一些js方法函数的支持情况来判断的。设备过少，部分是根据developer.mozilla.org的方法函数兼容数据来判断的，下面的我们的主要兼容目标

Safari 6+ (Mac)
Chrome 30+ (Windows, Mac, Android, iOS, Linux, Chrome OS)
Firefox 24+ (Windows, Mac, Android, Linux, Firefox OS)
iOS 5+ Safari
Android 2.3+ Browser
Internet Explorer 10+ (Windows, Windows Phone)

安装

npm

$ npm install jslite

传统方法

去官网下载JSLite，github download
页面Head标签内引用 JSLite.js

核心

$()

选择器使用的是浏览器自带的方法的 document.querySelectorAll 接口，支持标准的 CSS 选择器，没有使用jQuery作者John Resig开发的DOM选择器引擎(Dom Selector Engine) Sizzle 。目前 IE8/9及Firefox/Chrome/Safari/Opera 的最新版已经支持 querySelectorAll 。
$(selector) //⇒ 选择节点
$("") //⇒ 生成节点
$("htmlString") //⇒ 生成
JSLite(function($){ ... }) //⇒ 相当于ready

$("#box") //⇒ 返回节点数组  //⇒ […]
$("") //⇒ 生成div节点
//JSLite(func) 相当于ready
JSLite(function($){
    console.log("在节点加载完成之后执行")
})
//$(func) 相当于ready
$(function($){
    console.log("在节点加载完成之后执行")
})

JSLite()

与$()相同。

noConflict

noConflict() 方法让渡变量 $ 的 JSLite 控制权，解决俩库之间的$冲突。
该方法释放 JSLite 对 $ 变量的控制。
该方法也可用于为 JSLite 变量规定新的自定义名称。

实例一

$.noConflict();
JSLite(document).ready(function($) {
// 使用 JSLite $ 的代码
});
// 使用其他库的 $ 的代码

实例二

将 $ 引用的对象映射回原始的对象：

JSLite.noConflict();
JSLite("div p").hide(); // 使用 JSLite
$("content").style.display = "none";    // 使用其他库的 $()

实例三

恢复使用别名 $，然后创建并执行一个函数，在这个函数的作用域中仍然将 $ 作为 JSLite 的别名来使用。在这个函数中，原来的 $ 对象是无效的。这个函数对于大多数不依赖于其他库的插件都十分有效：

JSLite.noConflict();
(function($) { 
  $(function() {
    // 使用 $ 作为 JSLite 别名的代码
  });
})(JSLite);

... // 其他用 $ 作为别名的库的代码

实例四

可以将 JSLite.noConflict() 与简写的 ready 结合，使代码更紧凑

JSLite.noConflict()(function(){
    // 使用 JSLite 的代码
    console.log($('div'))
});

实例五

创建一个新的别名用以在接下来的库中使用 JSLite 对象：

var j = JSLite.noConflict();
j("#box").hide();  // 基于 JSLite 的代码
$("content").style.display = "none";    // 基于其他库的 $() 代码

实例六

完全将 JSLite 移到一个新的命名空间：

var dom = {};
dom.jslite = JSLite.noConflict(true);

结果:

dom.jslite("div p").hide();  // 新 JSLite 的代码
$("content").style.display = "none";    // 另一个库 $() 的代码
JSLite("div > p").hide();   // 另一个版本 JSLite 的代码

插件编写

$.extend

通过源对象扩展目标对象的属性，扩展 JSLite 元素集来提供新的方法（通常用来制作插件）

$.extend({
    min: function(a, b) { return a < b ? a : b; },
    max: function(a, b) { return a > b ? a : b; }
});
$.min(2,3);    //⇒ 2
$.max(4,5);    //⇒ 5
// 在$上扩展了几个方法  
//调用方法  $.min(2,3);   //⇒ 2
//调用方法  $.max(4,5);   //⇒ 5

$.fn.extend

扩展 JSLite 元素集来提供新的方法（通常用来制作插件）。

$.fn.extend({   //增加两个插件方法。
    check: function() {
        return this.each(function() { this.checked = true; });
    },
    uncheck: function() {
        return this.each(function() { this.checked = false; });
    }
});
$("input[type=checkbox]").check();  //选中
$("input[type=radio]").uncheck();   //取消选中

$.error

当元素遇到错误（没有正确载入）时，发生 error 事件。

$.error("2222")
//⇒ 输出错误 Uncaught 2222

字符串处理

$.trim

去掉字符串起始和结尾的空格。

$.trim("  hello, how are you?  ");//⇒ "hello, how are you?"

trim

同上，去掉字符串起始和结尾的空格。

"  hello, how are you?  ".trim()//⇒ "hello, how are you?"

URL

$.getUrlParam

获取 url 参数的值。

//[URL] = http://blog.pc175.com/?param=2
$.getUrlParam("param") //⇒ 2

$.param

将表单元素数组或者对象序列化。如果shallow设置为true，嵌套对象不会被序列化，嵌套数组的值不会使用放括号在他们的key上。
$.param(object, [shallow]) ⇒ string
$.param(array) ⇒ string

$.param({
    foo: {one: 1,two: 2 }
})  //⇒ "foo[one]=1&foo[two]=2"

$.param({
    ids:["a1","b2","c3"],
    c:{g:23,e:[567]},
    a:3
},true) //⇒ ids=a1&&ids=b2&&ids=c3&&c=[object Object]&a=3

$.param({
    ids:["a1","b2","c3"],
    c:{g:23,e:[567]},
    a:3
}) //⇒ ids[]=a1&&ids[]=b2&&ids[]=c3&&c[g]=23&&c[e]=567&&a=3

$.param([1,2,3]) //⇒ 0=1&&1=2&&2=3

$.param({
    ids:[1,2,3] 
})  //=> "ids[]=1&ids[]=2&ids[]=3"

数组对象操作

最大(小)值

//顺带小教程
//获取最大值最小值
var a=[1,2,3,5];
console.log(Math.max.apply(null, a));//最大值
console.log(Math.min.apply(null, a));//最小值

var a=[1,2,3,[5,6],[1,4,8]];
var ta=a.join(",").split(",");//转化为一维数组
console.log(Math.max.apply(null,ta));//最大值
console.log(Math.min.apply(null,ta));//最小值

$.intersect

数组交集

$.intersect([1,2,3,'asdkjf'],[2,3,6,'asdkjf'])
//⇒ [2, 3, "asdkjf"]

concat

合并，有可能会重复

[1,2].concat([1,5,6]) //⇒ [1, 2, 1, 5, 6]
$('#box').concat($('[type=submit]')[0]) //与下面一样  合并到一起了
$('#box').concat($('[type=submit]'))

$.unique

删除数组中重复元素。

$.unique([1,2,12,3,2,1,2,1,1,1,1]) //⇒ [1, 2, 12, 3]
var arr = $('#box').concat($('#box')) //两个一模一样的数组
$.unique(arr) //去重

$.sibling

根据类型获取节点对象属性的集合 (node,type)。

$.sibling($("input"),"type")    //⇒ ["text", "button", "checkbox"]   
$.sibling($("input"),"tagName") //⇒ ["INPUT"]

$.inArray

搜索数组中指定值并返回它的索引（如果没有找到则返回-1)。

var arr = [ 4, "Pete", 8, "John" ];
$.inArray("John", arr);     //⇒ 3
$.inArray(4, arr);          //⇒ 0
$.inArray("David", arr);    //⇒ -1
$.inArray("Pete", arr, 2);  //⇒ -1

$.map

通过遍历集合中的节点对象，通过函数返回一个新的数组，null 或 undefined 将被过滤掉。

$.map({"w":1,"c":2,"j":3},function(idx,item){
     return item
}); 
//⇒ ["w", "c", "j"]

$.each

通用例遍方法，可用于例遍对象和数组

$.each(['a', 'b', 'c'], function(index, item){
    console.log('item %d is: %s', index, item)
})

$.grep

使用过滤函数过滤数组元素。

$.grep( [0,1,2], function(n,i){
  return n != 0;
});

$.parseJSON

与 JSON.parse 方法相同，接受一个标准格式的 JSON 字符串，并返回解析后的 JavaScript 对象。

测试操作

$.isDocument

判断对象是否为【document】。

$.isDocument(document) //⇒ true

$.isWindow

确定参数是否为一个窗口（window对象），如果是则返回true。这在处理iframe时非常有用，因为每个iframe都有它们自己的window对象，使用常规方法obj==window校验这些objects的时候会失败。

$.isFunction

判断对象是否为函数【function】。

$.isFunction(function(){}) //⇒ true

$.isObject

判断是否为 Object 。

$.isObject({})  //⇒ true

$.isPlainObject

$.isPlainObject(object) ⇒ boolean
如果通过 "{}" 或者 "new Object" 创建的则返回true。判断对象是否是纯粹的对象。

$.isPlainObject({})         // => true
$.isPlainObject(new Object) // => true
$.isPlainObject(new Date)   // => false
$.isPlainObject(window)     // => false

$.isArray

判断是否为【数组】。

$.isArray([1,2,3])  //⇒ true

$.isJson

判断是否为【数组】。

$.isJson({})  //⇒ true

$.contains

$.contains(parent, node) ⇒ boolean
parent是否包含node节点对象。

$.isContainsNode($("#box")[0],$(".boxss")[0]) //⇒ parent是否包含node节点对象

$.likeArray

判断对象是否为数组或者是字符。

$.likeArray([1,2,3])     //⇒ true
$.likeArray("222")  //⇒ true

$.type

获取JavaScript 对象的类型。可能的类型有： null undefined boolean number string function array date regexp object error 。

$.type(true)  //⇒ Boolean
$.type("div") //⇒ String

$.matches

如果当前节点能被指定的css选择器查找到，则返回true，否则返回false。
$.matches(element,selector) ⇒ boolean

$.matches($("#box")[0], "#box")//⇒ true

is

判断当前匹配的元素集合中的元素，是否为一个选择器，DOM元素
is(selector) ⇒ boolean
is(element) ⇒ boolean

$('#box').is('div');  //⇒ true  
$('#box').is('#box');  //⇒ true  
$('#box').is('#boxsss');  //⇒ flase  
$('div').is($('#box')[0]) //⇒ true  节点是否在 $('#box')[0] 是否再集合中

对象访问

each

遍历一个 JSLite 集合对象，为每一个匹配元素执行一个函数。this关键字指向当前item(作为函数的第二个参数传递)。如果函数返回 false，遍历结束。

$("img").each(function(i){
    this.src = "test" + i + ".jpg";
});
//⇒ 找到所有的img对象给设置src  
//⇒ 返回 [ ,  ]

map

遍历节点对象集合中的所有节点对象返回一个新的集合对象

$(".box").map(function(index,item){
    return $(this).text()
})
//⇒ 返回 ["12boxOne", "6", "11", "22123456", "7123123"]

forEach

类似 each，forEach遍历不会停止。

//遍历数组
[1,5,2,3].forEach(function(item,index,array){
    console.log(item,index,array)
})
//遍历节点
$("img").forEach(function(item,index,array){
    console.log(item,index,array)
})

eq

指定匹配元素的集合为的索引的哪一个元素。一个整数，指示元素的位置，以 0 为基数。
eq(index) ⇒ collection
eq(-index) ⇒ collection

$("div").eq(0)//⇒ 返回数组第一个节点数组 [div#box.boxOne.box2.box3, init: function…]
$("div").eq(-1)//⇒ 倒数第一个节点数组
$("div").eq(-2)//⇒ 倒数第二个节点数组

get

当前对象集合中获取所有节点对象或单个节点对象。

$("div").get(0)//⇒ 返回节点

index

获取一个元素的位置。当elemen参数没有给出时，返回当前元素在兄弟节点中的位置。
.index() //对象中第一个元素相对于它同辈元素的位置
.index(selector)
.index(element)

$("#box").index()//⇒ 4
$("div").index("#box")//⇒ 2
$("div").index($("#box"))//⇒ 2
$("div").index($("#box")[0])//⇒ 2

indexOf

在当前获取的节点数组中获取一个元素在这个数组的位置。

$("div").indexOf($("#box")[0])
//⇒ 2

length

对象中元素的个数。

$("img").length;
//⇒ 2

HTML代码/文本/值

text

取得所有匹配节点对象的文本内容。

$("#box").text()
//⇒ string 返回文本

html

获取或设置节点对象内容。

$("#box").html()
//⇒ string 返回包括HTML的文本

val

获取设置input的 value 。

$('input').val() //⇒ string 
$('input').val('test') //⇒ self 

$('#input').val(function(index,oldvalue){
    console.log(index,oldvalue)
    return '111' + oldvalue
}) //⇒ self

节点属性

pluck

获取对象集合中每一个元素的属性值。

$("#box").pluck("nodeName") //⇒ ["DIV"]
$("#box").pluck("nextElementSibling") //⇒ 1234567890
$("#box").pluck('children') //⇒ [HTMLCollection[4]]

attr

读取或设置dom的属性。

$(".button").attr({"class":"","style":"background:red"}) //⇒ self 设置红色清空class
$(".button").attr("class","name")  //⇒ self 设置class替换之前的
$(".button").attr("class")  //⇒ string 获取class属性值

removeAttr

移动当前对象集合中所有元素的指定属性。

$("#box").removeAttr("class") //⇒ self 移除class

CSS 类

css

获取或设置节点对象的style样式内容。

$("#box").css('color','yellow')     //⇒ self 返回Array 节点内容
$("#box").css({'color':'yellow'})   //⇒ self 返回Array 节点内容

hasClass

集合中是否有节点对象含有指定的class。

$("#box").hasClass('box2') //⇒ true

addClass

为每个匹配的节点对象添加指定的class类名。

$("#box").addClass('box23 go') //⇒ self 原有对象class上添加 box23和 go

$("#box").addClass(function(){
    return 'box23 wcj'
}) //⇒ self 原有对象class上添加 box23 和wcj

removeClass

清除节点对象中所有节点对象的指定class类名，不填写清空。

$("#box").removeClass('box23') //⇒ self 删除原有对象class中box23
$("div").removeClass() //⇒ self  所有匹配的对象class属性被删除

toggleClass

在匹配的节点对象集合中的每个节点对象上添加或删除一个或多个样式类。

$("#box").toggleClass('box1 box2') //⇒ self 原有对象class上添加 "box1 box2"或者删除"box1 box2"

效果

toggle

显示或隐藏匹配节点对象。

$("#box").toggle() //⇒ self 原有对象如果隐藏就显示，如果显示就隐藏。

show

显示匹配节点对象。

$("#box").show() //⇒ self 显示匹配节点对象

hide

隐藏匹配节点对象。

$("#box").hide() //⇒ self 隐藏匹配的对象

尺寸位置

offset

获得当前元素相对于document的位置。返回一个对象含有：left|top|width|height

$("#box").offset()  //⇒Object {left: 8, top: 8, width: 1260, height: 0}
$("#box").offset().left  //⇒  8

width

width() ⇒ number
width(value) ⇒ self
width(function(index, oldWidth){ ... }) ⇒ self
获取对象象集合中第一个元素的宽，或设置对象集合所有元素的宽。

$('#box').width()   // => 342
$(window).width()   // => 456 (可视区域宽度)
$(document).width() // => dsf

height

height() ⇒ number
height(value) ⇒ self
height(function(index, oldWidth){ ... }) ⇒ self
获取对象象集合中第一个元素的高，或设置对象集合所有元素的高。

$('#box').height()   // => 342
$(window).height()   // => 456 (可视区域高度)
$(document).height() // => dsf

过滤

filter

筛选出与指定表达式匹配的元素集合。filter(selector) 。

$("div").filter("#box") //⇒ self 在所有的div对象中选择器为 #box 的过滤出来。

not

not(selector) ⇒ collection
not(collection) ⇒ collection
not(function(index){ ... }) ⇒ collection
筛选出与 非 指定表达式匹配的元素集合。它的作用刚好与 filter 相反，返回。

$("#select option").not(function(idx){
    console.log(this.selected)
    return this.selected
})
//⇒ []
$('input').not('#input') //⇒ 返回除去 匹配到的#input

$('input').not(function(){
    console.log(this.type)
    return this.type=='text'
})

删除节点

empty

所有匹配节点对象集合中移除所有的dom子节点，不包括自己，清空内容。

$("#box").empty()
//⇒ self

remove

删除所有匹配节点对象【自己】及所有【自己】里面的内容。

$("#box").remove()
//⇒ self

detach !

被遗弃的方法(不建议使用)，作用跟remove一样，所有绑定的事件、附加的数据等都会保留下来。

$("#box").click(function(){
    console.log("wcj")
})
var a = $('#box').detach();//删除的对象赋给a
$('body').append(a)//将a添加到 body 中还是可以点击

查找节点

find

后代节点的集合(可以带上滤选择器)。

$("#box").find()        //⇒后代节点的集合
$("#box").find(".box")  //⇒后代节点的集合，返回匹配'.box' 的集合

children

获得每个匹配元素集合元素的直接子元素(可以带上滤选择器)。

$("#box").children()
//下面这种方法也可以的 CSS3 节点选择器 -_+
$("#box *")

contents() ⇒ collection
获得每个匹配元素集合元素的子元素，包括文字和注释节点。

$("#box").contents()

parent

对象集合中每个元素的直接父元素。

$("#box").parent()

parents

获取对象集合每个元素所有的祖先元素（不包含根元素）。
parents([selector]) ⇒ collection

$("#box").parents()

$("#boxWhy").parents(".boxss")

closest

从元素本身开始，逐级向上级元素匹配，并返回最先匹配selector的祖先元素。如果context节点参数存在。那么直考虑该节点的后代。这个方法与 parents(selector)有点相像，但他只返回最先匹配的祖先元素。

$("#box").closest('div')

$(document).bind("click", function(e) {
    console.log(e.target)//当前点击的对象
    $(e.target).closest("li").css('background','red');
});

$("#boxWhy").closest('.boxss',$('#box')[0])//#boxWhy节点的父节点为："$('#box')[0]"的子节点".boxss"

获取对象集合每个元素的所有上一个对象(可以带上滤选择器)。

$("#box").prev("div")

获取对象集合每个元素的所有下一个对象(可以带上滤选择器)。

$("#box").next("div")

prevAll

获取对此对象【上】所有兄弟对象(可以带上滤选择器)。

$("#box").prevAll("div")

nextAll

获取对此对象【下】所有兄弟对象(可以带上滤选择器)。

$("#box").nextAll("div")

siblings

获取对此对象【其它】所有兄弟对象(可以带上滤选择器)。

$("#box").siblings()

add

添加元素到匹配的JSLite对象集合

$("#box").siblings()

插入节点方法

prepend

插入到标签开始标记之后（里面的第一个）。
prepend(content) ⇒ self
prepend(Function) ⇒ self

$("#box").prepend("dd") //⇒ self
$("#box").prepend(function(){
    return "asdfasdf"
}) //⇒ self

prependTo

将生成的内容插入到匹配的节点标签开始标记之后。这有点像prepend，但是是相反的方式。
prependTo(selector) ⇒ self

$('test
').prependTo('#box')

append

插入到标签结束标记前（里面的结尾）。
append(content) ⇒ self
append(Function) ⇒ self

$("#box").append("dd") //⇒ self

$("#box").append(function(){
    return "asdfasdf"
}) //⇒ self

appendTo

appendTo(selector) ⇒ self
将生成的内容插入到匹配的元素标签结束标记前（里面的最后）。这个有点像append，但是插入的目标与其相反。

$('test
').appendTo('#box')

after

插入到标签结束标记后。（兄弟节点的下面）
after(content) ⇒ self
after(Function) ⇒ self

$("#box").after("dd") //⇒ self
$("#box").after(function(){
    return "asdfasdf"
}) //⇒ self

insertAfter

插入的对象集合中的元素到指定的每个元素后面的dom中。这个有点像 after，但是使用方式相反。
insertAfter(selector) ⇒ self

$('test').insertAfter('#box') //⇒ self
$('#input').insertAfter('#box')        //⇒ self  $('#input')

before

插入到标签开始前。
after(content) ⇒ self
after(Function) ⇒ self

$("#box").before($('input')) //⇒ self
$("#box").before(function(){
    return "asdfasdf"
}) //⇒ self

insertBefore

insertBefore(selector) ⇒ self
将生成的内容插入 selector 匹配的节点标签开始前。这个有点像 before，但是使用方式相反。

$('test
').insertBefore('#box')

clone

clone() ⇒ collection
通过深度克隆来复制集合中的所有元素。(通过原生 cloneNode 方法深度克隆来复制集合中的所有元素。此方法不会有数据和事件处理程序复制到新的元素。这点和jquery中利用一个参数来确定是否复制数据和事件处理不相同。)

$('body').append($("#box").clone())

事件处理

blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error 对象上直接添加事件。

$("#box").click(function(){
    console.log("绑定点击事件")
});

ready

ready(function($){ ... }) ⇒ self
添加一个事件侦听器，当页面 dom 加载完毕 DOMContentLoaded 事件触发时触发。加载完毕执行，建议使用 $(func) 来代替这种用法。

$(document).ready(function(){
    alert("当页面dom加载完毕执行");
    console.log($("#box"));
})

$(func)

加载完毕执行。与 ready 方法相同

//或者使用下面方法代替ready
$(function(){
    console.log("当页面dom加载完毕执行");
})

bind

为每个匹配元素的特定事件绑定事件处理函数。可以绑定这些事件 blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error paste drop dragover 。

$("#box").bind("click", function(){
    console.log("绑定点击事件")
});

unbind

解除绑定事件，从每一个匹配的节点对象中删除绑定的事件。

var f1=function(){alert('41');}
$("#box").bind("click",f1)   //⇒ 绑定事件
$("#box").unbind("click",f1) //⇒ 解除绑定事件

$("#box").bind("click",function(){alert('41');})   //⇒ 绑定事件
$("#box").unbind("click",function(){alert('41');}) //⇒ 解除绑定事件

on