您的位置：首页 > Web前端 > JQuery

jQuery练习（二）

2016-01-26 15:43 585 查看

例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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery

相关文章推荐

新的分享

章节导航