JQuery学习笔记3
2.9属性选择器
属性选择器就是根据元素的属性和属性值作为过滤条件，来匹配对应的ＤＯＭ元素。属性选择器一般都以中括号作为起止分界符
它的形式如下：
［ａｔｔｒｉｂｕｔｅ］
［ａｔｔｒｉｂｕｔｅ＝ｖａｌｕｅ］
［ａｔｔｒｉｂｕｔｅ！＝ｖａｌｕｅ］
［ａｔｔｒｉｂｕｔｅ＾＝ｖａｌｕｅ］作用：匹配给定的属性是以某些值开始的元素
［ａｔｔｒｉｂｕｔｅ＊＝ｖａｌｕｅ］作用：匹配给定的属性是以包含某些值的元素
［ａｔｔｒｉｂｕｔｅ＄＝ｖａｌｕｅ］作用：匹配给定的属性是以某些值结束的元素
２.１０ＪＱｕｅｒｙ选择器优化
遵从以下的几个原则：
１.多用ＩＤ选择器
２.少用ｃｌａｓｓ选择器
３.多用父子关系少用嵌套关系
４.缓存ＪＱｕｅｒｙ对象
Ｃｈａｐｔｅｒ ｔｈｒｅｅ使用过滤器
３.１过滤
过滤的方法：
类过滤：
语法结构：
ｈａｓＣｌａｓｓ（ｃｌａｓｓｎａｍｅ）；
作用：该方法用于判断操作，判断当前的ＪＱｕｅｒｙ对象是否包含指定的类名，如果包含就返回ｔｒｕｅ，否则就返回ｆａｌｓｅ，因此它的返回值是一个布尔值
下标过滤：
语法结构：
ｅｑ（ｉｎｄｅｘ）
作用：使用下标过滤就可以精确选取出ＪＱｕｅｒｙ对象中指定下标的元素
参数ｉｎｄｅｘ是由０开始的，用于指定元素在ＪＱｕｅｒｙ对象中的下标位置
表达式过滤
语法结构：
1.filter（字符串/函数）
该方法还可以带多个表达式，表达式之间通过逗号进行分割，这样就可以过滤更多的符合不同条件的元素。
- 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对象
第四章 ＤＯＭ操作
４.１创建节点
创建元素
语法结构：
ｄｏｃｕｍｅｎｔ．ｃｒｅａｔＥｌｅｍｅｎｔ（ｎａｍｅ）
作用：
创建了指定的对象，并返回新创建的元素对象，但是返回的对象只对ｊｓ的上下文有效，要想让他能够在页面之中显示出来还需要调用ｅｌｅｍｅｎｔ对象
代码如下：
＜ｓｃｒｉｐｔ＞
Ｗｉｎｄｏｗ．Ｏｎｌｏａｄ＝ｆｕｎｃｔｉｏｎ（）｛
Ｖａｒ ｄｉｖ＝ｄｏｃｕｍｅｎｔ．ｃｒｅａｔＥｌｅｍｅｎｔ（＂ｄｉｖ＂）；
Ｄｏｃｕｍｅｎｔ．Ｂｏｄｙ．Ａｐｐｅｎｄｃｈｉｌｄ（ｄｉｖ）
＜／ｓｃｒｉｐｔ＞
输入文本
语法结构：
ｖａｒ ｔｅｘｔ＝ｄｏｃｕｍｅｎｔ．Ｃｒｅａｔｅ ＴｅｘｔＮｏｄｅ（＂ｔｅＸｔ＂）
注意：ｔｅｘｔ不能单独存在，必须要包含在元素节点里面
设置属性
Ｅ．Ｓｅｔａｔｔｒｉｂｕｔｅ（ｎａｍｅ，ｖａｌｕｅ）
４．２插入内容
内部插入
１.Ａｐｐｅｎｄ（）；
语法结构：
ａｐｐｅｎｄ（ｃｏｎｔｅｎｔ）
Ａｐｐｅｎｄ（ｆｕｎｃｔｉｏｎ（ｉｎｄｅｘ，ｈｔｍｌ））
作用：讲参数指定的元素插入到指定节点内的尾部
注意：
ａｐｐｅｎｄ（）不仅能够接收ＨＴＭＬ语句还能够接收ＪＱｕｅｒｙ对象，但是这个时候要注意的是它不能形成新的ｊｑｕｅｒｙ对象，只能把原来的ｊｑｕｅｒｙ对象移动位置，这样他原来的位置的内容就会被删除
２.Ａｐｐｅｎｄｔｏ（）
作用：他和ａｐｐｅｎｄ（）唯一的不同之处就在于他的容器和添加者的位置的相反了，ａｐｐｅｎｄｔｏ（）括号内容的指的是容器，ａｐｐｅｎｄ（）括号内容的指的是添加者
３.ｐｒｅｐｅｎｄ（）
语法结构：
ｐｒｅｐａｎｄ（ｃｏｎｔｅｎｔ）
Ｐｒｅｐａｎｄ（ｆｕｎｃｔｉｏｎ（ｉｎｄｅｘ，ｈｔｍｌ））
作用：能够把参数指定的内容插入到节点的最前面
注意：ａｐｐｅｎｄ（）一样，ｐｒｅｐａｎｄ（）同样的有相对应的ｐｒｅａｐａｎｄｔｏ（）用法和前者类似
外部插入
１.Ａｆｔｅｒ（）
语法结构：
ａｆｔｅｒ（ｃｏｎｔｅｎｔ）
Ａｆｔｅｒ（ｆｕｎｃｔｉｏｎ（ｉｎｄｅｘ，ＨＴＭＬ））
作用：在每个匹配的元素后面插入内容
２.Ｂｅｆｏｒｅ（）
语法结构：
Ｂｅｆｏｒｅ（ｃｏｎｔｅｎｔ）
Ｂｅｆｏｒｅ（ｆｕｎｃｔｉｏｎ（ｉｎｄｅｘ，ｈｔｍｌ））
作用：在每个匹配的元素前面插入内容
３.ｉｎｓｅｒｔＡｆｔｅｒ（）
和ａｆｔｅｒ的区别只在于主语的不一样
４.ｉｎｓｅｒｔＢｅｆｏｒｅ（）
和ｂｅｆｏｒｅ的区别只在于主语的不一样
４,３删除内容
１.移出
语法结构：
ｒｅｍｏｖｅ（［ｓｅｌｅｃｔｏｒ］）
作用：用来删除指定节点和他包含的子节点，另外更重要的是它能够同时移出元素内部的一切，包括绑定的事件和ｊｑｕｅｒｙ数据
２.清空
语法结构：
ｅｍｐｔｙ（）
作用：清空元素包含的内容，他和ｒｅｍｏｖｅ的区别在于ｒｅｍｏｖｅ能够把这个元素删除（顺便把内容删除），而ｅｍｐｔｙ只能够把内容清除并不能删除这个元素
３.分离
语法结构：
Ｄｅｔａｃｈ（［ｅｘｐｒ］）
作用：将需要移出的元素从ｄｏｍ中过滤出来，和ｒｅｍｏｖｅ（）的区别在于ｄｅｔａｃｈ（）能够保留所有的ｊｑｕｅｒｙ数据，这样就能实现移走一个事件之后又能够把它移回来。