• jQueryInAction Reading Note 2.


    创建元素包装集

    选择元素

    1 CSS选择器

      这个小猿比较熟悉,为了给一组相同的页面元素设置相同的样式,会用到CSS选择器;

    2 子选择器

      也就是万能的“>”号了吧。选择父元素的直接子元素,li > a,选择作为无序列表直接子元素的所有链接。

    3 特性选择器

      a[href^=http://]选择是以http://开头的所有的链接,a[href$=.pdf]选择指向一个pdf文件的所有链接。

    如果我们并不关心其特性,可以省略=,如form[method],不管form是post还是get。据我所知,jQuery并不会给html元素提供默认的属性,而只是去判断页面元素是否包含了想要的东西。

    4 容器选择器

      li:has(a),选择出来的是所有包含链接的无序列表。

    jQuery的容器选择器只支持一层嵌套

    以下匹配出来的都是F
    E   F:处在E之的F
    E > F:处在E之,且作为E的直接子元素的F
    E + F:处在E之,且紧挨着E的F(兄弟节点)
    E ~ F:处在E之,不一定紧挨着E的F(兄弟节点)

    当出现冒号(:)的时候,会匹配冒号前面的元素

    E:has(F),E:not(F)等

      容器选择器选择出来的是【容器】。。。

    5 位置选择器

      E:first,E:last,第一个E元素,最后一个E元素。

      E:first-child,E:last-child,第一个子元素E,最后一个子元素E。

      E:first 选出来一个,第一个E元素

      E:first-child会选出来多个,作为第一个子节点的E元素。

      E:only-child,选择没有兄弟节点的E元素

      E:nth-child(n|even|odd),选择作为第N(从1开始)个子元素的元素,选择作为第奇数位的子元素的元素,选择作为第偶数位的子元素的元素。

      E:even,E:odd,选择第奇数位个E元素,选择第偶数位个E元素。

    E:nth(even) vs. E:even

    这么比应该没有什么区别。

       

      E:eq(n),E:gt(n),E:lt(n),这个n从0开始算起,选择第次序为n的元素,选择次序大于n的所有元素,选择次序小于n的所有元素。

      位置选择器都带冒号(:)。

    6 jQUery选择器

      :button,选择所有的按钮元素;

      :checked,选择已选中的复选框或者单选框;

      :contains("foo"),选择包含foo字串的元素;

      :header,选择所有的header,h1到h6;

      :parent,这个选择出来的是所有的非空的东西,如div,span等;

      :selected,选择已被选中的元素。

      :not(filter),反选择器,其中filter可以是筛选选择器,不可以是查找选择器; 

    筛选选择器:像上面这些,只会用来去过滤元素,而不必指定被过滤的元素的类型的都是筛选选择器;(筛选器)

      筛选器的典型特点是以冒号(:)或者方括号([)开头的。。。。

    查找选择器:查找选择器需要指明所要查找的元素的类型和规则。(元素选择器,选择器)

      选择器的典型特点是选择器中包含元素类型。。。。

    生成HTML

    $("<div>This is a test div</div>");

    就会生成一个新的元素,而这个元素并没有追加到DOM中,直到我们使用它。

    另外,创建一个空的元素可以直接使用如:$("<div>"),这等同于$("<div></div>")或者$("<div/>")。

    几个jQuery的函数

      jQuery函数作用于包装集之上,如$("p a")

    size()

      返回一个包装集中包含元素的个数

    length vs length()

    有一点可以肯定的是length是属性,而length()是方法

    javascript中有内置的数组,java中也有,他们不是对象,而是内核中能够识别的一个数据结构,他们都有length这个属性。

    而length()是一个方法,在java API中只有String类有这么一个方法,用来返回字符串的长度。

    size(),java中也有size(),它是集合的一个方法。

     

    get(index)

      index从0开始,选择包装集中的第index个元素,如果index没有指定的话,返回整个包装集数组

    jQuery的包装器返回值是一个特定的对象,它里面是包含一个javascript能够识别的数组的。

    但是让javascript去操作这个数组显得不那么专业(^.^),甚至有些丑陋,所以使用get(index)方法是一个不错的选择。

    实在想要使用javascript去操作的话,就使用不带参数的get(),它能够返回数组

     

    index(element)

    element是包装集元素数组中的一个元素,这个方法能够返回这个元素所在的位置。

    并不认为这个方法有多么有用。但是它能够判断是否在包装集中存在指定的元素,如果存在的话返回值大于负1。

     

    add(expression)

      expression是一个选择器类型的字符串,HTML片段,DOM元素,DOM元素数组,跟前面的选择器形成或的关系,追加一些元素到原来的包装集中;

    ● expression确实有多种类型。但是这个选择器需要注意一下,应该就是查找选择器。如下:

    img["alt*=something"] right!!!  // 查找选择器

    ["alt*=something"] wrong!!!  // 筛选选择器,以“[”开头了

     

    还有一点需要说明:

    调用这个方法的是一个包装集,而add进去的这些会跟原来的包装集组成一个新的包装集。

     

    还有一点需要记住:

    $("img[alt], img[title]")中的逗号","的实际含义也是或的意思。。。

     

    not(expression)

    这个expression跟add的不同,not的话是排除掉满足expression的元素;

    ● expression可以是一个过滤选择器(筛选器),也可以是一个元素。如下:

    img["alt*=something"] wrong!!!  // 查找选择器,不能作为参数

    ["alt*=something"] right!!!  // 过滤选择器

     

    filter(expresssion)

      这个expression是一个有boolean返回值的function,这个function有一个this的引用,filter的返回结果集为满足条件的元素组成;

      这个expression也可以是一个筛选器,会把满足条件的留下来。

    $("td").filter(function(){return this.innerHTML.match(/^d+$)};); // 返回内容是数字的td,注意这个this没有被$()包装起来,说明innerHTML是javascript的属性。

      this指代的是当前td元素,innerHTML是从td的开始标签结束到td的结束标签之间的所有的code,而不是页面上呈现出来的文本内容。

      页面上呈现出来的文本内容对应着的是:innerText。

    $("td").filter("[colspan]"); // 返回合并过的td

     

    slice(begin, end)

      begin必须,end可选。用来从一个包装集中选择部分连续的元素,组成新的包装集

      结果集的元素数量由end-begin确定,begin确定第一个截取元素的位置,从0开始。

     

    利用关系获取包装集

    children()  返回包装集元素中每一个元素的子元素组成的包装集;

    contents()  返回所有的元素,包含text;

    next()          返回包装集元素中每一个元素的下一个兄弟元素组成的包装集;

    nextAll()   

    parent()   返回包装集元素中每一个元素的直接父元素组成的包装集;

    parents()   返回包装集元素中每一个元素的所有父元素组成的包装集;

    prev()      返回包装集元素中每一个元素的前一个兄弟元素组成的包装集;

    prevAll()

    siblings()  返回包装集元素中每一个元素的所有兄弟元素组成的包装集。

     

    使用包装集的其它途径

      find(selector)

        selector是一个jQuery元素选择器,它能够从一个包装集中把满足selector要求的元素查找出来,组成一个新的包装集

    find() vs. filter()

    filter过滤的是包装集里面的元素,返回的是包装集的子集;

    find是从包装集的子元素里面查找满足需求的元素,返回的结果集与原包装集无关。

     

    find() vs. children()

    这两个的区别在于find查找的不仅仅是直接子元素中的内容,

    而children查找的是直接子元素中满足条件的元素。

      is(selector)

        selector是一个元素选择器,如果包装集中有一个元素满足指定的选择器,那么结果就为true。

        

    选择器的总结

      看了这么多,好像只有not()和filter()方法的参数可以是过滤选择器,其它的都是元素选择器。

    jQuery链的管理

    end()

      没有参数,返回结果为上一个包装集;

    jQuery的某些方法会对包装集产生影响,如过滤掉某些元素,追加某些元素等,返回的包装集已经不再是以前的包装集了,尽管还是那个引用。

    这个时候如果想要回到以前的那个包装集的话就可以使用end()方法,但是这个end()方法只能返回到上一层,也就是说可以返回多层。

    按照栈的说话就是,把最顶层的操作单元出栈,上一层包装器成为栈顶。

     

    andSelf()

      没有参数,返回结果为上一个包装集和当前包装集的合集,是一个新的包装集。

    使用这个方法可以把处于最栈顶的两个包装集进行合并,成为一个新的包装集。

     

     


    感谢我的老婆,是她教会了不再上学的我安排学习进度,学习计划的。

    同时也预祝她能够顺利通过暖通注册工程师的考试!

     

  • 相关阅读:
    php之static静态变量详解
    设计模式【代理模式】
    小牟Andorid下面MD5具体实现的思路总结
    ubuntu14.04安装MySQL
    Android手机定位技术的发展
    我不同意你,这是您的支持
    我要遵守11文章数据库设计指南
    quick-cocos2d-x游戏开发【3】——display.newSprite创建向导
    第二章 自己的框架WMTS服务,下载数据集成的文章1
    JSTL实现int数据的类型的长度
  • 原文地址:https://www.cnblogs.com/voctrals/p/3784853.html
Copyright © 2020-2023  润新知