Jquery基础（三）之实例

1.     table全反选

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <button class="all" onclick="func_all()">全选</button>
 9 <button class="reverse" onclick="func_reverse()">反选</button>
10 <button class="cancel" onclick="func_cancel()">取消</button>
11     <table>
12         <tr>
13             <td><input type="checkbox" class="item"></td>
14             <td>111</td>
15             <td>111</td>
16             <td>111</td>
17         </tr>
18         <tr>
19             <td><input type="checkbox" class="item"></td>
20             <td>111</td>
21             <td>111</td>
22             <td>111</td>
23         </tr>
24         <tr>
25             <td><input type="checkbox" class="item"></td>
26             <td>111</td>
27             <td>111</td>
28             <td>111</td>
29         </tr>
30         <tr>
31             <td><input type="checkbox" class="item"></td>
32             <td>111</td>
33             <td>111</td>
34             <td>111</td>
35         </tr>
36
37     </table>
38 </body>
39 <script src="../jquery-3.2.1.js"></script>
40 <script>
41     function func_all() {
42         $(‘:checkbox‘).prop(‘checked‘,true)
43     }
44     function func_cancel() {
45         $(‘:checkbox‘).prop(‘checked‘,false)
46     }
47     function func_reverse() {
48
49         var $res=$(‘:checkbox‘).prop(‘checked‘);
50         if ($res){
51            $(‘:checkbox‘).prop(‘checked‘,false)
52         }else{
53            $(‘:checkbox‘).prop(‘checked‘,true)
54         }
55     }
56 </script>
57 </html>

升级版：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <button class="all">全选</button>
 9 <button class="reverse">反选</button>
10 <button class="cancel">取消</button>
11     <table>
12         <tr>
13             <td><input type="checkbox" class="item"></td>
14             <td>111</td>
15             <td>111</td>
16             <td>111</td>
17         </tr>
18         <tr>
19             <td><input type="checkbox" class="item"></td>
20             <td>111</td>
21             <td>111</td>
22             <td>111</td>
23         </tr>
24         <tr>
25             <td><input type="checkbox" class="item"></td>
26             <td>111</td>
27             <td>111</td>
28             <td>111</td>
29         </tr>
30         <tr>
31             <td><input type="checkbox" class="item"></td>
32             <td>111</td>
33             <td>111</td>
34             <td>111</td>
35         </tr>
36
37     </table>
38 </body>
39 <script src="../jquery-3.2.1.js"></script>
40 <script>
41     $(‘button‘).click(function () {
42         if($(this).text()==‘全选‘){
43             $(‘:checkbox‘).prop(‘checked‘,true)
44         }
45         else if($(this).text()==‘取消‘){
46             $(‘:checkbox‘).prop(‘checked‘,false)
47         }
48         else{
49             $(‘:checkbox‘).prop(‘checked‘,!$(‘:checkbox‘).prop(‘checked‘))
50         }
51     })
52 </script>
53 </html>

2.    左侧菜单

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .menu{
 8               height: 500px;
 9               width: 30%;
10               background-color: gainsboro;
11               float: left;
12           }
13
14         .title{
15              line-height: 50px;
16              background-color: #425a66;
17              color: forestgreen;
18          }
19
20         .hide{
21              display: none;
22          }
23     </style>
24 </head>
25 <body>
26 <div class="outer">
27     <div class="menu">
28         <div class="item">
29             <div class="title" onclick="show(this);">菜单一</div>
30             <div class="con">
31                 <div>111</div>
32                 <div>111</div>
33                 <div>111</div>
34             </div>
35         </div>
36         <div class="item">
37             <div class="title" onclick="show(this);">菜单二</div>
38             <div class="con hide">
39                 <div>111</div>
40                 <div>111</div>
41                 <div>111</div>
42             </div>
43         </div>
44         <div class="item">
45             <div class="title" onclick="show(this);">菜单三</div>
46             <div class="con hide">
47                 <div>111</div>
48                 <div>111</div>
49                 <div>111</div>
50             </div>
51         </div>
52
53     </div>
54 </div>
55 </body>
56 <script src="../jquery-3.2.1.js"></script>
57 <script>
58     function show(self) {
59                 // console.log(self.innerText);  // self是一个DOM对象
60
61         // console.log($(self).text())；    // $(self):当前操作标签对象
62 //        $(self).next().removeClass(‘hide‘);
63 //        $(self).parent().siblings().children(‘.con‘).addClass(‘hide‘)
64
65
66         $(self).next().removeClass(‘hide‘).parent().siblings().children(‘.con‘).addClass(‘hide‘)
67     }
68 </script>
69 </html>

