几个简单例子的实现

(一)表格隔行变色


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表格隔行变色</title>
  <style>
    div, span, p {
      width: 140px;
      height: 140px;
      margin: 5px;
      background: #aaa;
      border: #000 1px solid;
      float: left;
      font-size: 17px;
      font-family: Verdana;
    }
    div.mini {
      width: 55px;
      height: 55px;
      background-color: #aaa;
      font-size: 12px;
    }
    div.hide {
      display: none;
    }
    #data {
      width: 600px;
    }

    #data, td, th {
      border-collapse: collapse;
      border: 1px solid #aaaaaa;
    }

    th, td {
      height: 28px;
    }

    #data thead {
      background-color: #333399;
      color: #ffffff;
    }
    .odd {
      background-color: #ccccff;
    }
  </style>
</head>
<body>
<table id="data">
  <thead>
  <tr>
    <th>姓名</th>
    <th>工资</th>
    <th>入职时间</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Tom</td>
    <td>$3500</td>
    <td>2018-10-25</td>
    <td><a href="javascript:void(0)">删除</a></td>
  </tr>
  <tr>
    <td>Mary</td>
    <td>$3400</td>
    <td>2018-12-1</td>
    <td><a href="javascript:void(0)">删除</a></td>
  </tr>
  <tr>
    <td>King</td>
    <td>$5900</td>
    <td>2019-08-17</td>
    <td><a href="javascript:void(0)">删除</a></td>
  </tr>
  <tr>
    <td>Scott</td>
    <td>$3800</td>
    <td>2018-11-17</td>
    <td><a href="javascript:void(0)">删除</a></td>
  </tr>
  <tr>
    <td>Smith</td>
    <td>$3100</td>
    <td>2019-01-27</td>
    <td><a href="javascript:void(0)">删除</a></td>
  </tr>
  <tr>
    <td>Allen</td>
    <td>$3700</td>
    <td>2019-12-05</td>
    <td><a href="javascript:void(0)">删除</a></td>
  </tr>
  </tbody>
</table>
<script src="jquery-1.10.1.js"></script>
<script>
  $("#data>tbody>tr:odd").attr('class', 'odd')
</script>
</body>
</html>

效果:



(2)多Tab点击切换

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>多Tab点击切换</title>
  <script src="jquery-1.10.1.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    #tab li {
      float: left;
      list-style: none;
      width: 80px;
      height: 40px;
      line-height: 40px;
      cursor: pointer;
      text-align: center;
    }
    #container {
      position: relative;
    }
    #content1, #content2, #content3 {
      width: 300px;
      height: 100px;
      padding: 30px;
      position: absolute;
      top: 40px;
      left: 0;
    }
    #tab1, #content1 {
      background-color: #ffcc00;
    }
    #tab2, #content2 {
      background-color: #ff00cc;
    }
    #tab3, #content3 {
      background-color: #00ccff;
    }
  </style>
</head>
<body>
<h2>多Tab点击切换</h2>
<ul id="tab">
  <li id="tab1" value="1">10元套餐</li>
  <li id="tab2" value="2">30元套餐</li>
  <li id="tab3" value="3">50元包月</li>
</ul>
<div id="container">
  <div id="content1">
    10元套餐详情:<br/> 每月套餐内拨打100分钟,超出部分2毛/分钟
  </div>
  <div id="content2" style="display: none">
    30元套餐详情:<br/> 每月套餐内拨打300分钟,超出部分1.5毛/分钟
  </div>
  <div id="content3" style="display: none">
    50元包月详情:<br/> 每月无限量随心打
  </div>
</div>
<script>
  $(function () {
    var index = 0
    var $contents = $('#container>div')
    $("#tab>li").click(function () {
      var clickIndex = $(this).index()
      if (clickIndex != index) {
        $contents[index].style.display = 'none'
        $contents[clickIndex].style.display = 'block'
        index = clickIndex
      }
    })
  })
</script>
</body>
</html>
效果:



三、导航动态显示效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>导航动态显示效果</title>
  <script src="jquery-1.10.1.js"></script>
  <style rel="stylesheet">
    * {
      margin: 0;
      padding: 0;
      word-wrap: break-word;
      word-break: break-all;
    }
    body {
      background: #FFF;
      color: #333;
      font: 12px/1.6em Helvetica, Arial, sans-serif;
    }
    a {
      color: #0287CA;
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
    ul, li {
      list-style: none;
    }
    img {
      border: none;
    }
    h1, h2, h3, h4, h5, h6 {
      font-size: 1em;
    }
    html {
      overflow: -moz-scrollbars-vertical; /* 在Firefox下始终显示滚动条*/
    }
    #navigation {
      width: 784px;
      padding: 8px;
      margin: 8px auto;
      background: #3B5998;
      height: 18px;
    }
    #navigation ul li {
      float: left;
      margin-right: 14px;
      position: relative;
      z-index: 100;
    }
    #navigation ul li a {
      display: block;
      padding: 0 8px;
      background: #EEEEEE;
      font-weight: 700;
    }
    #navigation ul li a:hover {
      background: none;
      color: #fff;
    }
    #navigation ul li ul {
      background-color: #88C366;
      position: absolute;
      width: 80px;
      overflow: hidden;
      display: none;
    }
    #navigation ul li ul li {
      border-bottom: 1px solid #BBB;
      text-align: left;
      width: 100%;
    }
  </style>
