jQuery ( jQuery 选择器&插件&ajax)
jQuery 选择器&插件&ajax
jQuery 选择器&插件&ajax
jQuery 简介
什么是jQuery?
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(JavaScript框架)。
jQuery设计的宗旨是“write Less,Do More”,意思就是:写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性:
- 具有独特的链式语法和短小清晰的多功能接口;
- 具有高效灵活的css选择器,并且可对CSS选择器进行扩展
- 具有便捷的插件扩展机制和丰富的插件。
jQuery优点:
- 总是面向集合
- 多行操作集于一行
jQuery 之 选择器
1、导入js库
<script type=“text/javascript” src=""></script>
2、$(fn)做为程序入口
jQuery程序的入口:
- $(document).ready(fn)
- $(fn);
$(fn)、$(document).ready(fn)、window.onload有什么区别?
$(fn)、$(document).ready(fn)是等价的,哪个代码在前面就哪个先执行,jsp的dom树结构加载完毕即刻调用方法;window.onload最后执行,jsp的dom树加载完毕,css.js等静态资源加载完毕执行。
jQuery 的工厂方法
jQuery 有三种工厂方法 。
1、 jQuery (exp[,context])
- 标签选择器
- ID选择器
- 类选择器
exp:选择器
context:上下文,环境/容器,documemt
注意:
选择器,css选择器
$就是jQuery简写
包含选择器:E1 E2
组合选择器:E1,E2,E3
自定义选择器::exp
2、jQuery(html)
html:基于html的一个字符串
3、jQuery(element)
element:js对象,表示一个html元素对象
this 指针
this 指针的作用:
-
1、事件源(获取当前按钮的按钮值)
-
2、当前元素(点击按钮,获取所有a标签的值)
-
3、在插件中的作用,看下图所示:
jQuery 之 插件
jQuery 插件简介
jQuery 插件:
用jquery写一些js代码能实现具体的功能,直接将该js文件引入进页面就可调用,可以快速开发。
$.extend 和 $.fn.extend:
-
$.extend:对象的扩展(或继承)
$.extend(obj1,obj2,obj3[,...]) $.extend(obj1,obj2) $.extend(obj1)//$.method=function(options){...};
-
$.fn.extend
$.fn.extend(obj1)//$.fn.method=function(options){...};
json的三种格式
-
1、对象
如: {sid:‘001’,sname:‘小样’} -
2、列表/数组
如: [1,2,3,4] -
3、混合模式
如: {id:001,hobby:[‘aa’,‘bb’,‘cc’]}
请参考重要代码,对比json的三种格式(前台 & 后台):
json 前台展示:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.3.1.js"></script> <title>Insert title here</title> <script type="text/javascript"> $(function(){ //json对象的字符串体现形式 var jsonObj1 = {sid:'s001',sname:'南柱赫'}; //console.log(jsonObj1); //json数组的字符串体现形式 var jsonArray1 = [1,2,3,4]; //console.log(jsonArray1); //json混合模式的字符串体现形式 var jsons = {id:1,hobby:["aa","bb","cc"]}; //console.log(jsons); //$.extend用来扩充jquery类的属性和方法 var jsonObj2 = {}; //$.extend(jsonObj2,jsonObj1);//用后面的对象扩充第一个对象 //console.log(jsonObj2); //之前已经扩充的属性值会被后面的对象覆盖,如果后面对象有新的属性,会继续扩充 //解决扩充覆盖问题 var jsonObj3 = {sid:'s003',sname:'伊清',hobby:['rap','唱跳']}; $.extend(jsonObj2,jsonObj1,jsonObj3); console.log(jsonObj2); $.extend({ hello:function(){ alert('来啦来啦'); } }); $.hello(); //$.fn.extend是用来扩充jQuery实例的属性、方法 $.fn.extend({ sayHello:function(){ alert('Hello!'); } }); $("#yellow").sayHello(); alert("yellow"); }) </script> </head> <body> <span id="yellow">yellow</span> </body> </html>
json 后台展示:
jQuery 插件开发实例
jQuery插件的添加,其实就是给jQuery添加新的实例方法或类方法,然后将功能封闭在其中
重要代码如下:
自定义 css:
自定义 js:
jsp界面实例:
在jsp界面实例中直接引用相关的css 和 js 即可!!!
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="/jsp/common/head.jsp" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> $(function(){ $("table").bgColor({ head : 'fen', out : 'yellow', over : 'red' }); }) </script> </head> <body> <table id="t1" border="1" width="90%"> <tr> <td>书名</td> <td>作者</td> <td>点击量</td> </tr> <tr> <td>圣墟</td> <td>辰东</td> <td>10万</td> </tr> <tr> <td>飞剑问道</td> <td>我吃西红柿</td> <td>11万</td> </tr> <tr> <td>杀神</td> <td>逆苍天</td> <td>22万</td> </tr> <tr> <td>龙王传说</td> <td>唐家三少</td> <td>18万</td> </tr> <tr> <td>斗破苍穹</td> <td>天蚕拖豆</td> <td>1万</td> </tr> </table> <table id="t2" border="1" width="90%"> <tr> <td>书名</td> <td>作者</td> <td>点击量</td> </tr> <tr> <td>圣墟</td> <td>辰东</td> <td>10万</td> </tr> <tr> <td>飞剑问道</td> <td>我吃西红柿</td> <td>11万</td> </tr> <tr> <td>杀神</td> <td>逆苍天</td> <td>22万</td> </tr> <tr> <td>龙王传说</td> <td>唐家三少</td> <td>18万</td> </tr> <tr> <td>斗破苍穹</td> <td>天蚕拖豆</td> <td>1万</td> </tr> </table> </body> </html>
注意 :
在大型项目中,大部分时候需要在多个jsp界面调用多个css 和 js ,这时,我们可以再写一个head.jsp,在这个head.jsp 界面直接调用需要用到的css 和 js,然后,在有需要的jsp界面直接调用head.jsp就OK ! 下面就是一个例子。
head.jsp 代码如下:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE> <link href="${pageContext.request.contextPath }/jquery/table/css/jquery.table.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.3.1.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/jquery/table/js/jquery.table.js"></script>
在界面调用,代码如下:
<%@ include file="/jsp/common/head.jsp" %>
这样岂不是减少了代码量,还提高了开发效率。
jquery 之 ajax
jackson
什么是 jackson?
Jackson是一个简单基于Java应用库,Jackson可以轻松的将Java对象转换成json对象
和xml文档,同样也可以将json、xml转换成Java对象
jackson 核心代码:
ObjectMapper mapper = new ObjectMapper(); mapper.writeValueAsString(obj); int count = md.getColumnCount(); map.put(md.getColumnName(i), rs.getObject(i));
将java 转为 json
注意:
javaBean与Map集合转换成json字符串的格式是一样的,论证如下:
json 死循环
处理方式:
- 1、由双向绑定改成单向绑定,将彼此之间的关系交于一方维护
- 2、@JsonIgnore:将彼此循环调用的属性忽略,不参与对象转成json格式
重要代码如下:
package com.dj; import java.util.HashSet; import java.util.Set; import com.dj.entity.Student; import com.dj.entity.Teacher; import com.fasterxml.jackson.annotation.JsonIgnore; import com.fasterxml.jackson.core.JsonProcessingException; import com.fasterxml.jackson.databind.ObjectMapper; /** * json死循环 * * 处理方式: * 1、由双向绑定改成单向绑定,将彼此之间的关系交于一方维护 * 2、@JsonIgnore:将彼此循环调用的属性忽略,不参与对象转成json格式 * * @author 86182 * */ public class Demo3 { public static void main(String[] args) throws JsonProcessingException { Student stu1 = new Student("s-001", "南柱赫"); Student stu2 = new Student("s-002", "李钟硕"); Teacher tea1 = new Teacher("t-001", "张艺兴", null); Teacher tea2 = new Teacher("t-002", "王嘉尔", null); Set<Teacher> teas = new HashSet<>(); teas.add(tea1); teas.add(tea2); stu1.setTeas(teas); Set<Student> stus = new HashSet<>(); stus.add(stu1); stus.add(stu2); tea1.setStus(stus); ObjectMapper om = new ObjectMapper(); 1b5d8 System.out.println(om.writeValueAsString(stu1)); } }
处理后的打印效果:
小彩蛋:
推荐大家一些关于jQuery学习的相关网站:
- jQuery官网: http://jquery.com/
- 在线API: http://tool.oschina.net/apidocs/apidoc?api=jquery
- JQuery表单/插件/Ajax/Table/特效/拓展/动画/选择器
- 浮动留言板(JQuery 插件+Ajax)
- jQuery插件之ajaxFileUpload
- jQuery插件之ajaxFileUpload
- 文件管理系统(JQuery插件+Ajax)
- jquery表单插件中整合Ajax的验证
- jQuery插件之ajaxFileUpload
- jQuery的ajaxFileUpload上传文件插件刷新一次才能再次调用触发change
- Ajax实现文件上传(使用jQuery插件之ajaxFileUpload)
- jQuery的ajaxFileUpload上传文件插件刷新一次才能再次调用触发change
- 自制了一个JQUERY 颜色选择器插件!!!
- jPicker - 一个jQuery的颜色选择器插件
- Ajax分页插件Pagination从前台jQuery到后端java总结
- PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
- jquery formValidator插件ajax验证,在内容不做修改的前提下提示错误的bug解决方法
- JQuery插件之autocomplete使用指南 ajax自动补全查询
- jQuery插件ajax图片上传插件
- .net 使用jQuery Autocomplete(自动完成)插件结合ajax
- jQuery插件之ajaxFileUpload
- jQuery插件之ajaxFileUpload(异步上传图片并实时显示,并解决onchange后ajaxFileUpload失效问题)