3.    tab 切换升级版

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         *{
 8             margin: -5px;
 9             padding: 0;
10         }
11         .nav li{
12             display: inline-block;
13             width:33%;
14             text-align: center;
15             line-height: 100px;
16             background-color: green;
17
18         }
19         .nav .active{
20             background-color: blue;
21
22         }
23         .content{
24             background-color: grey;
25             height: 800px;
26             width:100%
27         }
28         .content .hide{
29             display: none;
30         }
31
32     </style>
33 </head>
34 <body>
35     <div class="outer">
36         <ul class="nav">
37             <li f="con1" class="active">菜单一</li>
38             <li f="con2">菜单二</li>
39             <li f="con3">菜单三</li>
40         </ul>
41         <div class="content">
42             <div class="con1">111111</div>
43             <div class="con2 hide">2222222</div>
44             <div class="con3 hide">33333333</div>
45         </div>
46     </div>
47 </body>
48 <script src="../jquery-3.2.1.js"></script>
49 <script>
50     $(‘.outer ul li‘).click(function () {
51         $(this).addClass(‘active‘).siblings().removeClass(‘active‘);
52         var $name=$(this).attr(‘f‘);
53         $(‘.‘+$name).removeClass(‘hide‘).siblings().addClass(‘hide‘)
54     })
55 </script>
56 </html>

4.   复制样式条

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div class="box">
 9         <div class="item">
10             <input type="button" value="+">
11             <input type="text">
12         </div>
13     </div>
14 </body>
15 <script src="../jquery-3.2.1.js"></script>
16 <script>
17     $("[value=‘+‘]").click(function () {
18          var $ele=$(this).parent().clone();
19          $ele.children(‘:button‘).val(‘-‘).click(function () {
20              console.log($(this)[0]);
21              $(this).parent().remove()
22          });
23         $(‘.box‘).append($ele)
24     })
25 </script>
26 </html>

5.   返回顶部

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         .back{
12             background-color: wheat;
13         }
14         .top{
15             background-color: blue;
16             position: fixed;
17             line-height:40px;
18             width:100px;
19             right:10px;
20             bottom: 10px;
21             text-align: center;
22             display: none;
23         }
24     </style>
25 </head>
26 <body>
27     <div class="back">
28         <p>ppppppppppppppppp</p>
29         <p>ppppppppppppppppp</p>
30         <p>ppppppppppppppppp</p>
31         <p>ppppppppppppppppp</p>
32         <p>ppppppppppppppppp</p>
33         <p>ppppppppppppppppp</p>
34         <p>ppppppppppppppppp</p>
35         <p>ppppppppppppppppp</p>
36         <p>ppppppppppppppppp</p>
37         <p>ppppppppppppppppp</p>
38         <p>ppppppppppppppppp</p>
39         <p>ppppppppppppppppp</p>
40         <p>ppppppppppppppppp</p>
41         <p>ppppppppppppppppp</p>
42         <p>ppppppppppppppppp</p>
43         <p>ppppppppppppppppp</p>
44         <p>ppppppppppppppppp</p>
45         <p>ppppppppppppppppp</p>
46         <p>ppppppppppppppppp</p>
47         <p>ppppppppppppppppp</p>
48         <p>ppppppppppppppppp</p>
49         <p>ppppppppppppppppp</p>
50         <p>ppppppppppppppppp</p>
51         <p>ppppppppppppppppp</p>
52         <p>ppppppppppppppppp</p>
53         <p>ppppppppppppppppp</p>
54         <p>ppppppppppppppppp</p>
55         <p>ppppppppppppppppp</p>
56         <p>ppppppppppppppppp</p>
57         <p>ppppppppppppppppp</p>
58         <p>ppppppppppppppppp</p>
59         <p>ppppppppppppppppp</p>
60         <p>ppppppppppppppppp</p>
61         <p>ppppppppppppppppp</p>
62         <p>ppppppppppppppppp</p>
63         <p>ppppppppppppppppp</p>
64         <p>ppppppppppppppppp</p>
65         <p>ppppppppppppppppp</p>
66         <p>ppppppppppppppppp</p>
67         <p>ppppppppppppppppp</p>
68         <p>ppppppppppppppppp</p>
69         <p>ppppppppppppppppp</p>
70         <p>ppppppppppppppppp</p>
71         <p>ppppppppppppppppp</p>
72         <p>ppppppppppppppppp</p>
73         <p>ppppppppppppppppp</p>
74         <p>ppppppppppppppppp</p>
75         <p>ppppppppppppppppp</p>
76         <p>ppppppppppppppppp</p>
77         <p>ppppppppppppppppp</p>
78         <p>ppppppppppppppppp</p>
79     </div>
80     <div class="top">返回顶部</div>
81 </body>
82 <script src="../jquery-3.2.1.js"></script>
83 <script>
84     $(‘.top‘).click(function () {
85         $(window).scrollTop(0)
86     });
87     $(window).scroll(function () {
88
89         if($(window).scrollTop()>200){
90             $(‘.top‘).show()
91         }
92         else{
93             $(‘.top‘).hide()
94         }
95     })
96 </script>
97 </html>

