1、下载jquery的函数包
2、强函数包添加到工程的web-root目录下
3、在jsp文件中加载js文件
<script type="text/javascript" src=" ${pageContext.request.contextPath}/jquery-1.5.1.js">
</script>
案例一：在文档加载完成后显示对话框
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP ‘index.jsp‘ starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<script type="text/javascript" src=" ${pageContext.request.contextPath}/jquery-1.5.1.js">
</script>
<script type="text/javascript">
$(function(){
alert("hello");
})
</script>
<body>
This is my JSP page. <br>
</body>
</html>
$(）中传人了一个function函数，在函数中显示一个字符，
$(function(){...})这是JQUERY的内置函数，表示网页加载完毕后要执行的意思，和JAVASCRIPT原来的这个是一样的： window.onload=function(){ //执行函数} 相当于 $(document).ready(function(){ } ) 或者： <body > 也是一个意思。 2、jquery的查找元素
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP ‘index.jsp‘ starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<script type="text/javascript" src=" ${pageContext.request.contextPath}/jquery-1.5.1.js">
</script>
<script type="text/javascript">
$(function(){
var ele = $("#myDiv");//返回一个jquery对象
alert(ele.text());//打印该元素的文本内容
var ele2 = $("#myNote");//返回一个jquery对象
alert(ele2.html());//打印该元素的html内容
})
</script>
<body>
This is my JSP page. <br>
<div id="myDiv">abd</div>
<div id="myNote"><p>dec</p></div>
</body>
</html>
输出的结果是：adb 和<p>dec</p>
如果将
ele2.html()写成
ele2.text()输出的结果就是输出的结果是：adb 和dec
$("#myELement") 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
</head>
<script type="text/javascript" src=" ${pageContext.request.contextPath}/jquery-1.5.1.js">
</script>
<script type="text/javascript">
$(function(){
var ele = $("div");//返回一个jquery对象,获得元素div
alert(ele.length);//输出的结果是2
})
</script>
<body>
This is my JSP page. <br>
<div id="myDiv">abd</div>
<div id="myNote"><p>dec</p></div>
</body>
</html>
$("div") 选择所有的div标签元素，返回div元素数组
2、jquey的类选择器
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
</head>
<script type="text/javascript" src=" ${pageContext.request.contextPath}/jquery-1.5.1.js">
</script>
<script type="text/javascript">
$(function(){
var ele = $(".myclass");//返回一个jquery对象,获得myclass元素
ele.text("4414144");//将该元素的文件值设置成4414144
})
</script>
<body>
This is my JSP page. <br>
<div class="myclass"></div>
</body>
</html>
$(".myClass") 选择使用myClass类的css的所有元素
ele.text（）获得文本值
ele.text（“42442”）设置文本值 4、jquery的属性选择器
时间： 2024-10-05 04:26:51