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

  })

  </script>

  <body>

    This is my JSP page. <br>

    <div class="myclass"></div>

  </body>

</html>

$(".myClass")      选择使用myClass类的css的所有元素

ele.text（）获得文本值
ele.text（“42442”）设置文本值 

4、jquery的属性选择器

 

用户名:<input type="text" name="name"></input>
密码:<input type="text" name="age"></input>

这里有两个name的属性，我们如何通过属性来获得对应的值了：

$("[name]").length

这里就是获得属性是name的jquery对象的值，这里是2

如何写成$("[name=age]").length这里的值就是1

$("[name=age]").val()这里是获得输入文本框中的值

$("[name=age]").val("jkjk")这里是这种输入文本框中的值

val是主要是用于input中获得和设置文本框中的值

总结：#表示id选择权

.点表示类选择权

没有#和.就表示元素选择器

获得select对象当前被选中的select对象的文本值

这里获得的文本值就是什么是小学

表单选择器：

我们来看下面这样的一个列子：

<form id="form1" actio="#">

  <input type="text" />

  <input type="password" />

  <input type="submit" />

  <input type="reset" />

</form>

表单选择器的用法：
$(‘#form1 :input’)     可以选取表单内表单元素的个数
$(‘#form1 :text’)    可以选取表单内单行文本框的个数
$(‘#form1 :passowrd’)   可以选取表单内密码框的个数

列子2：

<%@ 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 id = $(":input[name=age]").attr("id");

    alert(id);

  })

  </script>

  <body>

    This is my JSP page. <br>

  用户名:<input type="text" name="name" ></input>

  密码:<input type="text" name="age" id="kebi"></input>

  </body>

</html>
 $(":input[name=age]").attr("id");首先获得表单中的input元素，执行input中属性是name，属性的值是age的id的值是多少
输出的结果就是kebi
$(":input[name=age]").attr("id"，“klsdk”)这里是设置id的值是
klsdk
$(":input[name=age]").attr("value"，“25252525”)
首先获得表单中的input元素，执行input中属性是name，将name属性的值是age 的文本框的值设置为
25252525

我们来看下面程序的代码：

<%@ 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%>">

    <script type="text/javascript" src=" ${pageContext.request.contextPath}/jquery-1.5.1.js">

  </script>

  <script type="text/javascript">

  $(function(){

    $("button").click(function(){

    $("p:first").removeClass("intro").addClass('main');

  });

  })

  </script>

  <!-- 类KEBI -->

  <style type="text/css">

.intro

{

font-size:120%;

color:red;

}

.main

{

font-size:90%;

color:blue;

}

</style>

  </head>

  <body>

 <h1>This is a heading</h1>

<p class="intro">This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>改变第一个段落的类</button>

  </body>

</html>

案例2：

事件：

fn表示函数的参数是function函数

我们来看下程序的代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("p").hover(function(){

    $("p").css("background-color","yellow");

    },function(){

    $("p").css("background-color","pink");

  });

});

</script>

</head>

<body>

<p>鼠标移动到该段落。</p>

</body>

</html>

