JSLite[官方网站](http://blog.pc175.com/JSLite/) [官方文档-更详细](http://blog.pc175.com/JSLite/doc/) 让web开发更迅速,下载执行更快、量级更轻,针对现代高级浏览器的JavaScript库。 推进前端开发标准对于攻城师来说,人人有责。 选择器$选择器使用的是浏览器自带的方法封装的 querySelectorAll ,没有使用jQuery作者John Resig开发的DOM选择器引擎(Dom Selector Engine) Sizzle 。目前 IE8/9及Firefox/Chrome/Safari/Opera 的最新版已经支持 querySelectorAll 。 $(selector) //⇒ 选择节点 $("#box") //⇒ 返回节点数组 //⇒ [<div>…</div>]
$("<div></div>") //⇒ 生成div节点
//JSLite(func) 相当于ready
JSLite(function($){
console.log("在节点加载完成之后执行")
})
//$(func) 相当于ready
$(function($){
console.log("在节点加载完成之后执行")
})插件编写$.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 2222URL$.getUrlParam获取 url 参数的值。 //[URL] = http://blog.pc175.com/?param=2
$.getUrlParam("param") //⇒ 2$.param将表单元素数组或者对象序列化。如果shallow设置为true,嵌套对象不会被序列化,嵌套数组的值不会使用放括号在他们的key上。 $.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数组交集 $.intersect([1,2,3,'asdkjf'],[2,3,6,'asdkjf']) //⇒ [2, 3, "asdkjf"] $.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(item,index){
return index
});
//⇒ ["w", "c", "j"]$.each通用例遍方法,可用于例遍对象和数组 $.each(['a', 'b', 'c'], function(index, item){
console.log('item %d is: %s', index, item)
})测试操作$.isDocument判断对象是否为【document】。 $.isDocument(document) //⇒ true $.isFunction判断对象是否为函数【function】。 $.isFunction(function(){}) //⇒ true$.isObject判断是否为 Object 。 $.isObject({}) //⇒ true$.isPlainObject$.isPlainObject(object) ⇒ boolean $.isPlainObject({}) // => true
$.isPlainObject(new Object) // => true
$.isPlainObject(new Date) // => false
$.isPlainObject(window) // => false$.isArray判断是否为【数组】。 $.isArray([1,2,3]) //⇒ true $.isJson判断是否为【数组】。 $.isJson({}) //⇒ true$.isContainsNodeparent是否包含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)。 $.matches($("#box")[0], "#box")
//⇒ true 对象访问each遍历一个 JSLite 集合对象,为每一个匹配元素执行一个函数。this关键字指向当前item(作为函数的第二个参数传递)。如果函数返回 false,遍历结束。 $("img").each(function(i){
this.src = "test" + i + ".jpg";
});
//⇒ 找到所有的img对象给设置src
//⇒ 返回 [ <img src="test0.jpg" />, <img src="test1.jpg" /> ]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(d)
})
//遍历节点
$("img").forEach(function(item,index,array){
console.log(d)
})get当前对象集合中获取所有节点对象或单个节点对象。 $("div").get(0)
//⇒ 返回节点 <div id="box" class="boxOne box2 box3" ></div>indexOf在当前获取的节点数组中获取一个元素在这个数组的位置。 $("div").indexOf($("#box")[0])
//⇒ 2length对象中元素的个数。 $("img").length;
//⇒ 2HTML代码/文本/值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") //⇒ <div class="boxs">1234567890</div>
$("#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 移除classCSS 类css获取或设置节点对象的style样式内容。 $("#box").css('color','yellow') //⇒ self 返回Array 节点内容
$("#box").css({'color':'yellow'}) //⇒ self 返回Array 节点内容hasClass集合中是否有节点对象含有指定的class。 $("#box").hasClass('box2') //⇒ trueaddClass为每个匹配的节点对象添加指定的class类名。 $("#box").addClass('box23') //⇒ self 原有对象class上添加 box23removeClass清除节点对象中所有节点对象的指定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 //⇒ 8widthwidth() ⇒ number width(value) ⇒ self width(function(index, oldWidth){ ... }) ⇒ self 获取对象象集合中第一个元素的宽,或设置对象集合所有元素的宽。 $('#box').width() // => 342
$(window).width() // => 456 (可视区域宽度)
$(document).width() // => dsf heightheight() ⇒ 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 的过滤出来。notnot(selector) ⇒ collection $("#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子节点,不包括自己,清空内容。 $("#box").empty()
//⇒ self <div id="box" class="boxOne box2 box3" ></div>remove删除所有匹配节点对象【自己】及所有【自己】里面的内容。 $("#box").remove()
//⇒ self <div id="box" class="boxOne box2 box3" ></div>查找节点find后代节点的集合(可以带上滤选择器)。 $("#box").find() //⇒后代节点的集合
$("#box").find(".box") //⇒后代节点的集合,返回匹配'.box' 的集合children获得每个匹配元素集合元素的直接子元素(可以带上滤选择器)。 $("#box").children()parent对象集合中每个元素的直接父元素。 $("#box").parent()parents获取对象集合每个元素所有的祖先元素(不包含根元素)。 $("#box").parents()prev获取对象集合每个元素的所有上一个对象(可以带上滤选择器)。 $("#box").prev("div")next获取对象集合每个元素的所有下一个对象(可以带上滤选择器)。 $("#box").next("div")prevAll获取对此对象【上】所有兄弟对象(可以带上滤选择器)。 $("#box").prevAll("div")nextAll获取对此对象【下】所有兄弟对象(可以带上滤选择器)。 $("#box").nextAll("div")siblings获取对此对象【其它】所有兄弟对象(可以带上滤选择器)。 $("#box").siblings()插入节点方法before插入到标签开始前(兄弟节点的上面)。 $("#box").before("dd") //⇒ selfprepend插入到标签开始标记之后(里面的第一个)。 $("#box").prepend("dd") //⇒ selfprependToprependTo(selector) ⇒ self $('<div>test</div>').prependTo('#box')append插入到标签结束标记前(里面的结尾)。 $("#box").append("dd") //⇒ selfappendToappendTo(selector) ⇒ self $('<div>test</div>').appendTo('#box')after插入到标签结束标记后。(兄弟节点的下面) $("#box").after("dd") //⇒ selfinsertAfterinsertAfter(selector) ⇒ self $('<p>test</p>').insertAfter('#box') //⇒ self
$('#input').insertAfter('#box') //⇒ self $('#input')before插入到标签开始前。 $("#box").before($('input')) //⇒ selfinsertBeforeinsertBefore(selector) ⇒ self $('<p>test</p>').insertBefore('#box')事件处理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("绑定点击事件")
});readyready(function($){ ... }) ⇒ self $(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。 $("#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为每个匹配元素的特定事件绑定事件处理函数。可以绑定这些事件 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").on("click", function(){
console.log("绑定点击事件")
});
$("#box").on('click mouseup',function(evn,a){
console.log('2'+a)
}) //⇒ self 绑定两个事件off解除绑定事件,从每一个匹配的节点对象中删除绑定的事件。 var f1=function(){alert('41');}
$("#box").on("click",f1) //⇒ 绑定事件
$("#box").off("click",f1) //⇒ 解除绑定事件
$("#box").on("click",function(){alert('41');}) //⇒ 绑定事件
$("#box").off("click",function(){alert('41');}) //⇒ 解除绑定事件triggertrigger(event, args) ⇒ self $("#box").on('abc:click',function(evn,a,c){
console.log('2'+a+c)
}) //⇒ self 绑定一个事件
$("#box").trigger('abc:click',['wwww']) //⇒ self 触发并传一个参数进去Ajax执行Ajax请求。 type:请求方法 ("GET", "POST") ajax get$.get('http://127.0.0.1/api.php?wcj=123',
function(cdata) {
console.log('ok', cdata)
})ajax GET请求$.ajax('GET', 'http://127.0.0.1/api.php', {"wcj":"123","ok":'11'},
function(cdata) {
console.log('ok', cdata)
})
$.ajax('GET', 'http://127.0.0.1/api.php?wcj=abc',
function(cdata) {
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$.post('http://127.0.0.1/api.php', {'nike':0},
function(cdata) {
console.log('ok', cdata)
})ajax POST请求var 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表单提交的一些方法 serializeArray将用作提交的表单元素的值组合成拥有name和value的键值对组成的数组。不能使用的表单元素,buttons,未选中的radio buttons/checkboxs 将会被跳过。结果不包含file inputs的数据。 $('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将表单元素数组或者对象序列化。 $('form').serialize();
//=> golang=456&name=&password=&sel=&kaikai=&w=asd&w2=asdf
|