jQuery的学习笔记4

JQuery学习笔记3

2.9属性选择器

属性选择器就是根据元素的属性和属性值作为过滤条件，来匹配对应的ＤＯＭ元素。属性选择器一般都以中括号作为起止分界符

它的形式如下：

［ａｔｔｒｉｂｕｔｅ］

［ａｔｔｒｉｂｕｔｅ＝ｖａｌｕｅ］

［ａｔｔｒｉｂｕｔｅ！＝ｖａｌｕｅ］

［ａｔｔｒｉｂｕｔｅ＾＝ｖａｌｕｅ］作用：匹配给定的属性是以某些值开始的元素

［ａｔｔｒｉｂｕｔｅ＊＝ｖａｌｕｅ］作用：匹配给定的属性是以包含某些值的元素

［ａｔｔｒｉｂｕｔｅ＄＝ｖａｌｕｅ］作用：匹配给定的属性是以某些值结束的元素

２.１０ＪＱｕｅｒｙ选择器优化

遵从以下的几个原则：
１.多用ＩＤ选择器

２.少用ｃｌａｓｓ选择器

３.多用父子关系少用嵌套关系

４.缓存ＪＱｕｅｒｙ对象

Ｃｈａｐｔｅｒ　ｔｈｒｅｅ使用过滤器

３.１过滤

过滤的方法：
类过滤：
语法结构：
ｈａｓＣｌａｓｓ（ｃｌａｓｓｎａｍｅ）；

作用：该方法用于判断操作，判断当前的ＪＱｕｅｒｙ对象是否包含指定的类名，如果包含就返回ｔｒｕｅ，否则就返回ｆａｌｓｅ，因此它的返回值是一个布尔值

下标过滤：

语法结构：
ｅｑ（ｉｎｄｅｘ）

作用：使用下标过滤就可以精确选取出ＪＱｕｅｒｙ对象中指定下标的元素

参数ｉｎｄｅｘ是由０开始的，用于指定元素在ＪＱｕｅｒｙ对象中的下标位置

表达式过滤

语法结构：
1.filter（字符串/函数）

该方法还可以带多个表达式，表达式之间通过逗号进行分割，这样就可以过滤更多的符合不同条件的元素。

