JQuery 选择器。

•                 #id

•                 element

•                 .class

•                 .class.class

•                 *

•                 selector1, selector2, selectorN

#id

用法: $(“#myDiv”);

说明: 这个就是直接选择html中的id=”myDiv”,值得注意的是:如果选择器中包含特殊字符，可以用两个斜杠(\\)转义,至少,”.”, “[",

"]” 是特殊字符.选择符内可以把双引号改为单引号,不过在复杂点的获取DOM的时候,单引号总是会引发歧义或错误,还是使用双引号吧.

element

用法: $(“div”);

说明: element的英文翻译过来是”元素”,所以element其实就是html已经定义的标签元素,例如 div, input, a 等等.

.class

用法: $(“.myClass”);

说明: 这个标签是直接选择html代码中class=”myClass”的元素或元素组(因为在同一html页面中class是可以存在多个同样值的).

.class.class

用法: $(“.myClass.myOtherClass”);

说明: 这个用法貌似是新的,意思就是仅匹配html中class=”myClass myOtherClass”的元素,而class=”myClass”和class=”

myOtherClass”这样的class是不匹配的.

*

用法: $(“*”);

说明: 匹配所有元素,多用于结合上下文来搜索.目前我还没用上它,不过看说明说是用来结合搜索用的,那么肯定会在大规模应用中用到吧.

selector1, selector2, selectorN

用法: $(“div,span,p.myClass”)

说明: 将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内.其中p.myClass是表

示匹配元素p class=”myClass”

 

 

层次(Hierarchy)的理解:使用构造的选择符来层层过滤DOM元素.

Hierarchy包括了四部分:

 

ancestor descendant

parent > child

prev + next

prev ~ siblings

ancestor descendant

用法: $(“form input”) ;

说明: 在给定的祖先元素下匹配所有后代元素.这个要下面讲的”parent > child”区分开.

 

parent > child

用法: $(“form > input”) ;

说明: 在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素.这里的是XPath用法,前面前面就说过了,jQuery是可以任意使用

XPath选择符的.

 

prev + next

用法: $(“label + input”) ;

说明: 匹配所有紧接在 prev 元素后的 next 元素.需要强调的是:label+其他元素+input这样的是不会被匹配的.

 

prev ~ siblings

用法: $(“form ~ input”) ;

说明: 匹配 prev 元素之后的所有 siblings 元素.注意:是匹配之后的元素,不包含该元素在内,并且siblings匹配的是和prev同辈的元素,

其后辈元素不被匹配.

 

基础过滤(Basic Filters)是相对于以后要学习的其他的过滤方法而言的,基础过滤(我小学没毕业,不知道是不是这样翻译)所过滤的内容都

是利用jQuery获得到的DOM元素,我的理解就是像一个大筛子,把利用那些基本选择器获得到的集合进行按规则剔除.

Basic Filters包括了十部分,稍稍有点多:

 

:first

:last

:not(selector)

:even

: odd

:eq(index)

:gt(index)

:lt(index)

:header

:animated

:first

用法: $(“tr:first”) ;

说明: 匹配找到的第一个元素.我以前就遇到了取第一个和最后一个的情况.

 

:last

用法: $(“tr:last”) ;

说明: 匹配找到的最后一个元素.与 :first 相对应.

 

:not(selector)

用法: $(“input:not(:checked)”) ;

说明: 去除所有与给定选择器匹配的元素.有点类似于”非”,意思是没有被选中的input(当input的type=”checkbox”).

 

:even

用法: $(“tr:even”) ;

说明: 匹配所有索引值为偶数的元素，从 0 开始计数.js的数组都是从0开始计数的.例如要选择table中的行,因为是从0开始计数,所以

table中的第一个tr就为偶数0.

 

: odd

用法: $(“tr:odd”) ;

说明: 匹配所有索引值为奇数的元素,和:even对应,从 0 开始计数.

 

:eq(index)

用法: $(“tr:eq(0)”) ;

说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值,不是元素排列数.

 

:gt(index)

用法: $(“tr:gt(0)”) ;

说明: 匹配所有大于给定索引值的元素.

 

:lt(index)

用法: $(“tr:lt(2)”) ;

说明: 匹配所有小于给定索引值的元素.

 

:header

用法: $(“:header”).css(“background”, “#EEE”) ;

说明: 匹配如 h1, h2, h3之类的标题元素.这个是专门用来获取h1,h2这样的标题元素.

 

:animated

例子:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

                    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

  <script src="http://code.jquery.com/jquery-latest.js"></script>

 

  <script>

  $(document).ready(function(){

 

    $("#run").click(function(){

      $("div:animated").toggleClass("colored");

    });

    function animateIt() {

      $("#mover").slideToggle("slow", animateIt);

    }

    animateIt();

 

  });

  </script>

  <style>

  div { background:yellow; border:1px solid #AAA; width:80px; height:80px; margin:5px; float:left; }

  div.colored { background:green; }

  </style>

</head>

<body>

  <button id="run">Run</button>

  <div></div>

  <div id="mover"></div>

  <div></div>

</body>

</html>

说明: 匹配所有正在执行动画效果的元素.这个需要好好理解下,因为看起来比之前的理解上都难一点.其中,toggleClass是添加/移除

class;slideToggle是收缩/伸展块级元素.也就是说slideToggle让其中的一个div在不断的执行动画(收缩/伸展),当点击button时,就用

div:animated匹配到了这个元素上,所以改变了颜色.

 

内容过滤(Content Filters).

对于jQuery的学习,最好的办法就是实际使用它,并多多的使用!不然很快就会忘记的.

•                 :contains(text)

•                 :empty

•                 :has(selector)

•                 :parent

:contains(text)

用法: $(“div:contains(‘John’)”) ;

说明: 匹配包含给定文本的元素.这个选择器比较有用(话说都很有用),当我们要选择的不是dom标签元素时,它就派上了用场了,它的作用是

查找被标签”围”起来的文本内容是否符合指定的内容的.

:empty

用法: $(“td:empty”) ;

说明: 匹配所有不包含子元素或者文本的空元素.嗯,这个看名字就大概知道是什么意思了,就是元素里面没有任何东西(子元素/内容)的时候

就匹配.

:has(selector)

用法: $(“div:has(p)”).addClass(“test”) ;

说明: 匹配含有选择器所匹配的元素的元素.这个解释需要好好琢磨,但是一旦看了使用的例子就完全清楚了:给所有包含p元素的div标签加

上class=”test”.

:parent

用法: $(“td:parent”) ;

说明: 匹配含有子元素或者文本的元素.注意:这里是”:parent”,可不是”.parent”哦!感觉与上面讲的”:empty”形成反义词.

 

 

可见度过滤(Visibility Filters),无非就是能看见和不能看见.所以Visibility Filters只包括了两部分:

 

:hidden

:visible

:hidden

用法: $(“tr:hidden”)

说明: 匹配所有的不可见元素，input 元素的 type 属性为 “hidden” 的话也会被匹配到.意思是css中display:none和input type=”

hidden”的都会被匹配到.同样,要在脑海中彻底分清楚冒号”:”, 点号”.”和逗号”,”的区别.

 

:visible

用法: $(“tr:visible”)

说明: 匹配所有的可见元素.

 

 

属性过滤(Attribute Filters)的内容就是html元素中的属性,例如 name, id, class, 但是不是指的其值,是指属性本身.我在每篇文章里面

都讲一下自己对这个选择器系列的理解,原因其一是方便理解其含义并记忆,其二就是”混个脸熟”,即便记不住,在以后用到的时候也可以很

快的查找api并应用上.

 

其包括以下几个选择器:

 

[attribute]

[attribute=value]

[attribute!=value]

[attribute^=value]

[attribute$=value]

[attribute*=value]

[attributeFilter1][attributeFilter2][attributeFilterN]

[attribute]

用法: $(“div[id]“) ;

说明: 匹配包含给定属性的元素.注意,在jQuery 1.3中,前导的@符号已经被废除!如果想要兼容最新版本,只需要简单去掉@符号即可.是的,

新版必须去掉@符号,这个改变相信使用老版本的童鞋会习惯的.例子中是选取了所有带”id”属性的div标签.

 

[attribute=value]

用法: $(“input[name='newsletter']“).attr(“checked”, true);

说明: 匹配给定的属性是某个特定值的元素.例子中选取了所有 name 属性是 newsletter 的 input 元素.

 

[attribute!=value]

用法: $(“input[name!='newsletter']“).attr(“checked”, true);

说明: 匹配所有不含有指定的属性，或者属性不等于特定值的元素.此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定

值的元素,请使用[attr]:not([attr=value]).嗯,之前看到的 :not 派上了用场.

 

[attribute^=value]

用法: $(“input[name^='news']“) ;

说明: 匹配给定的属性是以某些值开始的元素.嗯,我们又见到了这几个类似于正则匹配的符号.现在想忘都忘不掉了吧?!

 

[attribute$=value]

用法: $(“input[name$='letter']“) ;

说明: 匹配给定的属性是以某些值结尾的元素.

 

[attribute*=value]

用法: $(“input[name*='man']“) ;

说明: 匹配给定的属性是以包含某些值的元素.

 

[attributeFilter1][attributeFilter2][attributeFilterN]

用法: $(“input[id][name$='man']“) ;

说明: 复合属性选择器,需要同时满足多个条件时使用.又是一个组合,这种情况我们实际使用的时候很常用.这个例子中选择的是所有含有

id 属性,并且它的 name 属性是以 man 结尾的元素.

 

通过属性过滤(Attribute Filters)的学习,可以看出来,jQuery的选择器用法是微妙的,得细致而为之.让我想起来了那个因为一个小数点导

 

 

后代过滤(Child Filters)的意思就是利用其他jQuery选择器选择到了一组dom,而其都具有相同的属性与特征,无法再细化选择的时候,Child

Filters 此时就派上了用场了.它就是用来选择此组元素中的第几个.

 

其包括以下几个选择器:

 

:nth-child(index/even/odd/equation)

:first-child

:last-child

: only-child

:nth-child(index/even/odd/equation)

用法: $(“ul li:nth-child(2)”) ;

说明: 匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的 eq() 有些类似,不同的地方就是前者是

从0开始,后者是从1开始.

 

:first-child

用法: $(“ul li:first-child”) ;

说明: 匹配第一个子元素.’:first’ 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.这里需要特别点的记忆下区别.

 

:last-child

用法: $(“ul li:last-child”) ;

说明: 匹配最后一个子元素.’:last’只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.

 

: only-child

用法: $(“ul li:only-child”) ;

说明: 如果某个元素是父元素中唯一的子元素,那将会被匹配.如果父元素中含有其他元素,那将不会被匹配.意思就是:只有一个子元素的才

会被匹配!

 

然就很容易分开区别了.

 

这组表单(Forms)选择器内容稍稍多了点,有十一个,其实也就是input的那些type啦,但是熟悉html的童鞋快速的掌握这些一点问题都没有!

 

其包括以下几个选择器:

 

:input

:text

:password

:radio

:checkbox

:submit

:image

:reset

:button

:file

:hidden

:input

用法: $(“:input”) ;

说明: 这个自然就是选择所有的input类型了,不管type等于何值(首先得是符合游戏规则的).

 

:text

用法: $(“:text”) ;

说明: 匹配所有的单行文本框.

 

:password

用法: $(“:password”) ;

说明: 匹配所有密码框.

 

:radio

用法: $(“:radio”) ;

说明: 匹配所有单选按钮.

 

:checkbox

用法: $(“:checkbox”) ;

说明: 匹配所有复选框

 

:submit

用法: $(“:submit”) ;

说明: 匹配所有提交按钮.

 

:image

用法: $(“:image”) ;

说明: 匹配所有图像域.

 

:reset

用法: $(“:reset”) ;

说明: 匹配所有重置按钮.

 

:button

用法: $(“:button”) ;

说明: 匹配所有按钮.这个包括直接写的元素button.

 

:file

用法: $(“:file”) ;

说明: 匹配所有文件域.

 

:hidden

用法: $(“input:hidden”) ;

说明: 匹配所有不可见元素，或者type为hidden的元素.这个选择器就不仅限于表单了,除了匹配input中的hidden外,那些style为hidden的

也会被匹配.

注意: 要选取input中为hidden值的方法就是上面例子的用法,但是直接使用 “:hidden” 的话就是匹配页面中所有的不可见元素,包括宽度

或高度为0的,看个例子:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

                    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

  <script src="http://code.jquery.com/jquery-latest.js"></script>

 

  <script>

  $(document).ready(function(){

 

    // in some browsers :hidden includes head, title, script, etc... so limit to body

    $("span:first").text("Found " + $(":hidden", document.body).length +

                         " hidden elements total.");

    $("div:hidden").show(3000);

    $("span:last").text("Found " + $("input:hidden").length + " hidden inputs.");

 

  });

  </script>

  <style>

  div { width:70px; height:40px; background:#ee77ff; margin:5px; float:left; }

  span { display:block; clear:left; color:red; }

  .starthidden { display:none; }

  </style>

</head>

<body>

  <span></span>

  <div></div>

  <div style="display:none;">Hider!</div>

  <div></div>

  <div class="starthidden">Hider!</div>

  <div></div>

  <form>

    <input type="hidden" />

    <input type="hidden" />

    <input type="hidden" />

  </form>

  <span>

  </span>

</body>

</html>

在这里,大家需要仔细数一数那个个数.这个改变是从1.3.2开始

 

 

表单过滤(Form Filters)是jQuery文档中分出来的选择器中的最后一组,但这并不表示我们仅仅应用这些选择器就能够驰骋DOM海洋了,我们

还需要学习后面的过滤器等等.

 

其包括以下几个选择器:

 

:enabled

:disabled

:checked

:selected

:enabled

用法: $(“input:enabled”) ;

说明: 匹配所有可用元素.意思是查找所有input中不带有disabled=”disabled”的input.不为disabled,当然就为enabled啦.

 

:disabled

用法: $(“input:enabled”) ;

说明: 匹配所有不可用元素.与上面的那个是相对应的.

 

:checked

用法: $(“input:checked”) ;

说明: 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option).这话说起来有些绕口.

 

:selected

用法: $(“select option:selected”) ;

说明: 匹配所有选中的option元素.

 

posted on 2011-07-29 15:09  破阵子 . 如是我闻  阅读(1314)  评论(0)  编辑  收藏  举报

导航