chibi下載chibi源代碼下載

Chibi v3.0.9

微小的JavaScript微型圖書館

認為可以將30KB超過3G提供以操縱幾個DOM元素是可以的嗎？當然，您不是，因為那是一個混蛋，您不是混蛋。 You'll probably instead use a couple of lines of vanilla JavaScript, perhaps a little CSS :active with transitions, all while riding a unicorn bareback through a double rainbow, no hands.

處理一些更複雜的事情？與脂肪，成年框架和圖書館不同，Chibi僅著眼於必需品，融化並與優化的彩虹混合在一起，以創建一個非常輕的微型圖書館，使您可以做得很棒，無用。

甜，多汁的碎片

Chibi真的很小：7KB縮小，3KB GZPICKEND，足夠小，可以在單頁網絡應用程序上粘貼，從而節省了額外的HTTP請求。
支持現代桌面和移動瀏覽器，包括Chrome，Firefox，Internet Explorer，Opera和Safari（請參見下面的瀏覽器支持）。
甚至支持像IE6這樣吱吱作響的舊瀏覽器，我不知道為什麼要這樣做。
沒有動畫巡迴賽，而是像一個好人一樣使用CSS過渡。
在現代瀏覽器中，赤壁通常比成年庫快20％至50％執行DOM操縱。

塊狀，耐嚼的碎片

Chibi的document.querySelectorAll()的Polyfill僅限於瀏覽器CSS支持，並且不如一些專用選擇引擎快。這意味著沒有IE6的input[type=text]或p:nth-child(even)選擇器。幸運的是，現代瀏覽器不需要這個多填充。
不支持document.querySelectorAll()和window.getComputedStyle古老瀏覽器。GETCOMPETEDESTYLE可以打擾。

版本3是一個重大更新，具有許多破裂的變化。如果很難接受更改，則在這裡仍然可以使用版本1。

瀏覽器支持

Chibi已通過測試並支持以下瀏覽器：

Android瀏覽器2.1或更高
黑莓瀏覽器6或更高
鉻合金
Chrome Android
Firefox 3.5或更高
Firefox手機
Internet Explorer 6或更高
Internet Explorer手機9或更高
歌劇10或更高
歌劇迷你
歌劇手機10或更高
野生動物園3.2或更高
Safari手機3.2或更高
Symbian^3瀏覽器或更高

Chibi還應與支持document.querySelectorAll()的任何其他瀏覽器一起使用。

安裝

從這裡抓住它或

npm install chibijs

使用Chibi

Chibi語法類似於JQuery： $(selector).method()的先驅。它有意使用與jQuery相同的$命名空間，因為微觀圖書館和成年庫永遠不應該混合。

Chibi的支持標準CSS選擇器，但您也可以直接傳遞DOM元素：

CSS選擇器

 $ ( "p" ) // Returns an array of all paragraph elements
$ ( "p" ) . hide ( ) // Hides all paragraphs
$ ( "#foo" ) . show ( ) // Shows element with id equal to "foo"
$ ( ".foo" ) . hide ( ) // Hides elements with "foo" CSS class

DOM元素選擇器，毫無意義

 $ ( document . getElementsByTagName ( 'p' ) ) . hide ( ) // Hides all paragraphs

一個更有趣的DOM元素選擇器

 $ ( $ ( 'p' ) [ 0 ] ) . hide ( ) // Hides first paragraph

方法

Chibi支持方法鏈$(selector).method().anothermethod().evenmoremethods() 。

$（）。準備就緒（處理程序）

DOM準備就緒時會發射處理程序。

DOM準備就緒時使用功能。包括選擇器對此方法沒有意義，不要這樣做。

 $ ( ) . ready ( function ( ) {
	// Do awesome
} ) ;

也許

 function foo ( ) {
	// Do awesome
}

$ ( ) . ready ( foo ) ;

$（）。加載（處理程序）

加載頁面時射擊處理程序。

加載頁面時，用來啟動功能。包括選擇器對此方法沒有意義，不要這樣做。

 function foo ( ) {
	// Do awesome
}

$ ( ) . loaded ( foo ) ;

$（selector）.east（功能）

在每個匹配元素上執行功能

