【前端】:jQuery实例
前言: 今天2月最后一天，写一篇jQuery的几个实例，算是之前前端知识的应用。写完这篇博客会做一个登陆界面+后台管理(i try...)
一、菜单实例
最开始的界面:
点击菜单三后的界面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.left_menu{
float: left;
width: 30%;
height: 400px;
background-color: #f9ebc4;
}
.container{
float: left;
width: 70%;
height: 400px;
background-color: aquamarine;
}
.title{
background-color: indianred;
color: white;
height: 40px;
line-height: 40px;
font-size: larger;
font-weight: bold;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="left_menu">
<div class="item">
<!--this是特殊参数，代表本身的标签-->
<div class="title" onclick="Func(this);">菜单一</div>
<div class="body">
<div>1.1</div>
<div>1.2</div>
<div>1.3</div>
</div>
</div>
<div class="item">
<div class="title" onclick="Func(this);">菜单二</div>
<div class="body hide">
<div>2.1</div>
<div>2.2</div>
<div>2.3</div>
</div>
</div>
<div class="item">
<div class="title" onclick="Func(this);">菜单三</div>
<div class="body hide">
<div>3.1</div>
<div>3.2</div>
<div>3.3</div>
</div>
</div>
<div class="item">
<div class="title" onclick="Func(this);">菜单四</div>
<div class="body hide">
<div>4.1</div>
<div>4.2</div>
<div>4.3</div>
</div>
</div>
</div>
<div class="container"></div>
<script src="jquery-3.1.1.min.js"></script>
<script>
function Func(ths) {
//难点:如何点菜单Ｘ，就获得菜单Ｘ的标签？？
//通过参数this
//console.log($(ths).text()); //获取标签内容
//获得菜单标签后，如何获得菜单标签下的body标签，并去除hide样式 removeClass()
$(ths).next().removeClass("hide");
$(ths).parent().siblings().find(".body").addClass("hide");
}
</script>
</body>
</html> View Code二、表单实例
效果图:
优化后:
实现功能:
- 功能1:点击菜单A, 则下面的内容为菜单A对应的内容。
- 功能2:点击菜单A,则菜单A会出现背景色，而未被点击的菜单没有。
难点说明:
一点击菜单一，菜单一的背景就"变色"，背景颜色其实就是一种样式(以样式A为称)嘛，一点击菜单的div就会它加上样式A，同时给菜单二，菜单三(即菜单一的同级元素siblings)去除样式A。这个是不难实现的，如果有看我之前写的博客的话。
问题来了，如何实现一点击菜单1，就显示菜单1的内容??其实菜单1对应的内容就是一块div嘛。只要找到这块div元素，去除隐藏的样式，同时给菜单2和3加上隐藏的样式。就OK啦~ 现在的问题是如何一点菜单一就找到菜单一对应内容的div元素??
<div class="tab-box">
<div class="box-menu">
<!--所有菜单-->
<a zcl="c1" onclick="ChangeTab(this);" class="current_menu">菜单一</a>
<a zcl="c2" onclick="ChangeTab(this);">菜单二</a>
<a zcl="c3" onclick="ChangeTab(this);">菜单三</a>
</div>
<div class="box-body">
<!--所有内容-->
<div id="c1">内容一</div>
<div id="c2" class="hide">内容二</div>
<div id="c3" class="hide">内容三</div>
</div>
</div> 我给菜单(a标签)加上自定义属性zcl，该属性对应的值就是菜单对应内容的id。所以我只要一点击菜单，就去获取则菜单的zcl属性的值(即内容的id)。嗯，挺有意思的哈哈~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.tab-box .box-menu{
background-color: #adadad;
border: 1px solid #dddddd;
height: 30px;
line-height: 30px;
}
.tab-box .box-body{
border: 1px solid #e7d9b1;
background-color: #f4f9e7;
height: 50px;
}
.hide{
display: none;
}
.current_menu{
/*background-color: #505aff;*/
background-color: white;
color: black;
border-top: 2px solid red;
}
.box-menu a{
border-right: 1px solid #f8ff89;
padding: 8px;
}
</style>
</head>
<body>
<div class="tab-box">
<div class="box-menu">
<!--所有菜单-->
<a zcl="c1" onclick="ChangeTab(this);" class="current_menu">菜单一</a>
<a zcl="c2" onclick="ChangeTab(this);">菜单二</a>
<a zcl="c3" onclick="ChangeTab(this);">菜单三</a>
</div>
<div class="box-body">
<!--所有内容-->
<div id="c1">内容一</div>
<div id="c2" class="hide">内容二</div>
<div id="c3" class="hide">内容三</div>
</div>
</div>
<script src="jquery-3.1.1.min.js"></script>
<script>
function ChangeTab(ths) {
$(ths).addClass("current_menu").siblings().removeClass("current_menu");
//获取当前点击的标签
//获取当前标签属性zcl对应的值
var content_id = $(ths).attr("zcl");
console.log(content_id);
var temp = "#" + content_id;
//找到与菜单标签对应的内容<div>标签,去除hide样式，并为该div的兄弟标签加上hide样式
$(temp).removeClass("hide").siblings().addClass("hide");
}
</script>
</body>
</html> View Code三、复选框
效果图:
改进版:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="button" value="全选" onclick="SelectAll();" />
<input type="button" value="取消" onclick="ClearAll();" />
<input type="button" value="反选" onclick="Reverse();" />
</div>
<div>
<table border="1">
<tr>
<td><input type="checkbox"/></td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>123</td>
<td>123</td>
</tr>
</table>
</div>
<script src="jquery-3.1.1.min.js"></script>
<script>
function SelectAll() {
//找到table标签中的所有input
//$("table input[type='checkbox']") 找到所有input，是一个列表
$("table input[type='checkbox']").prop("checked", true);
}
function ClearAll() {
$("table input[type='checkbox']").prop("checked", false);
}
function Reverse() {
/*
//用下面的方法，可以即输出序号，也能输出元素
var userList = [11,22,33,44];
$.each(userList, function (i, item) {
console.log(i, item);
});
*/
$("table input[type='checkbox']").each(function () {
//jQuery封装，循环执行该方法
//$(this) 表示当前执行的元素
var isChecked = $(this).prop("checked"); //返回true或false
//检查是否已被选中，是则取消，否则选中
if(isChecked){
$(this).prop("checked",false);
}else {
$(this).prop("checked",true);
}
})
}
</script>
</body>
</html> View Code四、返回顶部
一点击"返回顶部"，就调用下面的方法便可回到顶部:
function GoTop(){
$(window).scrollTop(0);
} 
优化版:
看下面这个网站https://www.yonglibao.com/ ，会发现刚开始右下角是没有出现返回顶部的标记的，当滑轮向下滚动一定距离后才会出现返回顶部的标记!!
如果想等到滑轮离顶部100时才出现返回顶部字样的话，可以给windows注册一个事件，当滑轮每移动一次就执行一次该事件，检测当前滑轮离顶部的距离，如果超过100，则去除div(返回顶部)的隐藏样式。
<script>
//给windows注册一个事件，当滑轮每移动一次就执行一次该事件
window.onscroll = function () {
//console.log(123); //一滚动就输出123
//获取当前的scrollTop
var current_top = $(window).scrollTop();
if(current_top>100){
$(".top").removeClass("hide");
}else {
$(".top").addClass("hide");
}
};
</script> PS: 也可以给一个标签定义滑轮(overflow: auto)。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Top</title>
6 <style>
7 .top{
8 position: fixed;
9 right: 0;
10 bottom: 0;
11 width: 100px;
12 height: 40px;
13 line-height: 40px;
14 text-align: center;
15 background-color: #e7d9b1;
16 }
17 .hide{
18 display: none;
19 }
20 </style>
21 </head>
22 <body>
23 <!--可通过$("#aa").scrollTop(0)使下面的小滚动条返回顶部-->
24 <div id="aa" style="height: 200px;background-color: #f8ff89;overflow: auto;">
25 <p>aa</p>
26 <p>aa</p>
27 <p>aa</p>
28 <p>aa</p>
29 <p>aa</p>
30 <p>aa</p>
31 <p>aa</p>
32 <p>aa</p>
33 </div>
34
35 <div style="height: 2000px; background-color: #a3ffd3;"></div>
36
37 <div class="top hide" onclick="GoTop();">返回顶部</div>
38
39 <script src="jquery-3.1.1.min.js"></script>
40 <script>
41 //给windows注册一个事件，当滑轮每移动一次就执行一次该事件
42 window.onscroll = function () {
43 //console.log(123); //一滚动就输出123
44 //获取当前的scrollTop
45 var current_top = $(window).scrollTop();
46 if(current_top>100){
47 $(".top").removeClass("hide");
48 }else {
49 $(".top").addClass("hide");
50 }
51 };
52
53 function GoTop() {
54 $(window).scrollTop(0);
55 }
56 </script>
57 </body>
58 </html> View Code五、滚动菜单
效果图:
如果页面已经到底部了，但此时第3张的顶部还未到浏览器的顶部，所以是显示第2张，但按用户体验来说，左侧的菜单对第3张着色会更好.
如何判定滑轮到了底部?? 可用：浏览器界面高度+滑轮滚动高度＝HTML文档高度
$(window).height()+$(window).scrollTop()==$(document).height()
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7
8 body{
9 margin: 0px;
10 }
11 img {
12 border: 0;
13 }
14 ul{
15 padding: 0;
16 margin: 0;
17 list-style: none;
18 }
19 .clearfix:after {
20 content: ".";
21 display: block;
22 height: 0;
23 clear: both;
24 visibility: hidden;
25 }
26
27 .wrap{
28 width: 980px;
29 margin: 0 auto;
30 }
31
32 .pg-header{
33 background-color: #303a40;
34 -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
35 -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
36 box-shadow: 0 2px 5px rgba(0,0,0,.2);
37 }
38 .pg-header .logo{
39 float: left;
40 padding:5px 10px 5px 0px;
41 }
42 .pg-header .logo img{
43 vertical-align: middle;
44 width: 110px;
45 height: 40px;
46
47 }
48 .pg-header .nav{
49 line-height: 50px;
50 }
51 .pg-header .nav ul li{
52 float: left;
53 }
54 .pg-header .nav ul li a{
55 display: block;
56 color: #ccc;
57 padding: 0 20px;
58 text-decoration: none;
59 font-size: 14px;
60 }
61 .pg-header .nav ul li a:hover{
62 color: #fff;
63 background-color: #425a66;
64 }
65 .pg-body{
66
67 }
68 .pg-body .catalog{
69 position: absolute;
70 top:60px;
71 width: 200px;
72 background-color: #fafafa;
73 bottom: 0px;
74 }
75 .pg-body .catalog.fixed{
76 position: fixed;
77 top:10px;
78 }
79
80 .pg-body .catalog .catalog-item.active{
81 color: #fff;
82 background-color: #425a66;
83 }
84
85 .pg-body .content{
86 position: absolute;
87 top:60px;
88 width: 700px;
89 margin-left: 210px;
90 background-color: #fafafa;
91 overflow: auto;
92 }
93 .pg-body .content .section{
94 height: 500px;
95 }
96 </style>
97 </head>
98 <body>
99
100 <div class="pg-header">
101 <div class="wrap clearfix">
102 <div class="logo">
103 <a href="#">
104 <!--<img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">-->
105 </a>
106 </div>
107 <div class="nav">
108 <ul>
109 <li>
110 <a href="#">首页</a>
111 </li>
112 <li>
113 <a href="#">功能一</a>
114 </li>
115 <li>
116 <a href="#">功能二</a>
117 </li>
118 </ul>
119 </div>
120
121 </div>
122 </div>
123 <div class="pg-body">
124 <div class="wrap">
125 <div class="catalog">
126 <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
127 <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
128 <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
129 </div>
130 <div class="content">
131 <div menu="function1" class="section">
132 <h1>第一章</h1>
133 </div>
134 <div menu="function2" class="section">
135 <h1>第二章</h1>
136 </div>
137 <div menu="function3" class="section">
138 <h1>第三章</h1>
139 </div>
140 </div>
141 </div>
142
143 </div>
144
145 <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
146 <script type="text/javascript">
147 window.onscroll = function () {
148 if($(window).scrollTop() > 50){ //当滑轮离顶部距离大于50，则将菜单固定，否则移除固定属性
149 $('.catalog').addClass('fixed');
150 }else{
151 $('.catalog').removeClass('fixed');
152 }
153
154 var ws = $(window).scrollTop(); //滑轮滚动距离
155 $('.content').children().each(function () { //循环每个子标签
156 var offs = $(this).offset(); //离顶部，左部的距离
157 var offTop = offs.top; //每一章的标签离顶部的距离
158 // console.log(offTop);
159 //当前标签离顶部的高度 + 当前标签的高度 > 滚动条的高度，则对当前标签对应的菜单着色
160 var total = offTop + $(this).height();
161 //滑轮滚动距离大于标签离顶部的距离，此时菜单要着色 ws>offTop
162 if(ws>offTop && ws<total){
163 //如果滑轮到了底部，最后一个菜单增大
164 //如何判定滑轮到了底部？？可用：浏览器界面高度+滑轮滚动高度＝HTML文档高度
165 if($(window).height() + $(window).scrollTop() == $(document).height()){
166 $(".catalog").children(':last').css("fontSize", "48px").siblings().css("fontSize", "12px");
167 }else { //未到底部
168 var t = $(this).attr("menu"); //猎取标签属性menu的值，去菜单找对应的auto_to属性值
169 var target = 'div[auto-to="' + t + '"]';
170 $(".catalog").children(target).css("fontSize", "48px").siblings().css("fontSize", "12px");
171
172 }
173 }
174 })
175 };
176
177 </script>
178 </body>
179 </html> View Code六、拖动面板
效果图:
鼠标放在黑色标题点击后便可拖动。
JS代码讲解:
<script>
$(function () {
//页面加载完成之后自动执行
$("#title").mouseover(function () { //给title绑定事件
$(this).css("cursor", "move"); //this代表title(标题标签)
}).mousedown(function (e) { //链式编程，在jQuery是很流行的；也是对title绑定事件
//绑定事件，e为封装了事件的对象，包含很多信息
var _event = e || window.event; //有些浏览器不兼容没给出e,就用window.event
var old_x = _event.clientX; //原始鼠标横坐标
var old_y = _event.clientY;
//框左上角离浏览器界面左边界，顶部的距离
var parent_left = $(this).parent().offset().left;
var parent_top = $(this).parent().offset().top;
$(this).bind("mousemove", function (e) { //this代表title;为谁绑定事件，$(this)便是谁
var _new_event = e || window.event;
var new_x = _new_event.clientX; //新的鼠标坐标
var new_y = _new_event.clientY;
var x = parent_left + (new_x-old_x); //移动的横坐标距离
var y = parent_top + (new_y-old_y);
$(this).parent().css("left", x+'px'); //this仍代表title
$(this).parent().css("top", y+'px');
})
}).mouseup(function () { //鼠标一放开(不点击)，则取消绑定移动事件
$(this).unbind("mousemove");
})
})
</script> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="border: 1px solid indigo;width: 400px;height: 300px;position: absolute;">
<div id="title" style="background-color: black;height: 50px;color: white;">
标题
</div>
<div style="height: 350px;">
内容
</div>
</div>
<script src="jquery-3.1.1.min.js"></script>
<script>
$(function () {
//页面加载完成之后自动执行
$("#title").mouseover(function () { //给title绑定事件
$(this).css("cursor", "move"); //this代表title(标题标签)
}).mousedown(function (e) { //链式编程，在jQuery是很流行的；也是对title绑定事件
//绑定事件，e为封装了事件的对象，包含很多信息
var _event = e || window.event; //有些浏览器不兼容没给出e,就用window.event
var old_x = _event.clientX; //原始鼠标横坐标
var old_y = _event.clientY;
//框左上角离浏览器界面左边界，顶部的距离
var parent_left = $(this).parent().offset().left;
var parent_top = $(this).parent().offset().top;
$(this).bind("mousemove", function (e) { //this代表title;为谁绑定事件，$(this)便是谁
var _new_event = e || window.event;
var new_x = _new_event.clientX; //新的鼠标坐标
var new_y = _new_event.clientY;
var x = parent_left + (new_x-old_x); //移动的横坐标距离
var y = parent_top + (new_y-old_y);
$(this).parent().css("left", x+'px'); //this仍代表title
$(this).parent().css("top", y+'px');
})
}).mouseup(function () { //鼠标一放开(不点击)，则取消绑定移动事件
$(this).unbind("mousemove");
})
})
</script>
</body>
</html> View Code七、跨域Ajax请求与电视节目实例
Ajax概述
对于WEB应用程序：用户浏览器发送请求，服务器接收并处理请求，然后返回结果，往往返回就是字符串（HTML），浏览器将字符串（HTML）渲染并显示浏览器上。页面不刷新便能提交数据。通过ajax请求，收到返回的数据。通过跨域ajax请求接收的数据是包装在服务端发往客户端的函数中的。
1、传统的Web应用
[blockquote]
一个简单操作需要重新加载全局数据
[/blockquote]
2、AJAX
[blockquote]
AJAX，Asynchronous JavaScript and XML (异步的JavaScript和XML)，一种创建交互式网页应用的网页开发技术方案。
- 异步的JavaScript：使用 【JavaScript语言】 以及 相关【浏览器提供类库】 的功能向服务端发送请求，当服务端处理完请求之后，【自动执行某个JavaScript的回调函数】。PS：以上请求和响应的整个过程是【偷偷】进行的，页面上无任何感知。
- XMLXML是一种标记语言，是Ajax在和后台交互时传输数据的格式之一
利用AJAX可以做：1、注册时，输入用户名自动检测用户是否已经存在。2、登陆时，提示用户名密码错误3、删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除。（安科开发）
[/blockquote]
目前我对ajax学习不怎么深入，具体可以参考http://www.cnblogs.com/wupeiqi/articles/5703697.html，下次有时间再整理写篇关于ajax的博客。
效果图:
通过江西电视台的接口http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403获取数据
代码分析:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" onclick="AjaxRequest()" value="跨域Ajax" />
<div id="container"></div>
<script src="jquery-3.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function AjaxRequest() {
$.ajax({
url: 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403',
type: 'GET',
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'list',
success: function (arg) {
//当请求执行完成之后，自动调用，arg(参数):服务器返回的数据
//arg = {data: xxx}
//jsonpdic为字典，jsonpdic有两个元素，一个是week:xx；另一个是list列表，包含周几相关的信息
var jsonpdic = arg.data;
//k为列表(里面为星期Ｘ对应的内容)，v为一个字典{week:xx}
$.each(jsonpdic, function (k, v) {
var week = v.week; //获得星期几，并将其拼接成h1标签，并append到div标签
var temp = "<h1>" + week + "</h1>";
$('#container').append(temp);
//获得key为list所对应的value(包含相关信息)；listArray为列表，里面元素为字典形式
var listArray = v.list;
$.each(listArray, function (kk,vv) {
var link = vv.link;
var name = vv.name;
//a标签是没有换行的，所以在后面加上<br/>
var tempNex = "<a href='" + link + "'>" + name + "</a><br/>"
$('#container').append(tempNex);
})
})
}
});
}
</script>
</body>
</html> 接收的数据是列表与字典的嵌套，结合着下图与上面代码看会好很多:
今天在安科开发看到一条段子:
转发注明出处:http://www.cnblogs.com/0zcl/p/6476811.html
3月1号了……明天又要坐车回广州~_~