What is jQuery?
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
简单点就是用在前端上的JS,是一个Javascript函数库,里面封装了js对页面的所有操作。
在使用jQuery之前要到官网http://jquery.com/下载jQuery的文件,现在最新版本是jquery-3.1.1.js,要把它放到我们的项目中,在jsp中才可以使用它。
入门
由于初次学习jQuery,所以今天的代码都是很简单的。
one.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery技术</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.οnlοad=function(){....}
jQuery( function(){
//jQuery核心函数2:选择页面上的元素 jQuery([sel,[context]]) 功能:根据选择器(参数sel)选中页面中的元素,并把它转换成jQuery对象,这样就可以调用jQuery中的方法了
jQuery("#btn1").click( function(){
alert("Hello World");
});
});
//利用别名$
$(function(){
$("#btn2").click(function(){
alert("一般都是使用别名 '$()'.");
});
});
//$(fn)和window.load=fn的区别:jQuery是添加fn事件(可重复添加,顺序执行),而后者则是将当前fn事件来替换掉旧的事件
$(function(){
$("#btn1").click(function(){
alert("第二个fn ...");
});
});
</script>
</head>
<body>
<button id="btn1">--btn1--</button><br><br><br>
<button id="btn2">--btn2--</button><br><br><br>
</body>
</html>
结果图:
two.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery技术</title>
<script type="text/javascript" src="<c:url value='/js/jquery-3.1.0.js' />"></script>
</head>
<body>
<button id="btn1">--btn1--</button><br><br><br>
<button >--按钮2--</button><br><br><br>
<button >--按钮3--</button><br><br><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>
结果:
three.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery技术</title>
<style type="text/css">
div{
width: 60%;
height: 150px;
background: yellow;
margin: 10px;
}
</style>
<script type="text/javascript" src="<c:url value='/js/jquery-3.1.0.js' />"></script>
<script type="text/javascript">
/*jQuery选择器和CSS的一样,如:
1. "#"为id选择器
2. "E"为元素选择器
3. "E E2"为包含选择器
4. "."为类选择器
5. "input[name='age']"属性选择器
6. ":"冒号选择器
*/
$(function(){
//1. "#"为id选择器
$("#btn1").click(function(){
//2. "E"为元素选择器
$("#d1").html("这里是div1......");//会把id为"#d1"中的所有html内容替换
$("div:first").html("看,,下雪了....");
$("div:eq(2)").html("..................");//eq(index)获取第N个元素,index>=0,从0算起;index<0,从最后一个元素开始倒数.
//3. "E E2"为包含选择器
//$("div p").html("包含选择器演示......");
$("#d1~div").html("今天天气不错...");//prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素(找到所有同辈的 元素,本身不算)
//4. "."为类选择器
$(".fd1").css("background","blue").html("类选择器").css("border","1px solid red");
//5. "input[name='age']"属性选择器
var text=$("input[name='name']").val();//选择name值为"name"的<input>标签,并获取其中的值
//alert(text);
$("input[name='age']").val("22");//设置值
//6. ":"冒号选择器
var len=$(":input").length;
alert(len);
});
});
</script>
</head>
<body>
<input type="button" value="演示jQuery选择器" id="btn1">
<div id="d1">
<p>div1----ppppppppp</p>
</div>
<div id="d2">
<p>div2----ppppppppp</p>
</div>
<div id="d3">
<p>div3----ppppppppp</p>
</div>
<div id="d4">
<b>bold
<p>div4----ppppppppp</p>
</b>
</div>
<form>
<div class="fd1">aaaa</div>
Name:<input type="text" name="name"/>
Age: <input type="text" name="age"/>
</form>
</body>
</html>
未点击按钮之前:
点击按钮之后: