js常用方法总结

最新推荐文章于 2023-07-29 11:55:30 发布

平常心，心常平

最新推荐文章于 2023-07-29 11:55:30 发布

阅读量174

点赞数

分类专栏：前端文章标签：汇总

本文链接：https://blog.csdn.net/weixin_45591016/article/details/103042402

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jsp

jsp 文件头

 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
 <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
 <%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt"%>
 <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

jsp 中路径引用

  <!-- 大括号中表示 当前项目名-->
  src="${pageContext.request.contextPath}/xxx/xxx/xxx
  
  <!--path 同上, basePath: ip + 端口 + 项目名 -->
  <%
  String path = request.getContextPath();
  String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  %>

JSP页面引入另一个JSP

  <!-- 1.jsp方式 -->
  <jsp:include page="xxxxx.jsp"></jsp:include>
  
  <!-- java语句方式 -->
  <%@ include file="../widget/policeinfo_right2.jsp"%>

在这里插入图片描述

JSTL中的`<c:forEach>`使用

	<c:forEach items="${permissionList}" var="p">
	<tr>
		<td><input name="ids" type="checkbox"></td>
		<td>${p.id }</td>
		<td>${p.permissionName }</td>
		<td>${p.url }</td>
		<td class="text-center">
			<a href="${pageContext.request.contextPath}/permission/findById.do?id=${p.id}" class="btn bg-olive btn-xs">详情</a>
			<a href="${pageContext.request.contextPath}/permission/deletePermission.do?id=${p.id}" class="btn bg-olive btn-xs">删除权限</a>
		</td>
  </tr>
  </c:forEach>

JSTL `<c:if>`标签的使用

  <c:if test="${moreFlag ==0}">   
  	<div id="more" style="text-align:center;color: #fff;" onclick="moreli()">点击加载更多
  	</div>
  </c:if>

JSTL`< c:choose>、<c:when>和<c:otherwise>`标签的简单使用介绍

  <!-- <c:choose>、<c:when>和<c:otherwise>在一起连用，可以实现Java语言中的if-else语句的功能。例如以下代码根据username请求参数的值来打印不同的结果：-->
  
  <c:choose> 
    <c:when test="${empty param.username}">   
      Nnknown user.  
    </c:when> 
    <c:when test="${param.username=='Tom'}">   
      ${param.username} is manager.  
    </c:when> 
    <c:otherwise>   
      ${param.username} is employee.  
    </c:otherwise> 
  </c:choose> 
      
  <!--  以上标签等价于以下Java程序片段： -->
      
  <%  
  String username=request.getParameter("username");  
  if(username==null){  
    //对应第一个<c:when>标签的主体  
    out.print("Nnknown user.");  
  }else if(username.equals("Tom")){  
    //对应第二个<c:when>标签的主体  
    out.print(username+" is manager.");  
  }else{  
    //对应<c:otherwise>标签的主体  
    out.print(username+" is employee.");  
  }  
  %> 
      
  <!--
  <c:choose>、<c:when>和<c:otherwise>标签的使用必须符合以下语法规则：
  <c:when>和<c:otherwise>不能单独使用，它们必须位于<c:choose>父标签中。 
  在<c:choose>标签中可以包含一个或多个<c:when>标签。
  在<c:choose>标签中可以不包含<c:otherwise>标签。
  在<c:choose>标签中如果同时包含<c:when>和<c:otherwise>标签，那么<c:otherwise>必须位于<c:when>标签之后。
  -->

jQuery 小知识记录

标签添加选中效果

  //选项栏对应选项添加选中效果 
  $("ul.police-menu-list li:eq(2)").addClass("active");
  
  //demo2 点击目标选中 其他去除
  $(this).addClass('active').siblings().removeClass('active');

选择器配合变量使用，其他选择方法再次基础延伸。

   var liObj = $("#" + tagUri);

点击事件

 //方式1
 $("#selall").click(function() { 这里是代码  });
 
 //方式2
 $("p").on("click",function(){
       alert("段落被点击了。");
     });

`<select>` 标签获取值

<!-- 获取下拉框<select>的值 -->
  var pageSize = $("#changePageSize").val();
  
  <!-- 标签中套<if>  首次见到记录下 -->
  <select class="chzn-select" name="IS_PAY" id="IS_PAY" data-placeholder="是否卖出" >
  	<option value="">全部</option>
  	<option value="0" <c:if test="${pd.IS_PAY == '0'}">selected</c:if>>否</option>
  	<option value="1" <c:if test="${pd.IS_PAY == '1'}">selected</c:if>>是</option>
  </select>
  
  <!--
    <option> 标签支持全局属性
    <option> 标签支持所有 HTML事件属性。
    <option> 标签可以在不带有任何属性的情况下使用，但是您通常需要使用 value 属性，此属性会指示出被送往服务器的内容。
    注释：请与 select 元素配合使用此标签，否则这个标签是没有意义的。
    提示：如果列表选项很多，可以使用 <optgroup> 标签对相关选项进行组合。
    -->

自动加载执行

//jQuery 方式1
$(document).ready(function() { xxxxxx });
  
  //jQuery 方式2
  $(function(){ xxxx };
       
  //js原生方式
  window.onload = function() { xxxxxx };

在这里插入图片描述

像服务器发送请求

js原生

//原生js,使用较多的是发送分页信息
location.href = "${xxx}/orders/xxxx.do?page=1&size="+ pageSize;}

jQuery - AJAX

