jQuery api学习笔记

jQuery事件

各种事件类似点击事件

<html><head> <title>index.jsp</title><script type="text/javascript" src="js/jquery-3.2.1.js"></script><script>function click() {alert("you click me!");}$(function() {$("#btn1").click(function() {// 触发文本框的focus事件 并且会focus聚焦// $("input[name=txt1]").trigger("focus");// 不会执行浏览器默认动作$("input[name=txt1]").triggerHandler("focus");});$("input[name=txt1]").focus(function() {console.log(123);});// jQuery 事件绑定 on// 添加按钮$("#addBtn").click(function() {$("#div1").append("<input type='button' value='alert'/>");});// 绑定on 为div1中的button绑定了点击事件$("#div1").on("click", ":button", function() {alert("you click me！");});// 解除绑定事件$("#removeEvent").click(function() {$("#div1").off("click", ":button");});// 重新添加点击事件$("#addEvent").click(function() {$("#div1").on("click", ":button", click);});// hover 悬浮事件$("#div2").hover(function() {// in 悬浮到div//$(this).addClass("d1");$(this).toggleClass("d1");}, function() {// out 离开div//$(this).removeClass("d1");$(this).toggleClass("d1");});// 隐藏与显示操作$("#hideOrVisible").click(function() {// 可设置时间/fast/slow$("div").last().toggle("fast", function() {// 显示 或者 隐藏后要做的事情if ($("div").last().css("display") == "none") $("#hideOrVisible").val("显示");else$("#hideOrVisible").val("隐藏");});// $("div").last().toggle("showOrHide"); 点击隐藏或者点击});});</script><style>.d1 {background-color: pink;}</style></head><body><input type="text" name="txt1" /><input type="button" id="btn1" value="click"/><div id="div1"></div><input type="button" id="addBtn" value="add button" /><input type="button" id="removeEvent" value="remove disabled click" /><input type="button" id="addEvent" value="add enable click" /><br/><div id="div2" style="width: 300px;height: 100px;">999</div><br/><hr/><div style="width: 300px;height: 100px;" class="d1"></div><input type="button" id="hideOrVisible" value="隐藏" /></body></html>

jQuery 练习悬浮，点击变色

<html><head><title></title><script type="text/javascript" src="js/jquery-3.2.1.js"></script><script type="text/javascript">$(function() {// 鼠标悬浮事件$("tbody tr:gt(0)").hover(function() {				// 移入$(this).find("td").addClass("cg_color");}, function() {// 移出$(this).find("td").removeClass("cg_color");});$("tbody tr").click(function() {// $("tbody tr").find("td").removeClass("red");$(this).find("td").addClass("red");});// 鼠标移除 红色消失$("tbody tr").mouseout(function() {$(this).find("td").removeClass("red");});});</script><style>.cg_color {background-color: pink;}.red {background-color: red;}</style></head><body><table class="dataGrid"><tr class="dataGridHead"><td>书号</td><td>书名</td><td>价格</td><td>出版社</td><td>简介</td></tr><tr class="moveout"><td>1</td><td>精通struts</td><td>50</td><td>电子工业出版社</td><td>学习struts必备</td></tr><tr class="moveout"><td>2</td><td>精通hibernate</td><td>50</td><td>电子工业出版社</td><td>好书</td></tr><tr class="moveout"><td>3</td><td>spring宝典</td><td>50</td><td>电子工业出版社</td><td>一般般</td></tr><tr class="moveout"><td>4</td><td>精通tomcat</td><td>50</td><td>电子工业出版社</td><td>好书</td></tr><tr class="moveout"><td>5</td><td>精通struts2</td><td>50</td><td>电子工业出版社</td><td>一般般</td></tr></table>
</body>
</html>

表单失去焦点得到焦点对默认值判断

	<script type="text/javascript">//取表单默认值用dom对象的defaultValue获取,不能用value$(function() {// 链式操作$(":input").focus(function() {if ($(this).val() == this.defaultValue) {	// 文本框值和默认值相等$(this).val("");$(this).addClass("cg");}}).blur(function() {if ($(this).val() == "") {$(this).val(this.defaultValue);} else {$(this).removeClass("cg");}		});});</script>

load函数使用

	// 加载user信息 加载到action action帮我跳转/from1是表单$("#repairs_info").load("../../UserListAction.do?method=mutiplePageQuery", $("#form1").serialize(), function() {// load finish... do sth...});