6.   注册实例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <form action="" id="iform">
 9     用户名：<input type="text" name="username" class="con" mark="用户名"><br>
10     密&nbsp;&nbsp;&nbsp;码：<input type="password" name="passwd" class="con" mark="密码"><br>
11     <input type="submit" value="submit" class="submit">
12 </form>
13 </body>
14 <script src="jquery-3.2.1.js"></script>
15 <script>
16
17
18
19
20
21
22 //     function f(){
23 //        for(var i=0;i<4;i++){
24 //            if (i==2){
25 //                return
26 //            }
27 //            console.log(i)
28 //        }
29 //    }
30 //
31 //    f();
32
33
34 //    li=[11,22,33,44];
35 //    $.each(li,function(i,v){
36 //         if (v==33){
37 //                return false;
38 //            }
39 //            console.log(v)
40 //    });
41
42
43     $(‘#iform .submit‘).click(function(){
44         var flag=true;
45         $(‘#iform .con‘).each(function () {
46             if($(this).val().trim().length==0){
47                 var span=$(‘<span>‘);
48                 var mark=$(this).attr(‘mark‘);
49                 span.text(mark+‘不能为空‘);
50                 $(this).after(span);
51                 flag=false;
52                 return false;
53             }
54         });
55         return flag
56     })
57
58 </script>
59 </html>

7.  轮播图

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         .main{
  8             position: relative;
  9             height:340px;
 10             width:590px;
 11             top:100px;
 12             left:400px;
 13             border: solid black 1px;
 14         }
 15         .main .picture ul li{
 16             list-style: none;
 17             position: absolute;
 18             top: 0;
 19             left: 0;
 20             display: none;
 21         }
 22         .main .button_page{
 23             position: absolute;
 24             bottom: 18px;
 25             left:150px;
 26
 27         }
 28         .main .button_page ul li{
 29             list-style: none;
 30             display: inline-block;
 31             height:22px;
 32             width:22px;
 33             border-radius: 50%;
 34             background-color: grey;
 35             text-align: center;
 36             margin-left: 5px;
 37
 38         }
 39         .button_change{
 40             position: absolute;
 41             width:30px;
 42             line-height:50px;
 43             background-color: grey;
 44             opacity: 0.5;
 45             top:50%;
 46             margin-top: -25px;
 47             font-size:30px;
 48             text-align: center;
 49             display: none;
 50         }
 51         .button_left{
 52             left:0;
 53         }
 54         .button_right{
 55             right:0;
 56         }
 57         .main:hover .button_change{
 58             display: block;
 59         }
 60         .main .button_page ul .active{
 61             background-color: red;
 62         }
 63     </style>
 64 </head>
 65 <body>
 66 <div class="main">
 67    <div class="picture">
 68         <ul>
 69             <li class="page" style="display: block"><a href=""><img src="https://img30.360buyimg.com/da/jfs/t6115/150/946379232/196454/2b3ae306/592e6966Nf9939a8f.jpg" ></a></li>
 70             <li class="page"><a href=""><img src="https://img1.360buyimg.com/da/jfs/t5851/87/522945316/109618/fa7ddbe8/591fee6bN6fe1f63a.jpg" ></a></li>
 71             <li class="page"><a href=""><img src="https://img1.360buyimg.com/da/jfs/t5869/350/2200649352/73525/47c5887d/592e7197N55ad6d99.jpg" ></a></li>
 72             <li class="page"><a href=""><img src="https://img30.360buyimg.com/da/jfs/t6115/150/946379232/196454/2b3ae306/592e6966Nf9939a8f.jpg" ></a></li>
 73             <li class="page"><a href=""><img src="https://m.360buyimg.com/babel/jfs/t5947/73/1004360771/85890/36736fc7/592e579aN827c74a0.jpg" ></a></li>
 74             <li class="page"><a href=""><img src="https://img20.360buyimg.com/da/jfs/t5770/314/2320258199/80400/88c5740a/592f8abcN33219d1c.jpg" ></a></li>
 75             <li class="page"><a href=""><img src="https://img11.360buyimg.com/da/jfs/t5812/137/2250930076/97370/ec3ac05d/592f84c8N2f5e2d02.jpg" ></a></li>
 76             <li class="page"><a href=""><img src="https://img10.360buyimg.com/da/jfs/t4384/72/1363317211/164062/f24d89e/58c0b215N87e464e0.jpg" ></a></li>
 77         </ul>
 78    </div>
 79    <div class="button_page">
 80         <ul>
 81             <li class="active"></li>
 82             <li></li>
 83             <li></li>
 84             <li></li>
 85             <li></li>
 86             <li></li>
 87             <li></li>
 88             <li></li>
 89         </ul>
 90    </div>
 91
 92    <div class="button_left button_change"> < </div>
 93    <div class="button_right button_change"> > </div>
 94
 95 </div>
 96
 97 </body>
 98 <script src="../jquery-3.2.1.js"></script>
 99 <script>
