jQuery心得4--jQuery案例剖析2-开发实用案例
1.窗体运行就加载函数的dom写法与jQuery的区别与jQuery的三种写法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html> <head> <title>demo1.html</title> <!-- 引入jQuery的库 --> <script type="text/javascript" src="../js/jquery-1.9.1.js"></script> <script type="text/javascript"> /* 第一种写法：第二种winod.onload会覆盖第一种 window.onload = function(){ alert("one"); }; window.onload = function(){ alert("two"); }; */ /* 第二种写法：同样后面的也会覆盖前面的 var one=function one(){ alert("one"); }; var two=function one(){ alert("two"); }; window.onload = one; window.onload = two; */ //下面三种jQuery的写法，可以同时加载触发事件 /* //第一种： $(function(){ alert("one"); }); $(function(){ alert("two"); }); //第二种： $(document).ready(function(){ alert("hello one"); }); $(document).ready(function(){ alert("hello two"); }); */ //第三种： $().ready(function(){ alert("hello one"); }); $().ready(function(){ alert("hello two"); }); </script> </head> <body> <div> </div> </body></html> 2.仿各大网站的注册插件之jquery编写的条款多选框<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html> <head> <title>demo2.html</title> <script type="text/javascript" src="../js/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ //当窗体加载完毕触发匿名函数 //id选择器 var $submitBtn = $("#submitBtn"); /* //为按钮注册点击事件 $submitBtn.click(function(){ alert("点击"); }); */ /* //通过jQuery对象与dom对象相互转换完成操作 //为按钮绑定点击事件;第一个参数是绑定事件的类型，第二个参数是触发的函数 $submitBtn.bind("click",function(){ var $ckb = $("#agreeckb"); //获取checkbox的元素对象 //把jQuery对象转换成dom对象 var ckbDom = $ckb[0]; //通过数组下表获取，还有一种通过get（index）； if(ckbDom.checked){ alert("同意注册"); }else{ alert("请选择同意条款"); } }); */ //直接通过jQuery对象的操作实现操作 $submitBtn.click(function(){ var $ckb = $("#agreeckb"); //:checked 是表单过滤器必须这样写！ if($ckb.is(":checked")){ alert("同意注册"); }else{ alert("请选择同意条款"); } }); }); </script> </head> <body> 注册条款：<input type="checkbox" id="agreeckb"/>我已仔细阅读并接受注册条款 <input type="button" value="注册" id="submitBtn"/> </body></html> 3.Jquery的左右移动 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head><title>demo3.html</title><script type="text/javascript" src="../js/jquery-1.9.1.js"></script><script type="text/javascript"> $(document).ready(function() { //获取按钮的元素对象 var $lromve = $("#lromve"); var $lromves = $("#lromves"); //右移操作 //绑定click事件，选中的右移 $lromve.bind("click", function() { //选取id=lopt下面的所有子元素为option的并且被选中的option对象的集合 var $opts = $("#lopt>option:selected"); //在id=ropt的的select中添加option对象集合 $("#ropt").append($opts); }); //绑定click事件；全部右移 $lromves.bind("click", function() { var $opts = $("#lopt>option"); $("#ropt").append($opts); }); //双击的右移操作 $("#lopt").bind("dblclick", function() { //选取id=lopt下面的所有子元素为option的并且被选中的option对象的集合 var $opts = $("#lopt>option:selected"); //在id=ropt的的select中添加option对象集合 $("#ropt").append($opts); }); //左移操作 //获取按钮的元素对象 var $rromve = $("#rromve"); var $rromves = $("#rromves"); //绑定click事件 $rromve.bind("click", function() { //选取id=lopt下面的所有子元素为option的并且被选中的option对象的集合 var $opts = $("#ropt>option:selected"); //alert($opts.text); //在id=ropt的的select中添加option对象集合 $("#lopt").append($opts); }); //绑定click事件 $rromves.bind("click", function() { var $opts = $("#ropt>option"); $("#lopt").append($opts); }); //双击的左移操作 $("#ropt").bind("dblclick", function() { //选取id=lopt下面的所有子元素为option的并且被选中的option对象的集合 var $opts = $("#ropt>option:selected"); //在id=ropt的的select中添加option对象集合 $("#lopt").append($opts); }); });</script></head> <body><div> <div style="float: left; width: 200px; height: 300px; background-color: lightsteelblue; text-align: center;"> <select id="lopt" multiple="multiple" size="9" style="width:80px;"> <option>选项1</option> <option>选项2</option> <option>选项3</option> <option>选项4</option> <option>选项5</option> <option>选项6</option> <option>选项7</option> <option>选项8</option> <option>选项9</option> </select><br><br><input type="button" id="lromves" value="全部右移" style="width: 80px;" /><input type="button" id="lromve" value="选中的右移" style="width: 80px;" /> </div> <div style="width: 200px; height: 300px; background-color: red; text-align: center;"> <select id="ropt" multiple="multiple" size="9" style="width: 80px;"> </select><br><br><input type="button" id="rromves" value="全部左移" style="width: 80px;" /><input type="button" id="rromve" value="选中的左移" style="width: 80px;" /> </div> </div></body></html> 4.jquery的多选反选和全不选<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head><title>demo4.html</title><script type="text/javascript" src="../js/jquery-1.9.1.js"></script><script type="text/javascript"> $(document).ready(function() { //全选 $("#ckbAll").click(function() { $("input[name='fav']").each(function() { this.checked = true; //dom对象写法 }); //$("input[name='fav']").attr("checked", true); //jQuery对象写法，有bug，点击两回之后就不起作用了 }); //选不选 $("#ckbNo").click(function() { $("input[name='fav']").attr("checked", false); }); //反选 $("#ckbRec").click(function() { $("input[name='fav']").each(function() { //$(this).attr("checked", !$(this).attr("checked")); //jQuery对象的写法 this.checked = !this.checked; //dom对象写法 }); }); });</script></head> <body> <div> <input type="checkbox" name="fav" value="看书1" />看书1 <input type="checkbox" name="fav" value="看书2" />看书2 <input type="checkbox" name="fav" value="看书3" />看书3 <input type="checkbox" name="fav" value="看书4" />看书4 <input type="checkbox" name="fav" value="看书5" />看书5 </div> <div> <input type="button" value="全选" id="ckbAll"/> <input type="button" value="全不选" id="ckbNo" /> <input type="button" value="反选" id="ckbRec" /> </div></body></html> 5.仿各大网站的注册移走光标变色操作<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html> <head> <title>demo5.html</title> <script type="text/javascript" src="../js/jquery-1.9.1.js"></script><script type="text/javascript"> $(document).ready(function() { /* $("input").bind("blur",function(){ }); */ //:input获取的是所有input标签中的各种类型的元素对象,以及textarea、select等多种标签；input只获取前者，即input标签所属的属性 $(":input").blur(function(){ $(this).each(function(){ //if(""==this.value.trim()){ if(""==$(this).val().trim()){ $(this).addClass("blur"); }else{ $(this).removeClass("blur"); } }); }); });</script> <style type="text/css">.blur{ border:1px solid red;}</style> </head> <body> <form action=""> 用户名：<input type="text" name="ubane"/><br><br> 密 码：<input type="password" name="ubane"/><br><br> 邮 箱：<input type="text" name="ubane"/><br><br> 个人介绍：<textarea rows="10" cols="30"></textarea> </form> </body></html> 6.tbody交替变色操作<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html> <head> <title>demo2.html</title> <script type="text/javascript" src="../js/jquery-1.9.1.js"></script> <script type="text/javascript"> //当文档加载完毕触发匿名函数 $(document).ready(function(){ //有点区别，研究一下 $("tbody tr:even").css("background-color","blue"); $("tbody>tr:nth-child(even)").css("background-color","yellow"); $("tbody>tr:nth-child(odd)").css("background-color","red"); //会替换红颜色 }); </script> </head> <body> <table border="1" bordercolor="teal"> <thead> <th>序号</th> <th>姓名</th> <th>性别</th> <th>职位</th> </thead> <tbody> <tr id="row1" bgcolor="red" title="aa"> <td>1</td> <td>redarmy</td> <td>M</td> <td>僵尸</td> </tr> <tr id="row2"> <td>2</td> <td>kai</td> <td>M</td> <td>牛掰</td> </tr> <tr id="row3"> <td>3</td> <td>redarmy2</td> <td>M</td> <td>僵尸</td> </tr> <tr id="row4"> <td>4</td> <td>redarmy3</td> <td>M</td> <td>僵尸</td> </tr> <tr> <td>5</td> <td>redarmy4</td> <td>M</td> <td>僵尸</td> </tr> </tbody> </table> </body></html>