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

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函数介绍的更多相关文章

JavaWeb网上图书商城完整项目--12.项目所需jquery函数介绍之ajax
jquery中使用ajax发送异步请求下面的一个案例在input输入框失去焦点的时候发送一个异步的请求: 我们来看程序的案例: 这里要强调的是返回值最好选择是json,json对应的就是对象,Jav ...
JavaWeb网上图书商城完整项目--13.项目所需环境的搭建
1.首先安装mysql 创建项目所需的数据库,直接运行项目提供的goods.sql文库 2.myeclipse创建一个web project ,项目的名称是goods 把视频中提供的项目原型下的提供的 ...
JavaWeb网上图书商城完整项目--day02-4.regist页面提交表单时对所有输入框进行校验
1.现在我们要将table表中的输入的参数全部提交到后台进行校验,我们提交我们是按照表单的形式提交,所以我们首先需要在table表外面添加一个表单 <%@ page language=" ...
JavaWeb网上图书商城完整项目--24.注册页面的css样式实现
现在框架已经做好了,即下来我们要对页面进行装饰了,第一步给每一个元素添加id 1.最外面的div添加id为divMain 2.第二个div添加id为divTitle,里面的span对应的id为span ...
JavaWeb网上图书商城完整项目--过滤器解决中文乱码
我们知道,如果是POST请求,我们需要调用request.setCharacterEncoding(“utf-8”)方法来设计编码:如果是GET请求,我们需要自己手动来处理编码问题.如果我们使用了En ...
JavaWeb网上图书商城完整项目--day03-1.图书模块功能介绍及相关类创建
1 前两天我们学习了user用户模块和图书的分类模块,接下来我们学习图书模块图书模块的功能主要是下面的功能: 2 接下来我们创建对应的包我们来看看对应的数据库表t_book CREATE TABL ...
JavaWeb网上图书商城完整项目--BaseServlet
1.以前进行操作的时候,例如我们进行登陆操作我们使用LoginServlet进行处理,进行注册操作我们使用RegisterServlet,很多业务的操作的时候我们就要定义很多个Servlet 有了Ba ...
JavaWeb网上图书商城完整项目--day02-21.退出功能的实现
1.当用户点击退出的时候,跳转到登陆页面当用户点击退出的时候,需要将session中保存的登陆的用户销毁掉当用户点击退出的时候,调用UserServlet的quit方法退出按钮在top.jsp中 ...
JavaWeb网上图书商城完整项目--day02-17.登录功能页面实现
1.当在登陆页面点击登陆按钮的时候,会调用UserServlet的login方法,我们要在login.jsp中进行配置 2.要在login.jsp中处理Servlet在后台业务操作之后forward到 ...

随机推荐

个人记录HTML基础笔记
无功能性标签 en strong 都表示强调,strong强调级更高 abbr 缩写 <abbr title="wangweiwang">w3c</annr> ...
pycharm关联git
一.先创建SSH Key 给github设置SSH-KEY !!! 这一步算是连接GitHub的最基本的一步了,git是分布式的代码管理工具,远程的代码管理是基于ssh的,所以得先配好SSH key. ...
Java实现 LeetCode 799 香槟塔（暴力模拟）
799. 香槟塔我们把玻璃杯摆成金字塔的形状,其中第一层有1个玻璃杯,第二层有2个,依次类推到第100层,每个玻璃杯(250ml)将盛有香槟. 从顶层的第一个玻璃杯开始倾倒一些香槟,当顶层的杯子满了 ...
Java实现 LeetCode 622 设计循环队列（暴力大法）
622. 设计循环队列设计你的循环队列实现. 循环队列是一种线性数据结构,其操作表现基于 FIFO(先进先出)原则并且队尾被连接在队首之后以形成一个循环.它也被称为"环形缓冲器" ...
Java实现 LeetCode 494 目标和
494. 目标和给定一个非负整数数组,a1, a2, -, an, 和一个目标数,S.现在你有两个符号 + 和 -.对于数组中的任意一个整数,你都可以从 + 或 -中选择一个符号添加在前面. 返回可 ...
Java实现蓝桥杯算式最大值
算式最大值 [问题描述] 给定: 1)N个正整数A1, A2, - AN; 2)P个加号+和Q个减号-; (P+Q=N-1) 3)K对括号() 请你使用全部整数.加减号和括号,组成一个合法的算式(A1 ...
rpm安装Clickhouse
1. 下载相关安装包在opt目录下创建clickhouse目录,方便下载文件 Cd /opt/clickhouse 一次执行一下命令 ① wget --content-disposition ht ...
（数据科学学习手札86）全平台支持的pandas运算加速神器
本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介随着其功能的不断优化与扩充,pandas已然成为 ...
ASP.NET Core 3.1 WebApi部署到腾讯云CentOS 7+Docker
一.准备首先需要有一台CentOS服务器,安装最新版Docker,配置镜像加速等,安装方法网上很多,下面是一些相关指令: yum install -y yum-utils device-mapper ...
[蓝桥杯]算法提高 GPA
问题描述输入A,B两人的学分获取情况,输出两人GPA之差. 输入格式输入的第一行包含一个整数n表示A的课程数,以下n行每行Si,Ci分别表示第i个课程的学分与A的表现. GPA=Σ(Si*Ci) ...

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

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

随机推荐

热门专题