首页 > 技术文章 > java JSTL Jquery(待补充)

shangjinshuai 2021-01-16 17:18 原文

JSTL
    ? JSP Standard Tag Library JSP标准标签库  jstl通过嵌入到jsp页面中使用标签形式完成一定的业务逻辑,一般情况下jstl和EL表达式是搭配使用的,
        可以简化jsp脚本代码
    ? 在jstl中有五个子库  使用频率最高的是核心库core
    标签库    标签库的uri    前缀
    core    http://java.sun.com/jsp/jstl/core    c
    i18N    http://java.sun.com/jsp/jstl/fmt    fmt
    SQL    http://java.sun.com/jsp/jstl/sql    sql
    XML    http://java.sun.com/jsp/jstl/xml    x
    Function    http://java.sun.com/jsp/jstl/functions    fn
    ? jstl常用标签
        ○ <c:url calue="请求资源路径"/> url路径标签
             <form action="${pageContext.request.contextPath}/selectAll" >
               <input type="submit" value="提交">
            </form>
            <form action="<c:url value='/selectAll'/>">
                 <input type="submit" value="提交">
            </form>
            <a href="${pageContext.request.contextPath}/update">超链接</a>
            <a href="<c:url value='/update'/>">超链接</a>
        ○ <c:if test = "条件表达式"/> 单判断标签
         <c:if test="${ 1 == 2}">
                <h3>1等于2</h3>
            </c:if>
            <c:if test="${not empty list}">
               <h3>list值为空</h3>
            </c:if>
        ○ c:choose(case)  多条件判断(情形互斥) 结合c:when标签(if/when)  c:otherwise中的内容(else/rhen)  sql语句中的case when rhen end相似
            <c:choose>
               <c:when test="${1 == 2}">
                   <h3>1等于2</h3>
               </c:when>
               <c:when test="${1 > 2}">
                 <h3> 1 大于2 </h3>
               </c:when>
              <!--以上情况下均不满足,执行c:otherwise中的内容-->
               <c:otherwise>
                   <h3>1 小于 2</h3>
               </c:otherwise>
            </c:choose>
        注意事项:不能单独使用c:choose标签
        ○ c:forEach 循环遍历标签  普通for循环
            § begin标识索引开始值,默认是0
            § end:标识索引结束值,默认为length-1(end不包含  [begin,end)左闭右开)
            § step:表示频率,默认值1,可以指定频率值
            § varStatus:表示当前的状态
                □ index:表示循环的当前索引值  索引值从0开始
                □ count:循环的当前次数  当前次数从1开始
            § items:需要遍历的集合元素
            § var:从每次循环中拿出来的元素起一个变量名  people user str num  (for each 变量名)
             <table border="1" align="center" width="500px">
                    <!--注意事项: end 不包含  [begin,end) -->
                    <c:forEach varStatus="status" var="pe" items="${peoples}" begin="2" end="4"                       step="2">
                        <tr>
                             <td>${status.index}</td>
                             <td>${status.count}</td>
                             <td>${pe.username}</td>
                             <td>${pe.password}</td>
                        </tr>
                    </c:forEach>
                </table>
        

        ○ fimt:formartDate  格式化日期标配签
        <fmt:formatDate value="${pe.birthday}" pattern="yyyy-MM-dd HH:mm:ss"/>




Jquery
Jquery本质就是javaScript中的js库(框架)兼容css3,还可以兼容各种浏览器,在企业中使用频率较高
    ? 环境搭建
        ○ 去官网下载jquery源码,生成js文件  jquery.js
        ○ 将jquery插件添加到web新建一个文件夹js
        ○ 在html页面中引用jquery.js <script src = "jquery文件的路径></script>"
    ? 宗旨:Write less Do More 写更少的代码,实现更多的功能
    ? 优化HTML和js代码,可以进行文档处理,事件处理,动画设计,ajax
    ? 目前Jquery有三个版本:
        ○ 1.XXX  在市面中使用频率是最高的,可以兼容大部分的浏览器,目前最新的版本是1.12.4  功能不再增加,只做bug维护  
        ○ 2.XXX  在市面上使用很少,兼容浏览器较少,只做bug维护,不再增加新功能,2.2.4
        ○ 3.XXX  在市面上使用一般,只支持浏览器中的最新版本,历史版本很多不支持,3.5.1
    ? jquery.js和jquery-min.js版本
        ○ jquery.js开发版本  给程序员看的,有良好的注释和缩进格式,文件较大一下
        ○ jquery-min-js生产版本  给程序看的,没有注释也没有缩进  文件较小一些

使用jquery
    ? 快速入门
    window.onload = function () {
                  var input = document.getElementById("inpOne");
                  var value = input.value;
                  //alert("使用原生js方式获取input标签内容为:" + value);
                  var input2 = jQuery("#inpOne");// 等价于 getElementById("inpOne");
                  var val = input2.val();
                  //alert("使用jquery方式获取input标签的内容:" + val);
    
                  var div = document.getElementsByClassName("divOne")[0];
                  var content = div.innerHTML;
                  alert( "使用原生js方式获取div文本内容:" +content);
    
                  var div2 = jQuery(".divOne");
                  var content2 = div2.html();
                  alert("使用jquery方式获取div文本内容:" + content2);
              }
    ? jquery和js原生对象是不可以互相调用对方的属性和方法
    ? 两者之间可以做相互转换:
jquery ---> js  格式:jquery元素对象[索引]或者jquery元素对象.get(索引)

 

推荐阅读