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

jQuery经典案例

2016-02-27 12:46 639 查看
示例1：鼠标点击左侧菜单实现打开和关闭功能：
html及css代码部分：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
/*css代码*/
<style>
/*下面定义的样式是隐藏*/
.hide {
display: none;
}

</style>
</head>

<div>
<div onclick="Change(this);">菜单一</div>
<div class="content hide">
<div>一</div>
<div>二</div>
<div>三</div>
</div>
</div>

<div>
<div onclick="Change(this);">菜单二</div>
<div class="content hide">
<div>一</div>
<div>二</div>
<div>三</div>
</div>
</div>

<div>
<div onclick="Change(this);">菜单三</div>
<div class="content hide">
<div>一</div>
<div>二</div>
<div>三</div>
</div>
</div>

<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/tab.js"></script>
<script type="text/javascript">
</script>

</body>
</html>

js 代码如下：

function Change(arg){
//选择器案列：
/*找到，到底点击一个
var t=$(arg).text();
$(arg) 当前点击的标签
*/

/*
隐藏闭合标签步骤：
1找到下一个标签，移除hide  【注意：hide 是自己定义的class样式】
1）$(arg).next() 下一个标签
2）removeClass('hide') 移除标签
2.找到其他标签，将内容隐藏，添加hide
1）当前标签的父亲标签 $(arg).parent()
2) 所有父亲标签的兄弟标签 $(arg).parent('content').siblings('hide') 【注意：content 是每个子标签共有的一个样式】
*/
$(arg).next().removeClass('hide');
$(arg).parent().siblings().find('.content').addClass('hide');
}

示例2：实现全选、反选、取消 功能：
html及css代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
/*CSS代码*/
<style>
.subBorder {
position: fixed;
left: 50%;
right: 50%;
width: 400px;
height: 200px;
margin: 0 auto;
background: #999999;
}

.hide {
display: none;
}

#dialog form {
text-align: center;
}
</style>
</head>

<input type="button" onclick="CheckAll();" value="全选" />
<input type="button" onclick="CheckReverse();" value="反选" />
<input type="button" onclick="CheckCancel();" value="取消" />

<table  border="2">
<thead></thead>
<tbody id="tb1">
<tr>
<td><input type="checkbox" /></td>
<td>mysql-001</td>
<td>10.10.8.10</td>
<td>15379</td>
</tr>

<tr>
<td><input type="checkbox" /></td>
<td>redis-001</td>
<td>10.10.9.10</td>
<td>16379</td>
</tr>

<tr>
<td><input type="checkbox" /></td>
<td>monitor-001</td>
<td>10.10.10.10</td>
<td>17379</td>
</tr>
</tbody>

</table>

<div id="dialog" class="subBorder hide">
<form action="" method="get">
<p>主机名：<input type="text" id="hostname"/></p>
<p>ip地址：<input type="text" id="ip" /></p>
<p>端口号：<input type="text" id="port"/></p>
<input type="submit" onclick="return SubmitForm();" value="确认"/>
<input type="button" onclick="Cancel();" value="取消"/>
</form>

</div>

<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/checked.js"></script>
<script type="text/javascript">

</script>

</body>
</html>

js 代码如下：

//全选
function CheckAll(){
//$('#tb1').find(':checkbox').attr('checked','checked');
$('#tb1').find(':checkbox').prop('checked',true);
}

//反选

function CheckReverse(){
//找，如果选中，取消，位选中，则选中
$('#tb1').find(':checkbox').each(function(){
//$(this) 等于 每一个复选框
//$(this).prop() 如果选中，true，否则false
//attr 如果选中，checked，checked=checked
if($(this).prop('checked')){
$(this).prop('checked',false);
}else{
$(this).prop('checked',true);
}
});
}

function CheckCancel(){
//$('#tb1').find(':checkbox').removeAttr('checked'); <==>
$('#tb1').find(':checkbox').prop('checked',false);
}

示例3：实现弹出编辑对话框及编辑功能：
html及css代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
/*css代码*/
<style>
.subBorder {
position: fixed;
left: 50%;
right: 50%;
width: 400px;
height: 200px;
margin-left: -200px;
margin-bottom: -100px;
background: #999999;
}

.hide {
display: none;
}

#dialog form {
text-align: center;
}
</style>

</head>
<table  border="2">
<thead></thead>
<tbody>
<tr>
<td>mysql-001</td>
<td>10.10.8.10</td>
<td>15379</td>
<td onclick="GetPrev(this);">编辑</td>
</tr>

<tr>
<td>redis-001</td>
<td>10.10.9.10</td>
<td>16379</td>
<td onclick="GetPrev(this);">编辑</td>
</tr>

<tr>
<td>monitor-001</td>
<td>10.10.10.10</td>
<td>17379</td>
<td onclick="GetPrev(this);">编辑</td>
</tr>
</tbody>
</table>

<div id="dialog" class="subBorder hide">
<form action="" method="get">
<p>主机名：<input type="text" id="hostname"/></p>
<p>ip地址：<input type="text" id="ip" /></p>
<p>端口号：<input type="text" id="port"/></p>
<input type="submit" onclick="return SubmitForm();" value="确认"/>
<input type="button" onclick="Cancel();" value="取消"/>
</form>
</div>

<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/edit.js"></script>
<script type="text/javascript">
</script>

</body>
</html>

js 代码如下：

function GetPrev(getvalue){
var list = [];
$.each($(getvalue).prevAll(),function(i){
var item = $(getvalue).prevAll()[i];
var text = $(item).text();
list.push(text);
});

var new_list = list.reverse();
//在弹出框的hostname中设置值
$("#hostname").val(new_list[0]);
$("#ip").val(new_list[1]);
$("#port").val(new_list[2]);
$("#dialog").removeClass("hide");

}

function Cancel(){
$("#dialog").addClass("hide");
}

function SubmitForm(){
//获取表单中的input值，并在判断值是否为空
var ret=true;
//遍历所有的input，只要值为空，就将ret设置为false
//$("input[type='text']") <==> $(':text')
$(':text').each(function(){
//$(this) 等于要循环的每一个元素
var value=$(this).val();
if (value.trim().length==0){ //判断长度是否为0. 或判断是否为空：<==> if (value.itrm()=="") //trim: 去除空格
$(this).css('border-color','red'); //设置边框为红色（意思是：如果用户输入为空，则边框显示红色警示）
ret=false //设置false
}else{
$(this).css('border-color','green') //当输入不为空时，提交时将所有不为空的元素边框设置为绿色
}
});
return ret;
}

更多链接：http://www.cnblogs.com/wupeiqi/articles/4457274.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航