100 //    自动轮播 ：初始值为第一张图片，第一个下标变红，一秒后触发函数执行，i变为1，图片变为第二张，第二个下标变红
101 //                 当最后一张图片播完时i为7，触发判断条件i变为-1，重新从第一张图片，即i=0时播放
102     var i=0;
103      function move() {
104          if(i==7){
105              i=-1
106          }
107          i++;
108         $(‘.page‘).eq(i).fadeIn(500).siblings().fadeOut(500);
109         $(‘.button_page ul li‘).eq(i).addClass(‘active‘).siblings().removeClass(‘active‘);
110
111      }
112           function move_left() {
113          if(i==0){
114              i=8
115          }
116          i--;
117         $(‘.page‘).eq(i).fadeIn(500).siblings().fadeOut(500);
118         $(‘.button_page ul li‘).eq(i).addClass(‘active‘).siblings().removeClass(‘active‘);
119
120      }
121      var ID=setInterval(move,1000);
122 //    手动轮播
123     $(‘.main‘).hover(function () {
124         clearInterval(ID)
125     },function () {
126          ID=setInterval(move,1000)
127     });
128
129     $(‘.button_page ul li‘).mouseover(function () {
130         i=$(this).index();
131         $(‘.page‘).eq(i).fadeIn(500).siblings().fadeOut(500);
132         $(this).addClass(‘active‘).siblings().removeClass(‘active‘);
133     })
134 //点击事件
135
136     $(‘.button_left‘).click(move_left);
137     $(‘.button_right‘).click(move);
138 </script>
139 </html>

8.  模态对话框

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .back{
 8             background-color: rebeccapurple;
 9             height: 2000px;
10         }
11
12         .shade{
13             position: fixed;
14             top: 0;
15             bottom: 0;
16             left:0;
17             right: 0;
18             background-color: coral;
19             opacity: 0.4;
20         }
21
22         .hide{
23             display: none;
24         }
25
26         .models{
27             position: fixed;
28             top: 50%;
29             left: 50%;
30             margin-left: -100px;
31             margin-top: -100px;
32             height: 200px;
33             width: 200px;
34             background-color: gold;
35
36         }
37     </style>
38 </head>
39 <body>
40 <div class="back">
41     <input id="ID1" type="button" value="click" onclick="action1(this)">
42 </div>
43
44 <div class="shade hide"></div>
45 <div class="models hide">
46     <input id="ID2" type="button" value="cancel" onclick="action2(this)">
47 </div>
48
49
50 <script src="jquery-1.11.3.min.js"></script>
51 <script>
52
53     function action1(self){
54         $(self).parent().siblings().removeClass("hide");
55
56     }
57     function action2(self){
58         //$(self).parent().parent().children(".models,.shade").addClass("hide")
59
60         $(self).parent().addClass("hide").prev().addClass("hide")
61
62     }
63 </script>
64 </body>
65 </html>

9. 面板拖动

有时间补

时间： 2024-10-02 04:57:26

Jquery基础（三）之实例的相关文章

JQuery基础三

JQ选项卡实列<style> #div1 div{ width:200px; height:200px; border:1px red solid; display:none;} .active{ background:red;} </style> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> <script> $(f

