码迷,mamicode.com
首页 > 编程语言 > 详细

JavaWeb网上图书商城完整项目--11.项目所需jquery函数介绍

时间:2017-04-28 17:12:24      阅读:286      评论:0      收藏:0      [点我收藏+]

标签:img   dtd   字符   comm   内置函数   素数   文档加载   root   pre   

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 onload="XXX">
也是一个意思。  
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的属性选择器

 

 

JavaWeb网上图书商城完整项目--11.项目所需jquery函数介绍

标签:img   dtd   字符   comm   内置函数   素数   文档加载   root   pre   

原文地址:http://www.cnblogs.com/kebibuluan/p/6782344.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!