</head>
<body>
<div id="navigation">
  <ul>
    <li><a href="#">首 页</a></li>
    <li>
      <a href="#">衬 衫</a>
      <ul>
        <li><a href="#">短袖衬衫</a></li>
        <li><a href="#">长袖衬衫</a></li>
        <li><a href="#">无袖衬衫</a></li>
      </ul>
    </li>
    <li>
      <a href="#">卫 衣</a>
      <ul>
        <li><a href="#">开襟卫衣</a></li>
        <li><a href="#">套头卫衣</a></li>
      </ul>
    </li>
    <li>
      <a href="#">裤 子</a>
      <ul>
        <li><a href="#">休闲裤</a></li>
        <li><a href="#">卡其裤</a></li>
        <li><a href="#">牛仔裤</a></li>
        <li><a href="#">短裤</a></li>
      </ul>
    </li>
    <li><a href="#">联系我们</a></li>
  </ul>
</div>
<script>
  $("#navigation>ul>li:has(ul)").hover(function () {
    $(this).children("ul").stop().slideDown(400)
  }, function () {
    $(this).children("ul").stop().slideUp("fast")
  })
</script>
</body>
</html>
效果:



四、爱好选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>全选</title>
</head>
<body>
<form>
  你爱好的运动是?<input type="checkbox" id="checkedAllBox"/>全选/全不选
  <br/>
  <input type="checkbox" name="items" value="足球"/>足球
  <input type="checkbox" name="items" value="篮球"/>篮球
  <input type="checkbox" name="items" value="羽毛球"/>羽毛球
  <input type="checkbox" name="items" value="乒乓球"/>乒乓球
  <br/>
  <input type="button" id="checkedAllBtn" value="全 选"/>
  <input type="button" id="checkedNoBtn" value="全不选"/>
  <input type="button" id="checkedRevBtn" value="反 选"/>
  <input type="button" id="sendBtn" value="提 交"/>
</form>
<script src="jquery-1.10.1.js"></script>
<script type="text/javascript">
  /*
   功能说明:
   1. 点击'全选': 选中所有爱好
   2. 点击'全不选': 所有爱好都不勾选
   3. 点击'反选': 改变所有爱好的勾选状态
   4. 点击'全选/全不选': 选中所有爱好, 或者全不选中
   5. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
   6. 点击'提交': 提示所有勾选的爱好
   */
  $(function () {
    var $Items = $(':checkbox[name=items]')
    var $checkedAllBox = $('#checkedAllBox')
    // 1. 点击'全选': 选中所有爱好
    $('#checkedAllBtn').click(function () {
      $Items.prop('checked', true)
      $checkedAllBox.prop('checked', true)
    })
    // 2. 点击'全不选': 所有爱好都不勾选
    $('#checkedNoBtn').click(function () {
      $Items.prop('checked', false)
      $checkedAllBox.prop('checked', false)
    })
    // 3. 点击'反选': 改变所有爱好的勾选状态
    $('#checkedRevBtn').click(function () {
      $Items.each(function () {
        this.checked = !this.checked
      })
      $checkedAllBox.prop('checked',
$Items.filter(':not(:checked)').size()===0)
    })
    // 4. 点击'全选/全不选': 选中所有爱好, 或者全不选中
    $checkedAllBox.click(function () {
      $Items.prop('checked', this.checked)
    })
    // 5. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
    $Items.click(function () {
      $checkedAllBox.prop('checked',
$Items.filter(':not(:checked)').size()===0)
    })
    // 6. 点击'提交': 提示所有勾选的爱好
    $('#sendBtn').click(function () {
      $Items.filter(':checked').each(function () {
        alert(this.value)
      })
    })
  })
</script>
</body>
</html>
效果:



五、添加删除记录

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>添加删除记录</title>
  <link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>
<table id="employeeTable">
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Salary</th>
    <th> </th>
  </tr>
  <tr>
    <td>Tom</td>
    <td>[email protected]</td>
    <td>5000</td>
    <td><a href="deleteEmp?id=001">Delete</a></td>
  </tr>
  <tr>
    <td>Jerry</td>
    <td>[email protected]</td>
    <td>8000</td>
    <td><a href="deleteEmp?id=002">Delete</a></td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>[email protected]</td>
    <td>10000</td>
    <td><a href="deleteEmp?id=003">Delete</a></td>
  </tr>
