JSP JQuery作为MVC的前端

1.修改某个元素中的内容

<span class="colorRed"></span>
<tbody id="xxx"></tbody>

  var numEle = document.getElementById("errNum");
  numEle.innerText = res.length;
  $(".colorRed").html(errNum); // jquery提供的方法
  $("#xxx").html('<tr></tr>');

2.jsp中将日期转化为指定的格式

首先需要在jsp页面引入：

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

使用：对应的updatetime在数据库中的类型为datetime

<span><fmt:formatDate value="${basicInfo.updatetime}" type="date" pattern="yyyy-MM-dd HH:mm:ss"/></span>

3.原生的下拉选择框使用与取值

select默认值为x

<select class="" id="unitid" value="x">
    <option value="x">老式蛋糕奶茶</option>
    <option value="y">台式珍珠奶茶</option>
</select>

option单个取值：

$("#unitid option:selected").val() // jquery的用法

如果希望select的值能够跟着选中状态变化，js中加入：

$(function () {
    $("#unitid").change(function (){
        $("#unitid").val($("#unitid option:selected").val()) // jquery的用法
    })
});

4.当拼接html时，需要给调用的方法传递对象参数报错；拼接两个参数的方法

问题描述：出现onclick（[object Object]）类似的报错。
使用JSON.stringify(item).replace(/"/g, “'”)转为json字符串传递，对应的函数接收之后会变为对象

spanHtml += '<span οnclick="askErrs(' + JSON.stringify(item).replace(/\"/g, "'") + ',' + startPos + ')">' + paraText.substring(startPos, endPos) + '</span>';
$("#x_" + paraIndex).html(spanHtml);

5.鼠标悬浮出现弹框

<p class="xmistake">几杯奶茶：<span class="colorRed" id="singlePartErr">0</span>杯</p>

window.onload = function () {
    $("#singlePartErr").mouseenter(function () {
        layer.alert("100杯")
    })
};

6.使用layer.tips弹出的悬浮框位置不准确

使用以下拼接id的方法，悬浮框不会在对应的span标签上悬浮，而是在span外面的元素悬浮。

t4 +=  '<p>' +
       '  <span id=' + "fragment_err_" + i + ' class="colorRed fragment_err" οnmοuseenter=detailTip("' + html2Escape(msg).replaceAll(" ", "\\t") +
       '","' + i + '","0")  οnmοuseleave=closeMsg()>' + msg + '</span>\n' +
       '  </p>';

var tip_index;
function detailTip(str, index, type) {
    var prefix = "#fragment_err_"
    if (type == 1) {
        prefix = "fragment_req_"
    }
    tip_index = layer.tips(str, prefix + index, {
        tips: [1, '#000'],
        area: ['450px', 'auto']
    });
}
function closeMsg() {
    layer.close(tip_index)
}      

修改为直接传递this，能够准确的在span元素上悬浮

t4 += '<p >' +
      '  <span id=' + "fragment_err_" + i + ' class="colorRed fragment_err" οnmοuseenter=detailTip("' + html2Escape(msg).replaceAll(" ", "\\t") +
      '",this,"0") οnmοuseleave=closeMsg()>' + msg + '</span>\n' +
      '  </p>';
function detailTip(str, thiz, type) {
    tip_index = layer.tips(str, thiz, {
        tips: [1, '#000'],
        area: ['450px', 'auto']
    });
}

7.让某个元素滚动到顶部

JQuery用法：

$('.paragraphList').scrollTop(0);

写在点击方法的内部，能够达到点击某个元素另一个元素滚动到最上方的效果。
实现：点击冰淇淋蛋糕，右边的蛋糕列表会滚动到顶部

// on(点击事件，子类选择器，回调）
$('.cake').on('click', '.icecream', function () {
        $('.name').scrollTop(0);
        $('#xxx').children('.yyy').hide();
});