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

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

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

 

 


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

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

 

原文地址:https://www.cnblogs.com/voctrals/p/3784853.html