</table>
<div id="formDiv">
  <h4>添加新员工</h4>
  <table>
    <tr>
      <td class="word">name:</td>
      <td class="inp">
        <input type="text" name="empName" id="empName"/>
      </td>
    </tr>
    <tr>
      <td class="word">email:</td>
      <td class="inp">
        <input type="text" name="email" id="email"/>
      </td>
    </tr>
    <tr>
      <td class="word">salary:</td>
      <td class="inp">
        <input type="text" name="salary" id="salary"/>
      </td>
    </tr>
    <tr>
      <td colspan="2" align="center">
        <button id="addEmpButton" value="abc">
          Submit
        </button>
      </td>
    </tr>
  </table>
</div>
<script src="jquery-1.10.1.js" type="text/javascript"
charset="utf-8"></script>
<script type="text/javascript">
  /*
   功能说明:
   1. 点击'Submit', 根据输入的信息在表单中生成一行员工信息
   2. 点击Delete链接, 提示删除当前行信息, 点击确定后删除信息
   技术要点:
   1. DOM查询
   2. 绑定事件监听
   3. DOM增删改
   4. 取消事件的默认行为
   */
  $(function () {
    $('#addEmpButton').click(function () {
      var $empName = $('#empName')
      var $email = $('#email')
      var $salary = $('#salary')
      var empName = $empName.val()
      var email = $empName.val()
      var salary = $empName.val()
      var id = Date.now()
      /*
       <tr>
         <td>Bob</td>
         <td>[email protected]</td>
         <td>10000</td>
         <td><a href="deleteEmp?id=003">Delete</a></td>
       </tr>
       */
      $('<tr></tr>')
        .append('<td>'+empName+'</td>')
        .append('<td>'+email+'</td>')
        .append('<td>'+salary+'</td>')
        .append('<td><a href="deleteEmp?id="'+id+'>Delete</a></td>')
        .appendTo('#employeeTable')
        .find('a')
        .click(clickA)
      $empName.val('')
      $email.val('')
      $salary.val('')
    })
    $('a').click(clickA)
    function clickA (event) {
      event.preventDefault()
      var $tr = $(this).parent().parent()
      var name = $tr.children('td:first').html()
      if(confirm('确定删除'+name+'吗?')) {
        $tr.remove()
      }
    }
  })
</script>
</body>
</html>


六、焦点轮播图

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>焦点轮播图</title>
  <style type="text/css">
    /*去除内边距,没有链接下划线*/
    * {
      margin: 0;
      padding: 0;
      text-decoration: none;
    }
    /*让<body有20px的内边距*/
    body {
      padding: 20px;
    }
    /*最外围的div*/
    #container {
      width: 600px;
      height: 400px;
      overflow: hidden;
      position: relative; /*相对定位*/
      margin: 0 auto;
    }
    /*包含所有图片的<div>*/
    #list {
      width: 4200px; /*7张图片的宽: 7*600 */
      height: 400px;
      position: absolute; /*绝对定位*/
      z-index: 1;
    }
    /*所有的图片<img>*/
    #list img {
      float: left; /*浮在左侧*/
    }
    /*包含所有圆点按钮的<div>*/
    #pointsDiv {
      position: absolute;
      height: 10px;
      width: 100px;
      z-index: 2;
      bottom: 20px;
      left: 250px;
    }
    /*所有的圆点<span>*/
    #pointsDiv span {
      cursor: pointer;
      float: left;
      border: 1px solid #fff;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #333;
      margin-right: 5px;
    }
    /*第一个<span>*/
    #pointsDiv .on {
      background: orangered;
    }
    /*切换图标<a>*/
    .arrow {
      cursor: pointer;
      display: none;
      line-height: 39px;
      text-align: center;
      font-size: 36px;
      font-weight: bold;
      width: 40px;
      height: 40px;
      position: absolute;
      z-index: 2;
      top: 180px;
      background-color: RGBA(0, 0, 0, 0.3);
      color: #fff;
    }
    /*鼠标移到切换图标上时*/
    .arrow:hover {
      background-color: RGBA(0, 0, 0, 0.7);
    }
    /*鼠标移到整个div区域时*/
    #container:hover .arrow {
      display: block; /*显示*/
    }
    /*上一个切换图标的左外边距*/
    #prev {
      left: 20px;
    }
    /*下一个切换图标的右外边距*/
    #next {
      right: 20px;
    }
  </style>
</head>
<body>
<div id="container">
  <div id="list" style="left: -600px;">
    <img src="img/5.jpg" alt="5"/>
    <img src="img/1.jpg" alt="1"/>
    <img src="img/2.jpg" alt="2"/>
    <img src="img/3.jpg" alt="3"/>
    <img src="img/4.jpg" alt="4"/>
    <img src="img/5.jpg" alt="5"/>
    <img src="img/1.jpg" alt="1"/>
  </div>
  <div id="pointsDiv">
    <span index="1" class="on"></span>
    <span index="2"></span>
    <span index="3"></span>
    <span index="4"></span>
    <span index="5"></span>
  </div>
  <a href="javascript:;" id="prev" class="arrow"><</a>
  <a href="javascript:;" id="next" class="arrow">></a>
</div>
<script src="./js/jquery.1.10.2.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
效果:


友情链接
KaDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:[email protected]
QQ群:637538335
关注微信