前端基础之jquery练习
实例练习
左侧菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>left_menu</title> <style>
.menu{
height: 500px;
width: 20%;
background-color: gainsboro;
text-align: center;
float: left;
}
.content{
height: 500px;
width: 80%;
background-color: darkgray;
float: left;
}
.title{
line-height: 50px;
background-color: wheat;
color: rebeccapurple;} .hide{
display: none;
} </style>
</head>
<body> <div class="outer">
<div class="menu">
<div class="item">
<div class="title">菜单一</div>
<div class="con">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title">菜单二</div>
<div class="con hide">
<div>222</div>
<div>222</div>
<div>222</div>
</div>
</div>
<div class="item">
<div class="title">菜单三</div>
<div class="con hide">
<div>333</div>
<div>333</div>
<div>333</div>
</div>
</div> </div>
<div class="content"></div> </div>
<script src="jquery.min.js"></script>
<script>
$(".item .title").mouseover(function () {
$(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide"); // $(this).next().removeClass("hide");
// $(this).parent().siblings().children(".con").addClass("hide");
})
</script> </body>
</html>
Tab切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title> <style>
*{
margin: 0;
padding: 0;
}
.tab_outer{
margin: 20px auto;
width: 60%;
}
.menu{
background-color: #cccccc;
/*border: 1px solid red;*/
line-height: 40px;
text-align: center;
}
.menu li{
display: inline-block;
margin-left: 14px;
padding:5px 20px; }
.menu a{
border-right: 1px solid red;
padding: 11px;
}
.content{
background-color: tan;
border: 1px solid green;
height: 300px; }
.hide{
display: none;
} .current{
background-color: #2868c8;
color: white;
border-top: solid 2px rebeccapurple;
}
</style>
</head>
<body>
<div class="tab_outer">
<ul class="menu">
<li relation="c1" class="current">菜单一</li>
<li relation="c2" >菜单二</li>
<li relation="c3">菜单三</li>
</ul>
<div class="content">
<div id="c1">内容一</div>
<div id="c2" class="hide">内容二</div>
<div id="c3" class="hide">内容三</div>
</div> </div>
</body> <script src="jquery.min.js"></script>
<script>
$(".menu li").click(function(){ var index=$(this).attr("relation");
$("#"+index).removeClass("hide").siblings().addClass("hide");
$(this).addClass("current").siblings().removeClass("current"); }); </script>
</html>
table正反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body> <button>全选</button>
<button>取消</button>
<button>反选</button>
<hr>
<table border="1">
<tr>
<td><input type="checkbox"></td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
</table> <script src="jquery.min.js"></script>
<script> $("button").click(function(){ if($(this).text()=="全选"){ // $(this)代指当前点击标签 $("table :checkbox").prop("checked",true)
}
else if($(this).text()=="取消"){
$("table :checkbox").prop("checked",false)
}
else {
$("table :checkbox").each(function(){ $(this).prop("checked",!$(this).prop("checked")); });
} }); </script>
</body>
</html>
模态对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
}
.back{
background-color: wheat;
height: 2000px;
} .shade{
position: fixed;
top: 0;
bottom: 0;
left:0;
right: 0;
background-color: darkgray;
opacity: 0.4;
} .hide{
display: none;
} .models{
position: fixed;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
height: 200px;
width: 200px;
background-color: white; }
</style>
</head>
<body>
<div class="back">
<input id="ID1" type="button" value="click" onclick="action1(this)">
</div> <div class="shade hide"></div>
<div class="models hide">
<input id="ID2" type="button" value="cancel" onclick="action2(this)">
</div> <script src="jquery.min.js"></script>
<script> function action1(self){
$(self).parent().siblings().removeClass("hide"); }
function action2(self){
//$(self).parent().parent().children(".models,.shade").addClass("hide") $(self).parent().addClass("hide").prev().addClass("hide") }
</script>
</body>
</html>
复制样式条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body>
<div class="outer">
<div class="item">
<input type="button" value="+">
<input type="text">
</div>
</div> <script src=jquery.min.js></script>
<script> function add(self){
// 注意:if var $clone_obj=$(".outer .item").clone();会一遍二,二变四的增加
var $clone_obj=$(self).parent().clone();
$clone_obj.children(":button").val("-").attr("onclick","removed(this)");
$(self).parent().parent().append($clone_obj);
}
function removed(self){ $(self).parent().remove() } /*
$("[value='+']").click(function(){ var $clone_obj=$(this).parent().clone();
$clone_obj.children(":button").val("-").attr("class","mark");
$(this).parent().parent().append($clone_obj); }); $(".outer").on("click",".item .mark",function(){ console.log($(this)); // $(this): .item .mark标签
$(this).parent().remove() }) */ </script>
</body>
</html>
注册验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <form class="Form" id="form"> <p><input class="v1" type="text" name="username" mark="用户名"></p>
<p><input class="v1" type="text" name="email" mark="邮箱"></p>
<p><input type="submit" value="submit"></p> </form> <script src="jquery.min.js"></script>
<script> $("#form :submit").click(function(){
flag=true; $("#form .v1").each(function(){ $(this).next("span").remove();// 防止对此点击按钮产生多个span标签 var value=$(this).val(); if (value.trim().length==0){
var mark=$(this).attr("mark");
var ele=document.createElement("span");
ele.innerHTML=mark+"不能为空!";
$(this).after(ele);
$(ele).prop("class","error");// DOM对象转换为jquery对象
flag=false;
return false ; //-------->引出$.each的return false注意点
} }); return flag
}); </script>
</body>
</html>
拖动面板
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="border: 1px solid #ddd;width: 600px;position: absolute;">
<div id="title" style="background-color: black;height: 40px;color: white;">
标题
</div>
<div style="height: 300px;">
内容
</div>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(function(){
// 页面加载完成之后自动执行
$('#title').mouseover(function(){
$(this).css('cursor','move');
}).mousedown(function(e){
//console.log($(this).offset());
var _event = e || window.event;
// 原始鼠标横纵坐标位置
var ord_x = _event.clientX;
var ord_y = _event.clientY; var parent_left = $(this).parent().offset().left;
var parent_top = $(this).parent().offset().top; $(this).on('mousemove', function(e){
var _new_event = e || window.event;
var new_x = _new_event.clientX;
var new_y = _new_event.clientY; var x = parent_left + (new_x - ord_x);
var y = parent_top + (new_y - ord_y); $(this).parent().css('left',x+'px');
$(this).parent().css('top',y+'px'); })
}).mouseup(function(){
$(this).off('mousemove');
});
})
</script>
</body>
</html>
轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-3.1.1.js"></script>
<title>Title</title> <style> .outer{
width: 790px;
height: 340px;
margin: 80px auto;
position: relative;
} .img li{
position: absolute;
list-style: none;
top: 0;
left: 0;
display: none;
} .num{
position: absolute;
bottom: 18px;
left: 270px;
list-style: none; } .num li{
display: inline-block;
width: 18px;
height: 18px;
background-color: white;
border-radius: 50%;
text-align: center;
line-height: 18px;
margin-left: 4px;
} .btn{
position: absolute;
top:50%;
width: 30px;
height: 60px;
background-color: lightgrey;
color: white; text-align: center;
line-height: 60px;
font-size: 30px;
opacity: 0.7;
margin-top: -30px; display: none; } .left{
left: 0;
} .right{
right: 0;
} .outer:hover .btn{
display: block;
} .num .active{
background-color: red;
}
</style> </head>
<body> <div class="outer">
<ul class="img">
<li style="display: block"><a href=""><img src="img/1.jpg" alt=""></a></li>
<li><a href=""><img src="img/2.jpg" alt=""></a></li>
<li><a href=""><img src="img/3.jpg" alt=""></a></li>
<li><a href=""><img src="img/4.jpg" alt=""></a></li>
<li><a href=""><img src="img/5.jpg" alt=""></a></li>
<li><a href=""><img src="img/6.jpg" alt=""></a></li>
</ul> <ul class="num">
<!--<li class="active"></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
</ul> <div class="left btn"> < </div>
<div class="right btn"> > </div> </div>
<script src="jquery-3.1.1.js"></script>
<script>
var i=0;
// 通过jquery自动创建按钮标签 var img_num=$(".img li").length; for(var j=0;j<img_num;j++){
$(".num").append("<li></li>")
} $(".num li").eq(0).addClass("active"); // 手动轮播 $(".num li").mouseover(function () {
i=$(this).index();
$(this).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).stop().fadeIn(200).siblings().stop().fadeOut(200) }); // 自动轮播
var c=setInterval(GO_R,1500); function GO_R() { if(i==img_num-1){
i=-1
}
i++;
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000) } function GO_L() {
if(i==0){
i=img_num
}
i--;
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); // fadeIn,fadeOut单独另开启的线程 }
$(".outer").hover(function () {
clearInterval(c)
},function () {
c=setInterval(GO_R,1500)
}); // button 加定播
$(".right").click(GO_R);
$(".left").click(GO_L) </script>
</body>
</html>
表格编辑操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="jquery-2.1.4.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script> <style> .container .row td{
padding: 10px;
} #box{ padding-top:50px;
} .add{
margin:20px 0;
} </style>
</head>
<body> <div class="container">
<div class="row"> <div class="col-md-7 col-lg-offset-3" id="box" >
<div>
<button type="button" class="btn btn-success add" data-toggle="modal" data-target="#myModal">
添加员工信息
</button>
</div> <table class="table table-striped">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>部门</th>
<th>薪水</th>
<th>操作</th>
</tr> <tr>
<td>张三</td>
<td>23</td>
<td>销售部</td>
<td>3000</td>
<td>
<button class="btn btn-danger btn-sm del">删除</button>
<button class="btn btn-info btn-sm edit">编辑</button>
<button class="btn btn-primary btn-sm">查看</button>
</td>
</tr> <tr class="handle">
<td>李四</td>
<td>32</td>
<td>保安部</td>
<td>5000</td>
<td>
<button class="btn btn-danger btn-sm del">删除</button>
<button class="btn btn-info btn-sm edit">编辑</button>
<button class="btn btn-primary btn-sm">查看</button>
</td>
</tr>
</table>
</div> </div> </div> <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body"> <div class="row"> <div class="col-md-5 col-lg-offset-3">
<form class="add_form edit_form">
<div class="form-group">
<label for="username">姓名</label>
<input type="text" class="form-control" id="username" placeholder="username">
</div>
<div class="form-group">
<label for="age">年龄</label>
<input type="text" class="form-control" id="age" placeholder="age">
</div>
<div class="form-group">
<label for="dep">部门</label>
<input type="text" id="dep" placeholder="dep" class="form-control"> </div> <div class="form-group">
<label for="salary">薪水</label>
<input type="text" class="form-control" id="salary" placeholder="salary">
</div>
</form>
</div>
</div> </div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary add_save">Save changes</button>
<button type="button" class="btn btn-primary edit_save" style="display: none">Save changes</button> </div>
</div>
</div>
</div> <script>
// 提炼出一个创建tr的函数
function createTr(){
var $tr=$("<tr>"); $(".add_form :text").each(function(){ $tr.append($("<td>").html($(this).val()))
}); $handle=$(".handle td:last").clone();
$tr.append($handle); return $tr
} // 添加按钮 $(".add_save").click(function(){ $("#myModal").modal("hide"); var $tr=createTr(); $(".table tbody").append($tr) }); // 删除按钮
$("table").on("click",".del",function(){
$(this).parent().parent().remove()
}); //编辑按钮 $("table").on("click",".edit",function(){
var $edit_obj=$(this).parent().parent();
var arr=[];
$(this).parent().siblings().each(function(){
arr.push($(this).text()) }); $(".edit_form :text").each(function(i){
$(this).val(arr[i])
}); $("#myModal").modal("show"); $(".edit_save").show().prev().hide();
$(".edit_save").click(function(){
$("#myModal").modal("hide"); // 创建tr标签
var $tr=createTr();
$edit_obj.replaceWith($tr);
$(".edit_save").hide().prev().show();
}); }) </script> </body>
</html>
注册实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.error{
color:red
}
</style>
</head>
<body> <form class="Form"> <p><input class="v1" type="text" name="username" mark="用户名"></p>
<p><input class="v1" type="text" name="email" mark="邮箱"></p>
<p><input type="submit" value="submit"></p> </form> <script src="jquery-2.1.4.min.js"></script> <script>
$(".Form :submit").click(function(){ flag=true; $("Form .v1").each(function(){ var value=$(this).val();
if (value.trim().length==0){
var mark=$(this).attr("mark");
var $span=$("<span>");
$span.html(mark+"不能为空!");
$span.prop("class","error");
$(this).after($span); setTimeout(function(){
$span.remove();
},800); flag=false;
return flag;
} }); return flag }); </script> </body>
</html>
前端基础之jquery练习的更多相关文章
- 前端基础之:JQuery(可编辑版)
前端基础之jquery 一 jQuery是什么? ［1］ jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. ［2］ ...
- 进击的Python【第十六章】：Web前端基础之jQuery
进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...
- 前端第四篇---前端基础之jQuery
前端第四篇---前端基础之jQuery 一.jQuery介绍 二.jQuery对象 三.jQuery基础语法 四.事件 五.动画效果 六.补充each 一.jQuery简介 1.jQuery介绍 jQ ...
- Python学习（二十三）—— 前端基础之jQuery
转载自http://www.cnblogs.com/liwenzhou/p/8178806.html 一.jQuery入门 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQue ...
- 前端基础 之 jQuery
浏览目录 jQuery介绍 jQuery的优势 jQuery对象 jQuery内容 一.jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户 ...
- 四丶前端基础之jquery
知识预览 一 jQuery是什么? 二 什么是jQuery对象? 三 寻找元素(选择器和筛选器) 四 操作元素(属性,css,文档处理) 扩展方法 (插件机制) 回到顶部 一 jQuery是什么? ［ ...
- 前端基础之jQuery
JavaScript和jQuery的区别 JavaScript是一门编程语言,我们用它来编写客户端浏览器脚本 jQuery是javascript的一个库,包含多个可重用的函数,用来辅助我们简化java ...
- 前端基础之JQuery - day15
写在前面 上课第15天,打卡: 张国臂掖,以通西域: ########### # 课上简书 # ########## http://jquery.cuishifeng.cn/index.html JQ ...
- 前端基础（jQuery）
jquery: JS Bootstrap jquery: write less do more jquery对象: Jquery.方法 ======= $.方法 jquery的基础语法:$(selec ...
- 前端基础之jQuery（Day55）
阅读目录 一 jQuery是什么? 二 什么是jQuery对象? 三 寻找元素(选择器和筛选器) 四 操作元素(属性,css,文档处理) 扩展方法 (插件机制) 一. jQuery是什么? ［1］ ...
随机推荐
- java - day12 - InteraceTest
接口的实现.继承等 package test.interfacedemo; import test.interfacedemo.Inter; public class InterfaceDemo { ...
- centos 7 下安装haproxy
1 haproxy 下载 从如下目录下载haproxy:http://www.haproxy.org/download/1.7/src/haproxy-1.7.1.tar.gz 2 haproxy 安 ...
- Snowflake Snow Snowflakes - poj 3349 (hash函数)
判断n朵雪花中,是否有完全一样的雪花.简单的hash,将雪花的六个边的权值加起来,记为sum,将sum相等的雪花归为一类,再在这里面根据题意找完全相同的,判断顺时针或者逆时针的所有角是否一模一样. # ...
- 【Ubuntu安装,ATX基于uiautomator2】之安装步骤
Ubuntu系统下安装uiautomator2步骤: 1.安装命令: pip install --upgrade --pre uiautomator2 但是报错: Command "pyth ...
- jvisualvm远程调试
远程服务器端 (1)设置jstatd.all.policy 文件 grant codebase "file:${java.home}/../lib/tools.jar" { per ...
- Spring MVC Hibernate验证器
下面的示例演示如何使用Spring Web MVC框架在表单中使用错误处理和验证器. 首先使用Eclipse IDE,并按照以下步骤使用Spring Web Framework开发基于动态表单的Web ...
- JavaScript 对大小写敏感。
JavaScript 对大小写是敏感的. 当编写 JavaScript 语句时,请留意是否关闭大小写切换键. 函数 getElementById 与 getElementbyID 是不同的. 同样,变 ...
- posix正则表达式说明
转载自:http://baiy.cn/utils/_regex_doc/index.htm 正则表达式说明 简介 大体来讲,正则表达式的文法分为3种标准:BRE.ERE 和 ARE.其中 BER 和 ...
- Laravel5.1 路由 -路由分组
路由分组有啥好处? 有时候啊 一大堆路由它们都有共同的地方,比如都使用一个中间件(过两天写)或是前缀都一样,避免代码重复 我们可以将他们分到一组中. 1 路由分组可以共享哪些属性? 中间件 middl ...
- water mark
图片水印 https://www.oschina.net/p/watermarkjs?nocache=1542795300822 https://www.cnblogs.com/pengjunhao/ ...