小M开发_JQuery_day0714
来源：互联网 发布：淘宝店铺上传不了图片 编辑：程序博客网 时间：2024/04/30 17:12
JQuery
- jQuery
- jQuery 是一个 JavaScript 库。
- jQuery 极大地简化了 JavaScript 编程。
- jQuery 很容易学习。
jQuery就是一个JavaScript 库，里面封装了很多js的方法。
jQuery 选择器
- jQuery 使用 CSS 选择器来选取 HTML 元素。
- $(“p”) 选取 p标签 元素。
- $(“p.intro”) 选取所有 class=”intro” 的p标签 元素。
- $(“p#demo”) 选取所有 id=”demo” 的 p标签 元素。
最常用的：id，calss，标签 这三个是最常用的。
AJAX
AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示
优点：
- 减轻服务器的负担,按需取数据,最大程度的减少冗余请求。
- 局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验。
- 基于xml标准化,并被广泛支持,不需安装插件等进一步促进页面和数据的分离。
- 节省用户带宽。 -
所有实例如下：
<%@ 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 'myjquery.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"> --> <style type="text/css"> div{ width: 500px; background:#F0F0F0; height:30px; border:1px red solid; font-size: 25px; } </style> <script type="text/javascript" src="./plugin/jQuery/jquery-1.7.1.min.js"></script> <script type="text/javascript"> /*AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。*/ $(document).ready(function(){ $("#ALAX").click(function(){ $("#TESTAL").load("./index.jsp"); }); }); /*$.get() 方法通过 HTTP GET 请求从服务器上请求数据。*/ $(document).ready(function(){ $("#BUGET").click(function(){ $.get("./index.jsp",function(data,status){ $("#GET").text("数据："+data+" 状态: "+status); }); }); }); /*noConflict() 方法会释放会 $ 标识符的控制，这样其他脚本就可以使用它了。**/ /* $(document).ready(function(){ var jq = $.noConflict();//会影响其他的$函数 jq("#BUNOCONF").click(function(){ jq("#NOCONF").text("noConflict() 方法会释放会 $ 标识符的控制，这样其他脚本就可以使用它了。"); }); });*/ /*$(this).hide()演示 jQuery 的 hide() 函数，隐藏当前的 HTML 元素。*/ $(document).ready(function(){ $(".HIDE").click(function(){ $(this).hide("slow",function(){ $(".DIVHIDE").slideToggle("slow"); }); }); }); /*fadeOut()*/ $(document).ready(function(){ $("#FADEOUT1").click(function(){ $(this).fadeOut(); }); $("#FADEOUT2").click(function(){ $(this).fadeOut("slow"); }); $("#FADEOUT3").click(function(){ $(this).fadeOut(3000); }); }); /**/ $(document).ready(function(){ $("#BIGDIV #BHIDE").click(function(){ $(this).parents("#BIGDIV").hide(3000); }); }); /*向上隐藏和向下隐藏*/ $(document).ready(function(){ $("#TOGGLE").click(function(){ $("#TOGGLEHIDE").slideToggle("slow"); }); }); /*animate动画 */ $(document).ready(function(){ $(".ANIMATE").click(function(){ $(".DIVANIMATE").animate({height:'300px',opacity:'0.4'},'slow'); $(".DIVANIMATE").animate({width:'100px',opacity:'0.1'},3000); $(".DIVANIMATE").animate({height:'300px',opacity:'0.9'},'slow'); $(".DIVANIMATE").animate({width:'300px',opacity:'0.9'},3000); $(".DIVANIMATE").animate({height:'30px',opacity:'0.9'},'slow'); }); }); $(document).ready(function(){ $("#TESTALAX").click(function(){ var username=$("#INOUTALAX").val(); var password=$("#INOUTALAXPWD").val(); $.post("AlaxLogin?username="+username+"&password="+password,function(data){ if(data=="0"){ alert("失败"); }else if(data=="1"){ alert("成功"); } }); }); }); $(document).ready(function(){ $("#EACH").bind("click",function(){ $("li").each(function(){ alert($(this).text()); }); }); }); /* $(document).ready(function(){ $("#TESTALAX").bind("click",function(){ $("form input").each(function(){ alert($(this).val()); }); }); });*/ $(document).ready(function(){ $("#TESTALAX").bind("click",function(){ $("form input").each(function(i,n){ alert("第"+i+"input:"+$(n).val()); }); }); }); $(document).ready(function(){ $("#TESTDIV,span.TESTSPAN,P").css({"fontSize":"20px","color":"red"}); }); $(document).ready(function(){ $("div ul li span").css({"fontSize":"10px","color":"green"}); }); $(document).ready(function(){ $("#UL>li").css({"fontSize":"10px","color":"pink"}); }); $(document).ready(function(){ $("label+input").css({"fontSize":"10px","color":"yellow"}); }); /*以逗号隔开的选择器找出来的是这些选择器找出来的数组;以空格隔开的选择器找出来的是最后代元素;以>隔开的选择器是指 找到前面选择器的儿子;+连接的选择器是在第一个选择器下面找第二个选择器找紧接着元素（结果可能是多个）; ~连接的选择器是找第一个选择器下面的之后的兄弟选择器 */ $(document).ready(function(){ $("#REMOVEBU").click(function(){ $("table tr #td1").remove(); }); $("#EMBU").click(function(){ $("table tr #td2").empty(); }); }); </script> </head> <body> <p id="TESTAL">ALAX</p> <button id="ALAX">ALAX</button> <hr/> <p id="GET">向页面发送 HTTP GET 请求，然后获得返回的结果($GET)</p> <button id="BUGET">向页面发送 HTTP GET 请求，然后获得返回的结果($GET)</button> <hr/> <p id="NOCONF">noConflict()</p> <button id="BUNOCONF">noConflict()</button> <hr/> <div class="HIDE">hide()点击隐藏当前的 HTML元素</div> <br/> <div class="DIVHIDE">slideToggle</div> <hr/> <div id="FADEOUT1"></div><br/> <div id="FADEOUT2">slow</div><br/> <div id="FADEOUT3">3000</div> <hr/> <h3>慢慢隐藏</h3> <div id="BIGDIV">我会慢慢隐藏<button id="BHIDE">hide</button></div> <hr/> <div id="TOGGLEHIDE"> <p>jQuery this is myselfstudy</p> </div> <p id="TOGGLE">点我</p> <hr/> <div class="DIVANIMATE" style="background:green"></div> <button class ="ANIMATE">animate动画</button> <hr/> <form action=""> 姓名： <input type="text" name="username" id="INOUTALAX"/> 密码： <input type="text" name="password" id="INOUTALAXPWD"/> <button id ="TESTALAX">alax异步验证用户名</button> </form> <hr/> <ol> <li>Number one</li> <li>Number two</li> <li>Number three</li> </ol> <button id ="EACH">each</button> <hr/> <div id="TESTDIV">WO SHI DIV</div> <span class="TESTSPAN">WO SHI SPAN</span> <p>WO SHI P</p> <hr/> <div> <ul> <li> <span>WO SHI SPAN</span> </li> </ul> </div> <ul id="UL"> <li> WO SHI SPAN </li> </ul> <hr/> <form> <label>Name:</label> <input name="name" value="qinbo"/> <fieldset> <label>Newsletter:</label> <input name="newsletter" value="qinbo"/> </fieldset> </form> <input name="none" value="qinbo" /> <hr/> <div id="DIV1"> <ol> <li>WO SHI NI</li> <li id="IL">WO SHI NI</li> <li>WO SHI NI</li> </ol> </div> <hr/> <table border="1" width="100px" height="30px"> <tr> <td id="td1">1</td> </tr> <tr> <td id="td2">2</td> </tr> </table> <button id="REMOVEBU">remove</button> <button id="EMBU">empty</button> </body></html>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 'day0717.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"> --> <script type="text/javascript" src="./plugin/jQuery/jquery-1.7.1.min.js"></script> </head> <script type="text/javascript"> /*jquery能够获取就可以设置 */ /*selected , checked , readyonly , disabled,noresize(key=keyvalue)*/ /*ready()不能和onload连用*/ // var jq=$.noConflict();/*取别名(不管在哪儿都作用全局)*/ $(document).ready(function(){ $("#BUTTON1").click(function(){ alert($("a").attr("href")); }); /*当点击BUTTON2时对A标签的href属性设置url*/ $("#BUTTON2").click(function(){ $("a").attr("href","http://localhost/WebLoginTest/myjquery.jsp"); }); }); $(document).ready(function(){ /*当点击BUTTON3时对SPAN1标签设置style属性*/ $("#BUTTON3").click(function(){ $("#SPAN1").css("color","gray"); }); $("#BUTTON4").click(function(){ /*当涉及到多个参数的修改时就需要用到对象的方式设置多哥属性*/ $("#SPAN1").css({"color":"green","fontSize":"20px"}); }); /*移除某个标签的属性*/ $("#BUTTON5").click(function(){ $("img").removeAttr("src"); }); $("#BUTTON6").click(function(){ $("img").attr("src","image/wrong.jpg"); }); /*获取容器的宽高*/ $("#BUTTON7").click(function(){ alert($("#DIV1").height()); alert($("#DIV1").width()); }); /*在一个标签对象上绑定多个事件*/ $("#BUTTON8").bind({ mouseover:function(){$("#P1").css("color","pink");},/*鼠标移动到标签上事件*/ click:function(){$("#P1").hide();},/*点击事件*/ mouseout:function(){$("#P1").css("fontSize","20px")},/*鼠标移出到标签外*/ dblclick:function(){$("#P1").show()}/*双击事件*/ }); $("input").focus(function(){/*当标签获取焦点事件*/ $("input").val("我是focus"); }); $("input").keydown(function(e){ /*键盘事件*/ if(e.keyCode==13){ alert($(this).val()); } }); /*向网页写入内容*/ $("#BUTTON9").click(function(){ $("#UL1").append("<li>22222222</li>"); }); $("#BUTTON10").click(function(){ $("<li>hello word!</li>").appendTo("#UL1"); }); /*向网页写入内容（写在前面）*/ $("#BUTTON11").click(function(){ $("#SPAN2").after("<div>after</div>"); }); /*向网页写入内容（写在后面）*/ $("#BUTTON12").click(function(){ $("#SPAN2").before("<div>before</div>"); }); /*找到first/lastli标签的text内容*/ $("#BUTTON13").click(function(){ alert($("li:last").text()); }); /*找到input标签且属性不为checked="checked"的标签*/ $("#BUTTON15").click(function(){ alert($(".input:not(:checked)").val()); }); /*找到索引为4的span标签*/ $("#BUTTON16").click(function(){ alert($("span").eq(4).text()); }); /*找到索引大于2的span标签*/ $("#BUTTON17").click(function(){ $("span:gt(2)").each(function(){ alert($(this).text()); }); }); }); /*全局的键盘监听*/ $(function(){ document.onkeydown=function(event){ var event=document.all?window.event:e; if(event.keyCode==13){ alert($(this).text()); } } }); /* $(document).ready();最常用 $().ready();很少用 $();常用 */ </script> <body> <span id ="SPAN" style="color:green;font-size:25px;">This is my JQuery Test</span> </br></br> <table width="500px" cellspacing="10" border="0" > <tr> <td><a href="http://www.baidu.com">GoTOBaiDu</a></td> <td><button id="BUTTON1">jquery能够获取就可以设置 </button></td> <td><button id="BUTTON2">jquery能够获取就可以设置</button></td> <tr> <td><span id ="SPAN1" style="color:green;">JQuery</span></td> <td><button id="BUTTON3">css设置属性</button></td> <td><button id="BUTTON4">css设置属性</button></td> </tr> <td><img src="image/right.jpg"/></td> <td><button id="BUTTON5">removeAttr()删除属性</button></td> <td><button id="BUTTON6">attr()设置属性</button></td> </tr> <tr> <td><div id="DIV1" style="background:pink">DIV</div></td> <td><button id="BUTTON7">height(),width()获取宽高</button></td> </tr> <tr> <td><p id="P1">HIDE()</p></td> <td><button id="BUTTON8">click(),hide(),dblclick(),bind()-->多事件绑定</button></td> </tr> <tr> <td><input type="text" value="这个是测试focus()"/></td> </tr> <tr> <td><ul id="UL1"><li>1111111</li><li>222222</li></ul></td> <td><button id="BUTTON9">append()</button></td> <td><button id="BUTTON10">appendTo()</button></td> </tr> <tr> <td><span id="SPAN2">SPAN</span></td> <td><button id="BUTTON11">after()</button></td> <td><button id="BUTTON12">before()</button></td> </tr> <tr> <td><div style="background:pink;" id="SPAN3">DIV</div></td> <td><button id="BUTTON13">parent:first/last</button></td> </tr> <tr> <td><input type="text" value="这个是测试no checked" class="input"/></td> <td><input type="text" value="这个是测试checked" checked="checked" class="input"/></td> <td><button id="BUTTON15">checked</button></td> </tr> <tr> <td><span>1</span><span>2</span><span>3</span></td> <td><button id="BUTTON16">eq()</button></td> <td><button id="BUTTON17">gt()</button></td> </tr> </table> </body></html>阅读全文
2 0
- 小M开发_JQuery_day0714
- 小M开发_java_dya20170627
- 小M开发_jsp_Servlet_day170704
- 小M开发_JSP_day170705
- 小M开发_JSP_day170706
- 小M开发_JS_day170710
- 小M开发_JS_day0711
- 小M开发_JS_day170712
- 小M开发_JS_day0713
- 小M开发_java零基础
- 小M开发_MySql绿色安装
- 小M开发_MySql零基础_day170628
- 小M开发_MySQL零基础_day170629
- 小M开发_MySQL续_JS_day170630
- 小M开发_java零基础_dya170703
- 小M开发_框架MyBatis_day0724
- 小M开发_框架Struts2_day20170731
- 小M开发_java零基础（字母金字塔案例）
- Java接口与Java抽象类的区别
- 暑假写题第七天
- Quartz之CronTrigger
- 卫星照片
- Eclipse 设置项目集
- 小M开发_JQuery_day0714
- 类的三种特殊设计【每日一题】
- 网络安全（Web-safe）字体
- 我们的看板实践
- Uva455-Periodic Strings-周期串
- JSONP解决跨域请求问题
- TensorFlow学习笔记（4）——深层神经网络
- hdu 3038 How Many Answers Are Wrong (带权并查集)
- 二维数组中的查找
