JQuery是一个JavaScript框架，提供了便利的HTML元素操作、多种选择器和筛选器、CSS处理、事件处理、AJAX支持等功能。此外，还涉及数组、字符串、JSON对象的处理，以及JQuery对象与DOM对象之间的转换，简化了前端开发工作。
一、认识JQuery
——JQuery是一个javascript的框架，是对javascript的一种封装。
通过JQuery可以非常方便的操作html的元素
| 使用JQuery进行隐藏和显示 | <script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ $("#d").hide(); }); $("#b2").click(function(){ $("#d").show(); }); }); </script> <button id="b1">隐藏div</button> <button id="b2">显示div</button> <br> <div id="d"> 这是一个div </div> |
| jquery.min.js | 要使用Jquery需要导入一个第三方的javascript库 jquery.min.js，可以下载 <script src="https://how2j.cn/study/jquery.min.js"></script> |
| 本地测试的时候如何使用 jquery.min.js | 因为学习到目前为止，还没有讲解如何搭建web服务器，所以不能够像本网站上演示的 把jquery.min.js 放在 /study/jquery.min.js 这个地方。 那么本地要测试怎么做呢？ 1. 首先在右侧下载 jquery.min.js 2. 把 jquery.min.js和测试的html放在同一个目录下 3. 在测试的html中直接写 src="jquery.min.js" |
| 理解 $(function(){}) $(function(){ }); 表示文档加载。看上去略复杂，其实是由下面两种构成：$(); 和function(){ } 合并在一起就是：$(function(){ }); | 如左侧这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。 $(document).ready(function(){ });
$(document).ready(); //此处个人理解为加载准备 |
| 通过id获取元素 与javascript通过id获取元素节点的方式(document.getElementById )不同， 注意不同的是前者获取到的是元素节点， 而后者获取的是一个JQuery对象 | <script src="https://how2j.cn/study/jquery.min.js"></script> <script > $(function(){ document.write( $("#d") ); document.close(); }); </script> <div id="d"> Hello JQuery </div> |
| 增加监听器 JQuery增加click事件的监听 $("#b1").click(function(){ alert("点击了按钮"); }); 这个也是由两部分组成： 1. b1按钮的点击事件 $("#b1").click(); 2. 弹出对话框的函数 function(){ alert("点击了按钮"); } | 与原生javascript需要在html元素上增加监听事件不同的是 <script src="https://how2j.cn/study/jquery.min.js"></script> |
| 隐藏与显示 通过$("#d")拿到div对象后，直接调用hide()和show()方法，即可实现隐藏和显示。说到现在就已经明白了吧哈哈哈。 个人理解先调用Button方法，然后接着在Button上调用div方法 | <script src="https://how2j.cn/study/jquery.min.js"></script>
|
二、常见方法
| 关键字 | 简介 | 示例代码 |
|---|---|---|
| val | 取值 通过JQuery对象的val()方法获取值
| <script src="https://how2j.cn/study/jquery.min.js"></script> </script> |
| html | 获取元素内容,如果有子元素，保留标签 | <script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ alert($("#d1").html()); }); }); </script> <button id="b1">获取文本内容</button> <br> <br> <div id="d1"> 这是div的内容 <span>这是div里的span </span> </div> |
| text | 获取元素内容,如果有子元素，不包含子元素标签
| <script src="https://how2j.cn/study/jquery.min.js"></script> </script> |
三、CSS
| 关键字 | 简介 | 示例代码 |
|---|---|---|
| addClass | 增加class 通过addClass() 增加一个样式中的class
| <script src="https://how2j.cn/study/jquery.min.js"></script> </script> |
| removeClass | 删除class 通过removeClass() 删除一个样式中的class
| <script src="https://how2j.cn/study/jquery.min.js"></script>
|
| toggleClass | 切换class 通过toggleClass() 切换一个样式中的class
| <script src="https://how2j.cn/study/jquery.min.js"></script> </script>
|
| css 函数 | 通过css函数 直接设置样式 css(property,value) 第一个参数是样式属性，第二个参数是样式值 css({p1:v1,p2:v2})
| <script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ $("#d1").css("background-color","pink"); }); $("#b2").click(function(){ $("#d2").css({"background-color":"pink","color":"green"}); }); }); </script> <button id="b1">设置单一样式</button> <button id="b2">设置多种样式</button> <br> <div id="d1" > 单一样式，只设置背景色 </div> <div id="d2" > 多种样式，不仅设置背景色，还设置字体颜色 </div> |
四、选择器——
Jquery有多达数十种选择器，本章节把工作中会用到的常用选择器列出来，并逐一解释。
| 关键字 | 示例代码 | |
|---|---|---|
| $("tagName")——元素 根据 标签名 选择所有该标签的元素 | <script src="https://how2j.cn/study/jquery.min.js"></script>
| |
| $("id")——id $("#id") 一个。
| <script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ $("#d1").addClass("pink"); }); }); </script> <button id="b1">给id=d1的div增加背景色</button> <br> <style> .pink{ background-color:pink; } </style> <div > Hello JQuery</div> <div > Hello JQuery</div> <div > Hello JQuery </div> | |
| $("className")——类 $(".className")
| <script src="https://how2j.cn/study/jquery.min.js"></script> </script> | |
| $("selector1 selector2")——层级 $("selector1 selector2")
| <script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ $("div#d3 span").addClass("pink"); }); }); </script> <button id="b1">给id='d3'的div 下的 span 增加背景色</button> <br> <style> .pink{ background-color:pink; } </style> <div class="d"> <span> Hello JQuery </span></div> <div class="d" > <span> Hello JQuery </span></div> <div id="d3" > <span>Hello JQuery </span></div> | |
| :first——最先 $(selector:first) 满足选择器条件的第一个元素
| <script src="https://how2j.cn/study/jquery.min.js"></script> $("#b2").click(function(){ }); </script> <button id="b2">最后一个增加背景色</button> <style> .pink{ background-color:pink} </style> <div> <span> Hello JQuery <span> </div> <div> <span> Hello JQuery <span> </div> <div> <span> Hello JQuery <span> </div> | |
| :odd——奇 $(selector:odd) 满足选择器条件的奇数元素
| <script src="https://how2j.cn/study/jquery.min.js"></script> </script> | |
| :hidden——不可见的 $(selector:hidden) 满足选择器条件的不可见的元素
| <script src="https://how2j.cn/study/jquery.min.js"></script>
| |
属性$(selector[attribute]) 满足选择器条件的有某属性的元素 注： 一般不要使用[class=className] 而应该使用.className
| <script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ $("div[id]").toggleClass("border"); }); $("#b2").click(function(){ $("div[id='pink']").toggleClass("border"); }); $("#b3").click(function(){ $("div[id!='pink']").toggleClass("border"); }); $("#b4").click(function(){ $("div[id^='p']").toggleClass("border"); }); $("#b5").click(function(){ $("div[id$='k']").toggleClass("border"); }); $("#b6").click(function(){ $("div[id*='ee']").toggleClass("border"); }); }); </script> <button id="b1">给有id属性的div切换边框</button> <button id="b2">给id=pink的div切换边框</button> <button id="b3">给有id!=pink属性的div切换边框</button> <button id="b4">给有id以p开头的div切换边框</button> <button id="b5">给有id以k结尾的div切换边框</button> <button id="b6">给有id包含ee的div切换边框</button> <br> <br> <style> .border{ border: 1px blue solid; } button{ margin-top:10px; display:block; } div{ margin:10px; } </style> <div id="pink"> id=pink的div </div> <div id="green"> id=green的div </div> <div > 没有id的div </div> | |
表单对象表单对象选择器 指的是选中form下会出现的输入元素 注意: 第7行 $("td[rowspan!=13] "+value).toggle(500);
| <script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $(".b").click(function(){ var value = $(this).val(); $("td[rowspan!=13] "+value).toggle(500); }); }); </script> <style> table{ border-collapse:collapse; table-layout:fixed; width:80%; } table td{ border-bottom: 1px solid #ddd; padding-bottom: 5px; padding-top: 5px; } div button{ display:block; } </style> <table> <tr> <td rowspan="13" valign="top" width="150px"> <div > <button value=":input" class="b">切换所有的:input</button> <button value=":button" class="b">切换:button</button> <button value=":radio" class="b">切换:radio</button> <button value=":checkbox" class="b">切换:checkbox</button> <button value=":text" class="b">切换:text</button> <button value=":password" class="b">切换:password</button> <button value=":file" class="b">切换:file</button> <button value=":submit" class="b">切换:submit</button> <button value=":image" class="b">切换:image</button> <button value=":reset" class="b">切换:reset</button> </div> </td> <td width="120px">说明</td> <td width="120px">表单对象</td> <td width="">示例</td> </tr> <tr> <td >input按钮</td> <td >:button</td> <td><input type="button" value="input按钮"/></td> </tr> <tr> <td>button按钮</td> <td >:button</td> <td><button>Button按钮</button></td> </tr> <tr> <td>单选框</td> <td >:radio</td> <td><input type="radio" ></td> </tr> <tr> <td>复选框</td> <td >:checkbox</td> <td><input type="checkbox" ></td> </tr> <tr> <td>文本框</td> <td >:text</td> <td><input type="text" /></td> </tr> <tr> <td>文本域</td> <td ></td> <td><textarea></textarea></td> </tr> <tr> <td>密码框</td> <td >:password</td> <td><input type="password" /></td> </tr> <tr> <td>下拉框</td> <td ></td> <td><select><option>Option</option></select></td> </tr> <tr> <td>文件上传</td> <td >:file</td> <td> <input type="file" /></td> </tr> <tr> <td>提交按钮</td> <td >:submit</td> <td><input type="submit" /></td> </tr> <tr> <td>图片型提交按钮</td> <td >:image</td> <td><input type="image" src="https://how2j.cn/example.gif" /></td> </tr> <tr> <td>重置按钮</td> <td >:reset</td> <td><input type="reset" /></td> </tr> </table> | |
| 表单对象属性 :enabled会选择可用的输入元素 注：输入元素的默认状态都是可用
| <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $(".b").click(function(){ var value = $(this).val(); $("td[rowspan!=13] "+value).toggle(500); }); $(".b2").click(function(){ var value = $(this).val(); var options = $("td[rowspan!=13] "+value); alert("选中了"+options.length+"条记录！"); }); }); </script> <style> table{ border-collapse:collapse; table-layout:fixed; width:80%; } table td{ border-bottom: 1px solid #ddd; padding-bottom: 5px; padding-top: 5px; } div button{ display:block; } .border{ border: 1px blue solid; } </style> <table> <tr> <td rowspan="13" valign="top" width="120"> <div > <button value=":enabled" class="b">切换:enabled</button> <button value=":disabled" class="b">切换:disabled</button> <button value=":checked" class="b">切换:checked</button> <button value=":selected" class="b2">:selected数量</button> </div> </td> <td width="120">说明</td> <td width="120">表单对象属性</td> <td width="100px">示例</td> </tr> <tr> <td >enabled的按钮</td> <td >:enabled</td> <td><input type="button" enabled="enabled" value="enabled的按钮"/></td> </tr> <tr> <td >disabled的按钮</td> <td >:disabled</td> <td><input type="button" disabled="disabled" value="disabled的按钮"/></td> </tr> <td >选中的复选框</td> <td >:checked</td> <td> <input type="radio" checked="checked" ><br> <input type="radio" ><br> <input type="checkbox" ><br> <input type="checkbox" checked="checked" > </td> <tr> <td>选中的下拉列表</td> <td >:selected</td> <td> <select size="3" multiple="multiple"> <option selected="selected">苍老师</option> <option >高树玛利亚</option> <option selected="selected">遥美</option> </select> </td> </table> <form> </form> | |
| this——当前元素 在监听函数中使用 $(this)，即表示触发该事件的组件。即隐藏该按钮
| <script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ $(this).hide(); }); }); </script> <button id="b1">点击隐藏</button> | |
五、筛选器—— 筛选器指的是在已经通过选择器选中了元素后，在此基础上进一步选择。
| 关键字 与 简介 | 示例代码 | |
|---|---|---|
| first()——第一个元素 last()——最后一个元素 eq(num)——第几个元素 首先通过 $("div") 选择了多个div元素，接下来做进一步的筛选
| <script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ $("div").first().toggleClass("pink"); }); $("#b2").click(function(){ $("div").last().toggleClass("pink"); }); $("#b3").click(function(){ $("div").eq(4).toggleClass("pink"); }); }); </script> <button id="b1">切换第1个div背景色</button> <button id="b2">切换最后1个div背景色</button> <button id="b3">切换第5个div背景色</button> <br> <br> <style> .pink{ background-color:pink; } </style> <div> <span>Hello JQuery 1</span> </div> <div > <span>Hello JQuery 2</span> </div> <div > <span>Hello JQuery 3</span> </div> <div > <span>Hello JQuery 4</span> </div> <div > <span>Hello JQuery 5</span> </div> <div > <span>Hello JQuery 6</span> </div> | |
| parent()——夫 选取最近的一个父元素
| <script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ $("#currentDiv").parent().toggleClass("b"); }); $("#b2").click(function(){ $("#currentDiv").parents().toggleClass("b"); }); }); </script> <style> div{ padding:20px; } div#grandParentDiv{ background-color:pink; } div#parentDiv{ background-color:green; } div#currentDiv{ background-color:red; } .b{ border: 2px solid black; } </style> <button id="b1">改变parent()的边框</button> <button id="b2">改变parents()的边框</button> <div id="grandParentDiv" > 祖先元素 <div id="parentDiv"> 父元素 <div id="currentDiv">当前元素</div> </div> </div> | |
| children()——儿子 筛选出儿子元素 (紧挨着的子元素) 注: find() 必须使用参数 selector
| <script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ $("#currentDiv").children().toggleClass("b"); }); $("#b2").click(function(){ $("#currentDiv").find("div").toggleClass("b"); }); }); </script> <style> div{ padding:20px; } div.grandChildrenDiv{ background-color:pink; } div.childrenDiv{ background-color:green; margin:10px; } div#currentDiv{ background-color:red; } .b{ border: 2px solid black; } </style> <button id="b1">改变children()的边框</button> <button id="b2">改变find()的边框</button> <div id="currentDiv" > 当前元素 <div class="childrenDiv"> 儿子元素1 <div class="grandChildrenDiv">后代元素n</div> </div> <div class="childrenDiv"> 儿子元素2 <div class="grandChildrenDiv">后代元素n</div> </div> </div> | |
| siblings()——同级 同级(同胞)元素
| <script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ $("#currentDiv").siblings().toggleClass("b"); }); }); </script> <style> div{ padding:20px; background-color:pink; margin:10px; } div#parentDiv{ background-color:green; } div#currentDiv{ background-color:red; } .b{ border: 2px solid black; } </style> <button id="b1">给同级加上边框</button> <div id="parentDiv" > 父元素 <div id="currentDiv"> 当前元素 </div> <div > 同级元素 </div> <div > 同级元素 </div> </div> | |
六、属性
| 关键字 | 简介 | 示例代码 |
|---|---|---|
| attr——获取 | 通过attr()获取一个元素的属性
| <script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ alert("align属性是:" + $("#h").attr("align") ); }); $("#b2").click(function(){ alert("game属性是:" + $("#h").attr("game") ); }); }); </script> <button id="b1">获取align属性</button> <button id="b2">获取自定义属性 game</button> <br> <br> <h1 id="h" align="center" game="LOL">居中标题</h1> |
| attr(属性,值)—修改 | 通过attr(attr,value)修改属性
| <script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ $("#h").attr("align","right") ; }); }); </script> <button id="b1">修改align属性为right</button> <br> <br> <h1 id="h" align="center" >居中标题</h1> |
| removeAttr——删除 | 通过removeAttr(attr)删除属性
| <script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ $("#h").removeAttr("align"); }); }); </script> <button id="b1">删除align属性</button> <br> <br> <h1 id="h" align="center" game="LOL">居中标题</h1> |
| prop与attr的区别 | 与prop一样attr也可以用来获取与设置元素的属性。
| <script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ alert("game属性是:" + $("#c").attr("game") ); }); $("#b2").click(function(){ alert("game属性是:" + $("#c").prop("game") ); }); $("#b3").click(function(){ alert("checked属性是:" + $("#c").attr("checked") ); }); $("#b4").click(function(){ alert("checked属性是:" + $("#c").prop("checked") ); }); }); </script> <style> button{ display:block; } </style> <button id="b1">通过attr获取自定义属性 game</button> <button id="b2">通过prop获取自定义属性 game</button> <button id="b3">通过attr获取 checked属性</button> <button id="b4">通过prop获取 checked属性</button> <br> <input type="checkbox" id="c" game="LOL" checked="checked"> 选中的复选框 |
七、效果
| 关键字 | 简介 | 示例代码 |
|---|---|---|
| show 显示 hide 隐藏 toggle 切换 | 显示 隐藏 切换 分别通过show(), hide(),toggle()实现
| <script src="https://how2j.cn/study/jquery.min.js"></script> </script> |
| slideUp 向上滑动 slideDown 向下滑动 slideToggle 滑动切换 | 向上滑动 向下滑动 滑动切换 分别通过slideUp(), slideDown(),slideToggle()实现
| <script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ var div = $("#d"); $("#b1").click(function(){ div.slideUp(); }); $("#b2").click(function(){ div.slideDown(); }); $("#b3").click(function(){ div.slideToggle(); }); $("#b4").click(function(){ div.slideUp(2000); }); $("#b5").click(function(){ div.slideDown(2000); }); $("#b6").click(function(){ div.slideToggle(2000); }); }); </script> <style> button{ display:block; } div{ border:solid 1px gray; background-color:pink; width:300px; height:100px; } </style> <button id="b1">向上滑动</button> <button id="b2">向下滑动</button> <button id="b3">滑动切换</button> <button id="b4">延时向上滑动</button> <button id="b5">延时向下滑动</button> <button id="b6">延时滑动切换</button> <br> <br> <div id="d"> 用于演示效果的DIV </div> |
| fadeIn 淡入 fadeOut 淡出 fadeToggle淡入淡出切换 fadeTo 指定淡入程度 | 淡入 淡出 淡入淡出切换 指定淡入程度 分别通过fadeIn(), fadeOut(),fadeToggle() fadeTo()实现
| <script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ var div = $("#d"); $("#b1").click(function(){ div.fadeIn(); }); $("#b2").click(function(){ div.fadeOut(); }); $("#b3").click(function(){ div.fadeToggle(); }); $("#b4").click(function(){ div.fadeIn(2000); }); $("#b5").click(function(){ div.fadeOut(2000); }); $("#b6").click(function(){ div.fadeToggle(2000); }); $("#b7").click(function(){ $("#d1").fadeTo("slow",0.2); $("#d2").fadeTo("slow",0.5); $("#d3").fadeTo("slow",0.8); }); }); </script> <style> button{ display:block; } table div{ border:solid px gray; background-color:pink; width:80px; height:50px; } div{ border:solid 1px gray; background-color:pink; width:300px; height:100px; } </style> <button id="b2">淡出</button> <button id="b1">淡入</button> <button id="b3">淡入淡出切换</button> <button id="b5">延时淡出</button> <button id="b4">延时淡入</button> <button id="b6">延时淡入淡出切换</button> <button id="b7">fadeTo</button> <br> <br> <div id="d"> 用于演示效果的DIV </div> <table> <tr> <td> <div id="d1"> 用于演示fadeTo 20% </div> </td> <td> <div id="d2"> 用于演示fadeTo 50% </div> </td> <td> <div id="d3"> 用于演示fadeTo 80% </div> </td> </tr> </table> |
| animate 自定义动画效果 | 通过animate 可以实现更为丰富的动画效果
| <script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ var div = $("#d"); $("#b1").click(function(){ div.animate({left:'100px'},2000); div.animate({left:'0px',top:'50px',height:'50px'},2000); }); }); </script> <style> button{ display:block; } div{ background-color:pink; width:200px; height:80px; font-size:12px; position:relative; } </style> <button id="b1">自定义动画</button> <br> <br> <div id="d"> <p>1. 向右移动100px</p> <p>2. 向左下移动50px，同时高度变小</p> </div> |
| callback 回掉函数 | 效果一般需要一定的时间，并且这个时间可长可短，所以就无法精确的确定该效果何时结束。
| <script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ var div = $("#d"); $("#b1").click(function(){ div.animate({left:'100px'},2000); div.animate({left:'0px',top:'50px',height:'50px'},2000,function(){ alert("动画演示结束"); }); }); }); </script> <style> button{ display:block; } div{ background-color:pink; width:200px; height:80px; font-size:12px; position:relative; } </style> <button id="b1">自定义动画结束时，会有提示框</button> <br> <br> <div id="d"> <p>1. 向右移动100px</p> <p>2. 向左下移动50px，同时高度变小</p> </div> |
八、事件
| 关键字 | 简介 | 示例代码 |
|---|---|---|
| 记载 $(document).ready() | 页面加载有两种方式表示
| <script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(document).ready(function(){ $("#message1").html("页面加载成功"); }); $(function(){ $("#img").load(function(){ $("#message2").html("图片加载成功"); }); }); </script> <div id="message1"></div> <div id="message2"></div> <img id="img" src="https://how2j.cn/example.gif"> |
| 点击 click() | click() 表示单击
| <script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b").click(function(){ $("#message").html("单击按钮"); }); $("#b").dblclick(function(){ $("#message").html("双击按钮"); }); }); </script> <div id="message"></div> <button id="b">测试单击和双击</button> |
| 键盘 keydown() | keydown 表示按下键盘
| <script src="https://how2j.cn/study/jquery.min.js"></script> <script> var order = 0; var clearTimer=null; $(function(){ $("#i").keydown(function(e){ var selector = "keydown"; show(selector,e,$(this).val()); }); $("#i").keypress(function(e){ var selector = "keypress"; show(selector,e,$(this).val()); }); $("#i").keyup(function(e){ var selector = "keyup"; show(selector,e,$(this).val()); }); }); function show(selector,e,inputvalue){ clearTimeout(clearTimer); action(selector); key(selector,e); value(selector,inputvalue); clearTimer= setTimeout(clear,4000); } function action(selector){ $("#"+selector+"Action").css("background-color","green"); $("#"+selector+"Action").html("顺序: " + (++order ) ); } function value(selector,value){ $("#"+selector+"Value").html(value); } function key(selector,e){ $("#"+selector+"Key").html(e.which); } function clear(){ order = 0; $("tr#action div").css("background-color","red"); $("tr div").html(""); } </script> <style> tr#action div{ border: 1px solid black; height:50px; background-color:red; } tr#value div,tr#key div{ height:50px; background-color:#d1d1d1; } td{ width:25%; } </style> 输入框：<input id="i"> <table width="100%"> <tr> <td></td> <td>keydown</td> <td>keypress</td> <td>keyup</td> </tr> <tr id="action"> <td>行为</td> <td><div id="keydownAction"></div></td> <td><div id="keypressAction"></div></td> <td><div id="keyupAction"></div></td> </tr> <tr id="key"> <td>按键</td> <td><div id="keydownKey"></div></td> <td><div id="keypressKey"></div></td> <td><div id="keyupKey"></div></td> </tr> <tr id="value"> <td>取值</td> <td><div id="keydownValue"></div></td> <td><div id="keypressValue"></div></td> <td><div id="keyupValue"></div></td> </tr> </table> |
| 鼠标 mousedown 表示鼠标按下 表示鼠标弹起 表示鼠标进入 表示鼠标进入 表示鼠标进入 表示鼠标离开 表示鼠标离开 | 进入事件有3个 mousemove mouseenter mouseover mouseleave 和 mouseout的区别
| <script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#downup").mousedown(function(){ $(this).html("鼠标按下"); }); $("#downup").mouseup(function(){ $(this).html("鼠标弹起"); }); var moveNumber =0; var enterNumber =0; var leaveNumber =0; var overNumber =0; var outNumber =0; var enterNumber1 =0; var overNumber1 =0; var leaveNumber1 =0; var outNumber1 =0; $("#move").mousemove(function(){ $("#move span.number" ).html(++moveNumber); }); $("#enter").mouseenter(function(){ $("#enter span.number" ).html(++enterNumber); }); $("#leave").mouseleave(function(){ $("#leave span.number" ).html(++leaveNumber); }); $("#over").mouseover(function(){ $("#over span.number" ).html(++overNumber); }); $("#out").mouseout(function(){ $("#out span.number" ).html(++outNumber); }); $("#enter1").mouseenter(function(){ $("#enter1 span.number" ).html(++enterNumber1); }); $("#over1").mouseover(function(){ $("#over1 span.number" ).html(++overNumber1); }); $("#leave1").mouseleave(function(){ $("#leave1 span.number" ).html(++leaveNumber1); }); $("#out1").mouseout(function(){ $("#out1 span.number" ).html(++outNumber1); }); }); </script> <style> div{ background-color:pink; margin:20px; padding:10px; } .subDiv{ background-color:green; margin:10px; } .parentDiv{ background-color:pink; height:80px; } table{ width:100%; border-collapse:collapse; table-layout:fixed; } td{ border: 1.5px solid #d1d1d1; vertical-align:top; padding:20 0; } </style> <table > <tr> <td width="100px">事件</td> <td>效果演示</td> </tr> <tr> <td>mousedown <br /> mouseup<br /></td> <td> <button id="downup" style="margin-left:20px">鼠标按下弹起测试</button> </td> </tr> <tr> <td>mousemove<br /> mouseenter<br /> mouseover<br /> mouseleave<br /> mouseout</td> <td> <div id="move">mousemove 当鼠标进入元素，每移动一下都会被调用 次数<span class="number">0</span></div> <div id="enter">mouseenter 当鼠标进入元素，调用一下，在其中移动，不调用 次数<span class="number">0</span></div> <div id="over">mouseover 当鼠标进入元素，调用一下，在其中移动，不调用 次数<span class="number">0</span></div> <div id="leave">mouseleave 当鼠标离开元素，调用一下 次数<span class="number">0</span></div> <div id="out">mouseout 当鼠标离开元素，调用一下 <span class="number">0</span></div> </tr> <tr> <td>mouseenter<br /> mouseover</td> <td> <div id="enter1" class="parentDiv"> mouseenter 经过其子元素不会被调用 次数<span class="number">0</span> <div class="subDiv">div中的子元素 </div> </div> <div id="over1" class="parentDiv"> mouseover 经过其子元素会被调用 次数<span class="number">0</span> <div class="subDiv">div中的子元素 </div> </div> </td> </tr> <tr> <td>mouseleave<br /> mouseout </td> <td> <div id="leave1" class="parentDiv"> mouseleave 经过其子元素不会被调用 次数<span class="number">0</span> <div class="subDiv">div中的子元素 </div> </div> <div id="out1" class="parentDiv"> mouseout 经过其子元素会被调用 次数<span class="number">0</span> <div class="subDiv">div中的子元素 </div> </div> </td> </tr> </table> |
| focus() 获取焦点 失去焦点 | 焦点
| <script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("input").focus(function(){ $(this).val("获取了焦点"); }); $("input").blur(function(){ $(this).val("失去了焦点"); }); }); </script> <style> </style> <input type="text" > <input type="text" > |
| change() 内容改变 | 对于文本框，只有当该文本失去焦点的时候，才会触发change事件。
| <script src="https://how2j.cn/study/jquery.min.js"></script> </script> |
| submit() 提交form表单 | 提交
| <script src="https://how2j.cn/study/jquery.min.js"></script> <form id="form" action="https://how2j.cn/study/login.jsp"> 账号 : <input name="name" type=""> <br> 密码: <input name="password" type=""><br> <input type="submit" value="登陆"> </form> <script> $(function(){ $("#form").submit(function(){ alert("提交账号密码"); }); }); </script> |
| on() 绑定事件 | 以上所有的事件处理，都可以通过on() 绑定事件来处理 $("selector").on("event",function);
| <script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b").on("click",function(){ $("#message").html("单击按钮"); }); $("#b").on("dblclick",function(){ $("#message").html("双击按钮"); }); }); </script> <div id="message"></div> <button id="b">测试单击和双击</button> |
| trigger() 触发事件 | 触发事件，在本例中，文档加载好之后，就触发dblclick双击事件，而不是通过去手动双击。 $("selector").trigger("event");
| <script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b").on("click",function(){ $("#message").html("单击按钮"); }); $("#b").on("dblclick",function(){ $("#message").html("双击按钮"); }); $("#b").trigger("dblclick"); }); </script> <div id="message"></div> <button id="b">测试单击和双击</button> |
九、AJAX——JQuery也有对AJAX的支持，使得其对AJAX的操作简化了很多。
| 关键字 | 简介 | 示例代码 |
|---|---|---|
| $.ajax() 提交AJAX请求 | 参考 使用AJAX 通过无刷新验证账号是否存在 这个例子,服务端使用JSP进行验证，当用户输入abc的时候提示"已经存在" $.ajax({ url: page, data:{"name":value}, success: function(result){ $("#checkResult").html(result); } });
| <script src="https://how2j.cn/study/jquery.min.js"></script> <div id="checkResult"></div> 输入账号 :<input id="name" type="text"> <script> $(function(){ $("#name").keyup(function(){ var page = "/study/checkName.jsp"; var value = $(this).val(); $.ajax({ url: page, data:{"name":value}, success: function(result){ $("#checkResult").html(result); } }); }); }); </script> |
| $.get() 使用get方式提交ajax | $.get 是 $.ajax的简化版，专门用于发送GET请求 $.get( page, {"name":value}, function(result){ $("#checkResult").html(result); } );
| <script src="https://how2j.cn/study/jquery.min.js"></script> <div id="checkResult"></div> 输入账号 :<input id="name" type="text"> <script> $(function(){ $("#name").keyup(function(){ var page = "/study/checkName.jsp"; var value = $(this).val(); $.get( page, {"name":value}, function(result){ $("#checkResult").html(result); } ); }); }); </script> |
| $.post 使用post方式提交ajax | $.post 是 $.ajax的简化版，专门用于发送POST请求 $.post( page, {"name":value}, function(result){ $("#checkResult").html(result); } );
| <script src="https://how2j.cn/study/jquery.min.js"></script> <div id="checkResult"></div> 输入账号 :<input id="name" type="text"> <script> $(function(){ $("#name").keyup(function(){ var page = "/study/checkName.jsp"; var value = $(this).val(); $.post( page, {"name":value}, function(result){ $("#checkResult").html(result); } ); }); }); </script> |
| load() 最简单的调用ajax的方式 | load比起 $.get,$.post 就更简单了
| <script src="https://how2j.cn/study/jquery.min.js"></script> <div id="checkResult"></div> 输入账号 :<input id="name" type="text"> <script> $(function(){ $("#name").keyup(function(){ var value = $(this).val(); var page = "/study/checkName.jsp?name="+value; $("#checkResult").load(page); }); }); </script> |
| serialize() 格式化form下的输入数据 | serialize()： 格式化form下的输入数据
| <script src="https://how2j.cn/study/jquery.min.js"></script> https://how2j.cn/study/checkName.jsp</a>
</script> |
十、 数组操作
| 关键字 | 简介 | 示例代码 |
|---|---|---|
| $.each() 遍历 | $.each 遍历一个数组
| <script src="https://how2j.cn/study/jquery.min.js"></script> <script> var a = new Array(1,2,3); $.each( a, function(i, n){ document.write( "元素[" + i + "] : " + n + "<br>" ); }) document.close(); </script> |
| $.unique() 去除重复 | $.unique() 去掉重复的元素 注意 ： 执行unique之前，要先调用sort对数组的内容进行排序。
| <script src="https://how2j.cn/study/jquery.min.js"></script> <script> var a = new Array(5,2,4,2,3,3,1,4,2,5); a.sort(); $.unique(a); $.each( a, function(i, n){ document.write( "元素[" + i + "] : " + n + "<br>" ); }) document.close(); </script> |
| $.inArray() 是否存在$.inArray | $.inArray 返回元素在数组中的位置 ，如果不存在返回-1
| <script src="https://how2j.cn/study/jquery.min.js"></script> <script> var a = new Array(1,2,3,4,5,6,7,8); document.write($.inArray(9,a)); document.close(); </script> |
十一、 字符串操作
| 关键字 | 简介 | 示例代码 |
|---|---|---|
| $.trim() 去除首尾空白 | 去除首尾空白
| <script src="https://how2j.cn/study/jquery.min.js"></script> <script> document.write($.trim(" Hello JQuery ")); document.close(); </script> |
十二、JSON
将JSON格式的字符串，转换为JSON对象
| 关键字 | 简介 | 示例代码 |
|---|---|---|
| $.parseJSON() 将JSON格式的字符串，转换为JSON对象 |
| <script src="https://how2j.cn/study/jquery.min.js"></script> <script> var s1 = "{\"name\":\"盖伦\""; var s2 = ",\"hp\":616}"; var s3 = s1+s2; document.write("这是一个JSON格式的字符串:" + s3); document.write("<br>"); var gareen = $.parseJSON(s3); document.write("这是一个JSON对象: " + gareen); </script> |
十三、对象转换
学习到这里已经使用了大量的JQuery对象的方法，比如show() 、toggle()等等，这些方法都是属于JQuery对象的，而原生的DOM对象不具备这些方法。
同样的DOM对象也具备JQuery对象所没有的属性和方法，比如checked属性。
在某些场景下，需要对JQuery对象和DOM节点对象进行互相转换
| 关键字 | 简介 | 示例代码 |
|---|---|---|
| 通过get(0)或者 [0] 把JQuery对象转为DOM对象 |
| <script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ var div= $("#d"); var d = div[0]; var s ="JQuery对象是 " + div; s +="\n对应的DOM对象是 " + d alert(s); }); }); </script> <button id="b1">JQuery对象div转为DOM对象d</button> <br> <br> <div id="d"> Hello JQuery </div> |
| $() 通过$() 把DOM对象转为JQuery对象 |
| <script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ var div= document.getElementById("d"); var d = $(div); var s ="DOM对象是 " + div; s +="\n对应的JQuery对象是 " + d alert(s); }); }); </script> <button id="b1">DOM对象div转为JQuery对象d</button> <br> <br> <style> .pink{ background-color:pink; } </style> <div id="d"> Hello JQuery </div> |
扫一扫
8883
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