ajax

  //语法
  $.ajax({name:value, name:value, ... })
  
  //demo 1
  function moreli(){
  	var pageNum = Number($("#pageNum").val()) +1;
  	$.ajax({
  		type:"get",
  		url : "../web/postApplyRecords?roid="+Math.random(),
  		contentType:"application/x-www-form-urlencoded; charset=utf-8",
  		data:{pageNum:pageNum}, 
  		dataType:"json",
  		success : function(data){
  			if(data.length == 0){
  				$("#more").css("display","none");
  			}else{
  				var comtext = "";
  				for(var i=0 ;i<data.length;i++){
  					comtext =comtext + "<li class='show'>
  						<div class='record-head'>
                              <h5 class='record-title'>"+data[i].NAME+"-"+data[i].POSTNAME+"</h5>
                              <div class='record-date'>"+data[i].EXAMINETIME+"</div>
                              <i class='icon-down'></i>														</div>
                          <div class='record-text'>"+data[i].EXAMINEONTENT+"</div>
  					</li>";
  				}
  				$("ul").append(comtext);
   				$('li').on('click','');
  				$("#pageNum").val(pageNum);
  			}
  		} 
  	});
  }

`jQuery $.get()`方法

  //语法
  //必需的 URL 参数规定您希望请求的 URL。可选的 callback 参数是请求成功后所执行的函数名。
  $.get(*URL*,*callback*); 
  
  //dome1
   $.get(getRootPath() + "/advisor/getEffeDtlList?type=" + type,
                              {USERID: "${policeinfo.ID}"},  
                              function (data) {
                                  if (data.success) {
                                      var dataList = data.rows;
                                      console.log(dataList);
                                      var li = "";
                                      var b = dataList.length;
                                      if (b >= 5) {
                                          b = 5;
                                      }
                                      for (var a = 0; a < b; a++) {
                                          li = li + "<li>" + dataList[a].NAME + "：<span>" + dataList[a].QUANTITY + "</span></li>";
                                      }
                                      $("#effDTLList").html(li);
                              }
                          });

`jQuery $.post()` 方法

//语法
//必需的 URL 参数规定您希望请求的 URL。可选的 callback 参数是请求成功后所执行的函数名。
  $.get(URL,callback);

选择器

js原生

  //id选择器
  document.getElementById('btn');
  
  //列如   addEventListener是监听点击事件
  document.getElementById("myBtn").addEventListener("click", function(){   
      document.getElementById("demo").innerHTML = "Hello World";
  });

得到表格中的数据

<script>
//主要作用是 获取表格中的值并判断值是否为空,如果为空则让他显示"-"; 以下方法测试可用,如果是ajax请求的数据,可将此方法放到ajax的回调函数里. 其他原因待更新...
    $(function(){
        $('#table_report tr').each(function(i){                   // 遍历 tr
            $(this).children('td').each(function(j){  // 遍历 tr 的各个 td
                // console.log("第"+(1+i)+"行，第"+(j+1)+"个td的值："+$(this).text()+"。");
                if ($(this).text() ==''){
                    $(this).text("-");
                    // console.log($(this).text);
                }
            });
        });
    });
</script>

页面跳转获取是否是制定页面跳转过来

使用 Window sessionStorage 属性。 [详情]

//首先在特定页面写一下代码
function teDingYeMian(){
		// 'key' ,'value' 可以随便写,我这里是只是做个标记,只需要去跳转页面获取到,就证明其来源。
		sessionStorage.setItem('key','value');
	}

//然后让方法加载执行.必须让方法执行. 不一定要放在加载就执行,根据自己需求.
window.onload = function () {
	teDingYeMian();
}
-------------------------------
然后去要跳转到的页面下写以下代码
-------------------------------
function getSessionValue() {
	if(sessionStorage.getItem('key')!=null){
		sessionStorage.removeItem('key');   //清除key值, 方便下次访问判断.
		console.log("是从制定跳转过的!")
		// ...
	}else{
		console.log("获取不到任何来源.")
		// ...
		}
	}
}

//页面加载就执行此方法
window.onload = function() {
	getSessionValue();
}

HTML

`<iframe>`嵌套页面高度自适应

<script>
    // 计算页面的实际高度，iframe自适应会用到
    function calcPageHeight(doc) {
        var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
        var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)
        var height  = Math.max(cHeight, sHeight)
        return height
    }
    //根据ID获取iframe对象
    var ifr = document.getElementById('homeFrame')
    ifr.onload = function() {
        //解决打开高度太高的页面后再打开高度较小页面滚动条不收缩
        ifr.style.height='0px';
        var iDoc = ifr.contentDocument || ifr.document
        var height = calcPageHeight(iDoc)
        if(height < 850){
            height = 850;
        }
        ifr.style.height = height + 'px'
    }
</script>

高度自适应摘自 https://blog.csdn.net/ron03129596/article/details/68947375

js中拼接HTML方式方法及注意事项

// 拼接字符串中含有方法传参列子
// 一个参数
html += '<div class="getTask-list-item" οnclick="showTaskComment(\'' + task.ID + '\')">';
// 两个参数 （有数字的直接拼）
var more_html = '<div id="moreInfo" style="text-align:center;" οnclick="showInformation(' + nextPage + ',8)">点击加载更多</div>';
//无数字的两参
html += '<div class="record-head" οnclick="taskDetails(\''+ task.ID +"','"+ task.STATE +'\')">';
//三参
html += '<div class="record-head" οnclick=taskDetails("'+ task.ID +'","'+ task.STATE +'","'+ task.TYPE+'")>';
//注意从网页上复制内容到idea /eclipse 时,  编辑器会自动给粘贴的内容加"" 或者 / ,一定要注意!

平常心，心常平

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js常用方法总结

jspjsp 文件头 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%> <%@ taglib prefix="fmt" uri="http://j...
复制链接

扫一扫