亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

JSLite 與jQuery有著類似的api,模仿jQuery的語法規(guī)范,并不是100%的覆蓋【官方

Kyxy / 887人閱讀

摘要:與有著絕大部分類似的,通用庫只有,手機(jī)上每一都是錢。目前及的最新版已經(jīng)支持。在這個(gè)函數(shù)中,原來的對(duì)象是無效的。與方法相同,接受一個(gè)標(biāo)準(zhǔn)格式的字符串,并返回解析后的對(duì)象。這有點(diǎn)像,但是是相反的方式。

[JSLite.io]

如有疑問歡迎到這些地方交流,歡迎加入JSLite.io組織團(tuán)伙共同開發(fā)!

QQ交流群:397463673
segmentfault社區(qū) | 官方網(wǎng)站 | 官方文檔-更詳細(xì) | Issues

jQuery 的目標(biāo)是兼容所有主流瀏覽器,這就意味著它的大量代碼對(duì)移動(dòng)端的瀏覽器是無用或者低效的。

而 JSLite 只針對(duì)先進(jìn)瀏覽器(支持HTML5,CSS3)、移動(dòng)端瀏覽器編寫,使用js新方法實(shí)現(xiàn)jQuery API,因此體積更小、效率更高.

更重要的是,JSLite 的 API 完全仿照 jQuery ,所以學(xué)習(xí)成本也很低。

JSLite與jQuery有著絕大部分類似的api,通用庫只有5-10k,手機(jī)上每一kb都是錢。

讓web開發(fā)更迅速,下載執(zhí)行更快、量級(jí)更輕,針對(duì)現(xiàn)代高級(jí)瀏覽器的JavaScript庫。 推進(jìn)前端開發(fā)標(biāo)準(zhǔn)對(duì)于攻城師來說,人人有責(zé)。

瀏覽器兼容

此兼容,是根據(jù)我使用的一些js方法函數(shù)的支持情況來判斷的。設(shè)備過少,部分是根據(jù)developer.mozilla.org的方法函數(shù)兼容數(shù)據(jù)來判斷的,下面的我們的主要兼容目標(biāo)

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

傳統(tǒng)方法

去官網(wǎng)下載JSLite,github download

頁面Head標(biāo)簽內(nèi)引用 JSLite.js

核心 $()

選擇器使用的是瀏覽器自帶的方法的 document.querySelectorAll 接口,支持標(biāo)準(zhǔn)的 CSS 選擇器,沒有使用jQuery作者John Resig開發(fā)的DOM選擇器引擎(Dom Selector Engine) Sizzle 。目前 IE8/9及Firefox/Chrome/Safari/Opera 的最新版已經(jīng)支持 querySelectorAll 。
$(selector) //? 選擇節(jié)點(diǎn)
$("") //? 生成節(jié)點(diǎn)
$("htmlString") //? 生成
JSLite(function($){ ... }) //? 相當(dāng)于ready

