如何在JSF2.0中使用jQuery_Jquery_Jquery Plugins_Jsf 2

如何在JSF2.0中使用jQuery

jquery jquery-plugins jsf-2

如何在JSF2.0中使用jQuery,jquery,jquery-plugins,jsf-2,Jquery,Jquery Plugins,Jsf 2,我正在学习jQuery。我想在JSF2.0应用程序中使用jQuery。就像我有一个html文件，在其中我像这样使用jQuery <head> <title>The Devil's Dictionary</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="css

我正在学习jQuery。我想在JSF2.0应用程序中使用jQuery。就像我有一个html文件，在其中我像这样使用jQuery

<head>
    <title>The Devil's Dictionary</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="css/06.css" type="text/css" />

    <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="js/06.js"></script>
</head>

$(document).ready(function() {

    $('#letter-a a').click(function(){

        /**
         * The .load() method does all our heavy lifting for us! We specify the target location for
         * the HTML snippet by using a normal jQuery selector, and then pass the URL of the file to
         * be loaded as a parameter to the method. Now, when the first link is clicked, the file is
         * loaded and placed inside <div id="dictionary">. The browser will render the new HTML as
         * soon as it is inserted,
         */
        $('#dictionary').load('a.html');
        return false;

    }); //end of $('#letter-a a').click()

    /**
     * Occasionally, we don't want to retrieve all the JavaScript we will need when the page is
     * first loaded. We might not know what scripts will be necessary until some user interaction
     * occurs. We could introduce <script> tags on the fly when they are needed, but a more elegant
     * way to inject additional code is to have jQuery load the .js file directly.
     *
     * Pulling in a script is about as simple as loading an HTML fragment. In this case we use
     * the $.getScript() function, which, like its siblings, accepts a URL locating the script
     * file, as shown in the following code snippet:
     */
    $('#letter-c a').click(function(){

        $.getScript('js/c.js');
        return false;

    }); //end of $('#letter-c a').click(function())

}); //end of $(document).ready(fn)


魔鬼字典

我只是从jquery官方网站下载了jquery-1.7.1.js文件，将其包含到我的目录中，然后开始使用jquery

我的06.js文件编码如下

<head>
    <title>The Devil's Dictionary</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="css/06.css" type="text/css" />

    <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="js/06.js"></script>
</head>

$(document).ready(function() {

    $('#letter-a a').click(function(){

        /**
         * The .load() method does all our heavy lifting for us! We specify the target location for
         * the HTML snippet by using a normal jQuery selector, and then pass the URL of the file to
         * be loaded as a parameter to the method. Now, when the first link is clicked, the file is
         * loaded and placed inside <div id="dictionary">. The browser will render the new HTML as
         * soon as it is inserted,
         */
        $('#dictionary').load('a.html');
        return false;

    }); //end of $('#letter-a a').click()

    /**
     * Occasionally, we don't want to retrieve all the JavaScript we will need when the page is
     * first loaded. We might not know what scripts will be necessary until some user interaction
     * occurs. We could introduce <script> tags on the fly when they are needed, but a more elegant
     * way to inject additional code is to have jQuery load the .js file directly.
     *
     * Pulling in a script is about as simple as loading an HTML fragment. In this case we use
     * the $.getScript() function, which, like its siblings, accepts a URL locating the script
     * file, as shown in the following code snippet:
     */
    $('#letter-c a').click(function(){

        $.getScript('js/c.js');
        return false;

    }); //end of $('#letter-c a').click(function())

}); //end of $(document).ready(fn)

$（文档）.ready（函数（）{
$（'#字母a'）。单击（函数（）{
/**
*.load（）方法为我们完成所有繁重的工作！我们指定
*使用普通jQuery选择器创建HTML代码段，然后将文件的URL传递给
*现在，当单击第一个链接时，该文件将
*加载并放置在内部。浏览器将按以下方式呈现新HTML
*一旦插入，
*/
$（'#dictionary'）.load（'a.html'）；
返回false；
})；//美元（“#字母a”）的结尾。单击（）
/**
*有时候，我们不想检索页面打开时所需的所有JavaScript
*首先加载。在用户交互之前，我们可能不知道需要哪些脚本
*发生。我们可以在需要时动态引入标记，但更优雅的
*注入额外代码的方法是让jQuery直接加载.js文件。
*
*拉入脚本与加载HTML片段一样简单
*$.getScript（）函数，与它的同级函数一样，它接受一个定位脚本的URL
*文件，如以下代码段所示：
*/
$（'#字母c a'）。单击（函数（）{
$.getScript（'js/c.js'）；
返回false；
})；//美元（“#字母c a”）的结尾。单击（函数（））
}); //美元结束（文件）。准备就绪（fn）

这是我的html文件代码片段

<html>
<head>
    <title>The Devil's Dictionary</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="css/06.css" type="text/css" />

    <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="js/06.js"></script>
</head>

<body>

    <div id="container">

        <div class="letters">
            <div class="letter" id="letter-a">
                <h3><a href="#">A</a></h3>
            </div>

            <div class="letter" id="letter-b">
                <h3><a href="#">B</a></h3>
            </div>

            <div class="letter" id="letter-c">
                <h3><a href="#">C</a></h3>
            </div>

        </div>

        <div id="dictionary">
        </div>

    </div>

</body>


魔鬼字典

我想问一下，如果我在JSF2.0上创建相同的页面，那么jQuery将以相同的方式工作，或者我必须下载一些插件才能在我的JSF2.0应用程序中使用jQuery？或者修改web.xml中的内容

谢谢

它的工作原理是一样的

ID属性 JSF将表单的ID附加到表单中的所有输入字段。因此，您需要小心使用jQuery选择器。例如，假设您有以下表单：

<h:form id="myForm">
   <h:inputText id="myInput" />
</h:form>

相反，您应该通过以下方式导入来使用它们的内置jQuery库：

<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />

@埃德兹：谢谢。您说过要小心像

myForm:myInput

这样的ID。我想问，如果我使用

prependId=false

，该怎么办。然后我只有

myInput

作为ID，而不是

myForm:myInput

。Thanks@Basit：有关

prependid=“false”

的简短讨论，请参阅本节。你不应该过度使用它。我在这方面有过不好的经验：）我为这样的事情编写了一个自己的渲染器，在这里我可以用转义ID对我的jQuery部分进行编码。它应该是

$（“#myForm\\\：myInput”）

。你错过了完整的答案