每個將每個匹配元素傳遞給指定函數。

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< script >
	function foo ( elm ) {
		elm . style . color = "red" ;
	}

    $ ( 'p' ) . each ( foo ) ; // Executes the foo function (sets the element style color to red) on all paragraph elements
    
    // An alternative way to achieve the above
    $ ( 'p' ) . each ( function ( elm ) {
		$ ( elm ) . css ( 'color' , 'red' ) ;  
    } )
    
    
</ script >
</ body >
</ html >

$（selector）.first（）

找到第一個匹配元素。

首先將返回包含第一個匹配元素的數組，當使用具有弱CSS偽支持的IE6（例如IE6）時，尤其是與方法鍊鍊結合時，很有用。

$（選擇器）.last（）

找到最後的匹配元素。

最後將返回包含最後一個匹配元素的數組。

$（selector）.odd（）

找到匹配的奇數元素。

ODD將返回包含匹配奇數元素的數組。

$（選擇器）.even（）

找到匹配均勻的元素。

甚至將返回包含匹配均勻元素的數組。

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< p > Foo </ p >
< p > Bar </ p >
< script >
    $ ( 'p' ) . first ( ) ; // returns an array containing the first paragraph element
    $ ( 'p' ) . last ( ) ; // returns an array containing the fourth paragraph element
    $ ( 'p' ) . odd ( ) ; // returns an array of odd paragraph elements
    $ ( 'p' ) . even ( ) ; // returns an array of even paragraph elements
</ script >
</ body >
</ html >

$（選擇器）.hide（）

隱藏匹配元素。

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< script >
	$ ( 'p' ) . hide ( ) ; // hides all paragraph elements
</ script >
</ body >
</ html >

$（selector）.show（）

顯示匹配元素。

 <!DOCTYPE html >
< html >
< head >
< style >
p {display:none}
</ style >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< script >
	$ ( 'p' ) . show ( ) ; // shows all paragraph elements
</ script >
</ body >
</ html >

$（selector）.toggle（）

切換匹配元素的可見性。

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p style =" display:none " > Bar </ p >
< script >
	$ ( 'p' ) . toggle ( ) ; // shows the second paragraph element, hides the first paragraph element
</ script >
</ body >
</ html >

$（selector）.remove（）

從DOM樹中刪除匹配元素。

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< script >
	$ ( 'p' ) . remove ( ) ; // removes all the paragraph elements from the DOM tree
</ script >
</ body >
</ html >

$（selector）.css（屬性，價值）

獲取或選擇設置CSS屬性以匹配元素。

沒有值的CSS將返回找到第一個匹配元素的CSS屬性字符串。如果未明確設置屬性，則CSS將返回計算的屬性值，這在瀏覽器之間可能會有所不同。例如，沒有明確字體重量的元素將在Opera和Webkit瀏覽器中返回“正常”，但在Firefox和Internet Explorer瀏覽器中“ 400”。

值將為所有匹配元素設置CSS屬性的值。

 <!DOCTYPE html >
< html >
< head >
< style >
.bold {font-weight:900}
</ style >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p class =" bold " > Bar </ p >
< script >
	$ ( 'p' ) . css ( 'font-weight' ) ; // returns the "font-weight" of the first paragraph element
	$ ( 'p' ) . css ( 'color' , 'red' ) ; // sets all paragraph elements color to red
</ script >
</ body >
</ html >

$（selector）.getClass（）

找到第一個匹配元素的課程。

 <!DOCTYPE html >
< html >
< head >
< style >
.bold {font-weight:900}
.red {color:red}
.mono {font-family:monospace}
</ style >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< div class =" red " > Foo </ div >
< div class =" mono " > Bar </ div >
< p > Foo </ p >
< p class =" mono " > Bar </ p >
< script >
	$ ( 'div' ) . getClass ( ) ; // returns 'red', the class of the first div element
	$ ( 'p' ) . getClass ( ) ; // returns undefined as the first paragraph element has no class set
</ script >
</ body >
</ html >

$（選擇器）.setClass（class）

設置所有匹配元素的類，用此類代替任何現有元素類。

 <!DOCTYPE html >
