认识jQuery

最新推荐文章于 2021-02-27 14:53:31 发布

trasewell

最新推荐文章于 2021-02-27 14:53:31 发布

阅读量191

点赞数

分类专栏：编程

本文链接：https://blog.csdn.net/trasewell/article/details/91347491

版权

编程专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、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));