$("#box") //? 返回節(jié)點(diǎn)數(shù)組  //? [
?…?
?] $("
") //? 生成div節(jié)點(diǎn) //JSLite(func) 相當(dāng)于ready JSLite(function($){ console.log("在節(jié)點(diǎn)加載完成之后執(zhí)行") }) //$(func) 相當(dāng)于ready $(function($){ console.log("在節(jié)點(diǎn)加載完成之后執(zhí)行") })
JSLite()

與$()相同。

noConflict

noConflict() 方法讓渡變量 $ 的 JSLite 控制權(quán),解決倆庫之間的$沖突。
該方法釋放 JSLite 對(duì) $ 變量的控制。
該方法也可用于為 JSLite 變量規(guī)定新的自定義名稱。

實(shí)例一
$.noConflict();
JSLite(document).ready(function($) {
// 使用 JSLite $ 的代碼
});
// 使用其他庫的 $ 的代碼
實(shí)例二

將 $ 引用的對(duì)象映射回原始的對(duì)象:

JSLite.noConflict();
JSLite("div p").hide(); // 使用 JSLite
$("content").style.display = "none";    // 使用其他庫的 $()
實(shí)例三

恢復(fù)使用別名 $,然后創(chuàng)建并執(zhí)行一個(gè)函數(shù),在這個(gè)函數(shù)的作用域中仍然將 $ 作為 JSLite 的別名來使用。在這個(gè)函數(shù)中,原來的 $ 對(duì)象是無效的。這個(gè)函數(shù)對(duì)于大多數(shù)不依賴于其他庫的插件都十分有效:

JSLite.noConflict();
(function($) { 
  $(function() {
    // 使用 $ 作為 JSLite 別名的代碼
  });
})(JSLite);

... // 其他用 $ 作為別名的庫的代碼
實(shí)例四

可以將 JSLite.noConflict() 與簡寫的 ready 結(jié)合,使代碼更緊湊

JSLite.noConflict()(function(){
    // 使用 JSLite 的代碼
    console.log($("div"))
});
實(shí)例五

創(chuàng)建一個(gè)新的別名用以在接下來的庫中使用 JSLite 對(duì)象:

var j = JSLite.noConflict();
j("#box").hide();  // 基于 JSLite 的代碼
$("content").style.display = "none";    // 基于其他庫的 $() 代碼
實(shí)例六

完全將 JSLite 移到一個(gè)新的命名空間:

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

結(jié)果:

dom.jslite("div p").hide();  // 新 JSLite 的代碼
$("content").style.display = "none";    // 另一個(gè)庫 $() 的代碼
JSLite("div > p").hide();   // 另一個(gè)版本 JSLite 的代碼
插件編寫 $.extend

通過源對(duì)象擴(kuò)展目標(biāo)對(duì)象的屬性,擴(kuò)展 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
// 在$上擴(kuò)展了幾個(gè)方法  
//調(diào)用方法  $.min(2,3);   //? 2
//調(diào)用方法  $.max(4,5);   //? 5
$.fn.extend

擴(kuò)展 JSLite 元素集來提供新的方法(通常用來制作插件)。

$.fn.extend({   //增加兩個(gè)插件方法。
    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

當(dāng)元素遇到錯(cuò)誤(沒有正確載入)時(shí),發(fā)生 error 事件。

$.error("2222")
//? 輸出錯(cuò)誤 Uncaught 2222
字符串處理 $.trim

去掉字符串起始和結(jié)尾的空格。

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

同上,去掉字符串起始和結(jié)尾的空格。

"  hello, how are you?  ".trim()//? "hello, how are you?"
URL $.getUrlParam

獲取 url 參數(shù)的值。

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

將表單元素?cái)?shù)組或者對(duì)象序列化。如果shallow設(shè)置為true,嵌套對(duì)象不會(huì)被序列化,嵌套數(shù)組的值不會(huì)使用放括號(hào)在他們的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"
數(shù)組對(duì)象操作 最大(小)值
//順帶小教程
//獲取最大值最小值
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(",");//轉(zhuǎn)化為一維數(shù)組
console.log(Math.max.apply(null,ta));//最大值
console.log(Math.min.apply(null,ta));//最小值
$.intersect

數(shù)組交集

$.intersect([1,2,3,"asdkjf"],[2,3,6,"asdkjf"])
//? [2, 3, "asdkjf"] 
concat

合并,有可能會(huì)重復(fù)

[1,2].concat([1,5,6]) //? [1, 2, 1, 5, 6]
$("#box").concat($("[type=submit]")[0]) //與下面一樣  合并到一起了
$("#box").concat($("[type=submit]"))
$.unique

刪除數(shù)組中重復(fù)元素。

$.unique([1,2,12,3,2,1,2,1,1,1,1]) //? [1, 2, 12, 3]
var arr = $("#box").concat($("#box")) //兩個(gè)一模一樣的數(shù)組
$.unique(arr) //去重
$.sibling

根據(jù)類型獲取節(jié)點(diǎn)對(duì)象屬性的集合 (node,type)。

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

搜索數(shù)組中指定值并返回它的索引(如果沒有找到則返回-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

通過遍歷集合中的節(jié)點(diǎn)對(duì)象,通過函數(shù)返回一個(gè)新的數(shù)組,nullundefined 將被過濾掉。

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

通用例遍方法,可用于例遍對(duì)象和數(shù)組

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

使用過濾函數(shù)過濾數(shù)組元素。

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

JSON.parse 方法相同,接受一個(gè)標(biāo)準(zhǔn)格式的 JSON 字符串,并返回解析后的 JavaScript 對(duì)象。

測試操作 $.isDocument

判斷對(duì)象是否為【document】。

$.isDocument(document) //? true
$.isWindow

確定參數(shù)是否為一個(gè)窗口(window對(duì)象),如果是則返回true。這在處理iframe時(shí)非常有用,因?yàn)槊總€(gè)iframe都有它們自己的window對(duì)象,使用常規(guī)方法obj==window校驗(yàn)這些objects的時(shí)候會(huì)失敗。

$.isFunction

判斷對(duì)象是否為函數(shù)【function】。

$.isFunction(function(){}) //? true
$.isObject

判斷是否為 Object 。

$.isObject({})  //? true
$.isPlainObject

$.isPlainObject(object) ? boolean
如果通過 "{}" 或者 "new Object" 創(chuàng)建的則返回true。判斷對(duì)象是否是純粹的對(duì)象。

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

判斷是否為【數(shù)組】。

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

判斷是否為【數(shù)組】。

$.isJson({})  //? true
$.contains

$.contains(parent, node) ? boolean
parent是否包含node節(jié)點(diǎn)對(duì)象。

$.isContainsNode($("#box")[0],$(".boxss")[0]) //? parent是否包含node節(jié)點(diǎn)對(duì)象
$.likeArray

判斷對(duì)象是否為數(shù)組或者是字符。

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

獲取JavaScript 對(duì)象的類型??赡艿念愋陀校?null undefined boolean number string function array date regexp object error 。

$.type(true)  //? Boolean
$.type("div") //? String
$.matches

如果當(dāng)前節(jié)點(diǎn)能被指定的css選擇器查找到,則返回true,否則返回false。
$.matches(element,selector) ? boolean

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

判斷當(dāng)前匹配的元素集合中的元素,是否為一個(gè)選擇器,DOM元素
is(selector) ? boolean
is(element) ? boolean

$("#box").is("div");  //? true  
$("#box").is("#box");  //? true  
$("#box").is("#boxsss");  //? flase  
$("div").is($("#box")[0]) //? true  節(jié)點(diǎn)是否在 $("#box")[0] 是否再集合中
對(duì)象訪問 each

遍歷一個(gè) JSLite 集合對(duì)象,為每一個(gè)匹配元素執(zhí)行一個(gè)函數(shù)。this關(guān)鍵字指向當(dāng)前item(作為函數(shù)的第二個(gè)參數(shù)傳遞)。如果函數(shù)返回 false,遍歷結(jié)束。

$("img").each(function(i){
    this.src = "test" + i + ".jpg";
});
//? 找到所有的img對(duì)象給設(shè)置src  
//? 返回 [ ,  ]
map

遍歷節(jié)點(diǎn)對(duì)象集合中的所有節(jié)點(diǎn)對(duì)象返回一個(gè)新的集合對(duì)象

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

類似 each,forEach遍歷不會(huì)停止。

//遍歷數(shù)組
[1,5,2,3].forEach(function(item,index,array){
    console.log(item,index,array)
})
//遍歷節(jié)點(diǎn)
$("img").forEach(function(item,index,array){
    console.log(item,index,array)
})
eq

指定匹配元素的集合為的索引的哪一個(gè)元素。一個(gè)整數(shù),指示元素的位置,以 0 為基數(shù)。
eq(index) ? collection
eq(-index) ? collection

$("div").eq(0)//? 返回?cái)?shù)組第一個(gè)節(jié)點(diǎn)數(shù)組 [div#box.boxOne.box2.box3, init: function…]
$("div").eq(-1)//? 倒數(shù)第一個(gè)節(jié)點(diǎn)數(shù)組
$("div").eq(-2)//? 倒數(shù)第二個(gè)節(jié)點(diǎn)數(shù)組
get

當(dāng)前對(duì)象集合中獲取所有節(jié)點(diǎn)對(duì)象或單個(gè)節(jié)點(diǎn)對(duì)象。

$("div").get(0)//? 返回節(jié)點(diǎn) 
index

獲取一個(gè)元素的位置。當(dāng)elemen參數(shù)沒有給出時(shí),返回當(dāng)前元素在兄弟節(jié)點(diǎn)中的位置。
.index() //對(duì)象中第一個(gè)元素相對(duì)于它同輩元素的位置
.index(selector)
.index(element)

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

在當(dāng)前獲取的節(jié)點(diǎn)數(shù)組中獲取一個(gè)元素在這個(gè)數(shù)組的位置。

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

對(duì)象中元素的個(gè)數(shù)。

$("img").length;
//? 2
HTML代碼/文本/值 text

取得所有匹配節(jié)點(diǎn)對(duì)象的文本內(nèi)容。

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

獲取或設(shè)置節(jié)點(diǎn)對(duì)象內(nèi)容。

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

獲取設(shè)置input的 value 。

$("input").val() //? string 
$("input").val("test") //? self 

$("#input").val(function(index,oldvalue){
    console.log(index,oldvalue)
    return "111" + oldvalue
}) //? self 
節(jié)點(diǎn)屬性 pluck

獲取對(duì)象集合中每一個(gè)元素的屬性值。

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

讀取或設(shè)置dom的屬性。

$(".button").attr({"class":"","style":"background:red"}) //? self 設(shè)置紅色清空class
$(".button").attr("class","name")  //? self 設(shè)置class替換之前的
$(".button").attr("class")  //? string 獲取class屬性值
removeAttr

移動(dòng)當(dāng)前對(duì)象集合中所有元素的指定屬性。

$("#box").removeAttr("class") //? self 移除class
CSS 類 css

獲取或設(shè)置節(jié)點(diǎn)對(duì)象的style樣式內(nèi)容。

$("#box").css("color","yellow")     //? self 返回Array 節(jié)點(diǎn)內(nèi)容
$("#box").css({"color":"yellow"})   //? self 返回Array 節(jié)點(diǎn)內(nèi)容
hasClass

集合中是否有節(jié)點(diǎn)對(duì)象含有指定的class。

$("#box").hasClass("box2") //? true
addClass

為每個(gè)匹配的節(jié)點(diǎn)對(duì)象添加指定的class類名。

$("#box").addClass("box23 go") //? self 原有對(duì)象class上添加 box23和 go

$("#box").addClass(function(){
    return "box23 wcj"
}) //? self 原有對(duì)象class上添加 box23 和wcj
removeClass

清除節(jié)點(diǎn)對(duì)象中所有節(jié)點(diǎn)對(duì)象的指定class類名,不填寫清空。

$("#box").removeClass("box23") //? self 刪除原有對(duì)象class中box23
$("div").removeClass() //? self  所有匹配的對(duì)象class屬性被刪除
toggleClass

在匹配的節(jié)點(diǎn)對(duì)象集合中的每個(gè)節(jié)點(diǎn)對(duì)象上添加或刪除一個(gè)或多個(gè)樣式類。

$("#box").toggleClass("box1 box2") //? self 原有對(duì)象class上添加 "box1 box2"或者刪除"box1 box2"
效果 toggle

顯示或隱藏匹配節(jié)點(diǎn)對(duì)象。

$("#box").toggle() //? self 原有對(duì)象如果隱藏就顯示,如果顯示就隱藏。
show

顯示匹配節(jié)點(diǎn)對(duì)象。

$("#box").show() //? self 顯示匹配節(jié)點(diǎn)對(duì)象
hide

隱藏匹配節(jié)點(diǎn)對(duì)象。

$("#box").hide() //? self 隱藏匹配的對(duì)象
尺寸位置 offset

獲得當(dāng)前元素相對(duì)于document的位置。返回一個(gè)對(duì)象含有: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
獲取對(duì)象象集合中第一個(gè)元素的寬,或設(shè)置對(duì)象集合所有元素的寬。

$("#box").width()   // => 342
$(window).width()   // => 456 (可視區(qū)域?qū)挾?
$(document).width() // => dsf 
height

height() ? number
height(value) ? self
height(function(index, oldWidth){ ... }) ? self
獲取對(duì)象象集合中第一個(gè)元素的高,或設(shè)置對(duì)象集合所有元素的高。

$("#box").height()   // => 342
$(window).height()   // => 456 (可視區(qū)域高度)
$(document).height() // => dsf 
過濾 filter

篩選出與指定表達(dá)式匹配的元素集合。filter(selector) 。

$("div").filter("#box") //? self 在所有的div對(duì)象中選擇器為 #box 的過濾出來。
not

not(selector) ? collection
not(collection) ? collection
not(function(index){ ... }) ? collection
篩選出與 指定表達(dá)式匹配的元素集合。它的作用剛好與 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"
})
刪除節(jié)點(diǎn) empty

