前端基础 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>
- <!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>
- <!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" ></a></li>
- <li><a href=""><img src="img/2.jpg" ></a></li>
- <li><a href=""><img src="img/3.jpg" ></a></li>
- <li><a href=""><img src="img/4.jpg" ></a></li>
- <li><a href=""><img src="img/5.jpg" ></a></li>
- <li><a href=""><img src="img/6.jpg" ></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>
lyndonhttp://lyndon.blog.51cto.com/11474010/1978888
前端基础---jquery练习
前端基础 jquery练习
原文:http://lyndon.blog.51cto.com/11474010/1978888
来源: http://www.bubuko.com/infodetail-2379753.html