jQuery练习（二）_2、jquery的练习:微博输入框案例(提交一个html文件) 功能:输入的同时,对还能输入-CSDN博客

本文链接：https://blog.csdn.net/u014610047/article/details/50587790

例6.原生js的tab标签页和jQuery的tab标签页

<html>
<head>
<title>原生js的tab标签页</title>
<style>
* {
  padding: 0;
  margin: 0;
}
ul {
  list-style-type: none;
}
body {
  margin: 50px;
}
#ul {
  height: 30px;
  margin-bottom: 10px;
}
#ul li {
  height: 30px;
  line-height: 30px;
  padding: 0 15px;
  border: 1px solid #abcdef;
  float: left;
  margin-right: 3px;
  cursor: pointer;
}
#ul li.current {
  background: #abcdef;
}
#content div {
  width: 300px;
  height: 200px;
  border: 1px solid #abcdef;
  display: none;
}
#content div.show {
  display: block;
}
</style>
</head>
<body>
<ul id="ul">
  <li class="current">php</li>
  <li>ruby</li>
  <li>python</li>
</ul>
<div class="show">
  <div class="show">php...介绍</div>
  <div>ruby...介绍</div>
  <div>python...介绍</div>
</div>
<script>
  var ul = document.getElementById('ul');
  var li = ul.getElementsByTagName('li');
  var content = document.getElementById('content');
  var div = content.getElementsByTagName('div');
  for(var i = 0; i<li.length; i++){
    li[i].index = i;
    li[i].onclick = function(){
      for(var i = 0; i<li.length; i++){
        li[i].className = '';
        div[i].style.display = 'none';
      };
      this.className = 'current';
      dic[this.index].style.display = 'block';
    }
  };
</script>
</body>
</html>

//jquery的tab标签页（记得引入jquery.js）
//1.点击li的时候要切换样式
$(this).addClass('current').siblings().removeClass('remove');
//2.根据li的索引值，来确定哪个div显示，其他div隐藏
$('#content>div').eq($(this).index()).show().siblings().hide();
//两点合并起来写
/*
$('#ul li').click(function(){      $(this).addClass('current').siblings.removeClass('current'),parent().next().children().eq($(this).index()).show().siblings.hide();
});
*/

例7.jQuery实现搜索功能

<html>
<head>
<title>demo.html</title>
<script src="jquery.js"></script>
<style type="text/css">
table {
  width: 700px;
  border: 1px solid #abcdef;
  border-collapse: collapse;
}
tr {
  height: 30px;
}
th,td {
  borfer: 1px solid #abcdef;
  text-align: center;
}
</style>
</head>
<body>
<table>
  <tr id="thead">
    <th>姓名</th>
    <th>性别</th>
    <th>电话</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>男</td>
    <td>1391191911</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>男</td>
    <td>18620561170</td>
  </tr>
  <tr>
    <td>移动客服</td>
    <td>女</td>
    <td>13800138000</td>
  </tr>
</table>
<input type="text">
<input type="button" value="搜索">
<script>
  $('input[type=button]').click(function(){
  var text = $('input[type=text]').val();
  $('table tr:not("#thead")').hide().filter(':contains("'+text+'")').show();
});
</script>
</body>
</html>

例8.jQuery仿微博输入框功能

<html>
<head>
<title>demo.html</title>
<script src="jquery.js"></script>
</head>
<body>
  <textarea rows="10" cols="30"></textarea>
  <span>你还可以输入<strong style="color:red">140</strong>个字</span>
<script>
  var maxLength = 140;
  $('textarea').keyup(function(){
    var l = $(this).val().length;
    $('strong').text(maxLength-l);

    if(parseInt($('strong').text())<0){
      $('strong').text('0');
      var val = $(this).val().substring(0,140);
      $(this).val(val);
    }
  });
</script>
</body>
</html>