02_Jquery_01_id选择器

时间:2022-03-29 16:18:51

首先建立建立一个JavaWeb项目工程,导入jquery-1.5.1.js。

02_Jquery_01_id选择器

(一)选择器--打印文本内容

【index.jsp】

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Jquery Test</title>
<!-- 导入Jquery文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-1.5.1.js"></script>
<script type="text/javascript">
//这里的内容会在文档加载完毕时执行
$(function(){
//document.getElementById("id") //返回一个DOM对象
var ele=$("#id001"); //返回一个jQuery对象
alert(ele.text());
});
</script>

</head> <body>
This is my JSP page. <br> <div id="id001">aaaaaa</div>
<div id="id002">bbbbbb</div>
</body>
</html>

【运行结果】打印文本内容

02_Jquery_01_id选择器

(二)选择器--打印HTML内容
【index.jsp】

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Jquery Test</title>
<!-- 导入Jquery文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-1.5.1.js"></script>
<script type="text/javascript">
//这里的内容会在文档加载完毕时执行
$(function(){
//document.getElementById("id") //返回一个DOM对象
var ele=$("#id001"); //返回一个jQuery对象
alert(ele.html());
});
</script>
</head> <body>
This is my JSP page. <br> <div id="id001"><p>aaaaaa</p></div>
<div id="id002">bbbbbb</div> </body>
</html>

【运行结果】

02_Jquery_01_id选择器