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到 ...
随机推荐
- Pytorch写CNN
用Pytorch写了两个CNN网络,数据集用的是FashionMNIST.其中CNN_1只有一个卷积层.一个全连接层,CNN_2有两个卷积层.一个全连接层,但训练完之后的准确率两者差不多,且CNN_1 ...
- python时间格式化、运行时长计算
1.格式化: import time timeStr=time.strftime('%Y-%m-%d %H:%M:%S',time.localtime()) #格式化为:2018-07-17 19:0 ...
- [leetcode] 并查集（Ⅲ）
婴儿名字 题目[Interview-1707]:典型并查集题目. 解题思路 首先对 names 这种傻 X 字符串结构进行预处理,转换为一个 map,key 是名字,val 是名字出现的次数. 然后是 ...
- Netty学习笔记（番外篇） - ChannelHandler、ChannelPipeline和ChannelHandlerContext的联系
这一篇是 ChannelHandler 和 ChannelPipeline 的番外篇,主要从源码的角度来学习 ChannelHandler.ChannelHandler 和 ChannelPipeli ...
- （Java实现） 最佳调度问题
题目描述 假设有n个任务由k个可并行工作的机器完成.完成任务i需要的时间为ti.试设计一个算法找出完成这n个任务的最佳调度,使得完成全部任务的时间最早. 对任意给定的整数n和k,以及完成任务i需要的时 ...
- Java实现 LeetCode 368 最大整除子集
368. 最大整除子集 给出一个由无重复的正整数组成的集合,找出其中最大的整除子集,子集中任意一对 (Si,Sj) 都要满足:Si % Sj = 0 或 Sj % Si = 0. 如果有多个目标子集, ...
- java实现 蓝桥杯 算法训练 安慰奶牛
问题描述 Farmer John变得非常懒,他不想再继续维护供奶牛之间供通行的道路.道路被用来连接N个牧场,牧场被连续地编号为1到N.每一个牧场都是一个奶牛的家.FJ计划除去P条道路中尽可能多的道路, ...
- Java实现填符号凑算式
匪警请拨110,即使手机欠费也可拨通! 为了保障社会秩序,保护人民群众生命财产安全,警察叔叔需要与罪犯斗智斗勇,因而需要经常性地进行体力训练和智力训练! 某批警察叔叔正在进行智力训练: 1 2 3 4 ...
- Java实现第八届蓝桥杯杨辉三角
杨辉三角 杨辉三角也叫帕斯卡三角,在很多数量关系中可以看到,十分重要. 第0行: 1 第1行: 1 1 第2行: 1 2 1 第3行: 1 3 3 1 第4行: 1 4 6 4 1 - 两边的元素都是 ...
- java实现第五届蓝桥杯排列序数
排列序数 如果用a b c d这4个字母组成一个串,有4!=24种,如果把它们排个序,每个串都对应一个序号: abcd 0 abdc 1 acbd 2 acdb 3 adbc 4 adcb 5 bac ...