<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!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>JQuery演示1</title>
<script type="text/javascript" src="<c:url value='/js/jquery-3.1.0.js'/>">
</script>
<script type="text/javascript">
//JQuery核心函数1：JQuery(callback);//功能；页面一加载完就立即执行回调函数callback
//该方式的功能:类似：window.onload=function(){.....}
jQuery(function(){
//选择页面上的元素，Query核心函数2：jQuery([sel,[context]])
//功能：根据选择器（参数sel）选中页面的元素,并把它转化成jQuery对象,从而就可以调用jQuery中的方法了
jQuery("#btn1").click(function(){
alert("hello JQuery.....");
});
});
//利用别名：$
$(function(){
$("#btn2").click(function(){
alert("大家一般用别名使用jQuery");
});
});
//$(fn)和window.onload=fn的区别：jQuery是添加fn动作,而后者是把当前的fn替换掉之前的旧动作
//给按钮1再添加一个单击事件----是添加事件动作,没有把第一个事件动作冲掉
$(function(){
$("#btn1").click(function(){
alert("2222");
});
});
</script>
</head>
<body>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
</body>
</html>
下面这段代码是采用jQuery对button中的属性进行设置 -----》元素选择器
<%-- <%@ 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">
<title>JQuery演示示例2</title>
<script type="text/javascript" src="<c:url value='/js/jquery-3.1.0.js'/>">
</script>
</head>
<body>
<button id="btn1">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<script type="text/javascript">
$(
function(){
var btn=$("#btn1");
btn.click(function(){
alert("进来了吗....");
//学习设置一个页面元素的属性
$("button").Attr("disabled","disabled");
//元素选择器----选择所有的<button>元素
alert("休息一下....");
alert("再休息一下....");
$("button").removeAttr("disabled");
});
});
</script>
</body>
</html> --%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!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>JQuery演示示例</title>
<script type="text/javascript" src="<c:url value='/js/jquery-3.1.0.js'/>"></script>
</head>
<body>
<button id="btn1">按钮1</button><br/>
<button>按钮2</button><br/>
<button>按钮3</button><br/>
<script type="text/javascript">
$(
function(){
var btn = $("#btn1");
btn.click( function(){
//学习设置一个页面元素的属性
$("button").attr("disabled","disabled");//元素选择器--选择所有的"<button>"元素
alert("休息一下....");
alert("再休息一下....");
$("button").removeAttr("disabled");
});
}
);
</script>
</body>
</html>
写jQuery的时候要设置配置文件<script type="text/javascript" src="<c:url value='/js/jquery-3.1.0.js'/>"></script>