JQuer的简单应用
Posted Nevr
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuer的简单应用相关的知识，希望对你有一定的参考价值。
最后一篇了 终于见到了成功的曙光在向我招手啊真是太兴奋啦！！！这次继续由我为大家带来JQuery的一些简单的应用吧
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <style> | |
| div div{ | |
| /*color: red;*/ | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div> | |
| 我是外部div | |
| <div>1111111</div> | |
| <div>2222</div> | |
| <div>33333333333</div> | |
| <div>44444444444444444</div> | |
| </div> | |
| <button >获取并显示第一个div下面的所有的子div元素，并提取显示每个子元素中的内容</button> | |
| <hr/> | |
| <table> | |
| <tr> | |
| <th>序号</th><th>姓名</th><th>性别</th> | |
| </tr> | |
| <tr> | |
| <td>1</td><td>历史1</td><td>男</td> | |
| </tr> | |
| <tr> | |
| <td>2</td><td>历史2</td><td>男</td> | |
| </tr> | |
| <tr> | |
| <td>3</td><td>历史3</td><td>女</td> | |
| </tr> | |
| <tr> | |
| <td>4</td><td>历史4</td><td>男</td> | |
| </tr> | |
| <tr> | |
| <td>5</td><td>历史5</td><td>男</td> | |
| </tr> | |
| </table> | |
| <button onclick="settable()">设置表格效果</button> | |
| <script src="js/jquery-1.12.2.min.js"></script> | |
| <script> | |
| function settable(){ | |
| $("table").css(‘border‘,‘1px solid lightgray‘); | |
| $("table").css({ | |
| ‘width‘:‘600px‘, | |
| ‘border-collapse‘:‘collapse‘, | |
| ‘text-align‘:‘center‘ | |
| }); | |
| $("table th, table td").css(‘border‘,‘1px solid lightgray‘); | |
| $(‘table tr:first‘).css(‘background-color‘,‘#d3d3d3‘); | |
| // $(‘table tr:not(:first):even‘).css(‘background-color‘,‘#eee‘); | |
| $(‘table tr:gt(0):even‘).css(‘background-color‘,‘#eee‘); | |
| $(‘table tr:not(:first):odd‘).css(‘background-color‘,‘#ggg‘); | |
| } | |
| // alert($(‘div div‘).length); | |
| // for(var i=0; i<$(‘div div‘).length; i++){ | |
| // alert($(‘div div‘).eq(i).html()); | |
| // } | |
| // jquery的循环，使用each函数 | |
| // jQuery的each函数，循环所获取的原生的js元素对象 | |
| // $(‘div div‘).each(function(i){ | |
| //// alert(this.innerHTML); | |
| // alert($(this).html()); | |
| // }); | |
| // :first 指代获取第一个元素 | |
| // alert($("div div:first").html()); | |
| // alert($("div div").eq(0).html()); | |
| // alert($("div div:eq(0)").html()); | |
| // $("div div:not(:first)").each(function(i){ | |
| // alert($(this).html()); | |
| // }); | |
| // :even 获取索引序号为偶数的元素 | |
| // $("div div:even").each(function(i){ | |
| // alert($(this).html()); | |
| // }); | |
| // $("div div:odd").css(‘color‘,‘red‘); | |
| </script> | |
| </body> | |
| </html> |
这次的代码是刚学习不久的JQuery代码 个人的话对此也不是太过熟悉 必须要加强对代码的熟练巩固了啊，真是太不好意思了，简单的来说，JQuery使得我们的代码学习书写简单了许多，方便了代码开发的工作者，使之更为快捷的使用编写，辛苦了大佛们。这次的代码则利用的JQuery实现了一个按钮更改页面上的表单元素，也就是css样式，更为轻便。
以上是关于JQuer的简单应用的主要内容，如果未能解决你的问题，请参考以下文章