所有匹配節(jié)點(diǎn)對(duì)象集合中移除所有的dom子節(jié)點(diǎn),不包括自己,清空內(nèi)容。

$("#box").empty()
//? self 
remove

刪除所有匹配節(jié)點(diǎn)對(duì)象【自己】及所有【自己】里面的內(nèi)容。

$("#box").remove()
//? self 
detach !

被遺棄的方法(不建議使用),作用跟remove一樣,所有綁定的事件、附加的數(shù)據(jù)等都會(huì)保留下來。

$("#box").click(function(){
    console.log("wcj")
})
var a = $("#box").detach();//刪除的對(duì)象賦給a
$("body").append(a)//將a添加到 body 中還是可以點(diǎn)擊
查找節(jié)點(diǎn) find

后代節(jié)點(diǎn)的集合(可以帶上濾選擇器)。

$("#box").find()        //?后代節(jié)點(diǎn)的集合
$("#box").find(".box")  //?后代節(jié)點(diǎn)的集合,返回匹配".box" 的集合
children

獲得每個(gè)匹配元素集合元素的直接子元素(可以帶上濾選擇器)。

$("#box").children()
//下面這種方法也可以的 CSS3 節(jié)點(diǎn)選擇器 -_+
$("#box *")
contents

contents() ? collection
獲得每個(gè)匹配元素集合元素的子元素,包括文字和注釋節(jié)點(diǎn)。

