创建元素包装集
选择元素
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()
没有参数,返回结果为上一个包装集和当前包装集的合集,是一个新的包装集。
使用这个方法可以把处于最栈顶的两个包装集进行合并,成为一个新的包装集。
感谢我的老婆,是她教会了不再上学的我安排学习进度,学习计划的。
同时也预祝她能够顺利通过暖通注册工程师的考试!