zoukankan      html  css  js  c++  java
  • 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样式,更为轻便。

  • 相关阅读:
    Notes about "Exploring Expect"
    Reuse Sonar Checkstyle Violation Report for Custom Data Analysis
    Eclipse带参数调试的方法
    MIT Scheme Development on Ubuntu
    Manage Historical Snapshots in Sonarqube
    U盘自动弹出脚本
    hg的常用配置
    Java程序员的推荐阅读书籍
    使用shared memory 计算矩阵乘法 (其实并没有加速多少)
    CUDA 笔记
  • 原文地址:https://www.cnblogs.com/cgdblog/p/6571944.html
Copyright © 2011-2022 走看看