$("#box").contents()
parent

對(duì)象集合中每個(gè)元素的直接父元素。

$("#box").parent()
parents

獲取對(duì)象集合每個(gè)元素所有的祖先元素(不包含根元素)。
parents([selector]) ? collection

$("#box").parents()

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

從元素本身開始,逐級(jí)向上級(jí)元素匹配,并返回最先匹配selector的祖先元素。如果context節(jié)點(diǎn)參數(shù)存在。那么直考慮該節(jié)點(diǎn)的后代。這個(gè)方法與 parents(selector)有點(diǎn)相像,但他只返回最先匹配的祖先元素。

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

$(document).bind("click", function(e) {
    console.log(e.target)//當(dāng)前點(diǎn)擊的對(duì)象
    $(e.target).closest("li").css("background","red");
});

$("#boxWhy").closest(".boxss",$("#box")[0])//#boxWhy節(jié)點(diǎn)的父節(jié)點(diǎn)為:"$("#box")[0]"的子節(jié)點(diǎn)".boxss"
prev

獲取對(duì)象集合每個(gè)元素的所有上一個(gè)對(duì)象(可以帶上濾選擇器)。

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

獲取對(duì)象集合每個(gè)元素的所有下一個(gè)對(duì)象(可以帶上濾選擇器)。

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

