首页 > 代码库 > jQuery
jQuery
jquery是一个javaScript框架！核心理念就是：write less ,do more!
<!-- window.onload 与 $(document).ready(）区别 01.简化方式 window.onload 无！ $(document).ready(）===$(function()) 02.编写的个数 window.onload只有一个！$(function())可以有多个 03.执行时机： window.onload，必须等待网页中所有的元素（图片，视频，音频。。）加载完毕后再执行！ $(function())，网页中html结构加载完成后（图片，视频，音频可能并没有加载完成）就会执行！ -->
<script type="text/javascript"> $(function(){ $("li").click(function(){ /*$("#current").css("background","red"); $("#current").css({"background":"red"});*/ /*同时设置多个属性 每个属性之间使用，隔开！ 属性与属性值使用:分割*/ $("#current").css({"background":"red","font-size":24}); }) }) </script>
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>显示和隐藏</title> <style type="text/css"> /*默认让li中的div隐藏*/ div{ display: none; } /*去掉li前面的默认标签*/ li{ list-style: none; } </style> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script type="text/javascript"> $(function(){ /*当鼠标移动到li上时，div中的图片显示，li背景色改变 * 鼠标离开li时，图片隐藏*/ $("li").mouseover(function(){ //鼠标悬停事件 $(this).css("background","orange").children("div").show(); }).mouseout(function(){ $(this).css("background","white").children("div").hide(); }) }) </script></head><body><ul> <li> <a href="#">可爱的小猫咪1</a> <div><img src="images/cat.jpg"/></div> </li> <li> <a href="#">可爱的小猫咪2</a> <div><img src="images/cat.jpg"/></div> </li> <li> <a href="#">可爱的小猫咪3</a> <div><img src="images/cat.jpg"/></div> </li></ul></body></html>
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>显示和隐藏 hover</title> <style type="text/css"> /*默认让li中的div隐藏*/ div{ display: none; } /*去掉li前面的默认标签*/ li{ list-style: none; } </style> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script type="text/javascript"> $(function(){ /*当鼠标移动到li上时，div中的图片显示，li背景色改变 * 鼠标离开li时，图片隐藏*/ $("li").hover((function(){ //鼠标悬停事件 $(this).css("background","orange").children("div").show(); }), (function(){ $(this).css("background","white").children("div").hide(); })) }) </script></head><body><ul> <li> <a href="#">可爱的小猫咪1</a> <div><img src="images/cat.jpg"/></div> </li> <li> <a href="#">可爱的小猫咪2</a> <div><img src="images/cat.jpg"/></div> </li> <li> <a href="#">可爱的小猫咪3</a> <div><img src="images/cat.jpg"/></div> </li></ul></body></html>
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>链式操作</title> <style type="text/css"> div{ display: none; /*默认不显示*/ } </style> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script type="text/javascript"> /*$ 等同于 jQuery*/ $(function(){ $("h1").click(function(){ /*给h1增加背景色和字体大小 并且给其后面的兄弟节点增加样式*/ $(this).css({"background":"orange","font-size":16}).next() .css({"background":"pink","font-size":26,"display":"block"}); }) }) </script></head><body><h1>什么是学习？</h1><div> 学，并且习以为常！</div></body></html>
图片轮播
$(function(){ /*创建一个集合保存图片*/ var imgs=new Array("adver01.jpg","adver02.jpg","adver03.jpg","adver04.jpg","adver05.jpg","adver06.jpg"); var flag=0; /*代表数组的下标*/ /*点击向左的按钮*/ $(".arrowLeft").click(function(){ var i=0; if(flag==0){ flag=imgs.length-1; i=flag+1; /*图片的编号 li中的值*/ }else{ flag--; i=flag+1; /*图片的编号*/ } $(".adver").css("background","url(images/"+imgs[flag]+")"); $("li:nth-of-type("+i+")").css("background","orange"); $("li:nth-of-type("+i+")").siblings().css("background","#333333"); }); /*点击向右的按钮*/ $(".arrowRight").click(function(){ var i=0; if(flag==imgs.length-1){ flag=0; i=flag+1; /*图片的编号*/ }else{ flag++; i=flag+1; /*图片的编号*/ } $(".adver").css("background","url(images/"+imgs[flag]+")"); $("li:nth-of-type("+i+")").css("background","orange"); $("li:nth-of-type("+i+")").siblings().css("background","#333333"); }); /*显示→ ← 的按钮*/ $(".adver").hover((function(){ $(".arrowRight").show(); $(".arrowLeft").show(); }),function(){ $(".arrowRight").hide(); $(".arrowLeft").hide(); })})
<%@ 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"><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><script type="text/javascript"> $(document).ready(function() { $("tr:even").css("background", "red"); $("tr:odd").css("background", "pink"); })</script><!-- <script type="text/javascript"> window.onload=function(){ var rows= document.getElementsByTagName("tr"); for(var i=0;i<rows.length;i++){ if(i%2==0){ rows[i].style.backgroundColor="green"; }else{ rows[i].style.backgroundColor="pink"; } } } </script> --><body> <table> <tr> <td>第一行第一列</td> <td>第一行第二列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr> <tr> <td>第三行第一列</td> <td>第三行第二列</td> </tr> <tr> <td>第四行第一列</td> <td>第四行第二列</td> </tr> </table></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><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"><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><style type="text/css">.show { display: none;}</style><script type="text/javascript"> $(document).ready(function() { //点击按钮触发的事件 $("button").click(function() { $("#d").addClass("show"); $(".c").addClass("show"); $("div").addClass("show"); }) })</script><body> <button type="button">点击查看</button> <div id="d">网页元素1</div> <div>网页元素2</div> <div class="c">网页元素3</div> <div>网页元素4</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><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"><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><style type="text/css">.border { border: 3px solid red;}</style><script type="text/javascript">/*jQuery(document).ready() 等同于 $(document).ready()*/ jQuery(document).ready(function() { $("img").click(function(){ // $(this).addClass("border"); //$(this).toggleClass("border"); 有就删除样式，没有就增加样式 $(this).css("border"," 3px solid green"); }) })</script><body> <img src="images/cat.jpg"></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><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"><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><script type="text/javascript">/**window.onload:01.必须等到网页中所有的内容（图片，视频。。。）加载完毕之后 再执行！02.同一个页面只能书写一个03.没有简写的方式$(document).ready(function(){}):01.等到网页中dom文档结构加载完毕之后 就会执行 （图片，视频。。。）可能还没有加载完毕！02.同一个页面可以书写多个03.简写方式$(function(){})*/ $(function() { // $("div").html("<h1>这是html</h1>"); $("div").text("<h1>这是html</h1>"); })</script><body> <div>网页元素</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><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"><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><script type="text/javascript"> $(function() { $("button").click(function(){ var $div= $("div"); //jquery对象 //转换成dom对象 01.【index】 $div[0].innerHTML="网页"; //转换成dom对象 02.get(index) $div.get(1).innerHTML="网页"; var first= document.getElementById("first");//dom对象 //转换成jquery对象 $(first).html("元素"); }) })</script><body> <button>点击按钮</button> <div id="first">网页元素1</div> <div>网页元素2</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><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"><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><style type="text/css">#box { background-color: #FFF; border: 2px solid #000; padding: 5px;}</style><script type="text/javascript"> $(document).ready(function() { $("#btn1").click(function() {//触发不同的效果按钮点击事件 //标签选择器，获取<h3>元素并为其添加背景颜色 //$("h3").css("background","red"); //类选择器，获取并设置所有class为title的元素的背景颜色 //$(".title").css("background","red"); //ID选择器，获取并设置id为box的元素的背景颜色 //$("#box").css("background","red"); //并集选择器，获取并设置所有<h2>、<dt>、class为title的元素的背景颜色 //$("h2,dt,.title").css("background","red"); //交集选择器，获取并设置所有class为title的<h2>元素的背景颜色 //$("h2.title").css("background","red"); //全局选择器，改变所有元素的字体颜色 $("*").css("color", "red"); }) });</script></head><body> <input type="button" id="btn1" value="显示效果" /> <div id="box"> id为box的div <h2 class="title">class为title的h2</h2> <h3 class="title">class为title的h3</h3> <h3>热门排行</h3> <dl> <dt> <img src="images/case_1.gif" width="93" height="99" alt="斗地主" /> </dt> <dd class="title">斗地主</dd> <dd>休闲游戏</dd> <dd>QQ斗地主是国内同时在线人数最多的棋牌游戏......</dd> </dl> </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><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"><style type="text/css">* { margin: 0; padding: 0; line-height: 30px;}body { margin: 10px;}#menu { border: 2px solid #03C; padding: 10px;}a { text-decoration: none; margin-right: 5px;}span { font-weight: bold; padding: 3px;}h2 { margin: 10px 0; cursor: pointer;}</style><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><script type="text/javascript"> $(document).ready(function() { $("h2").click(function() { //后代选择器，获取并设置#menu下的<span>元素的背景颜色 //$("#menu span").css("background","red"); //子选择器，获取并设置#menu下的子元素<span>的背景颜色 //$("#menu>span").css("background","red"); //相邻选择器，获取并设置紧接在<h2>元素后的<dl>元素的背景颜色 //$("h2+dl").css("background","red"); //同辈选择器，获取并设置<h2>元素之后的所有同辈元素<dl>的背景颜色 $("h2~dl").css("background","red"); }); });</script></head><body> <div id="menu"> <h2 title="点击看效果">全部旅游产品分类</h2> <dl> <dt> 北京周边旅游<span>特价</span> </dt> <dd> <a href="#">按天数</a> <a href="#">海边旅游</a> <a href="#">草原</a> </dd> </dl> <dl> <dt>景点门票</dt> <dd> <a href="#">名胜</a> <a href="#">暑期</a> <a href="#">乐园</a> </dd> <dd> <a href="#">山水</a> <a href="#">双休</a> </dd> </dl> <span>更多分类</span> </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><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"><style type="text/css">#box { background-color: #FFF; border: 2px solid #000; padding: 5px;}h2 { cursor: pointer;}</style><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><script type="text/javascript"> $(document).ready(function() { $("h2").click(function() { //改变含有title属性的<h2>元素的背景颜色 //$("h2[title]").css("background","red"); //改变class属性的值为odds的元素的背景颜色 //$("[class=‘odds‘]").css("background","red"); //改变id属性的值不为box的元素的背景颜色 //$("[id!=‘box‘]").css("background","red"); //改变title属性的值中以h开头的元素的背景颜色 //$("[title^=‘h‘]").css("background","red"); //改变title属性的值中以jp结尾的元素的背景颜色 //$("[title$=‘jp‘]").css("background","red"); //改变title属性的值中含有s的元素的背景颜色 //$("[title*=‘s‘]").css("background","red"); //改变包含class属性，且title属性的值中含有y的<li>元素的背景颜色 $("li[class][title*=‘y‘]").css("background","red"); }); });</script></head><body> <div id="box"> <h2 class="odds" title="cartoonlist">动画列表</h2> <ul> <li class="odds" title="kn_jp">名侦探柯南</li> <li class="evens" title="hy_jp">火影忍者</li> <li class="odds" title="ss_jp">死神</li> <li class="evens" title="yj_jp">妖精的尾巴</li> <li class="odds" title="yh_jp">银魂</li> <li class="evens" title="hm_da">黑猫警长</li> <li class="odds" title="xl_ds">仙履奇缘</li> </ul> </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><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"><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><script type="text/javascript">$(document).ready(function() { $("h2").click(function(){ //改变第1个<li>元素的背景颜色 // $("li:first").css("background","pink"); //改变最后一个<li>元素的背景颜色 // $("li:last").css("background","pink"); //改变class不为three的<li>元素的背景颜色 //$("li:not(.three)").css("background","pink"); //改变索引值为偶数的<li>元素的背景颜色 // $("li:even").css("background","pink"); //改变索引值为奇数的<li>元素的背景颜色 //$("li:odd").css("background","pink"); //改变索引值等于1的<li>元素的背景颜色 // $("li:eq(1)").css("background","pink"); //改变索引值大于1的<li>元素的背景颜色 //$("li:gt(1)").css("background","pink"); //改变索引值小于1的<li>元素的背景颜色 // $("li:lt(1)").css("background","pink"); //改变所有标题元素，例如<h1>,<h2>,<h3>……这些元素的背景颜色 // $(":header").css("background","pink"); }); /* $("input").click(function(){ alert($(this).is(":focus")); //判断元素是否获取焦点 //改变当前获取焦点的元素的背景颜色 $(":focus").css("background","pink"); }) */ $("input").focus(function(){ $(this).css("background","pink"); })});</script></head><body>获取焦点：<input type="text"><h2>网络小说</h2><ul> <li>王妃不好当</li> <li>致命交易</li> <li class="three">迦兰寺</li> <li>逆天之宠</li> <li>交错时光的爱恋</li> <li>张震鬼故事</li> <li>第一次亲密接触</li></ul></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><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"><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><script type="text/javascript">$(document).ready(function() { $("#show").click(function(){ $("div:hidden").show(); //让所有隐藏的元素 显示 }); $("#hide").click(function(){ $("div:visible").hide(); //让所有可见的元素 隐藏 });});</script></head><body> <button id="show">show</button> <button id="hide">hide</button> <div>显示1</div> <div>显示2</div> <div style="display:none">显示3</div></body></html>
$(window).resize(function(){ //调整窗口大小时，触发的事件 $("body").css("background","orange"); })
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";%><!DOCTYPE HTML><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"><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //点击提交按钮，如果为空则输入框的边框为红色 $(":submit").click(function(){ //获取用户名 //01. alert($("[name=‘username‘]").val()); //02. alert($(":text:eq(0)").val()); //03. alert($(":text:first").val()); var $userName=$(":text[name=‘username‘]"); //获取密码 var $password= $(":password[name=‘pwd‘]"); //获取确认密码 var $repwd= $(":password[name=‘repwd‘]"); //获取昵称 var $nickName=$(":text[name=‘nickname‘]"); //获取已选单选按钮 var $radio=$(":radio:checked"); //获取已选复选框 var $checkbox=$(":checkbox:checked"); //获取已选下拉框 var $select=$(":selected"); //调用方法 checkText($userName); checkText($password); checkText($repwd); checkText($nickName); checkRadio($radio); checkBox($checkbox); checkSelect($select); }); //验证输入框的值 function checkText(obj){ if(obj.val()==""){ obj.css("border","1px solid red"); }else{ obj.css("border","1px solid green"); } } //验证单选按钮 function checkRadio(obj){ if(obj.length==0){ $(":radio").parent().css("border","1px solid red"); }else{ $(":radio").parent().css("border","1px solid green"); } } //验证复选按钮 function checkBox(obj){ if(obj.length==0){ $(":checkbox").parent().css("border","1px solid red"); }else{ $(":checkbox").parent().css("border","1px solid green"); } } //验证下拉框 function checkSelect(obj){ if(obj.val()==""){ $("select").css("border","1px solid red"); }else{ //两种方式 都可以 (obj).parent().css("border","1px solid green"); } } }); </script></head><body><fieldset> <legend>注册表单</legend> <form onsubmit="return false;"> <input type="hidden" name="pid" value="1"/> <p>账号：<input type="text" name="username" /></p> <p>密码：<input type="password" name="pwd" /></p> <p>确认密码：<input type="password" name="repwd" /></p> <p>昵称：<input type="text" name="nickname" /></p> <p>性别： <input type="radio" name="sex" value="1">男 <input type="radio" name="sex" value="0">女 </p> <p>爱好： <input type="checkbox" name="hobby" value="篮球" />篮球 <input type="checkbox" name="hobby" value="足球" />足球 <input type="checkbox" name="hobby" value="羽毛球" />羽毛球 <input type="checkbox" name="hobby" value="其他" />其他 </p> <p>省份： <select> <option value="">--省份--</option> <option value="北京">北京</option> <option value="云南">云南</option> <option value="云南">云南</option> <option value="其他" >其他</option> </select> </p> <input type="submit" value="提交表单" /> </form></fieldset></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><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"><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //包含"运动鞋"的表格行背景色为蓝色 //$("tr:contains(‘运动鞋‘)").css("background","pink"); //没有内容的单元格背景色为红色 //$("td:empty").css("background","pink"); //包含连接的单元格背景色为绿色 //$("td:has(‘a‘)").css("background","pink"); //含有子节点或文本的表格背景色为灰色 $("td:parent").css("background","pink"); }); </script></head><body><table> <thead > <tr style="background-color: #aaaaaa;"> <th>序号</th> <th>订单号</th> <th>商品名称</th> <th>价格(元)</th> </tr> </thead> <tr> <td>1</td> <td>10035900</td> <td><a href="#">Nike透气减震运动鞋</a></td> <td>231.00</td> </tr> <tr> <td>2</td> <td>10036114</td> <td>天美太阳伞</td> <td>51.00</td> </tr> <tr> <td>3</td> <td>10035110</td> <td><a href="#">万圣节儿童蜘蛛侠装</a></td> <td>31.00</td> </tr> <tr> <td>4</td> <td>10035120</td> <td>匹克篮球运动鞋</td> <td>231.00</td> </tr> <tr> <td>5</td> <td>10032900</td> <td>jQuery权威指南</td> <td></td> </tr></table></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><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"><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><script type="text/javascript"> $(function() { //判断复选框是否被选中 /* 01. :checked $(":checkbox").click(function(){ if($(":checked").length!=0){ alert("已同意！"); } }) */ //02.change $(":checkbox").change(function() { alert($(":checkbox:checked").length); //当前页面复选框被选中的个数 if (this.checked) { alert("已同意！"); } }) });</script></head><body> <input type="checkbox"> 协议 <input type="checkbox"> 协议 <input type="checkbox"> 协议</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><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"><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><script type="text/javascript">/* json:是一个数据交换格式！ 语法规则： 01.数据在键值对中 02.数据之间使用,隔开 03.花括号中保存对象 04.方括号中保存集合 */ $(function() { //定义json对象 var student={"name":"小黑黑","age":50}; //取值 通过对象名.属性名 alert(student.name+"\n"+student.age); //集合 var clazz={ "student": [ {"name":"小黑黑1","age":51}, {"name":"小黑黑2","age":52}, {"name":"小黑黑3","age":53}, {"name":"小黑黑4","age":54}, ], "teacher": [ {"name":"教师1","age":51}, {"name":"教师2","age":52}, {"name":"教师3","age":53}, {"name":"教师4","age":54, "f": [ {"son":"小白1"}, {"son":"小白2"} ]}, ] } //alert(clazz.student[1].name+"\n"+clazz.student[1].age); // alert(clazz.teacher[1].name+"\n"+clazz.teacher[1].age); //只要是集合就使用 [index] 来取值 alert(clazz.teacher[3].f[1].son); //循环遍历所有的学生姓名 for(var i=0;i<clazz.student.length;i++){ alert(clazz.student[i].name); } /* for(var o in clazz){ if(o=="student"){ for(var name in clazz[o]){ alert(clazz[o][name].name); } } } */ });</script></head><body> <div>大家辛苦了！</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><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"><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><script type="text/javascript"> $(function() { $("[type=‘button‘]").click(function(){ // $("div").html("<h1>小猫咪消失了...</h1>"); innerHtml $("div").text("<h1>小猫咪消失了...</h1>"); //innerText }) });</script></head><body> <button type="button">点击更换</button> <div><img src="images/cat.jpg"></img></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><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"><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><script type="text/javascript"> $(function() { //获取焦点 $("input").focus(function(){ if($(this).val()=="请输入用户名"){ $(this).val("已经输入"); } }) //失去焦点 $("input").blur(function(){ if($(this).val()=="已经输入"){ $(this).val("请输入用户名"); } }) });</script></head><body> 用户名：<input type="text" 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><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"><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><script type="text/javascript"> $(function() { //创建子节点 var $newNode=$("<li>节点6</li>"); //把节点后置到ul中 //$("ul").append($newNode); $newNode.appendTo($("ul")); //把节点前置到ul中 //$("ul").prepend($newNode); $newNode.prependTo($("ul")); //创建同辈元素节点 var $newUl=$("<ul style=‘list-style:none‘><li>同辈的元素</li></ul>"); //后置同辈节点 //$("ul").after($newUl); $newUl.insertAfter($("ul")); //前置同辈节点 // $("ul").before($newUl); $newUl.insertBefore($("ul")); //替换指定的节点 节点4 替换了 节点2 $("li:eq(1)").replaceWith($("li:eq(3)")); //替换所有的 节点2 替换了 节点4 $("li:eq(1)").replaceAll($("li:eq(3)")); $("li:eq(3)").click(function(){ //复制 节点的同时 也绑定了 对应的事件 alert("haha"); }) $("li:eq(3)").clone(true).appendTo("ul"); });</script></head><body> <ul style="list-style:none"> <li>节点1</li> <li>节点2</li> <li>节点3</li> <li>节点4</li> <li>节点5</li> </ul> </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><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"><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><script type="text/javascript"> $(function() { var $first=$("#first"); //获取点击事件 $first.click(function(){ alert("first"); }) //清空节点 empty $first.empty(); //删除节点 $first.remove(); $first.detach(); // 删除节点但是 保留了 事件 $first.prependTo("body"); });</script></head><body> <div id="main"> main <div id="first">first</div> </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><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"><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><script type="text/javascript"> $(function() { $("img").click(function(){ alert($(this).attr("src")); //获取指定的属性值 // $(this).attr("title","这是一个可爱的小猫咪！"); 增加单个属性 $(this).attr({"title":"斗地主","alt":"大家一起斗地主！","src":"images/1.gif"}); //json格式设置多个属性 alert($(this).attr("src")); //removeAttr $(this).removeAttr("src"); }) });</script></head><body> <img src="images/cat.jpg"/></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><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"><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><script type="text/javascript"> $(function() { //获取body的子元素个数 alert("body的子元素个数:"+$("body").children().length); //获取下个同辈元素 $("#first1").next().css("color","red"); //获取上个同辈元素 $("#first3").prev().css("color","red"); //获取上下所有的同辈元素 $("#first2").siblings().css("color","red"); //获取父辈元素 $("#second1").parent().parent().css("color","red"); //获取祖先元素 parents()查询的boby $("#third1").parents().css("color","red"); });</script></head><body> body <div id="main"> main <div id="first1"> first1 <div id="second1"> second1 <div id="third1"> third1 </div> </div> </div> <div id="first2"> first2 <div id="second2"> second2 </div> </div> <div id="first3"> first3 <div id="second3"> second3 </div> </div> </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><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"><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><script type="text/javascript"> $(function() { //遍历数组 /* var arr=["小黑1","小黑2","小黑3"]; $.each(arr,function(i,item){ alert("下标："+i+";元素值是："+item); }) //遍历对象 var student={"name":"小黑","age":50,"score":100}; $.each(student,function(key,value){ alert("属性名："+key+";属性值是："+value); }) */ //遍历界面中li $("li").each(function(i){ //alert($(this).html()); 输出元素内容 $(this).html("节点"+i); //更改li中的值 }) });</script></head><body><ul> <li>元素1</li> <li>元素2</li> <li>元素3</li></ul> </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><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"><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><script type="text/javascript"> $(function() { //鼠标的移入移出 hover $("input").hover(function(){ alert("mouseover"); },function(){ alert("mouseout"); }) });</script></head><body> <input type="button" value="hover"></body></html>
<script type="text/javascript"> /** * 绑定单个事件 */ /*$("div").bind("mouseover",function(){ $(".topDown").show(); })*/ /** * 绑定多个事件 * 选择器.bind({ * 事件名称1:事件1（）｛ * ｝， * 事件名称2:事件2（）｛ * ｝... * }) * */ $("div").bind({ mouseover:function(){ $(".topDown").show(); }, mouseout:function(){ $(".topDown").hide(); }, click:function(){ alert(11111); } }); </script>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";%><!DOCTYPE HTML><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"><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><script type="text/javascript"> $(function() { /* $("input").mouseover(function(){ alert("mouseover"); }) */ //同时绑定多个事件 $("input").bind( { mouseover:function(){ alert("mouseover"); }, mouseout:function(){ alert("mouseout"); }, click:function(){ alert("click"); } }) });</script></head><body> <input type="button" value="bind"></body></html>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script type="text/javascript"> $(function() { //给button按钮绑定事件 $("button").bind( { mouseover:mb, mouseout:ob, click:cb } ); //获取解除绑定的按钮 $("[type=‘button‘]").click(function(){ // $("button").unbind("mouseover");解除一个 // $("button").unbind("mouseover").unbind("click");解除两个 $("button").unbind("mouseover click");//解除两个 多个使用空格隔开 }) }); function mb(){ $("button").css("color","red"); } function ob(){ $("button").css("color","blue"); } function cb(){ alert("大家辛苦了！"); } </script></head><body><form action="#" method="get"> 用户名：<input type="text" name="userName" placeholder="请输入用户名"> 密码：<input type="password" name="pwd" placeholder="请输入密码"> <button type="submit">登录</button> <button type="button">解除绑定</button></form></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><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"><script type="text/javascript" src="js/jquery-1.8.3.min.js"></script><script type="text/javascript"> $(function() { //事件循环执行 1.9之后 废除的属性 $("input").toggle(function(){ $("body").css("background","green");}, function(){ $("body").css("background","red");}, function(){ $("body").css("background","pink"); }) });</script></head><body> <input type="button" value="toggle"></body></html>
<!DOCTYPE HTML><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"> <style type="text/css"> .haha{ color: red; font-size: 10px; width: 50px; height: 50px; border: 1px solid red; } </style> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> $(function() { $("button").click(function(){ $("div").toggleClass("haha"); }) }) </script></head><body> <button type="button">hover</button><div>能改变我的样式吗？</div></body></html>
<!DOCTYPE HTML><html><head><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"><script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script><style type="text/css" >*{ font-size:12px;}</style><script type="text/javascript">$(document).ready(function(){ //删除当前行商品元素 这种 只能删除 之前页面存在的元素/* $(".del").click(function(){ $(this).parent().parent().remove(); }) */ $(document).on("click",".del",function(){ $(this).parent().parent().remove(); }) //1.9之后的版本 废除了 此方法 /* $(".del").live("click",function(){ $(this).parent().parent().remove(); }) */ //新增一行 $(".add").click(function(){ //创建节点 var $newRow= $("<tr>" +" <td> " +" <input name=‘‘ type=‘checkbox‘ value=http://www.mamicode.com/‘‘/> " +" </td> " +" <td> " +" <img src=http://www.mamicode.com/‘images/sang.gif‘ class=‘products‘/>天堂雨伞￥32.9元 " +" </td> " +" <td> " +" <img src=http://www.mamicode.com/‘images/subtraction.gif‘ width=‘20‘ height=‘20‘/> " +" <input type=‘text‘ class=‘quantity‘ value=http://www.mamicode.com/‘1‘/> " +" <img src=http://www.mamicode.com/‘images/add.gif‘ width=‘20‘ height=‘20‘/> " +" </td> " +" <td> " +" <a href=http://www.mamicode.com/‘#‘ class=‘del‘>删除 " +" </td> " +"</tr> "); //在table中新增节点 $("table").append($newRow); }) })</script></head><body> <table border="1" cellpadding="0" cellspacing="0"> <tr> <th><input type=‘checkbox‘ />全选</th> <th>商品信息</th> <th>宜美惠价</th> <th>数量</th> <th>操作</th> </tr> <tr> <td> <input name="" type="checkbox" value=""/> </td> <td> <img src="images/sang.gif" class="products"/><a href="#">天堂雨伞</a></td><td>￥32.9元 </td> <td> <img src="images/subtraction.gif" width="20" height="20"/> <input type="text" class="quantity" value="1"/> <img src="images/add.gif" width="20" height="20"/> </td> <td> <a href="#" class="del">删除</a> </td> </tr> <tr> <td> <input name="" type="checkbox" value=""/> </td> <td> <img src="images/iphone.gif" class="products"/><a href="#">苹果手机iphone5</a></td><td>￥3339元 </td> <td> <img src="images/subtraction.gif" width="20" height="20"/> <input type="text" class="quantity" value="1"/> <img src="images/add.gif" width="20" height="20"/> </td> <td> <a href="#" class="del">删除</a> </td> </tr> </table> <a href="#" class="add">添加</a></body></html>25.增加商品 26.用户登陆<!DOCTYPE html ><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>表单事件</title><style type="text/css">#login{ width: 400px; height: 250px; background-color: #f2f2f2; border:1px solid #DDDDDD; padding: 5px;}#login fieldset { border: none; margin-top: 10px;}#login fieldset legend{ font-weight: bold;}#login fieldset p{ display: block; height: 30px;}#login fieldset p label { display: block; float:left; text-align: right; font-size: 12px; width: 90px; height: 30px; line-height: 30px;}#login fieldset p input { display: block; float:left; border: 1px solid #999; width: 250px; height: 30px; line-height: 30px;}#login fieldset p input.code{ width: 60px;}#login fieldset p img{ margin-left: 10px;}#login fieldset p a{ color: #057BD2; font-size: 12px; text-decoration: none; margin: 10px;}#login fieldset p input.btn{ background: url("./images/login.gif") no-repeat; width: 98px; height: 32px; margin-left: 60px; color: #ffffff; cursor: pointer;}#login fieldset p input.input_focus{ background-color: #BEE7FC;}</style><script type="text/javascript" src="js/jquery-1.8.3.min.js"></script><script type="text/javascript">$(document).ready(function () { //鼠标事件 click事件提交表单 $(".btn").click(function(){ alert("表单提交"); $("#login").submit(); }); //鼠标移至按钮，按钮字体变粗。移出按钮则字体为正常字体 $(".btn").hover(function(){ $(this).css("font-weight","bold"); },function(){ $(this).css("font-weight","normal"); }); //用户名输入框的焦点事件 $("[name=‘member‘]").focus(function(){ $(this).addClass("input_focus"); }); $("[name=‘member‘]").blur(function(){ $(this).removeClass("input_focus"); }); //键盘事件，敲击回车键进行表单提交,keyCode的数值代表不同的键盘按键 $(document).keypress(function(key){ if(key.keyCode==13){ $("#login").submit(); } }); });</script></head><body><form id="login"> <fieldset> <legend>用户登录</legend> <p> <label>用户名：</label> <input name="member" type="text" /> </p> <p> <label>密码：</label> <input name="password" type="text" /> </p> <p> <label>验证码：</label> <input name="code" type="text" class="code" /> <img src="images/code.gif" width="80" height="30" /><a href="#">换一张</a> </p> <p> <input name="" type="button" class="btn" value="登录" /> <a href="#">注册</a><span>|</span><a href="#">忘记密码？</a> </p> </fieldset></form></body></html>27.显示隐藏，淡入淡出<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";%><!DOCTYPE HTML><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"><script type="text/javascript" src="js/jquery-1.8.3.min.js"></script><script type="text/javascript"> $(function() { //显示速度 有 slow normal fast 还可以是具体的时间 单位是 毫秒 $("#showImg").click(function(){ //$("img").show("slow"); $("img").fadeIn(3000); }) $("#hideImg").click(function(){ // $("img").hide("fast"); $("img").fadeOut(3000); }) });</script></head><body> <input type="button" id="showImg" value="显示"> <input type="button" id="hideImg" value="隐藏"> <img src="images/cat.jpg" style="opacity:1"/></body></html>28.slideUp，slideDown<%@ 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"><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><style type="text/css" >ul{ list-style:none; padding:5px; width:210px; border:1px solid red;}a{ text-decoration:none; line-height: 30px;}.menu_style li{ border-bottom:1px solid #666;}</style><script type="text/javascript" src="js/jquery-1.8.3.min.js"></script><script type="text/javascript"> $(function() { //让li下标大于5的显示和隐藏 toggle 也可以让元素 显示或者隐藏/* $("input").click(function(){ $("li:gt(5):not(:last)").toggle(); }) */ //动态改变高度 $("input").toggle(function(){ $("li:gt(5):not(:last)").slideUp("slow"); },function(){ $("li:gt(5):not(:last)").slideDown("slow"); }); });</script></head><body><div id="menu" class="menu_style"> <ul> <li><a href="#">手机通讯、数码电器</a></li> <li><a href="#">食品饮料、酒水、果蔬</a></li> <li><a href="#">进口食品、进口牛奶</a></li> <li><a href="#">美容化妆、个人护理</a></li> <li><a href="#">母婴用品、个人护理</a></li> <li><a href="#">厨卫清洁、纸、清洁剂</a></li> <li id="menu_07" class="element_hide"><a href="#">家居家纺、锅具餐具</a></li> <li id="menu_08" class="element_hide"><a href="#">生活电器、汽车生活</a></li> <li id="menu_09" class="element_hide"><a href="#">电脑、外设、办公用品</a></li> <li class="btn"> <input name="more_btn" type="button" value="展开或关闭菜单项" /> </li> </ul></div></body></html>29.动画效果<%@ 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"><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><script type="text/javascript"> $(function() { $("input").click(function(){ //图片的动画 $("img").animate({ "height":200, "width":200, "marginLeft":200}, "slow","swing",function(){ $("#box").html("小猫咪变小了...."); }) }) })</script><body> <input type="button" value="开始动画"/> <div id="box" style="border:1px solid red">大家辛苦了！</div> <img src="images/cat.jpg"></body></html>
jQuery
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。