Js + Jquery 积累

曾经终败给现在 2022-04-18 02:19 353阅读 0赞

### 文章目录 ###

*   *   *   *   *  js 遍历
                 *  js 中 == 和 === 的区别
                 *  $('\#formid').serialize()
                 *  select 复选
                 *  避免页面自动填充密码
                 *  Jquery 模拟 点击事件
                 *  Jquery 全局 click 事件捕获
                 *  innerHTML 和 Jquery 的 click 事件
                 *   *  举例
                 *  Jquery 格式化时间
                 *   *  js 方法代码
                     *  用法举例
                 *  ajax +js 遍历结果，向页面新增内容
                 *   *  页面
                     *  Java 实体代码
                     *  Java Controller 方法
                     *  js 方法
                 *  js 向页面动态增加内容
                 *   *  页面
                     *  js 代码
                 *  操作 JavaScript 的一个网站
                 *  Js 页面监听启动
                 *  捕获鼠标放到某元素之上的事件
                 *  js 获取全局路径
                 *   *  在 jsp 页面声明 javascript 片段
                     *  在 jsp 页面使用 jstl标签
                     *  在 jsp 页面声明 java 代码
                 *  js 操作 Json
                 *   *  字符转 JSON 对象 并读取
                     *  JSON 对象 转 字符串

##### js 遍历 #####

##### js 中 == 和 === 的区别 #####

console.log(1==1)
    输出: true
    
    console.log(1=='1')
    输出: true
    
    console.log(1==='1')
    输出: false

##### $(’\#formid’).serialize() #####

> $(’\#formid’).serialize()  
> $\{fn:escapeXml(demoName)\} 解决Xss 问题

##### select 复选 #####

> 需要使用 ctrl / command 进行多选操作

<select multiple="multiple" size="2">
      <option value ="volvo">Volvo</option>
      <option value ="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>

![在这里插入图片描述][20190311191310970.png]

##### 避免页面自动填充密码 #####

##### Jquery 模拟 点击事件 #####

//全局事件
     $(function(){ 
     	//id 为 demoId的点击事件
    	 $("#demoId").click(function(){ test()});
    	 //模拟点击 id 为demoId的元素
    	 $("#demoId").click();
     });
     function test(){ 
    	 alert("hello");
     }

##### Jquery 全局 click 事件捕获 #####

//全局事件
     $(function(){ 
         //对 id 为demoid 的点击事件进行捕获
    	 $("#demoid").click(function(){ 
    		test();
    	});
     });
     //单独写一个 function 
     function test(){ 
     	alert(""点击了);
     }

##### innerHTML 和 Jquery 的 click 事件 #####

> 使用 innerHTML 新增的元素无法通过 $("\#idName").click(function()\{内容\});触发，解决办法是 innerHTML 同时写好 onclick 的内容

###### 举例 ######

//新增一个 function 方法
    function funName(){ alert("触发了")};
    
    //另一个function 的代码片段
     //获取页面元素
      demoId = document.getElementById("demoId");
      demoId.innerHTML= demoId.innerHTML +
      "<input type=\"button\" value=\"尾页\" οnclick=\"funName();return false;\"/>"
     +"<br>"

##### Jquery 格式化时间 #####

> 需要写一个function 方法  
> 后端可以直接传递时间格式

###### js 方法代码 ######

/*日期格式化 * format 时间格式 yyyy-MM-dd hh:mm:ss 24小时制 * var date=new Date(); var time=date.farmet("yyyy-MM-dd hh:mm:ss"); * var date=new Date(12345678); var time=date.farmet("yyyy-MM-dd hh:mm:ss"); * */
    Date.prototype.format = function(format){  
    	 var o = {  
    	 "M+" : this.getMonth()+1, //month 
    	 "d+" : this.getDate(), //day 
    	 "h+" : this.getHours(), //hour 
    	 "m+" : this.getMinutes(), //minute 
    	 "s+" : this.getSeconds(), //second 
    	 "q+" : Math.floor((this.getMonth()+3)/3), //quarter 
    	 "S" : this.getMilliseconds() //millisecond 
    	 }
    
    	 if(/(y+)/i.test(format)) {  
    	 format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
    	 }
    
    	 for(var k in o) {  
    	 if(new RegExp("("+ k +")").test(format)) {  
    	 format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
    	 } 
    	 } 
    	 return format; 
    }

###### 用法举例 ######

//新创建时间
    var date=new Date();  var time1=date.farmet("yyyy-MM-dd hh:mm:ss");
    //整形时间，适用于后端传递来的时间类型或者时间戳
    var date=new Date(12345678);  var time2=date.farmet("yyyy-MM-dd hh:mm:ss");

##### ajax +js 遍历结果，向页面新增内容 #####

###### 页面 ######

###### Java 实体代码 ######

public class UserInfo implements Serializable { 
    	private static final long serialVersionUID = 1L;
    	private String userName;
    	private int age;
    	//get/set 方法略
    	}

###### Java Controller 方法 ######

@GetMapping("/test")
    	@ResponseBody
    	public Map<String,Object> test(){ 
    		Map<String,Object> map=new HashMap<String,Object>();
    		List list=new ArrayList();
    		UserInfo u=new UserInfo("123",25);
    		list.add(u);
    		list.add(u);
    		list.add(u);
    		list.add(u);
    		map.put("list", list);
    		return map;
    	}

###### js 方法 ######

##### js 向页面动态增加内容 #####

###### 页面 ######

###### js 代码 ######

var number=123;
    demoId = document.getElementById("demoId");
    demoId.innerHTML = demoId.innerHTML + "自定义内容" + number + "<br>";

##### 操作 JavaScript 的一个网站 #####

http://www.runoob.com/jsref/jsref-foreach.html

##### Js 页面监听启动 #####

$(function () { 
     //...
     });

##### 捕获鼠标放到某元素之上的事件 #####

$("#demoId").mouseover(function(){ 
       alert("你的鼠标经过了");
     });

##### js 获取全局路径 #####

> 直接在单独到 js 文件中是无法获取上下文路径的，需要先单独在jsp页面设置一下，然后再在js 文件中直接使用

###### 在 jsp 页面声明 javascript 片段 ######

###### 在 jsp 页面使用 jstl标签 ######

<%@ page language="java" pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <c:set var="contextPath" value="${pageContext.request.contextPath}" />

###### 在 jsp 页面声明 java 代码 ######

<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>

##### js 操作 Json #####

###### 字符转 JSON 对象 并读取 ######

var str1 = '{ "name": "123", "age": 11 }';//JSON字符串
    var obj1 = JSON.parse(str1); //由JSON字符串转换为JSON对象 
    console.log(obj1.name);//打印 JSON 对象的name属性值

###### JSON 对象 转 字符串 ######

var str2=JSON.stringify(obj1);//将 JSON 对象转化为 字符串
    console.log(str2);//打印字符串到控制台

[20190311191310970.png]: /images/20220418/69bd8fd85515405daafd3af7572da775.png