1. has(字符串/元素）

作用：专门用来保留包含特定后代的元素，去掉那些不含有特定后代的元素。

判断：
语法结构：

Is（字符串/元素）

作用：用来检测JQuery对象中是否包含特定符合条件的元素

3，映射

语法结构：
map(回调函数）

作用：通过映射关系，把JQuery对象中每一个元素映射到一个数组之中，也就是说将一组元素转换成其他数组。

4.清洗

语法结构：not（expr）

作用：能够从jquery对象中删除符合条件的元素

5.截取

语法结构：

Slice（start，【end】)

start和end都是整数，前者的作用是用来表示开始选取子集的位置，第一个元素是0，如果该参数是负数，表示从尾部开始选取，end是可选的，如果不定义的话就表示到子集的末尾，如果指定的话就要注意：它不包含所指定的那一位。

3.2查找

向下查找后代元素

1.children（）

语法结构：
children（【expr】）

作用：查找当前元素的所有或者部分子元素

2.contents（）

语法结构：

Contents()

注意：他不能够加表达式

作用：和前者的作用差不多，区别在于他不能带参数，另外，不仅可以查找所有子元素还可以查找文本节点和注释节点

3.find（expr）

作用：能够查找所有的后代元素，而children()只能查找子元素，所以他的能力比它强；但是他的能力会比contents()弱一点，因为他不能查找文本节点和注释节点

向上查找祖先元素

1.parents（）

语法结构：

Parents（[expr]）

作用：查找所有匹配元素的祖先元素。如果省略了参数的话就会查找所有元素的祖先元素

2.parent（）

语法结构：

Parent([expr])

作用：取得一个包含所有匹配元素的唯一的父元素

3.parentUntil()

语法结构：
parentUntil([selector])

作用：查找指定范围内的所有祖先元素，相当于在parents()所找的所有祖先元素截取一部分

4.offsetparent()

作用：能够定位到当前元素的第一个父元素

5.closeset()

作用：用来查找指定的父元素

向上查找兄弟元素

1.prev（）

语法结构：
prev([expr])

作用：匹配上一个相邻的元素

2.prevall()

语法结构：
prev([expr])

作用：匹配上面所有的同辈的子元素

3.prevuntil()

语法结构：

Prevuntil（[expr]）

作用：介于prev和prevall（）之间，作用是用来选择指定范围之内的所有的同辈的子元素

向下查找兄弟元素

1.next()

语法结构：
next([expr])

作用：只能匹配下一个相邻的元素，和prev刚好相反

2.nextall()

语法结构:

Nextall（[expr]）

作用：能够匹配下面所有的同辈的元素

3.nextuntil()

语法结构：

Nextuntil([expr])

作用：能够在指定的范围之内查找所有的同辈元素

查找兄弟元素

1.sibling（）

语法结构：

Sibling([expr])

作用：能够查找所有同辈的元素，不管是在下面还是上面的

添加查找对象

1.add(expr,[context])

作用：向查找的结果添加新的查找内容

3.3串联
addself（）

作用：把前面的两个的JQuery对象链起来，变成一个对象，这时候设置的属性就能够够前面两者同时起作用，起到绑定的作用

End()

作用：返回前一个JQuery对象

第四章 ＤＯＭ操作

４.１创建节点

创建元素

语法结构：
ｄｏｃｕｍｅｎｔ．ｃｒｅａｔＥｌｅｍｅｎｔ（ｎａｍｅ）

作用：
创建了指定的对象，并返回新创建的元素对象，但是返回的对象只对ｊｓ的上下文有效，要想让他能够在页面之中显示出来还需要调用ｅｌｅｍｅｎｔ对象

代码如下：
＜ｓｃｒｉｐｔ＞

Ｗｉｎｄｏｗ．Ｏｎｌｏａｄ＝ｆｕｎｃｔｉｏｎ（）｛

Ｖａｒ　ｄｉｖ＝ｄｏｃｕｍｅｎｔ．ｃｒｅａｔＥｌｅｍｅｎｔ（＂ｄｉｖ＂）；

Ｄｏｃｕｍｅｎｔ．Ｂｏｄｙ．Ａｐｐｅｎｄｃｈｉｌｄ（ｄｉｖ）

＜／ｓｃｒｉｐｔ＞

输入文本

语法结构：
ｖａｒ　ｔｅｘｔ＝ｄｏｃｕｍｅｎｔ．Ｃｒｅａｔｅ　ＴｅｘｔＮｏｄｅ（＂ｔｅＸｔ＂）

注意：ｔｅｘｔ不能单独存在，必须要包含在元素节点里面

设置属性

Ｅ．Ｓｅｔａｔｔｒｉｂｕｔｅ（ｎａｍｅ，ｖａｌｕｅ）

４．２插入内容

内部插入

１.Ａｐｐｅｎｄ（）；

语法结构：
ａｐｐｅｎｄ（ｃｏｎｔｅｎｔ）

Ａｐｐｅｎｄ（ｆｕｎｃｔｉｏｎ（ｉｎｄｅｘ，ｈｔｍｌ））

作用：讲参数指定的元素插入到指定节点内的尾部

注意：
ａｐｐｅｎｄ（）不仅能够接收ＨＴＭＬ语句还能够接收ＪＱｕｅｒｙ对象，但是这个时候要注意的是它不能形成新的ｊｑｕｅｒｙ对象，只能把原来的ｊｑｕｅｒｙ对象移动位置，这样他原来的位置的内容就会被删除

２.Ａｐｐｅｎｄｔｏ（）

作用：他和ａｐｐｅｎｄ（）唯一的不同之处就在于他的容器和添加者的位置的相反了，ａｐｐｅｎｄｔｏ（）括号内容的指的是容器，ａｐｐｅｎｄ（）括号内容的指的是添加者

３.ｐｒｅｐｅｎｄ（）

语法结构：
ｐｒｅｐａｎｄ（ｃｏｎｔｅｎｔ）

Ｐｒｅｐａｎｄ（ｆｕｎｃｔｉｏｎ（ｉｎｄｅｘ，ｈｔｍｌ））

作用：能够把参数指定的内容插入到节点的最前面

注意：ａｐｐｅｎｄ（）一样，ｐｒｅｐａｎｄ（）同样的有相对应的ｐｒｅａｐａｎｄｔｏ（）用法和前者类似

外部插入

１.Ａｆｔｅｒ（）

　语法结构：
　　ａｆｔｅｒ（ｃｏｎｔｅｎｔ）

Ａｆｔｅｒ（ｆｕｎｃｔｉｏｎ（ｉｎｄｅｘ，ＨＴＭＬ））

作用：在每个匹配的元素后面插入内容

２.Ｂｅｆｏｒｅ（）

　语法结构：

Ｂｅｆｏｒｅ（ｃｏｎｔｅｎｔ）

Ｂｅｆｏｒｅ（ｆｕｎｃｔｉｏｎ（ｉｎｄｅｘ，ｈｔｍｌ））

作用：在每个匹配的元素前面插入内容

３.ｉｎｓｅｒｔＡｆｔｅｒ（）

和ａｆｔｅｒ的区别只在于主语的不一样

４.ｉｎｓｅｒｔＢｅｆｏｒｅ（）

　和ｂｅｆｏｒｅ的区别只在于主语的不一样

４,３删除内容

１.移出

　语法结构：
ｒｅｍｏｖｅ（［ｓｅｌｅｃｔｏｒ］）

作用：用来删除指定节点和他包含的子节点，另外更重要的是它能够同时移出元素内部的一切，包括绑定的事件和ｊｑｕｅｒｙ数据

２.清空

　语法结构：
　　ｅｍｐｔｙ（）

　　作用：清空元素包含的内容，他和ｒｅｍｏｖｅ的区别在于ｒｅｍｏｖｅ能够把这个元素删除（顺便把内容删除），而ｅｍｐｔｙ只能够把内容清除并不能删除这个元素

３.分离

　语法结构：

　Ｄｅｔａｃｈ（［ｅｘｐｒ］）

作用：将需要移出的元素从ｄｏｍ中过滤出来，和ｒｅｍｏｖｅ（）的区别在于ｄｅｔａｃｈ（）能够保留所有的ｊｑｕｅｒｙ数据，这样就能实现移走一个事件之后又能够把它移回来。