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到 ...
随机推荐
- 读Pyqt4教程，带你入门Pyqt4 _006
窗口组件是应用程序的基本构建块.PyQt4编程工具包拥有范围广泛的各种窗口组件.按钮.选择框.滑块.列表框等等,程序员工作所需要的一切.在教程的这部分中,我们将介绍一些有用的窗口组件. QCheckB ...
- Maven快速入门（三）Maven的坐标和仓库
之前通过一个helloworld的例子来说一说如何创建maven项目以及maven项目的项目结构,然后讲maven如何编译运行项目.接下来介绍maven中几个比较重要的概念:坐标和仓库.Maven快速 ...
- 【极客思考】计算机网络：Wireshark抓包分析TCP中的三次握手与四次挥手
[摘要]本文重点分析计算机网络中TCP协议中的握手和挥手的过程. [前提说明] 前段时间突然看到了一篇关于TCP/IP模型的文章,心想这段时间在家里也用wireshark抓了点包,那么想着想着就觉得需 ...
- Redis详解（十二）------ 缓存穿透、缓存击穿、缓存雪崩
本篇博客我们来介绍Redis使用过程中需要注意的三种问题:缓存穿透.缓存击穿.缓存雪崩. 1.缓存穿透 一.概念 缓存穿透:缓存和数据库中都没有的数据,可用户还是源源不断的发起请求,导致每次请求都会到 ...
- Java实现蓝桥杯 算法提高 盾神与积木游戏
题目描述 最近的m天盾神都去幼儿园陪小朋友们玩去了~ 每个小朋友都拿到了一些积木,他们各自需要不同数量的积木来拼一些他们想要的东西.但是有的小朋友拿得多,有的小朋友拿得少,有些小朋友需要拿到其他 小朋 ...
- Java实现 LeetCode 389 找不同
389. 找不同 给定两个字符串 s 和 t,它们只包含小写字母. 字符串 t 由字符串 s 随机重排,然后在随机位置添加一个字母. 请找出在 t 中被添加的字母. 示例: 输入: s = " ...
- java实现Synchronized锁的用法
Java线程同步中的一个重要的概念synchronized. synchronized是java的关键字,是一种同步锁,它作用的对象有以下几种: ①作用在代码块上.该代码块称为同步代码块,作用范围是大 ...
- Java实现填符号凑算式
匪警请拨110,即使手机欠费也可拨通! 为了保障社会秩序,保护人民群众生命财产安全,警察叔叔需要与罪犯斗智斗勇,因而需要经常性地进行体力训练和智力训练! 某批警察叔叔正在进行智力训练: 1 2 3 4 ...
- Java实现第十届蓝桥杯等差数列
试题 I: 等差数列 时间限制: 1.0s 内存限制: 512.0MB 本题总分:25 分 [问题描述] 数学老师给小明出了一道等差数列求和的题目.但是粗心的小明忘记了一 部分的数列,只记得其中 N ...
- Linux文件搜索命令locate、which、grep详解
命令locate详解 命令locate,其基本功能是在文件资料库中可以快速的搜索系统文件,占用系统资源很少,例如:locate my.cnf 还可以使用locate -i [文件名],不区分大小写进行 ...