Prototype框架之$$函数

最新推荐文章于 2021-10-27 20:01:45 发布

最新推荐文章于 2021-10-27 20:01:45 发布 · 190 阅读

文章标签：

#框架 #prototype #CSS #JavaScript #Dojo #ViewUI

$$是prototype框架里的一个亮点了，也是一种快捷方式，通过它可以根据css样式选择页面中的元素，它支持以下几种css选择方式。 $支持的css选择符

元素标签(tag)。$$("li")
元素ID,id前要加#。$$("#div_test")
css类，类名前加.。$$(".style1")
元素是否具有某个属性。$$("a[class]")
元素的某个属性是否符合特定的条件。$$("a[class='style1']")
以上的css选择符可以自由组合，形成一个复合的css选择符,中间不要有空格。如下：$$("a#link[class='link']")表示id为"link",class为".link"的链接元素（A）。
不同的css选择符（以上所有）之间用空格分隔，就组成一个多层的css选择符。如：$$(div p[class='js'])

以上内容的参考：《征服Ajax--dojo、prototype、script.aculo.us框架解析与实例》

$$()函数是Prototype 1.5新增的一个快捷方式，它允许开发人员通过CSS样式选择页面中的元素。熟悉XPath的读者会发现，CSS选择符在语法形式上和XML文档的XPath十分类似，Prototype支持的CSS选择符包括以下几种类型：

l 元素标签名称，例如：$$(“li”)。

l 元素ID，例如：$$(“#fixtures”)。

l CSS类名，例如：$$(“.first”)。

l 元素是否具有某个属性，例如：$$(“h1[class]”)。

l 元素的某个属性是否符合特定的条件，例如：$$('a[href="#"]')、$$('a[class~="internal"]')、$$('a[href!=#]')。

l 上面所有这些CSS选择符的类型可以自由组合，形成一个复合的CSS选择符，例如：$$('li#item_3[class][href!="#"]')。

l 不同的CSS选择符（包括复合CSS选择符）之间用空格分隔，就组成了一个多层的CSS选择符，它通过指定目标元素的父节点甚至更多层父节点的CSS样式属性来定位目标元素。例如：$$('div[style] p[id] strong')。

例2-8给出了一个$$()函数的测试页面示例，读者可以在该页面中输入不同的CSS选择符表达式，测试结果。

例2-8 $$()函数测试页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>chapter 3</title>
    <style type="text/css" media="screen">
        /* <![CDATA[ */#testcss1
        {
            font-size: 11px;
            color: #f00;
        }
        #testcss2
        {
            font-size: 12px;
            color: #0f0;
            display: none;
        }
        /* ]]> */</style>

    <script type="text/javascript" language="javascript" src="prototype.js"></script>

    <script>

        function test() {

            // 根据输入的CSS选择符，切换相应元素的显示

            $$($F('csspath')).each(

                function(item) {

                    Element.toggle(item);

                }

            );

        }

    </script>

</head>
<body>
    <form>
    <div id="fixtures">
        <h1 class="title">
            Some title <span>here</span></h1>
        <p id="p" class="first summary">
            <strong id="strong">This</strong> is a short blurb
            
            <a id="link_1" class="first internal" href="#">with a link</a> or <a id="link_2"
                class="internal highlight" href="#"><em id="em">two</em> </a>.
        </p>
        <ul id="list">
            <li id="item_1" class="first"><a id="link_3" href="#" class="external"><span id="span">
                Another link</span> </a></li>
            <li id="item_2">Some text</li>
            <li id="item_3" xml:lang="es-us" class="">Otra cosa</li>
        </ul>
    </div>
    <input type="text" value="" id="csspath" />
    <input type="button" value="click" onclick="test()" />
    </form>
</body>
</html>

例2-8的运行页面如图2-2所示，在文本输入框中输入一个CSS选择符（例如“.title”），点击“click”按钮即可切换相应的页面元素（即Some title here）的显示/隐藏状态。

(a) 在文本输入框中输入CSS选择符“.title” (b) 页面元素“Some title here”隐藏

图2-2 $$函数应用示例