JavaWeb - JQuery
1. JQuery基础
* 概念:一个JavaScript框架。简化JS开发
目前jQuery有三个大版本:
1.x:兼容ie678,使用最为广泛的,官方只做BUG维护,
功能不再新增。因此一般项目来说,使用1.x版本就可以了,
最终版本:1.12.4 (2016年5月20日)
2.x:不兼容ie678,很少有人使用,官方只做BUG维护,
功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,
最终版本:2.2.4 (2016年5月20日)
3.x:不兼容ie678,只支持最新的浏览器。除非特殊要求,
一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。
目前该版本是官方主要更新维护的版本。最新版本:3.2.1(2017年3月20日)
2. 快速入门:
1. 下载JQuery
* jquery - xxx.js 与 jquery - xxx.min.js区别:
1. jquery - xxx.js : 开发版本。给程序员看的,有良好的缩进和注释。体积小一些
2. jquery - xxx.min.js :生产版本。程序中使用,没有缩进。体积小一些,程序加载更快。
2. 导入JQuery的js文件:导入min.js
3. 使用
3. JQuery对象和JS对象的区别和转换:
1. JQ对象更加方便
2. JQuery对象和js对象不通用
3. 两者相互转换
* jq - - > js:jq对象【索引】 或者 jq对象 . get(索引)
* js - - > jq:$(js对象)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jqueryDemo01</title> <script src="js/jquery-3.3.1.min.js"></script> </head> <body> <div id="div1">div1.....</div> <div id="div2">div2.....</div> <script> // js获取,可以当做数组来使用 var divs = document.getElementsByTagName("div"); for(var i =0;i < divs.length;i++){ divs[i].innerHTML = "hello"; } // jq获取,也可以当做数组来使用 var divs2 = $("div"); divs2.html("nihao"); // jq - - > js divs[0].innerHTML = "ddd"; </script> </body> </html>
4. 选择器:筛选具有相似特征的元素(标签)
1. 基本语法学习:
1. 事件绑定
2. 入口函数
* $(function(){ 操作逻辑 })
* window.onload 和 $(function(){ 操作逻辑 } )区别:
* window.onload 只能定义一次,如果定义多次,会被覆盖
* $(function)可以定义多次
<script> // 给b1按钮绑定单击事件 $(function () { $("#b1").click(function () { alert("haha"); }) }); </script>
3. 样式控制
<script> // css 样式控制 $(function () { $("#div1").css("background-color","red"); $("#div2").css("backgroundColor","yellow"); }); </script>
2. 选择器
1. 基本选择器:
1. 标签选择器(元素选择器)
* $("html标签名")
2. id选择器
* $("#id的属性值")
3. 类选择器
* $(".class的属性值")
4. 并集选择器:选择多个元素
* $("选择器1,选择器2")
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>基本选择器</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="../js/jquery-3.3.1.min.js"></script> <style type="text/css"> div,span{ width: 180px; height: 180px; margin: 20px; background: #9999CC; border: #000 1px solid; float:left; font-size: 17px; font-family:Roman; } div .mini{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } div .mini01{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } </style> <script type="text/javascript"> $(function () { // 1. 改变 id 为 one 的元素的背景色为 粉红色 $("#b1").click(function () { $("#one").css("backgroundColor","pink"); }) // 2. 改变元素名为 <div> 的所有元素的背景色为 红色 $("#b2").click(function () { $("div").css("backgroundColor","red"); }) // 3. 改变 class 为 mini 的所有元素的背景色为 黄色 $("#b3").click(function () { $(".mini").css("backgroundColor","yellow"); }) // 4. 改变所有的<span>元素和 id 为 two 的元素的背景色为绿色 $("#b4").click(function () { $("span,#two").css("backgroundColor","green"); }) }); </script> </head> <body> <input type="button" value="保存" class="mini" name="ok" class="mini" /> <input type="button" value="改变 id 为 one 的元素的背景色为 红色" id="b1"/> <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色" id="b2"/> <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色" id="b3"/> <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色" id="b4"/> <h1>有一种奇迹叫坚持</h1> <h2>自信源于努力</h2> <div id="one"> id为one </div> <div id="two" class="mini" > id为two class是 mini <div class="mini" >class是 mini</div> </div> <div class="one" > class是 one <div class="mini" >class是 mini</div> <div class="mini" >class是 mini</div> </div> <div class="one" > class是 one <div class="mini01" >class是 mini01</div> <div class="mini" >class是 mini</div> </div> <span class="spanone">class为spanone的span元素</span> <span class="mini">class为mini的span元素</span> <input type="text" value="zhang" id="username" name="username"> </body> </html>
2. 层级选择器:
1. 后代选择器
* $("A B"):选择A元素内部的所有B元素(包括孙子辈)
2. 子选择器
* $("A > B"):选择A元素内部所有B子元素
3.属性选择器
1. 属性名称选择器
* $("A [ 属性名 ]") 包含指定属性的选择器
2. 属性选择器
* $("A[ 属性值 = '值' ] ") 包含指定属性等于指定值的选择器
3. 复合属性选择器
* $("A[ 属性名 = '值'] [ ] ...") 包含多个属性条件的选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>属性过滤选择器</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="js/jquery-3.3.1.min.js"></script> <style type="text/css"> div,span{ width: 180px; height: 180px; margin: 20px; background: #9999CC; border: #000 1px solid; float:left; font-size: 17px; font-family:Roman; } div .mini{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } div .mini01{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } div.visible{ display:none; } </style> <script type="text/javascript"> $(function () { // <input type="button" value=" 含有属性title 的div元素背景色为红色" id="b1"/> $("#b1").click(function () { $("div[title]").css("backgroundColor","red"); }); // <input type="button" value=" 属性title值等于test的div元素背景色为红色" id="b2"/> $("#b2").click(function () { $("div[title='test']").css("backgroundColor","pink"); }); // <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色" id="b3"/> $("#b3").click(function () { $("div[title!='test']").css("backgroundColor","green"); }); // <input type="button" value=" 属性title值 以te开始 的div元素背景色为红色" id="b4"/> $("#b4").click(function () { $("div[title^='te']").css("backgroundColor","yellow"); }); // <input type="button" value=" 属性title值 以est结束 的div元素背景色为红色" id="b5"/> $("#b5").click(function () { $("div[title$='est']").css("backgroundColor","black"); }); // <input type="button" value="属性title值 含有es的div元素背景色为红色" id="b6"/> $("#b6").click(function () { $("div[title*='es']").css("backgroundColor","green"); }); // <input type="button" value="选取有属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素背景色为红色" id="b7"/> $("#b7").click(function () { $("div[id][title*='es']").css("backgroundColor","red"); }); }); </script> </head> <body> <input type="button" value="保存" class="mini" name="ok" class="mini" /> <input type="button" value=" 含有属性title 的div元素背景色为红色" id="b1"/> <input type="button" value=" 属性title值等于test的div元素背景色为红色" id="b2"/> <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色" id="b3"/> <input type="button" value=" 属性title值 以te开始 的div元素背景色为红色" id="b4"/> <input type="button" value=" 属性title值 以est结束 的div元素背景色为红色" id="b5"/> <input type="button" value="属性title值 含有es的div元素背景色为红色" id="b6"/> <input type="button" value="选取有属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素背景色为红色" id="b7"/> <div id="one"> id为one div </div> <div id="two" class="mini" title="test"> id为two class是 mini div title="test" <div class="mini" >class是 mini</div> </div> <div class="visible" > class是 one <div class="mini" >class是 mini</div> <div class="mini" >class是 mini</div> </div> <div class="one" title="test02"> class是 one title="test02" <div class="mini01" >class是 mini01</div> <div class="mini" style="margin-top:0px;">class是 mini</div> </div> <div class="visible" > 这是隐藏的 </div> <div class="one"> </div> <div id="mover" > 动画 </div> <input type="text" value="zhang" id="username" name="username"> </body> </html>
4. 过滤选择器
1. 首元素选择器
* :first :获得选择的元素中的第一个元素
2. 尾选择器
* :last :获得选择元素中的最后一个元素
3. 非元素选择器
* :not(selector) :不包括指定内容的元素
4. 偶数选择器
* :even :偶数,从0开始计数
5. 奇数选择器
* :odd :偶数,从0开始计数
6. 等于索引选择器
* :eq(index) :指定索引元素
7. 大于索引选择器
* :gt(index) :大于指定索引元素
8. 小于索引选择器
* :lt(index) :小于指定索引元素
9. 标题选择器
* :header :获得标题(h1-h6)元素,固定写法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>基本过滤选择器</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="js/jquery-3.3.1.min.js"></script> <style type="text/css"> div,span{ width: 180px; height: 180px; margin: 20px; background: #9999CC; border: #000 1px solid; float:left; font-size: 17px; font-family:Roman; } div .mini{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } div .mini01{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } </style> <script type="text/javascript"> $(function () { // <input type="button" value=" 改变第一个 div 元素的背景色为 红色" id="b1"/> $("#b1").click(function () { $("div:first").css("backgroundColor","pink"); }); // <input type="button" value=" 改变最后一个 div 元素的背景色为 红色" id="b2"/> $("#b2").click(function () { $("div:last").css("backgroundColor","pink"); }); // <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色" id="b3"/> $("#b3").click(function () { $("div:not(selector)[class!=one]").css("backgroundColor","pink"); $("div:not(.one)").css("backgroundColor","pink"); }); // <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色" id="b4"/> $("#b4").click(function () { $("div:even").css("backgroundColor","pink"); }); // <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色" id="b5"/> $("#b5").click(function () { $("div:odd").css("backgroundColor","green"); }); // <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色" id="b6"/> $("#b6").click(function () { $("div:gt(3)").css("backgroundColor","pink"); }); // <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色" id="b7"/> $("#b7").click(function () { $("div:eq(3)").css("backgroundColor","pink"); }); // <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色" id="b8"/> $("#b8").click(function () { $("div:lt(3)").css("backgroundColor","pink"); }); // <input type="button" value=" 改变所有的标题元素的背景色为 红色" id="b9"/> $("#b9").click(function () { $(":header").css("backgroundColor","pink"); }); }) </script> </head> <body> <input type="button" value="保存" class="mini" name="ok" class="mini" /> <input type="button" value=" 改变第一个 div 元素的背景色为 红色" id="b1"/> <input type="button" value=" 改变最后一个 div 元素的背景色为 红色" id="b2"/> <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色" id="b3"/> <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色" id="b4"/> <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色" id="b5"/> <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色" id="b6"/> <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色" id="b7"/> <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色" id="b8"/> <input type="button" value=" 改变所有的标题元素的背景色为 红色" id="b9"/> <h1>有一种奇迹叫坚持</h1> <h2>自信源于努力</h2> <div id="one"> id为one </div> <div id="two" class="mini" > id为two class是 mini <div class="mini" >class是 mini</div> </div> <div class="one" > class是 one <div class="mini" >class是 mini</div> <div class="mini" >class是 mini</div> </div> <div class="one" > class是 one <div class="mini01" >class是 mini01</div> <div class="mini" >class是 mini</div> </div> </body> </html>
5. 表单过滤选择器
1. 可用元素选择器
* :enabled 获得可用元素
2. 不可用元素选择器
* : disabled 获得不可用元素
3. 选中选择器
* :checked 获得单选 / 复选框选中的元素
4. 选中选择器
* :selected 获得下拉框选中的元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>表单属性过滤选择器</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="js/jquery-3.3.1.min.js"></script> <style type="text/css"> div,span{ width: 180px; height: 180px; margin: 20px; background: #9999CC; border: #000 1px solid; float:left; font-size: 17px; font-family:Roman; } div .mini{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } div .mini01{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } #job{ margin: 20px; } #edu{ margin-top:-70px; } </style> <script type="text/javascript"> $(function () { // <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1"/> $("#b1").click(function () { $("input[type='text']:enabled").val("aaa"); }); // <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/> $("#b2").click(function () { $("input[type='text']:disabled").val("aaa"); }); // <input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数" id="b3"/> $("#b3").click(function () { alert($("input[type='checkbox']:checked").length); }); // <input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数" id="b4"/> $("#b4").click(function () { alert($("#job > option:selected").length); }); }); </script> </head> <body> <input type="button" value="保存" class="mini" name="ok" class="mini" /> <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1"/> <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/> <input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数" id="b3"/> <input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数" id="b4"/> <br><br> <input type="text" value="不可用值1" disabled="disabled"> <input type="text" value="可用值1" > <input type="text" value="不可用值2" disabled="disabled"> <input type="text" value="可用值2" > <br><br> <input type="checkbox" name="items" value="美容" >美容 <input type="checkbox" name="items" value="IT" >IT <input type="checkbox" name="items" value="金融" >金融 <input type="checkbox" name="items" value="管理" >管理 <br><br> <input type="radio" name="sex" value="男" >男 <input type="radio" name="sex" value="女" >女 <br><br> <select name="job" id="job" multiple="multiple" size=4> <option>程序员</option> <option>中级程序员</option> <option>高级程序员</option> <option>系统分析师</option> </select> <select name="edu" id="edu"> <option>本科</option> <option>博士</option> <option>硕士</option> <option>大专</option> </select> <br/> <div id="two" class="mini" > id为two class是 mini div <div class="mini" >class是 mini</div> </div> <div class="one" > class是 one <div class="mini" >class是 mini</div> <div class="mini" >class是 mini</div> </div> <div class="one" > class是 one <div class="mini01" >class是 mini01</div> <div class="mini" >class是 mini</div> </div> </body> </html>
3. DOM操作
1. 内容操作
1. html():获取 / 设置元素的标签体内容 <a><font>内容</font><a> - - > <font>内容</font>
2. text():获取 / 设置元素的标签体纯文本内容 <a><font>内容</font><a> - - > 内容
3. val():获取 / 设置元素的value属性值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-3.3.1.min.js"></script> <script> $(function () { // 获取myinput 的value值 alert($("#myinput").val()); // 获取mydiv的标签体内容 alert($("#mydiv").html()); // 获取mydiv文本内容 alert($("#mydiv").text()); }); </script> </head> <body> <input id="myinput" type="text" name="username" value="张三" /><br /> <div id="mydiv"><p><a href="#">标题标签</a></p></div> </body> </html>
2. 属性操作
1. 通用属性操作
1. attr():获取 / 设置元素的属性
2. removeAttr():删除属性
3. prop():获取 / 设置元素的属性
4. removeProp():删除属性
* attr 和 prop的区别?
1. 如果操作的是元素的固有属性,则建议使用prop
2. 如果操作的是自定义的属性,则建议使用attr
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>获取属性</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="../js/jquery-3.3.1.min.js"></script> <style type="text/css"> div,span{ width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid; float:left; font-size: 17px; font-family:Roman; } div.mini{ width: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } div.visible{ display:none; } </style> <script type="text/javascript"> $(function () { //获取北京节点的name属性值 var prop = $("#bj").attr("name"); alert(prop); //设置北京节点的name属性的值为dabeijing $("#bj").attr("name","dabeijing"); //新增北京节点的discription属性 属性值是didu $("#bj").attr("discription","didu"); //删除北京节点的name属性并检验name属性是否存在 $("#bj").removeAttr("name") //获得hobby的的选中状态 var check = $("#hobby").prop("checked"); alert(check); }); </script> </head> <body> <ul> <li id="bj" name="beijing" xxx="yyy">北京</li> <li id="tj" name="tianjin">天津</li> </ul> <input type="checkbox" id="hobby"/> </body> </html>
2. 对class属性的操作
1. addClass():添加class属性值
2. removeClass():删除class属性值
3. toggleClass():切换class属性 动态切换
* toggleClass("one") : 判断如果元素对象上存在class=‘one’,则将属性值删除,不存在则添加
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>样式操作</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="../js/jquery-3.3.1.min.js"></script> <style type="text/css"> .one{ width: 200px; height: 140px; margin: 20px; background: red; border: #000 1px solid; float:left; font-size: 17px; font-family:Roman; } div,span{ width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid; float:left; font-size: 17px; font-family:Roman; } div .mini{ width: 40px; height: 40px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } div .mini01{ width: 40px; height: 40px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } /*待用的样式*/ .second{ width: 300px; height: 340px; margin: 20px; background: yellow; border: pink 3px dotted; float:left; font-size: 22px; font-family:Roman; } </style> <script type="text/javascript"> $(function () { //<input type="button" value="采用属性增加样式(改变id=one的样式)" id="b1"/> $("#b1").click(function () { $("#one").prop("class","second"); }); //<input type="button" value=" addClass" id="b2"/> $("#b2").click(function () { $("#one").addClass("second"); }); //<input type="button" value="removeClass" id="b3"/> $("#b3").click(function () { $("#one").removeClass("second"); }); //<input type="button" value=" 切换样式" id="b4"/> $("#b4").click(function () { $("#one").toggleClass("second"); }); //<input type="button" value=" 通过css()获得id为one背景颜色" id="b5"/> $("#b5").click(function () { $("#one").css("backgroundColor"); }); //<input type="button" value=" 通过css()设置id为one背景颜色为绿色" id="b6"/> $("#b6").click(function () { $("#one").css("backgroundColor","green"); }); }) </script> </head> <body> <input type="button" value="保存" class="mini" name="ok" class="mini" /> <input type="button" value="采用属性增加样式(改变id=one的样式)" id="b1"/> <input type="button" value=" addClass" id="b2"/> <input type="button" value="removeClass" id="b3"/> <input type="button" value=" 切换样式" id="b4"/> <input type="button" value=" 通过css()获得id为one背景颜色" id="b5"/> <input type="button" value=" 通过css()设置id为one背景颜色为绿色" id="b6"/> <h1>有一种奇迹叫坚持</h1> <h2>自信源于努力</h2> <div id="one"> id为one </div> <div id="two" class="mini" > id为two class是 mini <div class="mini" >class是 mini</div> </div> <div class="one" > class是 one <div class="mini" >class是 mini</div> <div class="mini" >class是 mini</div> </div> <div class="one" > class是 one <div class="mini01" >class是 mini01</div> <div class="mini" >class是 mini</div> </div> <span class="spanone"> span </span> </body> </html>
3. CRUD操作:
1. append():父元素将子元素追加到末尾
* 对象1.aapend(对象2):将对象2添加到对象1内部,并且在末尾
2. prepend():父元素将子元素追加到开头
* 对象1.prepend(对象2):将对象2添加到对象1内部,并且在开头
3. appendTo():
* 对象1.appendTo(对象2):将对象1添加到对象2内部,并且在末尾
4. prependTo():
* 对象1.prependTo(对象2):将对象1添加到对象2内部, 并且在开头
5. after():添加元素到元素后边
* 对象1.after(对象2):将对象2添加到对象1后边。对象1和对象2是兄弟关系
6. before():添加元素到元素前边
* 对象1.before(对象2):将对象2添加到对象1前边。对象1和对象2是兄弟关系
7. insertAfter():
* 对象1.insertAfter(对象2):将对象2添加到对象1后边。对象1和对象2是兄弟关系
8. insertBefore():
* 对象1.insertBefore(对象2):将对象2添加到对象1前边。对象1和对象2是兄弟关系
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>内部插入脚本</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="../js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function () { // <input type="button" value="将反恐放置到city的后面" id="b1"/> $("#b1").click(function () { $("#city").append($("#fk")); }); // <input type="button" value="将反恐放置到city的最前面" id="b2"/> $("#b2").click(function () { $("#city").prepend($("#fk")); }); // <input type="button" value="将反恐插入到天津后面" id="b3"/> $("#b3").click(function () { $("#tj").after($("#fk")); }); // <input type="button" value="将反恐插入到天津前面" id="b4"/> $("#b4").click(function () { $("#fk").insertBefore($("#tj")); }); }); </script> <style type="text/css"> div,span{ width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid; float:left; font-size: 17px; font-family:Roman; } div .mini{ width: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } div.visible{ display:none; } </style> </head> <body> <input type="button" value="将反恐放置到city的后面" id="b1"/> <input type="button" value="将反恐放置到city的最前面" id="b2"/> <input type="button" value="将反恐插入到天津后面" id="b3"/> <input type="button" value="将反恐插入到天津前面" id="b4"/> <ul id="city"> <li id="bj" name="beijing">北京</li> <li id="tj" name="tianjin">天津</li> <li id="cq" name="chongqing">重庆</li> </ul> <ul id="love"> <li id="fk" name="fankong">反恐</li> <li id="xj" name="xingji">星际</li> </ul> <div id="foo1">Hello1</div> </body> </html>
9. remove():移除元素
* 对象.remove():将对象删除
10. empty():清空元素的所有的后代元素
* 对象.empty():将对象的后代元素全部清空,但是保留当前对象以及其属性节点
4. 案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../../web/js/jquery-3.3.1.min.js"></script> <script> $(function () { //需求:将数据行的奇数行背景色设置为 pink,偶数行背景色设置为 yellow // 获取奇数行的tr,设置背景色为pink $("tr:gt(1):odd").css("backgroundColor","pink"); // 获取偶数行的tr,设置背景色为yellow $("tr:gt(1):even").css("backgroundColor","yellow"); }); </script> </head> <body> <table id="tab1" border="1" width="800" align="center" > <tr> <td colspan="5"><input type="button" value="删除"></td> </tr> <tr style="background-color: #999999;"> <th><input type="checkbox"></th> <th>分类ID</th> <th>分类名称</th> <th>分类描述</th> <th>操作</th> </tr> <tr> <td><input type="checkbox"></td> <td>1</td> <td>手机数码</td> <td>手机数码类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td><input type="checkbox"></td> <td>2</td> <td>电脑办公</td> <td>电脑办公类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td><input type="checkbox"></td> <td>3</td> <td>鞋靴箱包</td> <td>鞋靴箱包类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td><input type="checkbox"></td> <td>4</td> <td>家居饰品</td> <td>家居饰品类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> </table> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../../web/js/jquery-3.3.1.min.js"></script> <script> // 分析:需要保证下边的复选框的选中状态和第一个的选中状态一致 function selectAll(obj) { $(".itemSelect").prop("checked",obj.checked); } </script> </head> <body> <table id="tab1" border="1" width="800" align="center" > <tr> <td colspan="5"><input type="button" value="删除"></td> </tr> <tr> <th><input type="checkbox" onclick="selectAll(this)" ></th> <th>分类ID</th> <th>分类名称</th> <th>分类描述</th> <th>操作</th> </tr> <tr> <td><input type="checkbox" class="itemSelect"></td> <td>1</td> <td>手机数码</td> <td>手机数码类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td><input type="checkbox" class="itemSelect"></td> <td>2</td> <td>电脑办公</td> <td>电脑办公类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td><input type="checkbox" class="itemSelect"></td> <td>3</td> <td>鞋靴箱包</td> <td>鞋靴箱包类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td><input type="checkbox" class="itemSelect"></td> <td>4</td> <td>家居饰品</td> <td>家居饰品类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> </table> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>QQ表情选择</title> <script src="../../web/js/jquery-3.3.1.min.js"></script> <style type="text/css"> *{margin: 0;padding: 0;list-style: none;} .emoji{margin:50px;} ul{overflow: hidden;} li{float: left;width: 48px;height: 48px;cursor: pointer;} .emoji img{ cursor: pointer; } </style> <script> $(function () { //需求:点击qq表情,将其追加到发言框中 // 1. 给img图片添加click事件 $("ul img").click(function () { // 2. 追加到p标签中,需要将js对象this转换为JQ对象,再调用克隆方法 $(".word").append($(this).clone()); }); }); </script> </head> <body> <div class="emoji"> <ul> <li><img src="img/01.gif" height="22" width="22" alt="" /></li> <li><img src="img/02.gif" height="22" width="22" alt="" /></li> <li><img src="img/03.gif" height="22" width="22" alt="" /></li> <li><img src="img/04.gif" height="22" width="22" alt="" /></li> <li><img src="img/05.gif" height="22" width="22" alt="" /></li> <li><img src="img/06.gif" height="22" width="22" alt="" /></li> <li><img src="img/07.gif" height="22" width="22" alt="" /></li> <li><img src="img/08.gif" height="22" width="22" alt="" /></li> <li><img src="img/09.gif" height="22" width="22" alt="" /></li> <li><img src="img/10.gif" height="22" width="22" alt="" /></li> <li><img src="img/11.gif" height="22" width="22" alt="" /></li> <li><img src="img/12.gif" height="22" width="22" alt="" /></li> </ul> <p class="word"> <strong>请发言:</strong> <img src="img/12.gif" height="22" width="22" alt="" /> </p> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../../web/js/jquery-3.3.1.min.js"></script> <style> #leftName , #btn,#rightName{ float: left; width: 100px; height: 300px; } #toRight,#toLeft{ margin-top:100px ; margin-left:30px; width: 50px; } .border{ height: 500px; padding: 100px; } </style> <script> //需求:实现下拉列表选择条目左右选择功能 $(function () { //toRight $("#toRight").click(function () { // 获取右边的下拉列表对象,append(左边下拉列表选中的option) $("#rightName").append($("#leftName > option:selected")); }); // toLeft $("#toLeft").click(function () { // appendTo 获取右边选中的option 添加到昨边中 $("#rightName > option:selected").appendTo($("#leftName")); }); }); </script> </head> <body> <div class="border"> <select id="leftName" multiple="multiple"> <option>张三</option> <option>李四</option> <option>王五</option> <option>赵六</option> </select> <div id="btn"> <input type="button" id="toRight" value="-->"><br> <input type="button" id="toLeft" value="<--"> </div> <select id="rightName" multiple="multiple"> <option>钱七</option> </select> </div> </body> </html>
5. 动画
1. 三种方式显示和隐藏元素
1. 默认显示和隐藏方式
1. show(【speed】,【easing】,【fn】)
1. speed:动画的速度。三个预定义的值("slow" , "normal" , or "fast" ) 或表示动画时长的毫秒数值(如:1000)
2. easing:用来指定切换效果,默认是"swing",可用参数"linear"
* swing:动画执行的效果是 先慢,中间快,最后又慢
* linear:动画执行时速度是匀速的
3. fn:在动画完成时执行的函数,每个元素执行一次
2. hide(【speed】,【easing】,【fn】)
3. toggle(【speed】,【easing】,【fn】)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> <script> // 隐藏div function hideFn() { $("#showDiv").hide("slow","swing",function () { alert("隐藏了") }) }; // 显示div function showFn() { $("#showDiv").show("slow","swing",function () { alert("显示了") }) }; // 切换显示和隐藏 function toggleFn() { $("#showDiv").toggle("slow","swing",function () { alert("显示了") }) }; </script> </head> <body> <input type="button" value="点击按钮隐藏div" onclick="hideFn()"> <input type="button" value="点击按钮显示div" onclick="showFn()"> <input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()"> <div id="showDiv" style="width:300px;height:300px;background:pink"> div显示和隐藏 </div> </body> </html>
2. 滑动显示和隐藏方式
1. slideDown(【speed,【easing】,【fn】】)
2. slideUp(【speed,【easing】,【fn】】)
3. slideToggle(【speed】,【easing】,【fn】)
3. 淡入淡出显示和隐藏方式
1. fadeIn(【speed】,【easing】,【fn】)
2. fadeOut(【speed】,【easing】,【fn】)
3. fadeToggle(【speed,【easing】,【fn】】)
6. 遍历
1. js的遍历方式
* for(初始化值;循环结束条件;步长)
2. jq的遍历方式
1. jq对象.each(callback)
2. $.each(object,【callbcak】) object参数可以接受js对象和jq对象
3. for...of: 3.0版本后提供的 一颗接收js对象
* 注意要将js对象转换为jq对象 才有html()方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function () { var citys = $("#city li"); // 遍历方式1 js 的for循环 // for(var i = 0; i < citys.length; i++){ // alert(i+":"+citys[i].innerHTML); // } // // 遍历方式2 jq对象.each(callback) // citys.each(function (index,element) { // // 2.1 获取li对象 第一种方式 // // alert(this.innerHTML); // // // 2.2 获取li对象 第二种方式 在回调函数中定义参数 index(索引) element(遍历得到的元素对象) // if("上海" == $(element).html()){ // // 如果当前function返回为false,则结束循环。如果返回为true,则结束本次循环,继续下次循环 // return true; // } // alert(index+":"+$(element).html()); // }) // // 遍历方式3 $.each(object,[callback]) // $.each(citys,function () { // alert($(this).html();) // }) // 遍历方式4 for...of : jquery 3.0版本 之后提供的方式 for(li of citys){ alert($(li).html()); } }); </script> </head> <body> <ul id="city"> <li>北京</li> <li>上海</li> <li>天津</li> <li>重庆</li> </ul> </body> </html>
7. 事件绑定
1. jquery标准的绑定方式
jq对象.事件方法(回调函数);
* focus()事件不传参会默认让组件获得焦点
2. on绑定事件 / off解除绑定
jq对象.on("事件名称",回调函数)
jq对象.off("事件名称")
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function () { $("#btn").on("click",function () { alert("我被绑定啦"); }); $("#btn2").on("click",function () { // 解除btn按钮的单击事件 $("#btn").off("click"); $("#btn").off();//将组件上的所有事件全部解绑 }); }); </script> </head> <body> <input id="btn" type="button" value="使用on绑定点击事件"> <input id="btn2" type="button" value="使用off解绑点击事件"> </body> </html>
3. 事件切换:toggle
jq对象.toggle(fn1,fn2。。。。) 点第一次执行fn1,第二次fn2
* 注意:高版本后该方法被移除,需要引入插件jquery-migrate-1.0.0.js
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function () { $("#btn").toggle(function () { // 改变div的背景色 $("#myDiv").css("backgroundColor","green"); },function () { $("#myDiv").css("backgroundColor","pink"); }); }); </script> </head> <body> <input id="btn" type="button" value="事件切换"> <div id="myDiv" style="width:300px;height:300px;background:pink"> 点击按钮变成绿色,再次点击红色 </div> </body> </html>
7. 综合案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>广告的自动显示与隐藏</title> <style> #content{width:100%;height:500px;background:#999} </style> <!--引入jquery--> <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> <script> /* 需求: 1. 当页面加载完,3秒后,自动显示广告 2. 广告显示5秒后,自动消失 分析: 1. 使用定时器完成。setTimeout(执行一次的定时器) 2. 经过分析发现,JQuery显示和隐藏的动画效果其实就是控制display属性 3. 使用 show/hide方法来完成广告的显示 * */ // 入口函数,在页面加载完成之后,定义定时器,调用显示和隐藏广告的方法 $(function () { // 定义定时器,调用adShow,3秒后执行 setInterval(adShow,3000); // 定义定时器,调用adHide方法,8秒后执行 setInterval(adHide,8000); }); // 显示广告 function adShow() { $("#ad").show("slow") }; // 隐藏广告 function adHide() { $("#ad").hide("slow") }; </script> </head> <body> <!-- 整体的DIV --> <div> <!-- 广告DIV --> <div id="ad" style="display: none;"> <img style="width:100%" src="../img/adv.jpg" /> </div> <!-- 下方正文部分 --> <div id="content"> 正文部分 </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery案例之抽奖</title> <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> <script> /* 分析: 1. 给开始按钮绑定单击事件 1.1 定义循环定时器 setInterval 1.2 切换小相框的src属性 * 定义数组,存放图片资源路径 * 生成随机数。数组索引 2. 给结束按钮绑定单击事件 2.1 停止定时器 clearInterval 2.2 给大相框设置src属性 */ // 相册相片路径数组 var imgs = ["../img/man00.jpg", "../img/man01.jpg", "../img/man02.jpg", "../img/man03.jpg", "../img/man04.jpg", "../img/man05.jpg", "../img/man06.jpg", ]; var startId;// 开始定时器的ID var index; // 随机角标索引 $(function () { // 处理按钮是否可以使用的效果 $("#startID").prop("disabled",false); $("#stopID").prop("disabled",true); // 1. 给开始按钮绑定单击事件 $("#startID").click(function () { //定义循环定时器 setInterval 20毫秒执行一次 startId = setInterval(function () { // 让开始按钮不可用。停止按钮可用 $("#startID").prop("disabled",true); $("#stopID").prop("disabled",false); // 生成随机角标 0-6 , 乘以7 再向下取整 index = Math.floor(Math.random() * 7); // 0.000 - 0.999 小数 // 设置小相框的src属性 $("#img1ID").prop("src",imgs[index]); },20) }); // 2.给结束按钮绑定单击事件 $("#stopID").click(function () { // 让停止按钮不可用 $("#startID").prop("disabled",false); $("#stopID").prop("disabled",true); // 停止定时器 clearInterval clearInterval(startId); // 给大相框设置src属性 $("#img2ID").prop("src",imgs[index]).hide(); // 加个动画 1秒后显示 $("#img2ID").show(1000); }); }) </script> </head> <body> <!-- 小像框 --> <div style="border-style:dotted;width:160px;height:100px"> <img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px"/> </div> <!-- 大像框 --> <div style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px"> <img id="img2ID" src="../img/man00.jpg" width="800px" height="500px"/> </div> <!-- 开始按钮 --> <input id="startID" type="button" value="点击开始" style="width:150px;height:150px;font-size:22px" onclick="imgStart()"> <!-- 停止按钮 --> <input id="stopID" type="button" value="点击停止" style="width:150px;height:150px;font-size:22px" onclick="imgStop()"> <script language='javascript' type='text/javascript'> //准备一个一维数组,装用户的像片路径 var imgs = [ "../img/man00.jpg", "../img/man01.jpg", "../img/man02.jpg", "../img/man03.jpg", "../img/man04.jpg", "../img/man05.jpg", "../img/man06.jpg" ]; </script> </body> </html>
8. 插件
* 增强JQuery功能
* 实现方式:
1. $.fn.extend(object)对象级别
* 增强通过JQuery获取的对象的功能 $("#id")
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>01-jQuery对象进行方法扩展</title> <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> </script> <script> // 使用插件 给jq对象添加2个方法 check()选中所有复选框 uncheck()取消选中 // 1. 定义jquery对象插件 $.fn.extend({ // 方法名称:回调函数 check:function () { //让复选框选中 //this表示调用该方法的jq对象 this.prop("checked",true); }, uncheck:function () { // 让复选框不选中 this.prop("checked",false); } }); $(function () { $("#btn-check").click(function () { // 获取复选框对象 $("input[type='checkbox']").check(); }) $("#btn-uncheck").click(function () { // 获取复选框对象 $("input[type='checkbox']").uncheck(); }) }); </script> </head> <body> <input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()"> <input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckFn()"> <br/> <input type="checkbox" value="football">足球 <input type="checkbox" value="basketball">篮球 <input type="checkbox" value="volleyball">排球 </body> </html>
2. $.extend(object) 全局级别
* 增强JQuery对象自身的功能 $ / JQuery
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>01-jQuery对象进行方法扩展</title> <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //对全局方法扩展2个方法,扩展min方法:求2个值的最小值;扩展max方法:求2个值最大值 $.extend({ max:function (a,b) { // 返回两数中的较大值 return a >= b ? a:b; }, min:function (a,b) { // 返回两数中的较小值 return a<=b ? a:b; } }) // 调用全局方法 var max = $.max(2,3); alert(max); </script> </head> <body> </body> </html>