< html >
< head >
< style >
.bold {font-weight:900}
.red {color:red}
.mono {font-family:monospace}
</ style >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p class =" mono " > Bar </ p >
< script >
	$ ( 'p' ) . setClass ( 'red bold' ) ; // sets the class to "red" and "bold" for all paragraph elements
</ script >
</ body >
</ html >

$（選擇器）.addClass（class）

將課程添加到所有匹配元素中。

 <!DOCTYPE html >
< html >
< head >
< style >
.bold {font-weight:900}
.red {color:red}
.mono {font-family:monospace}
</ style >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p class =" mono " > Bar </ p >
< script >
	$ ( 'p' ) . addClass ( 'mono' ) ; // adds the "mono" class to all paragraph elements
</ script >
</ body >
</ html >

$（選擇器）.removeclass（class）

從所有匹配元素中刪除類。

 <!DOCTYPE html >
< html >
< head >
< style >
.bold {font-weight:900}
.red {color:red}
.mono {font-family:monospace}
</ style >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p class =" mono " > Bar </ p >
< script >
	$ ( 'p' ) . removeClass ( 'mono' ) ; // removes the "mono" class from all paragraph elements
</ script >
</ body >
</ html >

$（選擇器）.toggleclass（class）

切換類以匹配元素。

 <!DOCTYPE html >
< html >
< head >
< style >
.bold {font-weight:900}
.red {color:red}
.mono {font-family:monospace}
</ style >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p class =" mono " > Bar </ p >
< script >
	$ ( 'p' ) . toggleClass ( 'mono' ) ; // toggles the mono class on all paragraph elements
</ script >
</ body >
</ html >

$（選擇器）.hasclass（類）

如果找到的第一個匹配元素包括類，則返回為true。

 <!DOCTYPE html >
< html >
< head >
< style >
.bold {font-weight:900}
.red {color:red}
.mono {font-family:monospace}
</ style >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< div class =" red " > Foo </ div >
< div class =" mono " > Bar </ div >
< p > Foo </ p >
< p class =" mono " > Bar </ p >
< script >
	$ ( 'div' ) . cls ( 'red' ) ; // returns true as the first div element includes the 'red' class
	$ ( 'p' ) . cls ( 'mono' ) ; // returns undefined as the first paragraph element doesn't include the 'mono' class
</ script >
</ body >
</ html >

$（選擇器）.html（html）

獲取或選擇設置匹配元素的內部HTML。

沒有參數的HTML將返回找到第一個匹配元素的HTML字符串。

如果指定了HTML參數，則將替換所有匹配元素的內部HTML。

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< script >
	$ ( 'p' ) . html ( ) ; // returns an inner HTML "Foo" of the first paragraph element
	$ ( 'p' ) . html ( '<i>Foobar</i>' ) ; // Sets the inner HTML of all paragraph elements to "<i>Foobar</i>"
</ script >
</ body >
</ html >

$（selector）.htmlbefore（value）

在所有匹配元素之前插入HTML。

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< script >
	$ ( 'p' ) . htmlBefore ( '<i>Foobar</i>' ) ; // Inserts "<i>Foobar</i>" before all paragraph elements
</ script >
</ body >
</ html >

$（選擇器）.htmlafter（value）

在所有匹配元素之後，插入HTML。

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< script >
	$ ( 'p' ) . htmlAfter ( '<i>Foobar</i>' ) ; // Inserts "<i>Foobar</i>" after all paragraph elements
</ script >
</ body >
</ html >

$（選擇器）.htmlappend（value）

在所有匹配元素內部元素之後，插入HTML。

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< script >
	$ ( 'p' ) . htmlAppend ( '<i>Foobar</i>' ) ; // Inserts "<i>Foobar</i>" after all paragraph child elements
</ script >
</ body >
</ html >

$（選擇器）.htmlprepend（value）

在所有匹配元素內部元素之前插入HTML。

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< script >
	$ ( 'p' ) . htmlPrepend ( '<i>Foobar</i>' ) ; // Inserts "<i>Foobar</i>" before all paragraph child elements
</ script >
</ body >
</ html >

$（selector）.attr（屬性，價值）

獲取或選擇為所有匹配元素設置屬性。

沒有值參數的attr將返回找到第一個匹配元素的屬性字符串。

值將為所有匹配元素設置屬性的值。

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > < a href =" http://en.wikipedia.org/wiki/Foobar " > Foobar </ a > </ p >
< script >
	$ ( 'a' ) . attr ( 'href' ) ; // returns the "href" property value "http://en.wikipedia.org/wiki/Foobar" of the first link element
	$ ( 'a' ) . attr ( 'target' , '_blank' ) ; // sets the "target" property for all link elements to "_blank"
</ script >
</ body >
</ html >

$（selector）.data（鍵，值）

獲取或選擇為所有匹配元素設置數據鍵值。

沒有值參數的數據將返回找到第一個匹配元素的數據鍵值。

值將為所有匹配元素設置數據密鑰的值。

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p data-test =" foo " > </ p >
< p data-test =" bar " > </ p >
< script >
	$ ( 'p' ) . data ( 'test' ) ; // returns "foo" for data key "test" of first paragraph element found
	$ ( 'p' ) . data ( 'test' , 'foobar' ) ; // sets the date key "test" value to "foobar" on all matching paragraph elements
</ script >
</ body >
</ html >

$（selector）.val（value）

獲取或選擇設置匹配表單元素的值。

沒有參數的val將返回找到第一個匹配表單元素的值字符串。對於選擇列表，Chibi將返回選定的選項值字符串（如果有）。對於具有多個選擇的選擇列表，Chibi將返回選定的選項值字符串的數組（如果有）。

值將設置匹配表單字段元素的值。對於選擇列表，這將選擇匹配此值的選項。對於具有多個選擇的選擇列表，通過一個值數組將選擇與這些值匹配的選擇列表中的所有選項。

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< form >
< input type =" text " value =" Foobar " name =" text " >
< select multiple =" multiple " >
	< option value =" foo " > Foo </ option >
	< option value =" bar " selected =" selected " > Bar </ option >
</ select >
</ form >
< script >
	$ ( 'input' ) . val ( ) ; // returns "Foobar"
	$ ( 'input' ) . val ( 'Foo Bar' ) ; // sets the value for all input elements to "Foo Bar"
	$ ( 'select' ) . val ( ) ; // returns "bar", the selected option value 
	$ ( 'select' ) . val ( 'foo' ) ; // selects the option matching "foo"
	$ ( 'select' ) . val ( [ 'foo' , 'bar' ] ) ; // selects the options matching "foo" or "bar" values
</ script >
</ body >
</ html >

$（選擇器）。檢查（布爾）

獲取或選擇設置複選框或無線電元素的檢查狀態。

沒有參數的檢查將返回第一個匹配元素的檢查布爾值。

布爾值將設置匹配複選框或無線電元素的檢查狀態。

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< form >
< input type =" checkbox " value =" Foobar " name =" chk " >
</ form >
< script >
	$ ( 'input' ) . checked ( true ) ; // checks the checkbox
	$ ( 'input' ) . checked ( ) ; // returns true
	$ ( 'input' ) . checked ( false ) ; // unchecks the checkbox
	$ ( 'input' ) . checked ( ) ; // returns false
</ script >
</ body >
</ html >

$（selector）.on（事件，聽眾）

將活動聽眾添加到所有匹配元素中。

在所有匹配元素中添加了事件偵聽器。無需使用HTML事件格式（'On' +事件），因為Chibi會根據需要自動將事件前綴。還支持傳遞window和document作為選擇器。

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< script >
	function foo ( ) {
		// Do awesome
	}

	$ ( 'p' ) . on ( 'click' , foo ) ; // adds the 'foo' click event listener to all paragraphs
</ script >
</ body >
</ html >

$（selector）.off（事件，聽眾）

從所有匹配元素中刪除了事件聽眾。

關閉從所有匹配的元素中刪除了活動的聽眾。無需使用HTML事件格式（'OFF' +事件），因為Chibi會根據需要自動將事件前綴。 OFF還支持傳遞window和document作為選擇器。

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< script >
	function foo ( ) {
		// Do awesome
	}

	$ ( 'p' ) . on ( 'click' , foo ) ; // adds the 'foo' click event listener to all paragraph elements
	$ ( 'p' ) . off ( 'click' , foo ) ; // removes the 'foo' click event listener from all paragraph elements
</ script >
</ body >
</ html >

