首页 > JavaScript > jQuey选择符,取得你想要的一切
2009四月9

jQuey选择符,取得你想要的一切

去年,当刚来到360不长的时间内就接触到了jQuery这个框架,并且也用了好久。
同年中秋,同事告之jQuery出书了。于是求着丫头让我买了这本《jQuery基础教程》(因为我买了好多书都没有看 :???: )。
这本也是一样,刚买后翻了几页,随后弃之一旁,直到近日,越来越觉得自己水平还差的远,于是拾起这本书,写下这个读书笔记,给自己留个备份。

通过各种选择符和方法取得的结果集合实际上都是一个jQuery对象。


$()是jQ的工厂函数,不知道是不是老外都比较喜欢美元(其实我也很喜欢,嘿嘿),好多个JS框架都用其当做工厂函数,难道是暗中期盼可以用这些个框架骗点美刀?

书的第二章标题叫做《选择符——取得你想要的一切》,感觉说的非常形象,如果你会用jQ选择符,你确实会取得你想要的一切。

CSS选择符:

$(document).ready(function(){
         $('#selected-plays > li').addClass('horizontal');
});

利用子元素选择符(>)将id为selected-plays内部顶级的li都加上了horizontal这个类名。

XPath选择符:

说实话,我不知道为什么要叫XML Path Language,有些不太明白。

jQuery使用了XPath中的惯例来标识属性,即将属性前置一个@符号并放在一对方括号中。

$('a[@href^="mailto:"]').addClass('mailto');

这只会给超链接中链接地址以mailto开始的选项增加类名为mailto

自定义选择符:

看jQuery API中有一列为“选择器”,里面有好多个带”:”开头的方法,按照书中介绍加上自己乱猜,我想这些可能就是其自定义选择符。
如果真的是这样的话看来,这自定义也不是真正的“自定义”,而是jQuery的“自定义”
同样,抄一个书中的例子

$('tr:odd').addClass('odd');

将所有table中的奇数行加类名为odd,但是记住哦,编程语言中大多数是“从零开始计数的”。

DOM遍历方法:

这里就不举例子了,因为其方法实在是太多,太多。

就说明一个定义吧,那就是“隐式迭代”

    <div id="par_div">
        <a href="#" id="href_fir">href_fir</a>
        <a href="#" id="href_sec">href_sec</a>
        <a href="#" id="href_thr">href_thr</a>
    </div>

如果我不用jQ怎么为每个超链接都增加一个onclick事件呢?难道要我写3次document.getElementById?

嘿,用jQ你只需要写下面的语句即可

$('#par_div  a').click(function(){
             alert($(this).text());
});

首先找到id为par_div的元素,对其下面的每个超链接都增加一个click事件,事件的响应函数是alert超链接的文本内容

简简单单的就写到这里,总体效果自己并不满意。不过没办法啊。自己文采不好。嘿,就这样吧。

参考资料:《jQuery基础教程》Jonathan Chaffer Karl Swedberg著 李松峰 李炜 等译 人民邮电出版社

文章作者:simaopig
本文地址:http://www.xiaoxiaozi.com/2009/04/09/99/
版权所有 © 转载时必须以链接形式注明作者和原始出处!

6 Responses to “jQuey选择符,取得你想要的一切”

  1. #1 看海 回复 | 引用 Post:2009-04-10 09:26

    小小子 ,这个代码着色,是不是用了codecolor
    启用就可以了? 写文章时是不是代码要用

     

    包括?

    [回复]

  2. #2 simaopig 回复 | 引用 Post:2009-04-10 09:49

    @看海
    呵,是啊。codecolorer很方便的。 :twisted:
    但是我前面文章有介绍啊。其实人家的FAQ里面写的,要在源代码模式下编辑才好哈。
    要不然在展示的时候其代码可能被转义,
    我感觉这个插件还是很帅的。嗯。

    [回复]

  3. #3 看海 回复 | 引用 Post:2009-04-10 12:40

    那个。你着色的样式是什么样的?

    我界面上的样式很丑

    [回复]

  4. #4 simaopig 回复 | 引用 Post:2009-04-10 12:47

    参数如下:
    Lines to scroll: 20
    Width (px): 435
    Height (px): 300
    Tab size: 4
    Theme: Blackboard
    Formatting: Show line numbers

    如果还有问题你可以去我看我的另一篇文章 :
    更换inove皮肤后,codecolorer处理
    :razz:

    [回复]

  5. #5 看海 回复 | 引用 Post:2009-04-10 13:02

    你有联系方式没。不介意咱们QQ聊。
    我的QQ号是:zhuixinjian@qq.com
    那个留言板还有点问题要请教你。

    [回复]

  6. #6 simaopig 回复 | 引用 Post:2009-04-10 13:13

    @看海
    呵呵,我的联系方式在小小子这里有哈。
    我去加你了。。

    [回复]

发表评论

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-D :-? :) :( :!: 8-O 8)