2016-11-27

eq(index|-index)

概述

获取当前链式操作中第N个jQuery对象,返回jQuery对象,当参数大于等于0时为正向选取,比如0代表第一个,1代表第二个。当参数为负数时为反向选取,比如-1为倒数第一个,具体可以看以下示例。
类似的有get(index),不过get(index)返回的是DOM对象。

参数

index IntegerV1.1.2

一个整数,指示元素基于0的位置,这个元素的位置是从0算起。

-index IntegerV1.4

一个整数,指示元素的位置,从集合中的最后一个元素开始倒数。(-1算起)

示例

参数index描述:

获取匹配的第二个元素

HTML 代码:

<p> This is just a test.</p> <p> So is this</p>

jQuery 代码:

$("p").eq(1)

结果:

[ <p> So is this</p> ]

参数-index描述:

获取匹配的第二个元素

HTML 代码:

<p> This is just a test.</p> <p> So is this</p>

jQuery 代码:

$("p").eq(-2)

结果:

[ <p> This is just a test.</p> ]

siblings([expr])

概述

取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
参数

expr String V1.0

用于筛选同辈元素的表达式

示例

描述:

找到每个div的所有同辈元素。

HTML 代码:

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代码:

$("div").siblings()

结果:

[ <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")

结果:

[ <p class="selected">Hello Again</p> ]

attr(name|properties|key,value|fn)

概述

设置或返回被选元素的属性值。

参数

name String V1.0

属性名称

properties Map V1.0

作为属性的“名/值对”对象

key, valueString, Object V1.0

属性名称,属性值

key, function(index, attr)String, Function V1.1

1:属性名称。

2:返回属性值的函数,第一个参数为当前元素的索引值,第二个参数为原先的属性值。

示例

参数name 描述:

返回文档中所有图像的src属性值。

jQuery 代码:

$("img").attr("src");

参数properties 描述:

为所有图像设置src和alt属性。

jQuery 代码:

$("img").attr({ src: "test.jpg", alt: "Test Image" });

参数key,value 描述:

为所有图像设置src属性。

jQuery 代码:

$("img").attr("src","test.jpg");

参数key,回调函数 描述:

把src属性的值设置为title属性的值。

jQuery 代码:

$("img").attr("title", function() { return this.src });

JavaScript unescape() 函数

JavaScript 全局对象

定义和用法

unescape() 函数可对通过 escape() 编码的字符串进行解码。

语法

unescape(string)

参数 描述

string 必需。要解码或反转义的字符串。

返回值

string 被解码后的一个副本。

说明

该函数的工作原理是这样的:通过找到形式为 %xx 和 %uxxxx 的字符序列(x 表示十六进制的数字),用 Unicode 字符 \u00xx 和 \uxxxx 替换这样的字符序列进行解码。

提示和注释

注释:
ECMAScript v3 已从标准中删除了 unescape() 函数,并反对使用它,因此应该用 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 属性是一个可读可写的字符串,可设置或返回当前 URL 的协议。

语法

location.protocol=path

实例

假设当前的 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的源码,

打开源码,你会发现Bootstrap的样式是用LESS而不是CSS写的。LESS 是一种动态样式表语言,相比于CSS,它支持多种优秀特性,包括选择器嵌套,创建变量(就像在上面生成器中使用的)。一旦写完,你可以选择将LESS代码预先或在运行时编译成 CSS。如果你喜欢 Sass,可以使用这个适用于Sass的Bootstrap。

在 less 文件夹中,你会看到许多按照组件来划分的 LESS 文件。

实际上,bootstrap是通过编译bootstrap.less这一个文件而生成整个bootstrap.css文件的。我们看到bootstrap.less的作用仅仅是引入其他文件。这样,我们定制化的工作就好办了。

以下这些文件是你要注意的:

bootstrap.less:

这个是核心文件。它用来引入其他文件,最终由你来编译它。

reset.less:

始终是最先引入的文件。

variables.less 和 mixins.less:

这两个文件总是同时出现,因为其他文件都依赖于它们。前一个文件包含了在生成器网站上使用的相同的变量。

utilities.less

这个文件总是最后引入,你可以把想要覆盖的类写到这里。

我们定制的思路就是,找到我们需要定制的组件和相对应的变量,对其修改,然后编译成我们自己的bootstrap.css即可。

下面讲讲具体实现方法。

确保你已经安装好Less, 为了不让我们修改的内容与原始文件重合在一起,我们需要模块化的修改。

首先下载bootstrap源码,下载后就不需要对其做任何的改动了。我们单独建立一个文件夹(文件目录只要能引用到bootstrap的less文件就可以),取名为custom-bootstrap,其中包含以下三个文件:

custom-variables.less:

这个文件包含你要定制的变量。

custom-other.less:

这个文件中包含了那些无法通过修改变量完成定制的内容,比如增加或禁用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,因为我们要保证该文件始终最后一个被导入

这时,我们只要编译custom-bootstrap.less就可以了。

有一些需要注意的是,custom-variables.less 不需要拷贝原有文件的所有内容,只需要拷贝和你要定制的组件相关的变量就可以了,如果你这样做了,单独编译custom-variables.less或custom-other.less会提示缺少变量定义的错误,但这没关系,你只要保证编译custom-bootstrap.less没有错误就可以了。

这种方法的优点在于,将定制的变化与原有库代码很好的隔离,却又不失可维护性。即使今后升级bootstrap版本,我们也不要担心重新构建样式框架了。

写于最后:
如何更高效的定制bootstrap还有一点需要注意的就是,你要理解bootstrap组织代码的方式以及如果更高效的书写Less。

jQuery.extend([deep], target, object1, [objectN])

概述

用一个或多个其他对象来扩展一个对象,返回被扩展的对象。

如果不指定target,则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。 如果第一个参数设置为true,则jQuery返回一个深层次的副本,递归地复制找到的任何对象。否则的话,副本会与原对象共享结构。 未定义的属性将不会被复制,然而从对象的原型继承的属性将会被复制。
参数

target,[object1],[objectN] Object,Object,Object V1.0

target:一个对象,如果附加的对象被传递给这个方法将那么它将接收新的属性,如果它是唯一的参数将扩展jQuery的命名空间。

object1:待合并到第一个对象的对象。

objectN:待合并到第一个对象的对象。

[deep],target,object1,[objectN] Object,Object,Object,Object V1.1.4

deep:如果设为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);

结果:

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);

结果:

settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,784评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,745评论 2 378
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,702评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,229评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,245评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,376评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,798评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,471评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,655评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,485评论 2 318
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,535评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,235评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,793评论 3 304
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,863评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,096评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,654评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,233评论 2 341

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,571评论 18 139
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,722评论 1 92
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    程序员poetry阅读 114,212评论 24 450
  • 身世平顺画如人, 工笔花卉功夫深。 绘鸟呆病欠灵动, 了无八大泼墨韵。 又: 坦途人生少波澜, 不信君从画中观。 ...
    无影树阅读 289评论 1 1
  • 【7月30日】 更新 7月31日清退 20人,主要为入群未坚持或从未打卡者;若愿意8月1日 重新开始学习,请私信说...
    mytest阅读 1,646评论 2 0