$（selector）.get（url，回調，nocache，nojsonp）

發送get ajax請求，可選地使用XHR responseText和status觸發回調。 $（選擇器）的別名。

當Nocache為True時，將_ts時間戳添加到URL中以防止緩存，是的，我正在看您Android瀏覽器和iOS 6。

GET支持JSON作為選擇器（{name：value}），可用於在不使用表單元素的情況下發送數據時。

對於跨域請求，默認情況下get使用JSONP，但是當NOJSONP為真時，這將被覆蓋。 JSONP請求將對回調進行任何回調callback=?或在獲取URL中類似。

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< form >
< input type =" text " value =" Foobar " name =" text " >
</ form >
< script >
	// XHR all form data using "GET" to "ajax.html"
	$ ( 'form' ) . get ( 'ajax.html' ) ;

	// XHR the JSON using "GET" to "ajax.html"
	$ ( { text : 'Foo Bar' } ) . get ( 'ajax.html' ) ;

</ script >
</ body >
</ html >

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< script >
	// JSONP
	$ ( ) . get ( 'https://api.github.com/users/kylebarrow/repos?sort=created&direction=asc&callback=?' , function ( data , status ) {
		// Do awesome
	} ) ;

	// JSONP with JSON query
	$ ( { sort : "created" , direction : "asc" , callback : "?" } ) . get ( 'https://api.github.com/users/kylebarrow/repos' , function ( data , status ) {
		// Do awesome
	} ) ;
</ script >
</ body >
</ html >

$（selector）.post（url，回調，nocache）

發送郵政ajax請求，可選地使用XHR responseText和status觸發回調。 $（選擇器）的別名。

當Nocache為True時，將_ts時間戳添加到URL中以防止緩存。

帖子支持JSON作為選擇器（{name：value}），可用於在不使用表單元素的情況下發送數據時。

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< form >
< input type =" text " value =" Foobar " name =" text " >
</ form >
< script >
	// XHR the JSON using "POST" to "ajax.html"
	$ ( { text : 'Foo Bar' } ) . post ( 'ajax.html' ) ;	
	
	// XHR all form data using "POST" to "ajax.html", returns responseText and status, adds a cache busting time stamp
	$ ( 'form' ) . post ( 'ajax.html' , function ( data , status ) {
		// Do awesome
	} , true ) ;
</ script >
</ body >
</ html >

$（selector）.ajax（url，方法，回調，nocache，nojsonp）

發送AJAX請求，可選地發出XHR responseText和status回調

如果沒有指定，則AJAX使用GE方法。 When nocache is true, a _ts time stamp is added to the URL to prevent caching.

Ajax支持JSON作為選擇器（{name：value}），對於您在不使用表單元素的情況下發送數據時很有用。

對於跨域請求， Ajax默認使用JSONP，但是當NOJSONP為TRUE時，這將被覆蓋。 JSONP請求將對回調進行任何回調callback=?或在Ajax URL中相似。顯然，該方法總是GET JSONP請求。

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< form >
< input type =" text " value =" Foobar " name =" text " >
</ form >
< script >
	// XHR all form data using "GET" to "ajax.html"
	$ ( 'form' ) . ajax ( 'ajax.html' ) ;

	// XHR the JSON using "GET" to "ajax.html"
	$ ( { text : 'Foo Bar' } ) . ajax ( 'ajax.html' ) ;

	// XHR all form data using "POST" to "ajax.html", returns responseText and status, adds a cache busting time stamp
	$ ( 'form' ) . ajax ( 'ajax.html' , "POST" , function ( data , status ) {
		// Do awesome
	} , true ) ;
</ script >
</ body >
</ html >

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< script >
	// JSONP
	$ ( ) . ajax ( 'https://api.github.com/users/kylebarrow/repos?sort=created&direction=asc&callback=?' , 'GET' , function ( data , status ) {
		// Do awesome
	} ) ;

	// JSONP with JSON query
	$ ( { sort : "created" , direction : "asc" , callback : "?" } ) . ajax ( 'https://api.github.com/users/kylebarrow/repos' , 'GET' , function ( data , status ) {
		// Do awesome
	} ) ;
</ script >
</ body >
</ html >

修改，構建，貢獻

npm install
gulp

鰭

展開