##Jquery基础（三）

Jquery基础-DOM ##一.DOM 是 JavaScript 操作网页的接口,全称为“文档对象模型”(Document Object Model).它的作用是将网页转为一个 JavaScript 对象,从而可以用脚本进行各种操作(比如增删内容). 浏览器会根据 DOM 模型,将结构化文档(比如 HTML 和 XML)解析成一系列的节点,再由这些节点组成一个树状结构(DOM Tree).所有的节点和最终的树状结构,都有规范的对外接口. ##1,节点类型 ##1.1DOM 的最小组成单位叫做节

jquery基础 笔记三

一. 操作"DOM属性" 在jQuery中没有包装操作"DOM属性"的函数, 因为使用javascript获取和设置"DOM属性"都很简单. 在jQuery提供了each()函数用于遍历jQuery包装集, 其中的this指针是一个DOM对象, 所以我们可以应用这一点配合原生javascript来操作元素的DOM属性: $("img").each(function(index) { alert("index:&quo

前端基础教程-jQuery EasyUI 的EasyLoader实例

兄弟连前端HTML5培训分享-jQuery EasyUI 的EasyLoader实例 to move panel to other position $('#p').panel('move',{ left:100, top:100 }); 属性: title,类型是string,是显示在面板头部的标题文本,默认值为null. iconcls,类型是string,用一个css class显示在面板上的16x16的图标,默认值为null. width,类型是number,设置面板宽度,默认值是aut

强大的JQuery（三）--操作html与遍历

前两篇博客讲到了JQuery的基础知识以及其动画效果,本篇将为大家介绍jquery操纵html以及jquery的遍历. 一.jquery操作html 1.获取内容和属性 text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值 attr()- 方法用于获取属性值. 实例: <span style="font-size:18px;">$("#btn1").cl

【jQuery基础学习】09 jQuery与前端（这章很水）

这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图片 styles文件夹用来存放css样式表 scripts文件夹用来存放js脚本 网页结构 头部:网站的品牌log,登录信息 内容:放置网站的主体内容 尾部:放置网站的其它友情链接和版权信息之类的 关于网站样式 首先写一个样式表,来包含全局的样式.定义整个网站的reset.css样式表,编写一些全局

Jquery基础之事件操作

事件是用户操作时页面或页面加载时引发的用来完成javascript和HTML之间的交互操作.常见的元素点击事件.鼠标事件.键盘输入事件等,较传Javascript 相比JQuery增加并扩展了基本的事件处理机制,极大的增强了事件处理的能力. 一.DOM加载事件 页面加载完毕后浏览器会通过javascript为Dom元素加载事件,使用Javascript时候使用的是window.onload方法,而Jquery使用的是$(document).ready()方法,下表 展示两个事件的异同.    w

Jquery基础之选择器

选择器是JQuery的根基,在JQuery中对事件处理.选择遍历Dom.ajax操作都依赖选择器.JQuery选择器分为基本选择器.层次选择器.过滤选择器.表单选择器. 一.基本选择器 1.ID选择器$("#ID") 页面中每个ID是唯一的,ID选择器选择每个ID元素,如下方法如下:$("#ID");例:$("#tbxName")这个方法选择id=tbxName的页面元素.选择结果为单个元素. 2.类选择器$(".class"

Jquery基础之ajax

ajax是Asynchronous JavaScript and XML(异步JavaScript和XML)的简称,ajax并不是单一的技术而是利用一系列交互网页应用相关的技术形成的结合体,ajax揭开了无刷新更新页面的全新时代. ajax优点:不需要插件支持.优秀的用户体验.提高Web程序的性能.减轻服务器和宽带的负担.缺点:浏览器支持度不足.破浏览器前进后退按钮的正常功能.对搜索引擎的支持不足.开发和调试工具缺乏. Jquery对ajax操作进行了封装,ajax主要的几种方法是load().

很不错的jQuery学习资料和实例

这些都是学习Jquery很不错的资料,整理了一下,分享给大家. 希望能对大家的学习有帮助. 帕兰 Noupe带来的51个最佳jQuery教程和实例, 向大家介绍了jQuery的一些基本概念和使用的相关教程,  如果你对jQuery感兴趣, 也可以查看帕兰写的文章: 37个更加出色的jQuery插件 45个新鲜出炉的jQuery插件 50多个强大的jQuery插件应用实例 John Resig John Resig, 这位是 JQuery JavaScript脚本库的创建者, 同时也是Mozill