獲取對(duì)此對(duì)象【上】所有兄弟對(duì)象(可以帶上濾選擇器)。

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

獲取對(duì)此對(duì)象【下】所有兄弟對(duì)象(可以帶上濾選擇器)。

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

獲取對(duì)此對(duì)象【其它】所有兄弟對(duì)象(可以帶上濾選擇器)。

$("#box").siblings()
add

添加元素到匹配的JSLite對(duì)象集合

$("#box").siblings()
插入節(jié)點(diǎn)方法 prepend

插入到標(biāo)簽開始標(biāo)記之后(里面的第一個(gè))。
prepend(content) ? self
prepend(Function) ? self

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

將生成的內(nèi)容插入到匹配的節(jié)點(diǎn)標(biāo)簽開始標(biāo)記之后。這有點(diǎn)像prepend,但是是相反的方式。
prependTo(selector) ? self

$("
test
").prependTo("#box")
append

插入到標(biāo)簽結(jié)束標(biāo)記前(里面的結(jié)尾)。
append(content) ? self
append(Function) ? self

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

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

appendTo(selector) ? self
將生成的內(nèi)容插入到匹配的元素標(biāo)簽結(jié)束標(biāo)記前(里面的最后)。這個(gè)有點(diǎn)像append,但是插入的目標(biāo)與其相反。

$("
test
").appendTo("#box")
after

插入到標(biāo)簽結(jié)束標(biāo)記后。(兄弟節(jié)點(diǎn)的下面)
after(content) ? self
after(Function) ? self

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

插入的對(duì)象集合中的元素到指定的每個(gè)元素后面的dom中。這個(gè)有點(diǎn)像 after,但是使用方式相反。
insertAfter(selector) ? self

$("

test

").insertAfter("#box") //? self $("#input").insertAfter("#box") //? self $("#input")
before

插入到標(biāo)簽開始前。
after(content) ? self
after(Function) ? self

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

insertBefore(selector) ? self
將生成的內(nèi)容插入 selector 匹配的節(jié)點(diǎn)標(biāo)簽開始前。這個(gè)有點(diǎn)像 before,但是使用方式相反。

$("

test

").insertBefore("#box")
clone

clone() ? collection
通過深度克隆來復(fù)制集合中的所有元素。(通過原生 cloneNode 方法深度克隆來復(fù)制集合中的所有元素。此方法不會(huì)有數(shù)據(jù)和事件處理程序復(fù)制到新的元素。這點(diǎn)和jquery中利用一個(gè)參數(shù)來確定是否復(fù)制數(shù)據(jù)和事件處理不相同。)

$("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 對(duì)象上直接添加事件。

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

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

$(document).ready(function(){
    alert("當(dāng)頁面dom加載完畢執(zhí)行");
    console.log($("#box"));
})
$(func)

加載完畢執(zhí)行。與 ready 方法相同

//或者使用下面方法代替ready
$(function(){
    console.log("當(dāng)頁面dom加載完畢執(zhí)行");
})
bind

為每個(gè)匹配元素的特定事件綁定事件處理函數(shù)。可以綁定這些事件 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("綁定點(diǎn)擊事件")
});
unbind

解除綁定事件,從每一個(gè)匹配的節(jié)點(diǎn)對(duì)象中刪除綁定的事件。

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

為每個(gè)匹配元素的特定事件綁定事件處理函數(shù)??梢越壎ㄟ@些事件 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("綁定點(diǎn)擊事件")
});

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

$("#box").on("click",{val:1},function(){//傳參數(shù)
    console.log("ffffdd","event.data.val = " + event.data.val)
})

$( "#box" ).on({ //綁定多個(gè)事件
    click: function() {
        $( this ).css("background","red");
    }, 
    mouseover: function() {
        $( this ).css("background","yellow")
    },
    mousedown: function() {
        $( this ).css("background","green")
    }
});
off

解除綁定事件,從每一個(gè)匹配的節(jié)點(diǎn)對(duì)象中刪除綁定的事件。

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
匹配到的節(jié)點(diǎn)集合的元素上觸發(fā)指定的事件。如果給定args參數(shù),它會(huì)作為參數(shù)傳遞給事件函數(shù)。

$("#box").on("abc:click",function(evn,a,c){
    console.log("2"+a+c)
}) //? self  綁定一個(gè)事件
$("#box").trigger("abc:click",["wwww"]) //? self 觸發(fā)并傳一個(gè)參數(shù)進(jìn)去
Ajax

執(zhí)行Ajax請(qǐng)求。
type:請(qǐng)求方法 ("GET", "POST")
data:(默認(rèn):none)發(fā)送到服務(wù)器的數(shù)據(jù);如果是get請(qǐng)求,它會(huì)自動(dòng)被作為參數(shù)拼接到url上。非String對(duì)象
processData (默認(rèn): true): 對(duì)于非Get請(qǐng)求。是否自動(dòng)將 data 轉(zhuǎn)換為字符串。
dataType:(json, jsonp, xml, html, or text)
contentType:一個(gè)額外的"{鍵:值}"對(duì)映射到請(qǐng)求一起發(fā)送
headers:(默認(rèn):{}): 一個(gè)額外的"{鍵:值}"對(duì)映射到請(qǐng)求一起發(fā)送
url:發(fā)送請(qǐng)求的地址
async:此參數(shù)不傳默認(rèn)為true(同步請(qǐng)求),false異步請(qǐng)求
success(cdata):請(qǐng)求成功之后調(diào)用。傳入返回后的數(shù)據(jù),以及包含成功代碼的字符串。
error(status, statusText):請(qǐng)求出錯(cuò)時(shí)調(diào)用。 (超時(shí),解析錯(cuò)誤,或者狀態(tài)碼不在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獨(dú)有....
$.ajax("GET", "http://127.0.0.1/api.php", {"wcj":"123","ok":"11"},function(cdata) {
    console.log("ok", cdata)
})
通用調(diào)用方法
$.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獨(dú)有....
var data = { "key": "key", "from": "from"}
$.ajax("POST", "http://127.0.0.1/api.php", data,function(data) {
    console.log("ok", data)
},"json")
通用調(diào)用方法
$.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() 方法把表單數(shù)據(jù)提交到 Web 服務(wù)器。這個(gè)是原生態(tài)提供的方法,還沒有封裝更改 *。

$("form")[0].submit() //此處直接原生態(tài)提交表單,日后封裝,直接在JSLite對(duì)象上就可以提交。
serializeArray

將用作提交的表單元素的值組合成擁有name和value的鍵值對(duì)組成的數(shù)組。不能使用的表單元素,buttons,未選中的radio buttons/checkboxs 將會(huì)被跳過。結(jié)果不包含file inputs的數(shù)據(jù)。

$("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

將表單元素?cái)?shù)組或者對(duì)象序列化。

$("form").serialize();
//=> golang=456&name=&password=&sel=&kaikai=&w=asd&w2=asdf

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://www.ezyhdfw.cn/yun/85459.html

相關(guān)文章

  • [教程] JSLite 01 介紹

    摘要:極大地簡化了編程。與有著類似的,通用庫只有,手機(jī)上每一都是錢??梢酝ㄟ^下面的標(biāo)記把添加到網(wǎng)頁中請(qǐng)注意,標(biāo)簽應(yīng)該位于頁面的部分。 簡介 JSLite 是一個(gè) JavaScript 庫。 JSLite 極大地簡化了 JavaScript 編程。 JSLite 只針對(duì)先進(jìn)瀏覽器支持(HTML5,CSS3)移動(dòng)端瀏覽器編寫。 JSLite 使用js新方法實(shí)現(xiàn)j...

    elva 評(píng)論0 收藏0
  • [教程] JSLite 02 基本語法

    摘要:學(xué)習(xí)之前需要你有下面幾個(gè)方面的基本知識(shí)既然是模仿的自然語法是一模一樣的。語法實(shí)例演示函數(shù),隱藏當(dāng)前的元素。的基本語法語法是為元素的選取編制的,可以對(duì)元素執(zhí)行某些操作。在本教程接下來的章節(jié),您將學(xué)習(xí)到更多有關(guān)選擇器的語法。 學(xué)習(xí) JSLite 之前需要你有下面幾個(gè)方面的基本知識(shí) HTML CSS JavaScript JSLite 既然是模仿jQuery 的API自然...

    Imfan 評(píng)論0 收藏0
  • 仿效jQuery如何高效JSLite

    摘要:討論和性能的文章并不罕見??焖黉秩竞晚憫?yīng)意味著更好的用戶體驗(yàn)。附加事件處理程序的首選方法。糟糕建議高效使用子查詢緩存的父元素正如前面所提到的,遍歷是一項(xiàng)昂貴的操作。糟糕建議高效避免通用選擇符將通用選擇符放到后代選擇符中,性能非常糟糕。 討論jQuery和javascript性能的文章并不罕見。然而,我計(jì)劃根據(jù)他人對(duì)jQuery總結(jié)的一些速度方面的技巧和一些建議,來教你提升你的JSLit...

    PascalXie 評(píng)論0 收藏0
  • JSLite 目標(biāo):縮小體積,做到 jQuery-free

    摘要:轉(zhuǎn)載大牛的分析,這將是的方向。域名分析據(jù)統(tǒng)計(jì),目前全世界的網(wǎng)站使用它。的市場份額不斷下降,以為基礎(chǔ)的標(biāo)準(zhǔn)語法,正得到越來越廣泛的支持。下面就探討如何用標(biāo)準(zhǔn)語法,取代的一些主要功能,做到。 轉(zhuǎn)載大牛的分析,這將是JSLite的方向。前人栽樹后人乘涼,jQuery為我們制定了一套接口標(biāo)準(zhǔn),我們繼續(xù)為此努力。域名:JSLite.io jQuery 分析 據(jù)統(tǒng)計(jì),目前全世界57.3%...

    Scott 評(píng)論0 收藏0
  • 開源中國專訪:Chameleon原理首發(fā),其它跨多端統(tǒng)一框架都是假?

    摘要:中國互聯(lián)網(wǎng)絡(luò)信息中心發(fā)布的中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告顯示,截至年月,我國網(wǎng)民規(guī)模達(dá)億人,微信月活億支付寶月活億百度月活億另一方面,中國手機(jī)占智能手機(jī)整體的比例超過,月活約億。在年末正式發(fā)布了面向未來的跨端的。 開源中國專訪:Chameleon原理首發(fā),其它跨多端統(tǒng)一框架都是假的? 原創(chuàng): 嘉賓-張楠 開源中國 以往我們說某一功能跨多端,往往是指在諸如 PC、移動(dòng)等不同類型的設(shè)備之...

    GraphQuery 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<