域名：JSLite.io
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)
选择器$
选择器使用的是浏览器自带的方法的 document.querySelectorAll 接口，支持标准的 CSS 选择器，没有使用jQuery作者John Resig开发的DOM选择器引擎(Dom Selector Engine) Sizzle 。目前 IE8/9及Firefox/Chrome/Safari/Opera 的最新版已经支持 querySelectorAll 。
$(selector) //⇒ 选择节点
$(“”) //⇒ 生成节点
$(“htmlString”) //⇒ 生成
JSLite(function($){ … }) //⇒ 相当于ready
js$("#box") //⇒ 返回节点数组 //⇒ [<div>…</div>]
$("<div></div>") //⇒ 生成div节点
//JSLite(func) 相当于ready
JSLite(function($){
console.log("在节点加载完成之后执行")
})
//$(func) 相当于ready
$(function($){
console.log("在节点加载完成之后执行")
})
插件编写
$.extend
通过源对象扩展目标对象的属性，扩展 JSLite 元素集来提供新的方法（通常用来制作插件）
js$.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 元素集来提供新的方法（通常用来制作插件）。
js$.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 事件。
js$.error("2222")
//⇒ 输出错误 Uncaught 2222
URL
$.getUrlParam
获取 url 参数的值。
js//[URL] = http://blog.pc175.com/?param=2
$.getUrlParam("param") //⇒ 2
$.param
将表单元素数组或者对象序列化。如果shallow设置为true，嵌套对象不会被序列化，嵌套数组的值不会使用放括号在他们的key上。
$.param(object, [shallow]) ⇒ string
$.param(array) ⇒ string
js$.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"
数组对象操作
$.intersect
数组交集
js$.intersect([1,2,3,'asdkjf'],[2,3,6,'asdkjf'])
//⇒ [2, 3, "asdkjf"]
$.sibling
根据类型获取节点对象属性的集合 (node,type)。
js$.sibling($("input"),"type") //⇒ ["text", "button", "checkbox"]
$.sibling($("input"),"tagName") //⇒ ["INPUT"]
$.inArray
搜索数组中指定值并返回它的索引（如果没有找到则返回-1)。
jsvar 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 将被过滤掉。
js$.map({"w":1,"c":2,"j":3},function(item,index){
return index
});
//⇒ ["w", "c", "j"]
$.each
通用例遍方法，可用于例遍对象和数组
js$.each(['a', 'b', 'c'], function(index, item){
console.log('item %d is: %s', index, item)
})
测试操作
$.isDocument
判断对象是否为【document】。
js$.isDocument(document) //⇒ true
$.isFunction
判断对象是否为函数【function】。
js$.isFunction(function(){}) //⇒ true
$.isObject
判断是否为 Object 。
js$.isObject({}) //⇒ true
$.isPlainObject
$.isPlainObject(object) ⇒ boolean
如果通过 “{}” 或者 “new Object” 创建的则返回true。判断对象是否是纯粹的对象。
js$.isPlainObject({}) // => true
$.isPlainObject(new Object) // => true
$.isPlainObject(new Date) // => false
$.isPlainObject(window) // => false
$.isArray
判断是否为【数组】。
js$.isArray([1,2,3]) //⇒ true
$.isJson
判断是否为【数组】。
js$.isJson({}) //⇒ true
$.isContainsNode
parent是否包含node节点对象。
js$.isContainsNode($("#box")[0],$(".boxss")[0]) //⇒ parent是否包含node节点对象
$.likeArray
判断对象是否为数组或者是字符。
js$.likeArray([1,2,3]) //⇒ true
$.likeArray("222") //⇒ true
$.type
获取JavaScript 对象的类型。可能的类型有： null undefined boolean number string function array date regexp object error 。
js$.type(true) //⇒ Boolean
$.type("div") //⇒ String
$.matches
如果当前节点能被指定的css选择器查找到，则返回true，否则返回false。
$.matches(element,selector) ⇒ boolean
js$.matches($("#box")[0], "#box")//⇒ true
is
判断当前匹配的元素集合中的元素，是否为一个选择器，DOM元素
is(selector) ⇒ boolean
is(element) ⇒ boolean
js$('#box').is('div'); //⇒ true
$('#box').is('#box'); //⇒ true
$('#box').is('#boxsss'); //⇒ flase
$('div').is($('#box')[0]) //⇒ true 节点是否在 $('#box')[0] 是否再集合中
对象访问
each
遍历一个 JSLite 集合对象，为每一个匹配元素执行一个函数。this关键字指向当前item(作为函数的第二个参数传递)。如果函数返回 false，遍历结束。
js$("img").each(function(i){
this.src = "test" + i + ".jpg";
});
//⇒ 找到所有的img对象给设置src
//⇒ 返回 [ <img src="test0.jpg" />, <img src="test1.jpg" /> ]
map
遍历节点对象集合中的所有节点对象返回一个新的集合对象
js$(".box").map(function(index,item){
return $(this).text()
})
//⇒ 返回 ["12boxOne", "6", "11", "22123456", "7123123"]
forEach
类似 each，forEach遍历不会停止。
js//遍历数组
[1,5,2,3].forEach(function(item,index,array){
console.log(d)
})
//遍历节点
$("img").forEach(function(item,index,array){
console.log(d)
})
eq
指定匹配元素的集合为的索引的哪一个元素。一个整数，指示元素的位置，以 0 为基数。
eq(index) ⇒ collection
eq(-index) ⇒ collection
js$("div").eq(0)//⇒ 返回数组第一个节点数组 [div#box.boxOne.box2.box3, init: function…]
$("div").eq(-1)//⇒ 倒数第一个节点数组
$("div").eq(-2)//⇒ 倒数第二个节点数组
get
当前对象集合中获取所有节点对象或单个节点对象。
js$("div").get(0)//⇒ 返回节点 <div id="box" class="boxOne box2 box3" ></div>
indexOf
在当前获取的节点数组中获取一个元素在这个数组的位置。
js$("div").indexOf($("#box")[0])
//⇒ 2
length
对象中元素的个数。
js$("img").length;
//⇒ 2
HTML代码/文本/值
text
取得所有匹配节点对象的文本内容。
js$("#box").text()
//⇒ string 返回文本
html
获取或设置节点对象内容。
js$("#box").html()
//⇒ string 返回包括HTML的文本
val
获取设置input的 value 。
js$('input').val() //⇒ string
$('input').val('test') //⇒ self
$('#input').val(function(index,oldvalue){
console.log(index,oldvalue)
return '111' + oldvalue
}) //⇒ self
节点属性
pluck
获取对象集合中每一个元素的属性值。
js$("#box").pluck("nodeName") //⇒ ["DIV"]
$("#box").pluck("nextElementSibling") //⇒ <div class="boxs">1234567890</div>
$("#box").pluck('children') //⇒ [HTMLCollection[4]]
attr
读取或设置dom的属性。
js$(".button").attr({"class":"","style":"background:red"}) //⇒ self 设置红色清空class
$(".button").attr("class","name") //⇒ self 设置class替换之前的
$(".button").attr("class") //⇒ string 获取class属性值
removeAttr
移动当前对象集合中所有元素的指定属性。
js$("#box").removeAttr("class") //⇒ self 移除class
CSS 类
css
获取或设置节点对象的style样式内容。
js$("#box").css('color','yellow') //⇒ self 返回Array 节点内容
$("#box").css({'color':'yellow'}) //⇒ self 返回Array 节点内容
hasClass
集合中是否有节点对象含有指定的class。
js$("#box").hasClass('box2') //⇒ true
addClass
为每个匹配的节点对象添加指定的class类名。
js$("#box").addClass('box23') //⇒ self 原有对象class上添加 box23
removeClass
清除节点对象中所有节点对象的指定class类名，不填写清空。
js$("#box").removeClass('box23') //⇒ self 删除原有对象class中box23
$("div").removeClass() //⇒ self 所有匹配的对象class属性被删除
toggleClass
在匹配的节点对象集合中的每个节点对象上添加或删除一个或多个样式类。
js$("#box").toggleClass('box1 box2') //⇒ self 原有对象class上添加 "box1 box2"或者删除"box1 box2"
效果
toggle
显示或隐藏匹配节点对象。
js$("#box").toggle() //⇒ self 原有对象如果隐藏就显示，如果显示就隐藏。
show
显示匹配节点对象。
js$("#box").show() //⇒ self 显示匹配节点对象
hide
隐藏匹配节点对象。
js$("#box").hide() //⇒ self 隐藏匹配的对象
尺寸位置
offset
获得当前元素相对于document的位置。返回一个对象含有：left|top|width|height
js$("#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
获取对象象集合中第一个元素的宽，或设置对象集合所有元素的宽。
js$('#box').width() // => 342
$(window).width() // => 456 (可视区域宽度)
$(document).width() // => dsf
height
height() ⇒ number
height(value) ⇒ self
height(function(index, oldWidth){ … }) ⇒ self
获取对象象集合中第一个元素的高，或设置对象集合所有元素的高。
js$('#box').height() // => 342
$(window).height() // => 456 (可视区域高度)
$(document).height() // => dsf
过滤
filter
筛选出与指定表达式匹配的元素集合。filter(selector)。
js$("div").filter("#box") //⇒ self 在所有的div对象中选择器为 #box 的过滤出来。
not
not(selector) ⇒ collection
not(collection) ⇒ collection
not(function(index){ … }) ⇒ collection
筛选出与 非 指定表达式匹配的元素集合。它的作用刚好与 filter 相反，返回。
js$("#select option").not(function(idx){
console.log(this.selected)
return this.selected
})
//⇒ [<option value="3">哈哈3</option>]
$('input').not('#input') //⇒ 返回除去 匹配到的#input
$('input').not(function(){
console.log(this.type)
return this.type=='text'
})
删除节点
empty
所有匹配节点对象集合中移除所有的dom子节点，不包括自己，清空内容。
js$("#box").empty()
//⇒ self <div id="box" class="boxOne box2 box3" ></div>
remove
删除所有匹配节点对象【自己】及所有【自己】里面的内容。
js$("#box").remove()
//⇒ self <div id="box" class="boxOne box2 box3" ></div>
detach !
被遗弃的方法(不建议使用)，作用跟remove一样，所有绑定的事件、附加的数据等都会保留下来。
js$("#box").click(function(){
console.log("wcj")
})
var a = $('#box').detach();//删除的对象赋给a
$('body').append(a)//将a添加到 body 中还是可以点击
查找节点
find
后代节点的集合(可以带上滤选择器)。
js$("#box").find() //⇒后代节点的集合
$("#box").find(".box") //⇒后代节点的集合，返回匹配'.box' 的集合
children
获得每个匹配元素集合元素的直接子元素(可以带上滤选择器)。
js$("#box").children()
parent
对象集合中每个元素的直接父元素。
js$("#box").parent()
parents
获取对象集合每个元素所有的祖先元素（不包含根元素）。
js$("#box").parents()
prev
获取对象集合每个元素的所有上一个对象(可以带上滤选择器)。
js$("#box").prev("div")
next
获取对象集合每个元素的所有下一个对象(可以带上滤选择器)。
js$("#box").next("div")
prevAll
获取对此对象【上】所有兄弟对象(可以带上滤选择器)。
js$("#box").prevAll("div")
nextAll
获取对此对象【下】所有兄弟对象(可以带上滤选择器)。
js$("#box").nextAll("div")
siblings
获取对此对象【其它】所有兄弟对象(可以带上滤选择器)。
js$("#box").siblings()
插入节点方法
before
插入到标签开始前（兄弟节点的上面）。
js$("#box").before("dd") //⇒ self
prepend
插入到标签开始标记之后（里面的第一个）。
js$("#box").prepend("dd") //⇒ self
prependTo
prependTo(selector) ⇒ self
将生成的内容插入到匹配的节点标签开始标记之后。这有点像prepend，但是是相反的方式。
js$('<div>test</div>').prependTo('#box')
append
插入到标签结束标记前（里面的结尾）。
js$("#box").append("dd") //⇒ self
appendTo
appendTo(selector) ⇒ self
将生成的内容插入到匹配的元素标签结束标记前（里面的最后）。这个有点像append，但是插入的目标与其相反。
js$('<div>test</div>').appendTo('#box')
after
插入到标签结束标记后。（兄弟节点的下面）
js$("#box").after("dd") //⇒ self
insertAfter
insertAfter(selector) ⇒ self
插入的对象集合中的元素到指定的每个元素后面的dom中。这个有点像 after，但是使用方式相反。
js$('<p>test</p>').insertAfter('#box') //⇒ self
$('#input').insertAfter('#box') //⇒ self $('#input')
before
插入到标签开始前。
js$("#box").before($('input')) //⇒ self
insertBefore
insertBefore(selector) ⇒ self
将生成的内容插入 selector 匹配的节点标签开始前。这个有点像 before，但是使用方式相反。
js$('<p>test</p>').insertBefore('#box')
clone
clone() ⇒ collection
通过深度克隆来复制集合中的所有元素。(通过原生 cloneNode 方法深度克隆来复制集合中的所有元素。此方法不会有数据和事件处理�% console.log('ok', cdata)
})
$.ajax({
type:'GET',
dataType:'json',
data:{'nike':'a'},
url:'http://127.0.0.1/api.php',
success:function(data){
console.log('success:',data)
},
error:function(d){
console.log('error:',d)
}
})
ajax post
js$.post('http://127.0.0.1/api.php', {'nike':0},
function(cdata) {
console.log('ok', cdata)
})
ajax POST请求
jsvar data = { 'key': 'key', 'from': 'from'}
$.ajax('POST', 'http://127.0.0.1/api.php', data,
function(data) {
console.log('ok', data)
},'json')
$.ajax({
type:'POST',
dataType:'json',
data:{"nike":"123","kacper":{"go":34,"to":100}},
url:'http://127.0.0.1/api.php',
success:function(data){
console.log('success:',data)
},
error:function(d){
console.log('error:',d)
}
})
$.ajax({
type:'POST',
dataType:'json',
data:JSON.stringify('{"nike":"123","kacper":{"go":34,"to":100}}'),
url:'http://127.0.0.1/api.php',
success:function(data){
console.log('success:',data)
},
error:function(d){
console.log('error:',d)
}
})
$.ajax({
type:'POST',
dataType:'json',
data:JSON.stringify({'nike':'a'}),
url:'http://127.0.0.1/api.php',
success:function(data){
console.log('success:',data)
},
error:function(d){
console.log('error:',d)
}
})
$.ajax({
type:'POST',
data:{'nike':'a'},
url:'http://127.0.0.1/api.php',
success:function(data){
console.log('success:',data)
},
error:function(d){
console.log('error:',d)
}
})
$.ajax({
type:'POST',
dataType:'json',
data:{'nike':'a'},
url:'http://127.0.0.1/api.php',
success:function(data){
console.log('success:',data)
},
error:function(d){
console.log('error:',d)
},
headers: {
"Access-Control-Allow-Origin":"http://pc175.com",
"Access-Control-Allow-Headers":"X-Requested-With"
},
contentType: 'application/json'
})
Form
表单提交的一些方法
submit
submit() 方法把表单数据提交到 Web 服务器。这个是原生态提供的方法，还没有封装更改 *。
js$('form')[0].submit() //此处直接原生态提交表单，日后封装，直接在JSLite对象上就可以提交。
serializeArray
将用作提交的表单元素的值组合成拥有name和value的键值对组成的数组。不能使用的表单元素，buttons，未选中的radio buttons/checkboxs 将会被跳过。结果不包含file inputs的数据。
js$('form').serializeArray();
//=> [{"name":"golang","value":"456"},{"name":"name","value":""},{"name":"password","value":""},{"name":"sel","value":[]},{"name":"kaikai","value":""},{"name":"w","value":""},{"name":"w","value":""}]
serialize
将表单元素数组或者对象序列化。
js$('form').serialize();
//=> golang=456&name=&password=&sel=&kaikai=&w=asd&w2=asdf
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jQuery