认识jQuery
2019-06-08 20:37
1266 查看
一、jQuery是一个轻量级的javascript类库,是一个被封装好的JS文件,提供了更为简便的元素操作方式。
jQuery封装了DOM
jQuery优点
2.1 总是面向集合
2.2 多行操作集于一行
jQuery核心理念:Write Less Do More(简单来说就是:少写多做)
jquery的导入
<script type="text/javascript" src="${pageContext.request.contextPath }js/jquery-3.3.1.js"></script>
jquery的简单选择器
id选择器
$("#a").click(function(){ var stu = $("#stu").val(); alert(stu); })
标签选择器
$("button").click(function(){ var sname = $("#sname").val(); alert(sname); })
类选择器
$(".a").click(function(){ var stu= $("#stu").val(); alert(stu); })
包含选择器:E1 E2
组合选择器:E1,E2,E3
jquery与Js的转换
<script type="text/javascript"> var $sname=$("#sname"); alert(sname.val()); //jQuery对象转js对象 var sname Node=$sname.get(0); alert(snameNode.value); var sname2=documnet.getElementById("sname2"); alert(sname2.value); //js对象转jQuery对象 var $sname2Node=$(sname2); alert($sname2Node.val()); </scirpt> <body> <input type="hidden" id="sname" value="sname" /> <input type="hidden" id="sname2" value="sname2" /> </body>
jquery插件
往jquery类库里面去扩展方法,这类方法就是jquery插件
jQuery插件的添加
其实就是给jQuery添加新的实例方法或类方法,然后将功能封闭在其中
eg:
//json对象的字符串体现形式 var jsonObjj = { sid:'001', sname:'ly' } console.log(jsonObjj);
var szjh=[1,2,3,4]; console.log(szjh)
//json混合模式的字符串 var hhjh = {id:1,hobby:['aaaaaa','aaaa']}; console.log(hhjh);
extend的实列
主要是调用方法,使编程快捷,代码量减少
var defaults = {//默认的属性 head :'fen', out :'red', over :'write', } $.fn.extend({ bgColor:function(option) { $.extend(defaults,option)//参数有值就替换 //给默认值 $("table tr:eq(0)").addClass(defults.head); $("table tr:gt(0)").addClass(defults.out); //添加动态效果 $("table tr:gt(0)").hover(function() { $(this).removeClass().addClass(defults.over); }, function() { $(this).removeClass().addClass(defults.out); }); }
如果要修改,只改参数即可
$(function(){ $("table").bgColor({ head :'fen', out :'write', over :'yellow', }) })
命名参数的写法
$.extend(defaults,options);
.fen { background: #ff66ff; } .yello { background: #ffff66; } .red { background: #ff3333; } .blue { background: #9999ff; } .green { background: #bbff99; } .hui { background: #d6d6c2; } <link href="${pageContext.request.contextPath }/js/jquery.table.css" type="text/css" rel="stylesheet"/>
jQuery的ajax请求
jackson
Jackson是一个简单基于Java应用库,Jackson可以轻松的将Java对象转换成json对象
和xml文档,同样也可以将json、xml转换成Java对象
核心代码:
ObjectMapper mapper = new ObjectMapper();
mapper.writeValueAsString(obj);
int count = md.getColumnCount();
map.put(md.getColumnName(i), rs.getObject(i));
转换
//json数组 Student stu1 = new Student("001", "aa"); ObjectMapper om = new ObjectMapper(); System.out.println(om.writeValueAsString(stu1)); //json数组 Student stu2 = new Student("002", "bb"); List<Student> list = new ArrayList<>(); list.add(stu1); list.add(stu2); System.out.println(om.writeValueAsString(list)); //混合moshi Map<String, Object> map = new HashMap<>(); map.put("total", 2); map.put("stus", list); System.out.println(om.writeValueAsString(map));
相关文章推荐
- 《锋利的JQuery》读书要点笔记1——认识JQuery&&选择器
- jQuery初认识
- 公司实习对前端ajax,jquery的认识
- 认识jQuery的Promise
- 第一章 认识JQuery
- 转:jQuery框架学习第一天:开始认识jQuery
- 认识jquery 入口函数 和$区别
- ExtJS学习之路第一步:对比jQuery,认识ExtJS
- jquery的一点点认识
- 对Jquery+JSON+WebService的一点认识
- 转:jQuery框架学习第一天:开始认识jQuery
- 笔记1,认识jQuery
- jquery入门必备的基本认识及实例(整理)
- 对Jquery+JSON+WebService的一点认识
- 第一章.认识jquery
- jquery基础知识第一讲之认识jquery
- 关于jquery 集合对象的 each和click方法的 思考 -$(this)的认识
- jQuery教程 - 认识jQuery
- 对JSON的一点认识和理解以及JQuery处理JSON
- web前端之锋利的jQuery一:认识jQuery