JQuery学习笔记3
2.9属性选择器
属性选择器就是根据元素的属性和属性值作为过滤条件,来匹配对应的DOM元素。属性选择器一般都以中括号作为起止分界符
它的形式如下:
[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]作用:匹配给定的属性是以某些值开始的元素
[attribute*=value]作用:匹配给定的属性是以包含某些值的元素
[attribute$=value]作用:匹配给定的属性是以某些值结束的元素
2.10JQuery选择器优化
遵从以下的几个原则:
1.多用ID选择器
2.少用class选择器
3.多用父子关系少用嵌套关系
4.缓存JQuery对象
Chapter three使用过滤器
3.1过滤
过滤的方法:
类过滤:
语法结构:
hasClass(classname);
作用:该方法用于判断操作,判断当前的JQuery对象是否包含指定的类名,如果包含就返回true,否则就返回false,因此它的返回值是一个布尔值
下标过滤:
语法结构:
eq(index)
作用:使用下标过滤就可以精确选取出JQuery对象中指定下标的元素
参数index是由0开始的,用于指定元素在JQuery对象中的下标位置
表达式过滤
语法结构:
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对象
第四章 DOM操作
4.1创建节点
创建元素
语法结构:
document.creatElement(name)
作用:
创建了指定的对象,并返回新创建的元素对象,但是返回的对象只对js的上下文有效,要想让他能够在页面之中显示出来还需要调用element对象
代码如下:
<script>
Window.Onload=function(){
Var div=document.creatElement("div");
Document.Body.Appendchild(div)
</script>
输入文本
语法结构:
var text=document.Create TextNode("teXt")
注意:text不能单独存在,必须要包含在元素节点里面
设置属性
E.Setattribute(name,value)
4.2插入内容
内部插入
1.Append();
语法结构:
append(content)
Append(function(index,html))
作用:讲参数指定的元素插入到指定节点内的尾部
注意:
append()不仅能够接收HTML语句还能够接收JQuery对象,但是这个时候要注意的是它不能形成新的jquery对象,只能把原来的jquery对象移动位置,这样他原来的位置的内容就会被删除
2.Appendto()
作用:他和append()唯一的不同之处就在于他的容器和添加者的位置的相反了,appendto()括号内容的指的是容器,append()括号内容的指的是添加者
3.prepend()
语法结构:
prepand(content)
Prepand(function(index,html))
作用:能够把参数指定的内容插入到节点的最前面
注意:append()一样,prepand()同样的有相对应的preapandto()用法和前者类似
外部插入
1.After()
语法结构:
after(content)
After(function(index,HTML))
作用:在每个匹配的元素后面插入内容
2.Before()
语法结构:
Before(content)
Before(function(index,html))
作用:在每个匹配的元素前面插入内容
3.insertAfter()
和after的区别只在于主语的不一样
4.insertBefore()
和before的区别只在于主语的不一样
4,3删除内容
1.移出
语法结构:
remove([selector])
作用:用来删除指定节点和他包含的子节点,另外更重要的是它能够同时移出元素内部的一切,包括绑定的事件和jquery数据
2.清空
语法结构:
empty()
作用:清空元素包含的内容,他和remove的区别在于remove能够把这个元素删除(顺便把内容删除),而empty只能够把内容清除并不能删除这个元素
3.分离
语法结构:
Detach([expr])
作用:将需要移出的元素从dom中过滤出来,和remove()的区别在于detach()能够保留所有的jquery数据,这样就能实现移走一个事件之后又能够把它移回来。