eq(index|-index)
概述
獲取當前鏈式操作中第N個jQuery對象胖眷,返回jQuery對象涩惑,當參數(shù)大于等于0時為正向選取藏杖,比如0代表第一個,1代表第二個脉顿。當參數(shù)為負數(shù)時為反向選取蝌麸,比如-1為倒數(shù)第一個,具體可以看以下示例艾疟。
類似的有g(shù)et(index),不過get(index)返回的是DOM對象来吩。
參數(shù)
index IntegerV1.1.2
一個整數(shù),指示元素基于0的位置,這個元素的位置是從0算起蔽莱。
-index IntegerV1.4
一個整數(shù)弟疆,指示元素的位置,從集合中的最后一個元素開始倒數(shù)盗冷。(-1算起)
示例
參數(shù)index描述:
獲取匹配的第二個元素
HTML 代碼:
<p> This is just a test.</p> <p> So is this</p>
jQuery 代碼:
$("p").eq(1)
結(jié)果:
[ <p> So is this</p> ]
參數(shù)-index描述:
獲取匹配的第二個元素
HTML 代碼:
<p> This is just a test.</p> <p> So is this</p>
jQuery 代碼:
$("p").eq(-2)
結(jié)果:
[ <p> This is just a test.</p> ]
siblings([expr])
概述
取得一個包含匹配的元素集合中每一個元素的所有唯一同輩元素的元素集合怠苔。可以用可選的表達式進行篩選仪糖。
參數(shù)
expr String V1.0
用于篩選同輩元素的表達式
示例
描述:
找到每個div的所有同輩元素柑司。
HTML 代碼:
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
jQuery 代碼:
$("div").siblings()
結(jié)果:
[ <p>Hello</p>, <p>And Again</p> ]
描述:
找到每個div的所有同輩元素中帶有類名為selected的元素。
HTML 代碼:
<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>
jQuery 代碼:
$("div").siblings(".selected")
結(jié)果:
[ <p class="selected">Hello Again</p> ]
attr(name|properties|key,value|fn)
概述
設(shè)置或返回被選元素的屬性值锅劝。
參數(shù)
name String V1.0
屬性名稱
properties Map V1.0
作為屬性的“名/值對”對象
key, valueString, Object V1.0
屬性名稱攒驰,屬性值
key, function(index, attr)String, Function V1.1
1:屬性名稱。
2:返回屬性值的函數(shù),第一個參數(shù)為當前元素的索引值鸠天,第二個參數(shù)為原先的屬性值讼育。
示例
參數(shù)name 描述:
返回文檔中所有圖像的src屬性值。
jQuery 代碼:
$("img").attr("src");
參數(shù)properties 描述:
為所有圖像設(shè)置src和alt屬性稠集。
jQuery 代碼:
$("img").attr({ src: "test.jpg", alt: "Test Image" });
參數(shù)key,value 描述:
為所有圖像設(shè)置src屬性奶段。
jQuery 代碼:
$("img").attr("src","test.jpg");
參數(shù)key,回調(diào)函數(shù) 描述:
把src屬性的值設(shè)置為title屬性的值。
jQuery 代碼:
$("img").attr("title", function() { return this.src });
JavaScript unescape() 函數(shù)
JavaScript 全局對象
定義和用法
unescape() 函數(shù)可對通過 escape() 編碼的字符串進行解碼剥纷。
語法
unescape(string)
參數(shù) 描述
string 必需痹籍。要解碼或反轉(zhuǎn)義的字符串。
返回值
string 被解碼后的一個副本晦鞋。
說明
該函數(shù)的工作原理是這樣的:通過找到形式為 %xx 和 %uxxxx 的字符序列(x 表示十六進制的數(shù)字)蹲缠,用 Unicode 字符 \u00xx 和 \uxxxx 替換這樣的字符序列進行解碼。
提示和注釋
注釋:
ECMAScript v3 已從標準中刪除了 unescape() 函數(shù)悠垛,并反對使用它线定,因此應(yīng)該用 decodeURI() 和 decodeURIComponent() 取而代之。
實例
在本例中确买,我們將使用 escape() 來編碼字符串斤讥,然后使用 unescape() 對其解碼:
<script type="text/javascript">
var test1="Visit W3School!"
test1=escape(test1)
document.write (test1 + "<br />")
test1=unescape(test1)
document.write(test1 + "<br />")
</script>
輸出:
Visit%20W3School%21
Visit W3School!
HTML DOM protocol 屬性
HTML DOM Location 對象
定義和用法
protocol 屬性是一個可讀可寫的字符串,可設(shè)置或返回當前 URL 的協(xié)議湾趾。
語法
location.protocol=path
實例
假設(shè)當前的 URL 是: http://example.com:1234/test.htm#part2:
<html>
<body>
<script type="text/javascript">
document.write(location.protocol);
</script>
</body>
</html>
輸出:
http:
最后一種方法是深度定制bootstrap less
首先獲得bootstrap的源碼芭商,
打開源碼派草,你會發(fā)現(xiàn)Bootstrap的樣式是用LESS而不是CSS寫的。LESS 是一種動態(tài)樣式表語言铛楣,相比于CSS近迁,它支持多種優(yōu)秀特性,包括選擇器嵌套簸州,創(chuàng)建變量(就像在上面生成器中使用的)鉴竭。一旦寫完,你可以選擇將LESS代碼預(yù)先或在運行時編譯成 CSS岸浑。如果你喜歡 Sass拓瞪,可以使用這個適用于Sass的Bootstrap。
在 less 文件夾中助琐,你會看到許多按照組件來劃分的 LESS 文件。
實際上面氓,bootstrap是通過編譯bootstrap.less這一個文件而生成整個bootstrap.css文件的兵钮。我們看到bootstrap.less的作用僅僅是引入其他文件。這樣舌界,我們定制化的工作就好辦了掘譬。
以下這些文件是你要注意的:
bootstrap.less:
這個是核心文件。它用來引入其他文件呻拌,最終由你來編譯它葱轩。
reset.less:
始終是最先引入的文件。
variables.less 和 mixins.less:
這兩個文件總是同時出現(xiàn)藐握,因為其他文件都依賴于它們靴拱。前一個文件包含了在生成器網(wǎng)站上使用的相同的變量。
utilities.less
這個文件總是最后引入猾普,你可以把想要覆蓋的類寫到這里袜炕。
我們定制的思路就是,找到我們需要定制的組件和相對應(yīng)的變量初家,對其修改偎窘,然后編譯成我們自己的bootstrap.css即可。
下面講講具體實現(xiàn)方法溜在。
確保你已經(jīng)安裝好Less, 為了不讓我們修改的內(nèi)容與原始文件重合在一起陌知,我們需要模塊化的修改。
首先下載bootstrap源碼掖肋,下載后就不需要對其做任何的改動了仆葡。我們單獨建立一個文件夾(文件目錄只要能引用到bootstrap的less文件就可以),取名為custom-bootstrap培遵,其中包含以下三個文件:
custom-variables.less:
這個文件包含你要定制的變量浙芙。
custom-other.less:
這個文件中包含了那些無法通過修改變量完成定制的內(nèi)容登刺,比如增加或禁用button的text-shandow屬性。
custom-bootstrap.less
這是新的「核心」文件嗡呼。我們將把它編譯成CSS纸俭。與原始的 LESS文件一樣,它使用下面的命令來引入上面那兩個自定義文件(記住要保證文件正確的引用順序)
@import "../bootstrap/less/bootstrap.less"; //這個引用到原有的bootstrap文件
@import "custom-variables.less";
@import "custom-other.less";
@import "../bootstrap/less/utilities.less"; //我們同樣要引用原生的utilities.less南窗,因為我們要保證該文件始終最后一個被導(dǎo)入
這時揍很,我們只要編譯custom-bootstrap.less就可以了。
有一些需要注意的是万伤,custom-variables.less 不需要拷貝原有文件的所有內(nèi)容窒悔,只需要拷貝和你要定制的組件相關(guān)的變量就可以了,如果你這樣做了敌买,單獨編譯custom-variables.less或custom-other.less會提示缺少變量定義的錯誤简珠,但這沒關(guān)系,你只要保證編譯custom-bootstrap.less沒有錯誤就可以了虹钮。
這種方法的優(yōu)點在于聋庵,將定制的變化與原有庫代碼很好的隔離,卻又不失可維護性芙粱。即使今后升級bootstrap版本祭玉,我們也不要擔心重新構(gòu)建樣式框架了。
寫于最后:
如何更高效的定制bootstrap還有一點需要注意的就是春畔,你要理解bootstrap組織代碼的方式以及如果更高效的書寫Less脱货。
jQuery.extend([deep], target, object1, [objectN])
概述
用一個或多個其他對象來擴展一個對象,返回被擴展的對象律姨。
如果不指定target振峻,則給jQuery命名空間本身進行擴展。這有助于插件作者為jQuery增加新方法线召。 如果第一個參數(shù)設(shè)置為true铺韧,則jQuery返回一個深層次的副本,遞歸地復(fù)制找到的任何對象缓淹。否則的話哈打,副本會與原對象共享結(jié)構(gòu)。 未定義的屬性將不會被復(fù)制讯壶,然而從對象的原型繼承的屬性將會被復(fù)制料仗。
參數(shù)
target,[object1],[objectN] Object,Object,Object V1.0
target:一個對象,如果附加的對象被傳遞給這個方法將那么它將接收新的屬性伏蚊,如果它是唯一的參數(shù)將擴展jQuery的命名空間立轧。
object1:待合并到第一個對象的對象斑粱。
objectN:待合并到第一個對象的對象煤傍。
[deep],target,object1,[objectN] Object,Object,Object,Object V1.1.4
deep:如果設(shè)為true,則遞歸合并。
target:待修改對象娜庇。
object1:待合并到第一個對象的對象俭厚。
objectN:待合并到第一個對象的對象丧靡。
示例
描述:
合并 settings 和 options综膀,修改并返回 settings。
jQuery 代碼:
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
結(jié)果:
settings == { validate: true, limit: 5, name: "bar" }
描述:
合并 defaults 和 options, 不修改 defaults葛躏。
jQuery 代碼:
var empty = {};
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend(empty, defaults, options);
結(jié)果:
settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }