jQuery的学习笔记4

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(字符串/函数)

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

  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对象

第四章 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数据,这样就能实现移走一个事件之后又能够把它移回来。

上一篇:freemarker自定义标签报错(八)


下一篇:Mysql中where条件一个单引号引发的性能损耗