jQueryInAction Reading Note 2.-白红宇

jQueryInAction Reading Note 2.

阅读量：5325 次

发布时间：2019-06-14

本文共 4199 字，大约阅读时间需要 13 分钟。

创建元素包装集

选择元素

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查找的是直接子元素中满足条件的元素。