[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
<script type="text/javascript" src="JSLite.js"></script>
中心
$()
挑选器运用的是浏览器自带的要领的
document.querySelectorAll
接口,支撑规范的 CSS 挑选器,没有运用jQuery作者John Resig开辟的DOM挑选器引擎(Dom Selector Engine)Sizzle
。现在 IE8/9及Firefox/Chrome/Safari/Opera 的最新版已支撑querySelectorAll
。
$(selector) //⇒ 挑选节点
$(“<DOM nodes>”) //⇒ 天生节点
$(“htmlString”) //⇒ 天生
JSLite(function($){ … }) //⇒ 相当于ready
$("#box") //⇒ 返回节点数组 //⇒ [<div>…</div>]
$("<div></div>") //⇒ 天生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
//⇒ 返回 [ <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(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)//⇒ 返回节点 <div id="box" class="boxOne box2 box3" ></div>
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") //⇒ <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 移除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
})
//⇒ [<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>
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
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"
prev
猎取对象鸠合每一个元素的一切上一个对象(能够带上滤挑选器)。
$("#box").prev("div")
next
猎取对象鸠合每一个元素的一切下一个对象(能够带上滤挑选器)。
$("#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
$('<div>test</div>').prependTo('#box')
append
插进去到标签终了标记前(内里的末端)。
append(content) ⇒ self
append(Function) ⇒ self
$("#box").append("dd") //⇒ self
$("#box").append(function(){
return "asdfasdf"
}) //⇒ self
appendTo
appendTo(selector) ⇒ self
将天生的内容插进去到婚配的元素标签终了标记前(内里的末了)。这个有点像append,然则插进去的目的与其相反。
$('<div>test</div>').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
$('<p>test</p>').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,然则运用体式格局相反。
$('<p>test</p>').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
为每一个婚配元素的特定事宜绑定事宜处置惩罚函数。能够绑定这些事宜
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").on("click", function(){
console.log("绑定点击事宜")
});
$("#box").on('click mouseover',function(evn){
console.log('2'+evn)
}) //⇒ self 绑定两个事宜
$("#box").on("click",{val:1},function(){//传参数
console.log("dddd","event.data.val = " + event.data.val)
})
$( "#box" ).on({ //绑定多个事宜
click: function() {
$( this ).css("background","red");
},
mouseover: function() {
$( this ).css("background","yellow")
},
mousedown: function() {
$( this ).css("background","green")
}
});
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');}) //⇒ 消除绑定事宜
trigger
trigger(event, [args]) ⇒ self
婚配到的节点鸠合的元素上触发指定的事宜。假如给定args参数,它会作为参数通报给事宜函数。
$("#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”)
data:(默许:none)发送到服务器的数据;假如是get要求,它会自动被作为参数拼接到url上。非String对象
processData (默许: true): 关于非Get要求。是不是自动将 data 转换为字符串。
dataType:(json
,jsonp
,xml
,html
, ortext
)
contentType:一个分外的”{键:值}”对映射到要求一同发送
headers:(默许:{}): 一个分外的”{键:值}”对映射到要求一同发送
url:发送要求的地点
async:此参数不传默许为true(同步要求),false异步要求
success(cdata):要求胜利以后挪用。传入返回后的数据,以及包含胜利代码的字符串。
error(status, statusText):要求失足时挪用。 (超时,剖析毛病,或许状况码不在HTTP 2xx)。
$.get
$.get(url, function(data, status, xhr){ … }) ⇒ XMLHttpRequest
$.get(url, [data], [function(data, status, xhr){ … }], [dataType]) ⇒ XMLHttpRequest
$.get('http://127.0.0.1/api.php?wcj=123', function(cdata) {
console.log('ok', cdata)
},'json')
$.get('http://127.0.0.1/api.php?wcj=123',{"JSLite":4}, function(cdata) {
console.log('ok', cdata)
})
$.ajax(GET)
JSLite独占….
$.ajax('GET', 'http://127.0.0.1/api.php', {"wcj":"123","ok":'11'},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)
}
})
$.post
$.post(url, [data], function(data, status, xhr){ … }, [dataType])
$.post('http://127.0.0.1/api.php', {'nike':0},
function(cdata) {
console.log('ok', cdata)
})
$.ajax(POST)
JSLite独占….
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
表单提交的一些要领
submit
submit() 要领把表单数据提交到 Web 服务器。这个是原生态供应的要领,还没有封装变动 *。
$('form')[0].submit() //此处直接原生态提交表单,往后封装,直接在JSLite对象上就能够提交。
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