jquery 学习速成笔记

Jquery可以像CSS一样选择页面内的元素。比如：$(''p'')会选中所有的段落。

使用$(document).ready()就可以添加文档载入完毕之后执行的代码。

使用$.fn.func = function(){}的方式可以扩展jQuery。

选择器

简单示例：

<script type="text/JavaScript"> $(document).ready(function(){ //选中所有的段落： $(''p'').css(''color'',''red''); //选中设置了title属性的段落： $(''p[title]'').css(''color'',''blue''); //选中href属性中包含bbs的段落： $(''a[href*=bbs]'').css(''fontWeight'',''bold''); //选中，含有链接的li元素 $(''li:has(a)'').css(''border'',''1px solid black''); //选中作为第一个子节点的p元素： $(''p:first-child'').css(''backgroundColor'',''pink''); //选中可见的p元素 $(''p:visible'').css(''fontSize'',''20px''); }); </script>

属性选择器

p[title]

只选择设置了title属性的p元素。

p[title=foo]title

title属性等于foo的。

p[title^=foo]

title属性以foo开头的。

p[title$=foo]

title属性以foo结束的。

p[title*=foo]

title属性含有foo的。

例如：

$(''p[title]'').css(''color'',''blue'');

选中了设置title属性的p，并且将其颜色设置为blue。

包含选择器

li:has(a)

表示含有a的li元素。

例如：

$(''li:has(a)'').css(''border'',''1px solid black'');

选中含有a的里元素，并且设置其style的border属性。

位置选择器

p:first-child

选中作为第一个子元素的p元素。

例如：

$(''p:first-child'').css(''backgroundColor'',''pink'');

类似的还有

p:nth-child(n)

例如：

$(''p:nth-child(3)'').css(''backgroundColor'',''yellow'');

选中第三段。

这些表示子节点位置的都是从1开始计数的。

:odd

选中位置排序是奇数的元素。

even

选择偶数位置的元素。

eq(n)

选中第n个元素。

这些都是从0开始计数的。

以上为书上的分类方式。

所有选择器

按照官方的选择器分类，而不是书上的表。

基本选择器：

1. #id

2. element

3. .class

4. *

5. selector1, selector2, selectorN

层次选择器：

1. ancestor descendant
   div p选中p，且p必须在div中。可以是隔代的关系

2. parent > child
   div>p选中p，且p必须是div的子元素，不包括隔代。

3. prev + next
   div+p紧跟着div的p

4. prev ~ siblings
   div~p选中p，且p前面必须是div。

基本过滤器：

1. :first
   p:first匹配第一个p元素

2. :last
   p:last匹配最后一个p元素

3. :not(selector)
   过滤掉selector选中的元素

4. :even
   偶数元素，0开始的索引。

5. :odd
   奇数元素，0开始的索引。

6. :eq(index)
   根据index返回一个元素。

7. :gt(index)
   索引大于index的元素。

8. :lt(index)
   索引小于index的元素。

9. :header
   标题元素，h1到h6。

10. :animated
    当前正在动画状态的元素。

内容过滤器：

1. :contains(text)
   匹配文本中包含text的元素。

2. :empty
   匹配没有任何子节点的元素。(有文本节点算作有节点)

3. :has(selector)
   在selector匹配的元素中，至少要包含一个才可以匹配。

4. :parent
   匹配所有作为父元素的元素。

可见性过滤器：

1. :hidden
   所有可见元素

2. :visible
   匹配所有不可见元素。

属性过滤器：

1. [attribute]
   设置了指定属性的元素。

2. [attribute=value]
   属性attribute的值等于value

3. [attribute!=value]
   属性attribute的值不等于value，或者没有指定该