【Java学习20170427】jQuery
来源：互联网 发布：淘宝客服网上人工服务 编辑：程序博客网 时间：2024/06/06 15:42
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><script src="jquery/jquery-3.1.1.js"></script><script type="text/javascript">$(document).ready(function() {$("button").click(function() {$("p").css("background-color","yellow");});});</script></head><body><h1>欢迎来到宏达国际</h1><p>欢迎来到share科技</p><p>欢迎来到24楼</p><button type="button">轻轻点我</button></body></html>
<%@ 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><script src="jquery/jquery-3.1.1.js"></script><script type="text/javascript">$(document).ready(function() {$("#but_hide01").click(function() {$("#p1").hide();});$("#but_show01").click(function() {$("#p1").show();});});</script><script type="text/javascript">$(document).ready(function() {$("#but_hide02").click(function() {$("#p2").hide(1000);});$("#but_show02").click(function() {$("#p2").show(1000);});});</script><script type="text/javascript">$(document).ready(function() {$("#but_hide03").click(function() {$("#p3").hide(1000, function() {$("#p3").show(1000);});});});</script><script type="text/javascript">$(document).ready(function() {$("#but").click(function() {$("#p4").toggle();});});</script></head><body><h3>普通显示隐藏</h3><p id="p1">你觉得我帅吗</p><input type="button" id="but_hide01" value="点我隐藏" /><input type="button" id="but_show01" value="点我显示" /><br /><br /><hr /><h3>设置了速度的显示隐藏</h3><p id="p2">我就知道你会夸我帅</p><input type="button" id="but_hide02" value="点我隐藏" /><input type="button" id="but_show02" value="点我显示" /><br /><br /><hr /><h3>设置了速度的显示隐藏和执行完成后要执行的函数</h3><p id="p3">一直夸我吧</p><input type="button" id="but_hide03" value="点我隐藏" /><br /><br /><hr /><h3>使用toggle()来显示隐藏</h3><p id="p4">你看我脸都红了</p><input type="button" id="but" value="点我" /></body></html>
<%@ 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><script src="jquery/jquery-3.1.1.js"></script><!-- fadeIn() --><script type="text/javascript">$(document).ready(function() {$("#but1").click(function() {$("#div11").fadeIn();$("#div12").fadeIn("slow");$("#div13").fadeIn(3000);});});</script><!-- fadeOut() --><script type="text/javascript">$(document).ready(function() {$("#but2").click(function() {$("#div21").fadeOut();$("#div22").fadeOut("slow");$("#div23").fadeOut(3000);});});</script><!-- fadeToggle() --><script type="text/javascript">$(document).ready(function() {$("#but3").click(function() {$("#div31").fadeToggle();$("#div32").fadeToggle("slow");$("#div33").fadeToggle(3000);});});</script><!-- fadeTo() --><script type="text/javascript">$(document).ready(function() {$("#but4").click(function() {$("#div41").fadeTo("slow", 0.15);$("#div42").fadeTo("slow", 0.4);$("#div43").fadeTo("slow", 0.7);});});</script></head><body><h3>演示带有不同参数的 fadeIn() 方法。</h3><br /><button id="but1">点击这里，使三个矩形淡入</button><br><br><div id="div11"style="width:80px;height:80px;display:none;background-color:red;"></div><br><div id="div12"style="width:80px;height:80px;display:none;background-color:green;"></div><br><div id="div13"style="width:80px;height:80px;display:none;background-color:blue;"></div><br /><hr /><br /><br /><h3>演示带有不同参数的 fadeOut() 方法。</h3><button id="but2">点击这里，使三个矩形淡出</button><br><br><div id="div21" style="width:80px;height:80px;background-color:red;"></div><br><div id="div22" style="width:80px;height:80px;background-color:green;"></div><br><div id="div23" style="width:80px;height:80px;background-color:blue;"></div><br /><hr /><br /><br /><h3>演示带有不同参数的 fadeToggle() 方法。</h3><button id="but3">点击这里，使三个矩形淡入淡出</button><br><br><div id="div31" style="width:80px;height:80px;background-color:red;"></div><br><div id="div32" style="width:80px;height:80px;background-color:green;"></div><br><div id="div33" style="width:80px;height:80px;background-color:blue;"></div><br /><hr /><br /><br /><h3>演示带有不同参数的 fadeTo() 方法。</h3><button id="but4">点击这里，使三个矩形淡出</button><br><br><div id="div41" style="width:80px;height:80px;background-color:red;"></div><br><div id="div42" style="width:80px;height:80px;background-color:green;"></div><br><div id="div43" style="width:80px;height:80px;background-color:blue;"></div></body></body></html>
<%@ 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><script src="jquery/jquery-3.1.1.js"></script><style type="text/css">div.panel, p.flip {margin: 0px;padding: 5px;text-align: center;background: #e5eecc;border: solid 1px #c3c3c3;}div.panel {height: 120px;display: none;}</style><!-- slideDown() --><script type="text/javascript">$(document).ready(function() {$("#p1").click(function() {$("#div1").slideDown("slow");});});</script><!-- slideUp() --><script type="text/javascript">$(document).ready(function() {$("#p2").click(function() {$("#div2").slideUp("slow");});});</script><!-- slideToggle() --><script type="text/javascript">$(document).ready(function() {$("#p3").click(function() {$("#div3").slideToggle("slow");});});</script></head><body><div class="panel" id="div1"><p>快点夸我帅</p><p>不要停</p></div><p class="flip" id="p1">请点击这里</p><br /><hr /><br /><br /><div class="panel" id="div2" style="display:block!important;"><p>来，快点夸我帅</p><p>不要停</p></div><p class="flip" id="p2">请点击这里</p><br /><hr /><br /><br /><div class="panel" id="div3"><p>一直夸我帅</p><p>一直夸</p></div><p class="flip" id="p3">请点击这里</p></body></html>
<%@ 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><script src="jquery/jquery-3.1.1.js"></script><script>$(document).ready(function() {$("#but1").click(function() {$("#div1").animate({left : '250px'});});});</script><script>$(document).ready(function() {$("#but2").click(function() {$("#div2").animate({left : '250px',opacity : '0.5',height : '150px',width : '150px'});});});</script><script>$(document).ready(function() {$("#but3").click(function() {$("#div3").animate({left : '250px',height : '+=150px',width : '+=150px'});});});</script><script>$(document).ready(function() {$("#but4").click(function() {$("#div4").animate({height : 'toggle'});});});</script><script>$(document).ready(function() {$("#but5").click(function() {var div = $("#div5");div.animate({height : '300px',opacity : '0.4'}, "slow");div.animate({width : '300px',opacity : '0.8'}, "slow");div.animate({height : '100px',opacity : '0.4'}, "slow");div.animate({width : '100px',opacity : '0.8'}, "slow");});});</script><!-- 练习 --><script>$(document).ready(function() {$("#but6").click(function() {var div = $("#div6");div.animate({left : '100px',height : '150px',width : '150px'}, "slow");div.animate({fontSize : '3em'}, "slow");});});</script></head><body><button id="but1">开始动画</button><h3>它把 <div> 元素移动到左边，直到 left 属性等于 250 像素为止</h3><p>注意：默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSSposition 属性设置为 relative、fixed 或 absolute。</p><div id="div1"style="background:#98bf21;height:100px;width:100px;position:relative;"></div><br /><hr /><br /><br /><button id="but2">开始动画</button><h3>生成动画的过程中可同时使用多个属性</h3><p>注意：默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSSposition 属性设置为 relative、fixed 或 absolute。</p><div id="div2"style="background:#98bf21;height:100px;width:100px;position:relative;"></div><br /><hr /><br /><br /><button id="but3">开始动画</button><h3>也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=</h3><p>注意：默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSSposition 属性设置为 relative、fixed 或 absolute。</p><div id="div3"style="background:#98bf21;height:100px;width:100px;position:relative;"></div><br /><hr /><br /><br /><button id="but4">开始动画</button><h3>可以把属性的动画值设置为 "show"、"hide" 或 "toggle"</h3><p>注意：默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSSposition 属性设置为 relative、fixed 或 absolute。</p><div id="div4"style="background:#98bf21;height:100px;width:100px;position:relative;"></div><br /><hr /><br /><br /><button id="but5">开始动画</button><h3>使用队列功能</h3><p>注意：默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSSposition 属性设置为 relative、fixed 或 absolute。</p><div id="div5"style="background:#98bf21;height:100px;width:100px;position:relative; margin-bottom: 300px"></div><br /><hr /><br /><br /><button id="but6">开始动画</button><h3>练习效果</h3><div id="div6"style="background:#98bf21;height:100px;width:100px;position:relative; margin-bottom: 300px">你好</div></body></html>
<%@ 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><script src="jquery/jquery-3.1.1.js"></script><script>$(document).ready(function() {$("#but1").click(function() {alert("Text: " + $("#test1").text());}); $("#but2").click(function() {alert("HTML: " + $("#test1").html());});});</script><script>$(document).ready(function() {$("#but3").click(function() {alert("输入的内容是: " + $("#test2").val());});});</script><script>$(document).ready(function() {$("#but4").click(function() {alert($("#baidu").attr("href"));});});</script><!-- 通过text()、html()、val()以及attr属性设置内容 --><script>$(document).ready(function() {$("#but5").click(function() {$("#test3").text("啦啦啦啦啦");});$("#but6").click(function() {$("#test4").html("<b>啦啦啦啦啦</b>");});$("#but7").click(function() {$("#test5").val("啦啦啦啦啦");});});</script><script>$(document).ready(function() {$("#but8").click(function() {$("#baidu1").attr("href", "http://www.sina.com.cn/");});});</script></head><body><!-- 通过text()、html()、val()以及attr属性显示内容 --><h1>通过text()、html()、val()以及attr属性显示内容</h1><p id="test1">这是段落中的<b>粗体</b>文本。</p><button id="but1">显示文本</button><button id="but2">显示 HTML</button><br /><hr /><br /><br /><p>姓名：<input type="text" id="test2"></p><button id="but3">显示值</button><br /><hr /><br /><br /><p><a href="http://www.baidu.com" id="baidu">点击这里跳转到百度</a></p><button id="but4">显示 href的值</button><br /><hr /><br /><br /><!-- 通过text()、html()、val()以及attr属性设置内容 --><h1>通过text()、html()、val()以及attr属性设置内容</h1><p id="test3">老唐好帅</p><p id="test4">老唐好瘦</p><p>请输入： <input type="text" id="test5" value="老唐好帅"></p><button id="but5">设置文本</button><button id="but6">设置 HTML</button><button id="but7">设置值</button><br /><hr /><br /><br /><p><a href="http://www.baidu.com" id="baidu1">点击这里跳转到百度</a></p><button id="but8">改变 href值</button></body></html>
<%@ 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><script src="jquery/jquery-3.1.1.js"></script><script>$(document).ready(function() {$("#but1").click(function() {$("#div1").remove();});});</script><script>$(document).ready(function() {$("#but2").click(function() {$("#div2").empty();});});</script></head><body><h3>jQuery remove() 方法删除被选元素及其子元素。</h3><div id="div1"style="height:100px;width:300px;border:1px solid black;background-color:yellow;">一个div<p>这是一个div</p><p>这是一个黄色的div</p></div><br><button id="but1">删除 div 元素</button><br /><hr /><br /><br /><h3>jQuery empty() 方法删除被选元素的子元素。</h3><div id="div2"style="height:100px;width:300px;border:1px solid black;background-color:red;">一个div<p>这是一个div</p><p>这是一个红色的div</p></div><br><button id="but2">清空 div 元素</button></body></html>
<%@ 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><script src="jquery/jquery-3.1.1.js"></script><script>$(document).ready(function() {$("button").click(function() {$("h1,h2,p").addClass("blue");$("div").addClass("important");});});</script><style type="text/css">.important {font-weight: bold;font-size: xx-large;}.blue {color: blue;}</style></head><body><h1>标题 1</h1><h2>标题 2</h2><p>这是一个段落。</p><p>这是另一个段落。</p><div>这是非常重要的文本！</div><br><button>向元素添加类</button></body></html>
<%@ page language="java" import="java.util.*"contentType="text/html; charset=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><script src="jquery/jquery-3.1.1.js"></script><script>$(document).ready(function() {$("#btn1").click(function() {$('#test').load('test/demo_text.txt');})})</script><script>$(document).ready(function() {$("#btn2").click(function() {$("#div1").load("test/demo_text.txt", function(responseTxt, statusTxt, xhr) {if (statusTxt == "success")alert("外部内容加载成功！");if (statusTxt == "error")alert("Error: " + xhr.status + ": " + xhr.statusText);});});});</script></head><body><h3 id="test">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3><button id="btn1" type="button">获得外部的内容</button><br /><hr /><br /><br /><div id="div1"><h2>使用 jQuery AJAX 来改变文本</h2></div><button id="btn2">获得外部内容</button></body></html>
0 0
- 【Java学习20170427】jQuery
- JQuery+JSON+java学习实例
- java学习【web基础-jQuery】
- 从头开始学习JAVA 6--引入JQuery
- java servlet+jquery+json学习小例子
- Java+JQuery+Dojo+Json学习资源
- 我的java学习之路-jQuery
- java学习【web基础-jQuery入门】
- Java学习套路之初学JQuery
- (学习java)JQuery实现表单的校验
- JAVA Script 之Jquery初步学习，入门学习，jquery基础，浅谈其基本用法。
- 学习jquery-Jquery基础知识
- jquery学习--jQuery安装
- jQuery学习--jQuery选择器
- 学习JQuery
- jquery 学习
- JQuery 学习
- jquery 学习
- 复习笔记-java桟与堆内存分配
- 关于集合
- 深入Collection集合的子接口List
- Spring拦截器的使用
- QT小知识点（1）
- 【Java学习20170427】jQuery
- poj3321——Apple Tree（树上树状数组）
- return false防止默认的事件行为
- HDU
- 多分类问题Softmax Regression
- bzoj2456: mode
- Android 集成FireBase Realtime DataBase实现聊天
- SuperMap iMobile for iOS地图开发入门—XIB模式
- ssh环境配置——搭建spring环境
