java：JQuery（声明，JQ和JS对象的区别，prop，attr，addClass，offset，trigger，dblclick和change事件，hide，show，toggle，slideUp，slideDown，slideToggle，三种选择器，标签的获取，三张图片的放大与缩小）
1.JQuery：
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计 的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
2..JQuery的声明：
<!DOCTYPE> <html> <head> <meta charset="UTF-8"></meta> <title></title> <!-- jQuery的文件引入，一定要在jQuery代码之前 --> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> <script type="text/javascript"> // 第一种声明jQuery的方式 /*$(function(){// jQuery只要定义，就在页面加载完毕后自动触发 });*/ // 第二种声明jQuery的方式 /*$(document).ready(function(){ alert("我是jQuery"); });*/ // 在html中，使用类样式 . // 使用id样式 # // 标签样式 直接标签名 // 在jQuery中，同样遵循这个原则 $(function(){// 一旦不写定义jQuery，就无法编写jQuery代码 // 既可以写jQuery代码也可以写js代码 // 但是jQuery代码坚决不能写在$(function(){})的外面 var x = document.getElementById("div1"); // 使用jQuery通过id选择器选中div标签 var div1 = $("#div1");// 得到Object对象，这个对象称之为jQuery对象 alert(div1); alert(x); var div2 = $("div"); alert(div2); var div3 = $(".div2"); alert(div3); }); </script> </head> <body> <div class="div2" id="div1" style="width:100px; height:100px; background: red;"></div> <div class="div2" id="div2" style="width:100px; height:100px; background: red;"></div> <div class="div2" id="div3" style="width:100px; height:100px; background: red;"></div> </body> </html>
3.JS和JQ对象的区别，prop，attr，addClass，offset
<!DOCTYPE> <html> <head> <meta charset="UTF-8"></meta> <title></title> <style type="text/css"> .test { background: red; color:red; } .test2{ color:green; } </style> <!-- jQuery的文件引入，一定要在jQuery代码之前 --> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> <script type="text/javascript"> // JS中获取的对象永远是一个DOM对象，俗称js对象 // 但是jQuery获取的是一个jQuery的对象，Object对象 // attr和prop很重要 $(document).ready(function(){ var x = $("h1"); var x = $("h1");// 获取到所有的h1标签，返回的Object对象，并不是数组 $("h1").each(function(index){ alert(index);// 就是选中标签下标 alert($(this).text());// 循环中的每一个h1标签对象 }); alert(x.length); for(var i = 0; i < x.length; i++) { var y = x.get(i);// heading对象(拿到每一个h1标签对象，一个整体------>转换为Document对象，会成为一个js对象) alert(y.innerHTML); alert(x.index());// 永远是0？ } alert($("h1").index($("#hh2")));// index返回的是一个整数类型，返回的是某个元素的下标 attr alert($("#ins").prop("name"));// attr在1.6之前很常用，虽然这个函数没有被废弃，但是在1.6版本以后就被prop所代替了 attr和prop不但可以获取值，也可以赋值 alert($("input").attr("id","12")); alert($("#12")); $("input").removeAttr("id");// 引出attr addClass：添加样式，类样式 $("span").addClass("test"); $("span").removeClass("test");// 移除样式 $("span").addClass("test2"); alert($("#hh2").css("color"));// css函数获取某个标签的样式的值 alert($("#hh2").offset().left);// 偏移量，说白了坐标 }); </script> </head> <body> <input type="button" name="我是" value="测试" /> <h1 id="hh" name="hh1">h11</h1> <h1 id="hh2" style="color:red;">h12</h1> <h1>h13</h1> <h1>h14</h1> <span>您的用户名格式错误</span> <span>您的密码格式错误</span> </body> </html>
4.绑定事件，trigger
<!DOCTYPE> <html> <head> <meta charset="UTF-8"></meta> <title></title> <style type="text/css"> .test { background: red; color:red; } .test2{ color:green; } </style> <!-- jQuery的文件引入，一定要在jQuery代码之前 --> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(function(){ // 相当于给input框绑定上onclick事件 // 第一种写法 /*$("input").click(function(){ alert(1111); });*/ // 第二种写法 $("ul").on("click","li",function(){// 使用on的时候(如果有选择器的话)，必须要存在上下级的关系 // 选中ul给ul绑定点击事件，这个事件作用于li标签--->直接把事件绑定到了li身上 console.log($(this).text()); }); $("#ins1").click(function(){ alert(22222); }); // 会和你伴随一生 $("#ins1").trigger("click");// 自动触发事件，首先找到id为ins1的input对象，然后触发这个绑定click }); </script> </head> <body> <input id="ins1" type="button" value="测试" /> <input type="button" value="测试" /> <span id="span1">我是span</span> <ul> <li>我是li</li> <li>我是li2</li> </ul> </body> </html>
5.dblclick，change事件
<!DOCTYPE> <html> <head> <meta charset="UTF-8"></meta> <title></title> <style type="text/css"> .test { background: red; color:red; } .test2{ color:green; } </style> <!-- jQuery的文件引入，一定要在jQuery代码之前 --> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(function(){ // 所有的jQuery代码都要写在这里 //在js中所有的事件都需要有一个on前缀 //但是在jQuery中，不需要这个on前缀 $("input").dblclick(function(){// 双击 alert("我是dblclick");//double click }); // 在js中有onsubmit事件---->submit // 当发生改变的时候会调用的函数change $("#ins1").change(function(){ alert("我是change"); }); }); </script> </head> <body> <input type="button" value="测试" /><br /> 用户名<input type="text" id="ins1" /> </body> </html>
6.显示隐藏页面效果，hide，show，toggle；slideUp，slideDown，slideToggle
<!DOCTYPE> <html> <head> <meta charset="UTF-8"></meta> <title></title> <style type="text/css"> .test { background: red; color:red; } .test2{ color:green; } </style> <!-- jQuery的文件引入，一定要在jQuery代码之前 --> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(function(){ // 所有的jQuery代码都要写在这里 // 在js中有隐藏和显示，在jQuery中自带隐藏函数 // 里面的参数：隐藏或显示需要的毫秒数，如果不填默认为0 $("#hide").click(function(){ $("div").hide(1000);// 把一个元素隐藏 }); $("#show").click(function(){ $("div").show(1000);// 把一个元素显示 }); $("#show_or_hide").click(function(){ $("div").toggle(1000);// 自动显示隐藏 }); $("#slide_up").click(function(){ $("div").slideUp(); }); $("#slide_down").click(function(){ $("div").slideDown(); }); $("#slide_toggle").click(function(){ $("div").slideToggle(); }); }); </script> </head> <body> <div style="height: 200px; width: 200px; background: red;"></div> <input id="hide" type="button" value="隐藏" /> <input id="show" type="button" value="显示" /> <input id="show_or_hide" type="button" value="显示/隐藏" /> <input id="slide_up" type="button" value="隐藏" /> <input id="slide_down" type="button" value="显示" /> <input id="slide_toggle" type="button" value="显示/隐藏" /> </body> </html>
7.id选择器，标签选择器，类选择器
<!DOCTYPE> <html> <head> <meta charset="UTF-8"></meta> <title></title> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> <script> // id选择器，标签选择器，类选择器 // 复杂的选择器： $(function(){ var test = $("form>input").val();//"form>input"获取form表单下的第一个直接子元素 alert(test); alert($("label+input").val());// label+input：加号代表是相邻的兄弟元素 var ins = $("label~input");// label~input：~代表所有的兄弟元素 for(var i =0;i < ins.length; i++){ alert(ins.get(i).value); } alert($("li:first").text());//:first 选择出第一个元素 alert($("input:not(#test2)").val());// :not 排除某个元素(可以使用选择器进行选择) $("tr:even").css("background-color","red");// :even 选中所有下标为偶数的元素，实际上选中的为奇数行 $("tr:odd").css("background-color","yellow");// :odd 选中所有下标为奇数的元素，实际上是选中的偶数行 eq:eqauls相等 gt:great than 大于 lt:less than 小于 $("tr:lt(0)").css("background-color","black");// 最小要大于0 $("tr:last").css("background-color","blue");// 选中最后一个元素 $("td:empty").css("background-color", "pink");// 选择文本为空的元素 $("td:contains(22)").css("background-color", "grey");// 选中所有文本带22的元素 $("tr:has(td)").css("background-color", "purple");// 选中包含某个元素的所有元素(选中所有包含td的tr元素) $("td:parent").css("background-color","red");// 选中某个标签的直接父级标签 alert($("tr:hidden").text());// 选中隐藏的元素 alert($("tr:visible").text());// 选中所有可见的元素 $("input[name='test2']").prop("checked", true);// 选中所有name为test2的input标签 alert($("tr td:first-child").text());// 选中第一个子元素 alert($("tr td:last-child").text());// 选中最后一个子元素 }); </script> </head> <body> <form> <input type="" value="ins1" name="ins1" /> <input type="" value="ins2" name="ins2" /> <select> <option>我是select</option> <input type="" value="ins3" name="ins3" /> </select> </form> <form> <label>Name:</label> <input name="name" value="1" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" value="2" /> </fieldset> <input name="none" value="3" /> </form> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <form> <input id="test2" type="" name="ins1" value="1"> <input class="test1" type="" name="ins2" value="2"> </form> <table border="1"> <tbody> <tr> <td>1</td> <td>2</td> </tr> <tr style="display: none;"> <td>11</td> <td>22</td> </tr> <tr> <td>111</td> <td>222</td> </tr> </tbody> </table> <form> <input type="checkbox" name="test1" />男 <input type="checkbox" name="test1" />女 <input type="checkbox" name="test1" />保密 <input type="checkbox" name="test1" />未知 <input type="checkbox" name="test2" />呵呵 </form> </body> </html>
8.表单内标签的获取
<!DOCTYPE> <html> <head> <meta charset="UTF-8"></meta> <title></title> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> <script> $(function(){ // 在jQuery中，只要是表单中的标签，所有都为input $(":input").val();// :input 获取所有的input，包括button，select，textarea，input $(":text").val();// :text 选中所有type="text"的input $(":enabled").val();// DIY选择出自然顺序一个能够输入的input框 }); </script> </head> <body> <h1>登录功能</h1> <form> 用户名：<input type="text" name="uname" disabled="disabled" /><br /> 密码：<input type="password" name="uname" /> <br /> <input type="submit" value="提交" /> </form> </body> </html>
9.三张图片的放大与缩小：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" content="text/html"> <title></title> <style type="text/css"> .img_class { width: 400px; height: 400px; } </style> <script src="jquery-3.2.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ // 第一步：给图片绑定点击事件 // 第二步：获取到图片的src值，并且赋值给需要方法的img标签 // 第三步：把隐藏div需要显示出来 // 第四步：点击关闭按钮的时候，重新隐藏div $(".img_class").click(function(){ var srcValue = $(this).attr("src"); $("#show_img").attr("src", srcValue); var setValue = $("#tbl").offset();// 获取偏移量，说白了也就是坐标(只有left和top) $("#show_div").attr({"left":setValue.left, "top":setValue.top}); $("#show_div").show(1000); }); $("#close_img").click(function(){ $("#show_div").hide(1000); }); }); </script> </head> <body> <div id="show_div" style="position: absolute; display: none;"> <input id="close_img" type="button" name="" value="关闭"><br /> <img id="show_img" style="width: 800px;height: 700px;" src=""> </div> <table id="tbl"> <tr> <td><img class="img_class" src="img/1.jpg"></td> <td><img class="img_class" src="img/2.jpg"></td> <td><img class="img_class" src="img/3.jpg"></td> </tr> </table> </body> </html>
10.Other：
<!DOCTYPE> <html> <head> <meta charset="UTF-8"></meta> <title></title> <style type="text/css">/* 就近原则 */ .odd {/* 偶数行样式 */ background-color: red; } .even {/* 奇数行 */ background-color: blue; } .selected { background-color: black; color:white; } .cars { display: none; } </style> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> <script> $(function(){ // 隔行变色:odd // :odd 偶数行和:even 奇数行 /* $("tr:odd").css("background-color", "red"); $("tr:even").css("background-color","blue");*/ // 需求：高亮显示 $("tbody tr:contains('信阳')").addClass("selected"); // 需求：标题不能改变颜色 $("tbody tr:odd").addClass("odd");// 添加的是一个行内样式 $("tbody tr:even").addClass("even"); $("#show_hide").click(function(){ $(".cars").toggle(); }); }); </script> </head> <body> <table border="1"> <tbody> <tr id="show_hide"> <td><b>汽车</b></td> </tr> <tr class="cars"> <td>G151</td> </tr> <tr class="cars"> <td>G152</td> </tr> <tr class="cars"> <td>G153</td> </tr> </tbody> </table> </body> </html>
