chibi下载chibi源代码下载

Chibi v3.0.9

微小的JavaScript微型图书馆

认为可以将30KB超过3G提供以操纵几个DOM元素是可以的吗？当然，您不是，因为那是一个混蛋，您不是混蛋。相反，您可能会使用几行香草JavaScript，也许是一些CSS :active的过渡，同时又通过双彩虹骑独角兽鞍，没有手。

处理一些更复杂的事情？与脂肪，成年框架和图书馆不同，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方法。当Nocache为True时，将_ts时间戳添加到URL中以防止缓存。

ajax supports JSON as a selector ({name:value}), useful for when you want to send data without using form elements.

对于跨域请求， 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

鳍

展开