Jquery中文網 www.twdanq.live
Jquery中文網 >  jQuery  >  jquery 教程  >  正文 JSLite 與jQuery有著類似的api,模仿jQuery的語法規范,并不是100%的覆蓋【官方文檔】

JSLite 與jQuery有著類似的api,模仿jQuery的語法規范,并不是100%的覆蓋【官方文檔】

發布時間:2016-09-18   編輯:www.twdanq.live
jquery中文網為您提供JSLite 與jQuery有著類似的api,模仿jQuery的語法規范,并不是100%的覆蓋【官方文檔】等資源,歡迎您收藏本站,我們將為您提供最新的JSLite 與jQuery有著類似的api,模仿jQuery的語法規范,并不是100%的覆蓋【官方文檔】資源

域名:JSLite.io

  1. jquery 的目標是兼容所有主流瀏覽器,這就意味著它的大量代碼對移動端的瀏覽器是無用或者低效的。
  2. 而 JSLite 只針對先進瀏覽器(支持HTML5,CSS3)、移動端瀏覽器編寫,使用js新方法實現jQuery API,因此體積更小、效率更高.
  3. 更重要的是,JSLite 的 API 完全仿照 jQuery ,所以學習成本也很低。
  4. JSLite與jQuery有著絕大部分類似的api,通用庫只有5-10k,手機上每一kb都是錢。
  5. 讓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)

如有疑問歡迎到這些地方交流:

QQ交流群:397463673
segmentfault社區 | 官方網站 | 官方文檔-更詳細

選擇器$

選擇器使用的是瀏覽器自帶的方法的 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

通過遍歷集合中的節點對象,通過函數返回一個新的數組,nullundefined 將被過濾掉。

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 方法深度克隆來復制集合中的所有元素。此方法不會有數據和事件處理程序復制到新的元素。這點和jquery中利用一個參數來確定是否復制數據和事件處理不相同。)

js$('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 對象上直接添加事件。

js$("#box").click(function(){
    console.log("綁定點擊事件")
});

ready

ready(function($){ … }) ? self
添加一個事件偵聽器,當頁面 dom 加載完畢 DOMContentLoaded 事件觸發時觸發。加載完畢執行,建議使用 $(func) 來代替這種用法。

js$(document).ready(function(){
    alert("當頁面dom加載完畢執行");
    console.log($$("#box"));
})

$(func)

加載完畢執行。與 ready 方法相同

js//或者使用下面方法代替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

js$("#box").bind("click", function(){
    console.log("綁定點擊事件")
});

unbind

解除綁定事件,從每一個匹配的節點對象中刪除綁定的事件。

jsvar 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

js$("#box").on("click", function(){
    console.log("綁定點擊事件")
});

$("#box").on('click mouseup',function(evn,a){
    console.log('2'+a)
}) //? self  綁定兩個事件

off

解除綁定事件,從每一個匹配的節點對象中刪除綁定的事件。

jsvar 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參數,它會作為參數傳遞給事件函數。

js$("#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對象
dataType:(json, jsonp, xml, html, or text)
contentType:一個額外的”{鍵:值}”對映射到請求一起發送
headers:(默認:{}): 一個額外的”{鍵:值}”對映射到請求一起發送
url:發送請求的地址
async:此參數不傳默認為true(同步請求),false異步請求
success(cdata):請求成功之后調用。傳入返回后的數據,以及包含成功代碼的字符串。
error(status, statusText):請求出錯時調用。 (超時,解析錯誤,或者狀態碼不在HTTP 2xx)。

ajax get

js$.get('http://127.0.0.1/api.php?wcj=123', 
function(cdata) {
    console.log('ok', cdata)
})

ajax GET請求

js$.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

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

您可能感興趣的文章:
BOM與DOM的區別分析
JQuery 學習技巧總結
jQuery 技巧大全(新手入門篇)
jQuery語法總結和注意事項小結
jQuery技巧總結
Jquery AJAX 框架的使用方法
jQuery 練習[一] 學習jquery的準備工作
jquery常用技巧及常用方法列表集合
jQuery中的常用事件總結
讀jQuery之六 緩存數據功能介紹

[關閉]
广西快乐10分怎样开奖号码