首页 > 代码库 > JQuer的简单应用

JQuer的简单应用

2024-09-09 07:43:42   220人阅读

最后一篇了 终于见到了成功的曙光在向我招手啊真是太兴奋啦！！！这次继续由我为大家带来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="http://www.mamicode.com/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的简单应用


联系
我们