JQuery

最新推荐文章于 2019-11-04 20:35:20 发布

听晚风续过晚

最新推荐文章于 2019-11-04 20:35:20 发布

阅读量224

点赞数

本文链接：https://blog.csdn.net/qq_43624670/article/details/91348872

版权

jQuery

jQuery是什么？

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery优点：

一、总是面向集合
二、多行操作集于一行

首先要我们引入js代码如下：

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"> </script>

一、jQuery的选择器

在这里插入图片描述
我就不一一介绍写几个简单的jQuery选择器的代码：

$("#w").click(function(){
					var stu = $("#stu").val();
					alert(stu);
				})

标签选择器

$("button").click(function(){
					var sname = $("#sname").val();
					alert(sname);
				})

详情可参考网站：http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

二、jQuery(html)

我们假设让复选框的数据选中

	$(function(){
		var checked='${s.shobby}';//数据库传过来的数据
		var ck=checked.split(",");
		$.each(ck,function(n,val){
			$(":checkbox[name='shobby'][value="+val+"]").prop("checked",true);
		});
	})

利用按钮给下拉框添加指定内容

<script type="text/javascript">
	$(function(){
		$(":input[name='name1']").click(function(){
			$("#sel1").append("<option value='1'>湖南省</option>")
		})
		$(":input[name='name2']").click(function(){
			//将"<option value='1'>娄底</option>"html  jQuery实例追加带id=sel2中
			$("<option value='1'>娄底</option>").appendTo("#sel2 ")
		})
</script>
<body>
	<select id="sel1">
		<option value="-1">---请选择---</option>
	</select>
	<select id="sel2">
		<option value="-1">---请选择---</option>
	</select>
	<input type="button" name="name1" value="add1" />
	<input type="button" name="name2" value="add2" />
</body>

三、JS和Query的转换

<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插件

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);
		});
	}

$.extend(defaults,options)

.fen {
	background: #ff66ff;
}

.yello {
	background: #ffff66;
}

.red {
	background: #ff3333;
}

.write {
	background: #9999ff;
}

.green {
	background: #bbff99;
}
.hui {
	background: #d6d6c2;
}
<link href="${pageContext.request.contextPath }/js/jquery.table.css" type="text/css" rel="stylesheet"/>

jQuery中的ajax

//json数组
  Teacher t1 = new Teacher("1", "a");
  ObjectMapper om = new ObjectMapper();
  System.out.println(om.writeValueAsString(t1));

//json数组
  Teacher t2 = new Teacher("2", "b");
  List<Student> list = new ArrayList<>();
  list.add(t1);
  list.add(t2);
  System.out.println(om.writeValueAsString(list));

//混合moshi
  Map<String, Object> map = new HashMap<>();
  map.put("total", 2);
  map.put("ts", list);
  System.out.println(om.writeValueAsString(map));

详情可参考：http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp

今天就更新到这里
喜欢的可以关注我
不定时更新