首页 > 代码库 > 初入javascript知识点（七）

初入javascript知识点（七）

2024-08-20 17:52:21   219人阅读

用jQuery重写之前的student数据

html

<!DOCTYPE html>

 

姓名： 年龄： 性别： 

 

姓名年龄性别操作

 

JS

$(function() {
  var data;

  // 1. 获取数据
  if(localStorage.data =http://www.mamicode.com/== undefined) {"text" value="http://www.mamicode.com/‘ + $td.text() + ‘">‘);

    var $operateTd = $(btn).parent();
    $operateTd
      .empty()
      .append($(‘<button>确定</button>‘).on(‘click‘, function() {
        var newValue = http://www.mamicode.com/$td.children().eq(0).val();"cancel">取消</button>‘))
  }

  // 取消修改
  $(‘#tbody‘).on(‘click‘, ‘.cancel‘, showTable);

  // 显示表格
  function showTable() {
    $(‘#tbody‘).empty();
    $.each(data, function(i, n) {
      // console.log(i);
      // console.log(n);
      // console.log(this);
      // console.log(‘========‘);

      $(‘<tr></tr>‘)
        .append($(
          ‘<td>‘ + n.name + ‘</td>‘
          + ‘<td>‘ + n.age + ‘</td>‘
          + ‘<td>‘ + n.gender + ‘</td>‘
          + ‘<td><button class="delete">删除</button><button class="name">修改姓名</button><button class="age">修改年龄</button></td>‘))
        .appendTo($(‘#tbody‘))
    });
  }
});

jQuery写轮播

$(function() {
  $(‘#wrap‘).data(‘index‘, 0);

  $(‘#nav‘).on(‘click‘, ‘li‘, function() {
    // 清除自动播放的定时器
    clearInterval(timer);

    var that = this;
    var index = $(this).index();
    // 把当前要显示的图片的索引号，保存到附加数据中
    $(‘#wrap‘).data(‘index‘, index).animate({
      left: index * (-430)
    }, 600, function() {
      $(‘#nav li‘).removeClass(‘selected‘);
      $(that).addClass(‘selected‘);

      // 重启自动播放的定时器
      timer = setInterval(autoPlay, 2000);
    });
  });

  var timer = setInterval(autoPlay, 2000);

  function autoPlay() {
    // console.log(123);
    // 获取当前的index
    var currentIndex = $(‘#wrap‘).data(‘index‘);

    // 下一张的index
    var nextIndex;
    if(currentIndex === $(‘#wrap img‘).length - 1) {
      nextIndex = 0;
    } else {
      nextIndex = currentIndex + 1;
    }


    // console.log(nextIndex);

    $(‘#wrap‘).data(‘index‘, nextIndex).animate({
      left: nextIndex * (-430)
    }, 600, function() {
      $(‘#nav li‘).removeClass(‘selected‘).eq(nextIndex).addClass(‘selected‘);
    });
  }
});

handlebars 模版引擎

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>handlebars</title>
  <style>
    .big {
      width: 100px;
      height: 100px;
      border: 1px solid green;
      border-radius: 100px;
      position: relative;
    }
    .small {
      width: 50px;
      height: 50px;
      border: 1px solid green;
      border-radius: 50px;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      text-align: center;
      line-height: 50px;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <script id="template" type="text/x-handlebars-template">
    <h1>Hello</h1>
    <h2>Handlebars</h2>
    <table border="1">
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{{name}}</td>
          <td>{{age}}</td>
          <td>{{gender}}</td>
        </tr>
      </tbody>
    </table>
    <p>hello, {{name}}</p>
    <p>{{hello}}</p>
    <table border="1">
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        {{#each listOfStudents}}
          <tr>
            <td>{{name}}</td>
            <td>{{age}}</td>
            <td>{{gender}}</td>
          </tr>
        {{/each}}
      </tbody>
    </table>

    <p>hello, {{{person.a.name}}}</p>
    <p>hello, {{person/a/name}}</p>


    <div class="big">
      <div class="small">
        2
      </div>
    </div>
    <div class="big">
      <div class="small">
        3
      </div>
    </div>
    <div class="big">
      <div class="small">
        4
      </div>
    </div>

    {{circle name}}
    {{circle name}}
    {{circle name}}
  </script>
  <script src="http://www.mamicode.com/js/handlebars-v4.0.5.js"></script>
  <script>
    // 获取模板的源代码
    var source = document.getElementById(‘template‘).innerHTML;

    // 把模板的源代码，编译成模板对象
    var template = Handlebars.compile(source);

    // 创建helper
    Handlebars.registerHelper(‘circle‘, function(data) {
      // return ‘<div class="big"><div class="small">‘ + data + ‘</div></div>‘;

      // 告诉系统，这个返回值要解析成真正的标签
      var obj = new Handlebars.SafeString(‘<div class="big"><div class="small">‘ + data + ‘</div></div>‘);

      return obj;
    });

    // 通过模板对象，获取最终html代码
    var html = template({
      person: {
        a: {
          name: ‘Tom<input type="text">‘
        },
        b: ‘hello‘
      },
      name: ‘Bob‘,
      age: 20,
      gender: ‘male‘,
      test: ‘hello‘,
      listOfStudents: [
        {
          name: ‘bob‘,
          age: 20,
          gender: ‘male‘
        },
        {
          name: ‘tom‘,
          age: 22,
          gender: ‘male‘
        },
        {
          name: ‘Hellen‘,
          age: 20,
          gender: ‘female‘
        },
      ]
    });

    // console.log(html);
    // 把html代码插入到网页中去
    document.getElementById(‘container‘).innerHTML = html;

    // helper
  </script>
</body>
</html>

初入javascript知识点（七）


联系
我们