2016-11-27

作者: 不系流年系乾坤 | 来源:发表于2016-11-27 23:34 被阅读16次

    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" }
    

    相关文章

      网友评论

        本文标题:2016-11-27

        本文链接:https://www.haomeiwen.com/subject/wbpnpttx.html