Javascript jQuery添加到JSP页面
我在互联网上找到了一段jQuery代码，我想将它集成到我的jsp页面中，我使用Spring表单标记 以下是jQuery代码：Javascript jQuery添加到JSP页面,javascript,jquery,css,jsp,spring-mvc,Javascript,Jquery,Css,Jsp,Spring Mvc,我在互联网上找到了一段jQuery代码，我想将它集成到我的jsp页面中，我使用Spring表单标记 以下是jQuery代码： (function ($) { //тут превращаем select в input var id = "test", $id = $('#' + id), choices = $id.find('option').map(function (n, e) { var $e = $(e
(function ($) {
//тут превращаем select в input
var id = "test",
$id = $('#' + id),
choices = $id.find('option').map(function (n, e) {
var $e = $(e);
return {
id: $e.val(),
text: $e.text()
};
}),
width = $id.width(),
realClass = $id.get(0).className,
realId = $id.get(0).id,
$input = $('<input>',{width: width});
$id.after($input);
$id.hide();
$id.find('option').remove();
//превратили
$input.select2({
query: function (query) {
var data = {}, i;
data.results = [];
// подтставим то что искали
if (query.term !== "") {
data.results.push({
id: query.term,
text: query.term
});
}
// добавим остальное
for (i = 0; i < choices.length; i++) {
if (choices[i].text.match(query.term) || choices[i].id.match(query.term)) data.results.push(choices[i]);
}
query.callback(data);
}
}).on('change',function()
{
var value=$input.val();
$id.empty();
$id.append($('<option>').val(value))
$id.val(value);
}
);
})(jQuery);
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Страница выборки</title>
<link rel="stylesheet" href="resources/cssFiles/jquery-ui.css"/>
<link rel="stylesheet" href="resources/cssFiles/test.css"/>
<script type="text/javascript" src="resources/jsFiles/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="resources/jsFiles/jquery-ui.js"></script>
<script type="text/javascript" src="resources/jsFiles/jquery-ui-i18n.js"></script>
<script type="text/javascript" src="./resources/jsFiles/selecter.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#parctdate, #chldAdmitDate, #chldSchlDate, #name, #type, #daySchdl, #workSchdl, #rotation, #numbch, #chUnder3, #chUpper3, #chGoSchool, #chAdmitted").mouseenter(function() {
$(this).css("background-color", "gainsboro");
});
$("#parctdate, #chldAdmitDate, #chldSchlDate, #name, #type, #daySchdl, #workSchdl, #rotation, #numbch, #chUnder3, #chUpper3, #chGoSchool, #chAdmitted").mouseleave(function() {
$(this).css("background-color", "white");
});
var enabledDays = ["6-1-2013", "7-1-2013", "8-1-2013", "9-1-2013", "10-1-2013", "11-1-2013"];
function nationalDays(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
for (i = 0; i < enabledDays.length; i++) {
if($.inArray((m+1) + '-' + d + '-' + y,enabledDays) != -1 || new Date() > date) {
return [true];
}
}
return [false];
}
$(function(){
$.datepicker.setDefaults($.extend($.datepicker.regional["ru"]));
$("#datepicker1, #datepicker2, #datepicker3").datepicker({dateFormat: "yy-mm-dd",
duration: "normal",
numberOfMonths: [ 1, 2 ],
constrainInput: true,
beforeShowDay: nationalDays});
});
});
</script>
</head>
<body>
<spring:message code="label.input.button" var="labelbutton"/>
<h3 align="center"><spring:message code="label.input.topLabel"/></h3>
<form:form id="myform" cssClass="testClass" modelAttribute="fboAttribute" method="post" action="add" >
<table align="center">
<tr id="name">
<td><form:label path="institution.nameOfInstitution"><spring:message code="label.input.nameOfInstitution"/></form:label>
<form:select id="test" path="institution.nameOfInstitution">
<form:option value=""><spring:message code="label.select.msg" />-</form:option>
<form:options items="${listOfInstitutionsNames}"/>
</form:select>
<tr>
<td><input type="submit" value="${labelbutton}"/></td>
</table>
</form:form>
Страница выборки
$（文档）.ready（函数（）
{
$（“#parctdate，#chldmitdate，#chldSchlDate，#name，#type，#daySchdl，#workSchdl，#rotation，#numbch，#chUnder3，#chUpper3，#chGoSchool，#chAdmitted”）.mouseenter（函数（）{
$（this.css（“背景色”、“gainsboro”）；
});
$（“#parctdate，#chldmitdate，#chldSchlDate，#name，#type，#daySchdl，#workSchdl，#rotation，#numbch，#chUnder3，#chUpper3，#chGoSchool，#chadmited”）.mouseleave（函数（）{
$（this.css（“背景色”、“白色”）；
});
风险值启用日期=[“6-1-2013”、“7-1-2013”、“8-1-2013”、“9-1-2013”、“10-1-2013”、“11-1-2013”]；
功能国家日（日期）{
var m=date.getMonth（），d=date.getDate（），y=date.getFullYear（）；
对于（i=0；iDate）{
返回[真]；
}
}
返回[假]；
}
$（函数（）{
$.datepicker.setDefaults（$.extend（$.datepicker.regional[“ru”]）；
$（“#datepicker1，#datepicker2，#datepicker3”）.datepicker（{dateFormat:“yy-mm-dd”，
持续时间：“正常”，
月数：[1,2]，
输入：对，
展会前：国庆日}）；
});
});
-
谢谢jQuery与任何JavaScript一样，添加在JSP页面的
.js<script src="./libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jQuery.js"/></script>
我将jQuery.js保存在WebContent文件夹中（带有jsp页面）。如果您的意思是想将Java端信息绑定到js var，您可以像我一样：
var jsonObject=JSON.parse（“”）；
嗨，你的意思是什么？你好，先生。我想将jQuery+CSS集成到我的JSP中（我的最后一个问题选项卡就是），但我感到困惑，因为我以前没有使用过jQuery。所以insted和select标记之间的所有内容我想使用jQuery。代码，如您所见，这是我的属性${listOfInstitutionsNames}获取，我想把它们放在jQuery代码中，而不是jQuery属性-var测试-example中使用的代码。jQuery是一个JavaScript库。您不应该使用jQuery添加HTML代码。我不知道你说的积分是什么意思。。。但是您可以像这样将脚本添加到页面：
jquery.min.jsjQuery.js<form:form cssClass="testclass" id="myform" modelAttribute="fboAttribute" method="post" action="add" >
<script type="text/javascript" src="${pageContext.request.contextPath}/jQuery.js"/></script>
<script>
var jsonObject = JSON.parse("<%=yourJsonString%>");
</script>