JavaWeb网上图书商城完整项目--11.项目所需jquery函数介绍的更多相关文章

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

    jquery中使用ajax发送异步请求 下面的一个案例在input输入框失去焦点的时候发送一个异步的请求: 我们来看程序的案例: 这里要强调的是返回值最好选择是json,json对应的就是对象,Jav ...

  2. JavaWeb网上图书商城完整项目--13.项目所需环境的搭建

    1.首先安装mysql 创建项目所需的数据库,直接运行项目提供的goods.sql文库 2.myeclipse创建一个web project ,项目的名称是goods 把视频中提供的项目原型下的提供的 ...

  3. JavaWeb网上图书商城完整项目--day02-4.regist页面提交表单时对所有输入框进行校验

    1.现在我们要将table表中的输入的参数全部提交到后台进行校验,我们提交我们是按照表单的形式提交,所以我们首先需要在table表外面添加一个表单 <%@ page language=" ...

  4. JavaWeb网上图书商城完整项目--24.注册页面的css样式实现

    现在框架已经做好了,即下来我们要对页面进行装饰了,第一步给每一个元素添加id 1.最外面的div添加id为divMain 2.第二个div添加id为divTitle,里面的span对应的id为span ...

  5. JavaWeb网上图书商城完整项目--过滤器解决中文乱码

    我们知道,如果是POST请求,我们需要调用request.setCharacterEncoding(“utf-8”)方法来设计编码:如果是GET请求,我们需要自己手动来处理编码问题.如果我们使用了En ...

  6. JavaWeb网上图书商城完整项目--day03-1.图书模块功能介绍及相关类创建

    1 前两天我们学习了user用户模块和图书的分类模块,接下来我们学习图书模块 图书模块的功能主要是下面的功能: 2 接下来我们创建对应的包 我们来看看对应的数据库表t_book CREATE TABL ...

  7. JavaWeb网上图书商城完整项目--BaseServlet

    1.以前进行操作的时候,例如我们进行登陆操作我们使用LoginServlet进行处理,进行注册操作我们使用RegisterServlet,很多业务的操作的时候我们就要定义很多个Servlet 有了Ba ...

  8. JavaWeb网上图书商城完整项目--day02-21.退出功能的实现

    1.当用户点击退出的时候,跳转到登陆页面 当用户点击退出的时候,需要将session中保存的登陆的用户销毁掉 当用户点击退出的时候,调用UserServlet的quit方法 退出按钮在top.jsp中 ...

  9. JavaWeb网上图书商城完整项目--day02-17.登录功能页面实现

    1.当在登陆页面点击登陆按钮的时候,会调用UserServlet的login方法,我们要在login.jsp中进行配置 2.要在login.jsp中处理Servlet在后台业务操作之后forward到 ...

随机推荐

  1. 【原创】Linux中断子系统（一）-中断控制器及驱动分析

    背景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: Kernel版本: ...

  2. PAT1033 旧键盘打字 (20分) （关于测试点4超时问题）

    1033 旧键盘打字 (20分)   旧键盘上坏了几个键,于是在敲一段文字的时候,对应的字符就不会出现.现在给出应该输入的一段文字.以及坏掉的那些键,打出的结果文字会是怎样? 输入格式: 输入在 2 ...

  3. 通过link的preload进行内容预加载

    Preload 作为一个新的web标准,旨在提高性能和为web开发人员提供更细粒度的加载控制.Preload使开发者能够自定义资源的加载逻辑,且无需忍受基于脚本的资源加载器带来的性能损失. <l ...

  4. Spring boot Sample 002之spring-boot-banner

    一.环境 1.1.Idea 2020.1 1.2.JDK 1.8 二.目的 学习Spring Boot Banner自定义的操作   三.步骤 3.1.点击File -> New Project ...

  5. Rocket - diplomacy - NodeHandle相关类

    https://mp.weixin.qq.com/s/GWL41P1G1BXm2sTeLmckdA   介绍NodeHandle相关的类.     ​​   1. NoHandle   顶层类(tra ...

  6. Chisel3 - 字面量（literal）

    https://mp.weixin.qq.com/s/uiW4k4DeguvYsG8LhHk2Ug 介绍Chisel3中基本数据类型的字面量的写法,及其背后的实现机制,也就是Scala隐式规则.   ...

  7. 【Mybatis】mybatis开启Log4j日志、增删改查操作

    Mybatis日志(最常用的Log4j) 官方网站http://www.mybatis.org/mybatis-3/zh/logging.html 1.在src目录下创建一个log4j.propert ...

  8. Java 异常（一） 异常概述及其架构

    Java 异常(一) 异常概述及其架构 一.异常概述 (一).概述 Java异常是Java提供的一种识别及响应错误的一致性机制.异常指的是程序在执行过程中,出现的非正常的情况,最终会导致JVM的非正常 ...

  9. Java实现 蓝桥杯 生命游戏

    标题:生命游戏 康威生命游戏是英国数学家约翰·何顿·康威在1970年发明的细胞自动机. 这个游戏在一个无限大的2D网格上进行. 初始时,每个小方格中居住着一个活着或死了的细胞. 下一时刻每个细胞的状态 ...

  10. Java实现 蓝桥杯VIP 算法提高 最长公共子序列

    算法提高 最长公共子序列 时间限制:1.0s 内存限制:256.0MB 问题描述 给定两个字符串,寻找这两个字串之间的最长公共子序列. 输入格式 输入两行,分别包含一个字符串,仅含有小写字母. 输出格 ...