如何在 JSF 2.0 中使用 jQuery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8667980/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use jQuery with JSF 2.0
提问by Basit
I am learning jQuery. I want to use jQuery inside my jsf 2.0 application. Like i have html file, in which i am using jQuery like this
我正在学习jQuery。我想在我的 jsf 2.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>
I simply downloaded the jquery-1.7.1.js file form jQuery official website, included it into my directory and then start using jQuery.
我只是从 jQuery 官方网站下载了 jquery-1.7.1.js 文件，将其包含在我的目录中，然后开始使用 jQuery。
My 06.js file conatin code like this
我的 06.js 文件包含这样的代码
$(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)
Here is my html file code snippet
这是我的 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>
I want to ask if i create the same page on JSF2.0, then jQuery will work in the same way or i have to downlaod some plugin to use jQuery inside my JSF 2.0 application? or to modify something inside my web.xml ?
我想问一下我是否在 JSF2.0 上创建了相同的页面，然后 jQuery 将以相同的方式工作，或者我必须下载一些插件才能在我的 JSF 2.0 应用程序中使用 jQuery？或者修改我的 web.xml 里面的东西？
Thanks
谢谢
回答by Mr.J4mes
It works the same way.
它的工作方式相同。
ID Attributes
身件属性
JSF appends the form's ID to all input fields inside the form. Hence, you need to be careful with your jQuery selectors. For example, suppose you have the following form:
JSF 将表单的 ID 附加到表单内的所有输入字段。因此，您需要小心使用 jQuery 选择器。例如，假设您有以下表单：
<h:form id="myForm">
<h:inputText id="myInput" />
</h:form>
Using jQuery, you have to refer to the input as: $("#myForm\\:myInput")
使用 jQuery，您必须将输入引用为： $("#myForm\\:myInput")
Frameworks
构架
Some frameworks such as PrimeFaces, use components that may not work or may lost their skinning if you import your jQuery with:
某些框架（例如 PrimeFaces）使用的组件可能无法正常工作或在您导入 jQuery 时可能会丢失外观：
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
Instead, you should use their built-in jQuery library by importing as:
相反，您应该通过导入以下内容来使用他们的内置 jQuery 库：
<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />
This jQuery library is, however, included in conflict mode which means you cannot use $(). Hence, you may need this additional setting:
但是，这个 jQuery 库包含在冲突模式中，这意味着您不能使用$(). 因此，您可能需要此附加设置：
<h:outputScript target="head">
$ = jQuery;
// Then you can use it
$(document).ready(function() {
...
});
</h:outputScript>
