Python之路Day14
主要内容：jQuery进阶、CSS伪类和伪元素、jQuery插件
tab菜单样式
checkbox全选、反选
位置：scrollTop和offset
事件：两种绑定事件的方式和委托delegate
ajax：普通和跨域（江西卫视的例子）
还是那个网址：http://www.php100.com/manual/jquery/
CSS伪类和伪元素
hover用于鼠标移动到元素上面时，改变元素的样式，比写JS实现方便。
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height:;
clear: both;
}
写到common.css文件中，在布局的时候用到float是，可以很方便的引用到需要clear:both的地方。
tab菜单样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab exercise</title>
<style>
.content {
margin: 0 auto;
padding: 0;
}
.tab-tittle {
background-color: #999999;
border: none;
line-height: 35px;
}
/*利用伪元素实现clear:both*/
.tab-tittle:after {
content: ".";
visibility: hidden;
height: 0;
display: block;
clear: both;
}
.tab-info {
border: none;
}
.hide {
display: none;
}
.current {
background-color: #FFFFFF;
border-top: 2px solid red;
}
li {
display: inline;
list-style: none;
margin: 0;
padding: 0 10px;
cursor: pointer;
float: left;
}
</style>
</head>
<body>
<div class="content">
<div class="tab-tittle">
<ul>
<li class="current" pointTo="info1" onclick="GoTab(this);">菜单一</li>
<li pointTo="info2" onclick="GoTab(this);">菜单二</li>
<li pointTo="info3" onclick="GoTab(this);">菜单三</li>
</ul>
</div>
<div class="tab-info">
<div id="info1">内容一</div>
<div id="info2" class="hide">内容二</div>
<div id="info3" class="hide">内容三</div>
</div>
</div>
<script src="../jquery-2.2.3.js"></script>
<script>
function GoTab(ths) {
$(ths).addClass("current").siblings().removeClass("current");
var tmp = "#" + $(ths).attr("pointTo");
$(tmp).removeClass("hide").siblings().addClass("hide");
}
</script>
</body>
</html>
tab菜单样式
checkbox全选、反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Check Box Exercise</title>
</head>
<body>
<div>
<button value="全选" onclick="CheckAll();">全选</button>
<button value="取消" onclick="ClearAll();">取消</button>
<button value="取消" onclick="ReverseAll();">反选</button>
</div>
<div>
<table border="1">
<tr>
<td><input type="checkbox" /></td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>123</td>
<td>456</td>
</tr>
</table>
</div>
<script src="../jquery-2.2.3.js"></script>
<script>
function CheckAll() {
$("table :checkbox").prop("checked", true);
}
function ClearAll() {
$("table :checkbox").prop("checked", false);
}
function ReverseAll() {
var checkboxArray = $("table :checkbox");
// for (var i= 0;i<checkboxArray.length;i++) {
// console.log(checkboxArray[i]);
// }
// console.log("===============================");
// for ( i in checkboxArray) {
// console.log(checkboxArray[i]);
// }
// 反选的两种方法
// 方法一
$.each (checkboxArray, function(i, item) {
console.log(item);
var isChecked = $(item).prop("checked");
if (isChecked) {
$(item).prop("checked", false);
} else {
$(item).prop("checked", true);
}
});
// 方法二
// $("table :checkbox").each(function() {
// var isChecked = $(this).prop("checked");
// if (isChecked) {
// $(this).prop("checked", false);
// } else {
// $(this).prop("checked", true);
// }
// })
}
</script>
</body>
</html>
checkbox
位置：scrollTop和offset
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scrollTop</title>
<style>
.go-top {
position: fixed;
right: 5px;
bottom: 5px;
width: 70px;
height: 20px;
background-color: #8AC007;
}
a {
cursor: pointer;
text-decoration: none;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div style="background-color: red; height: 300px; overflow: scroll">
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<div style="right: 10px; bottom: 10px">
<a onclick="GoTop();">内部返回顶部</a>
</div>
</div>
<div style="background-color: #999999">
<div style="height: 2000px"></div>
<div class="go-top hide">
<a onclick="GoTop();">返回顶部</a>
</div>
</div>
<script src="../jquery-2.2.3.js"></script>
<script>
function GoTop() {
$(window).scrollTop(0);
}
window.onscroll = function() {
if ($(window).scrollTop() > 100) {
$(".go-top").removeClass("hide");
} else {
$(".go-top").addClass("hide");
}
}
</script>
</body>
</html>
scrollTop
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0px;
}
img {
border: 0;
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.wrap{
width: 980px;
margin: 0 auto;
}
.pg-header{
background-color: #303a40;
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
-moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
box-shadow: 0 2px 5px rgba(0,0,0,.2);
}
.pg-header .logo{
float: left;
padding:5px 10px 5px 0px;
}
.pg-header .logo img{
vertical-align: middle;
width: 110px;
height: 40px;
}
.pg-header .nav{
line-height: 50px;
}
.pg-header .nav ul li{
float: left;
}
.pg-header .nav ul li a{
display: block;
color: #ccc;
padding: 0 20px;
text-decoration: none;
font-size: 14px;
}
.pg-header .nav ul li a:hover{
color: #fff;
background-color: #425a66;
}
.pg-body{
}
.pg-body .catalog{
position: absolute;
top:60px;
width: 200px;
background-color: #fafafa;
bottom: 0px;
}
.pg-body .catalog.fixed{
position: fixed;
top:10px;
}
.pg-body .catalog .catalog-item.active{
color: #fff;
background-color: #425a66;
}
.pg-body .content{
position: absolute;
top:60px;
width: 700px;
margin-left: 210px;
background-color: #fafafa;
overflow: auto;
}
.pg-body .content .section{
height: 500px;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="wrap clearfix">
<div class="logo">
<a href="#">
<img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
</a>
</div>
<div class="nav">
<ul>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">功能一</a>
</li>
<li>
<a href="#">功能二</a>
</li>
</ul>
</div>
</div>
</div>
<div class="pg-body">
<div class="wrap">
<div class="catalog">
<div class="catalog-item" auto-to="function1"><a>第1章</a></div>
<div class="catalog-item" auto-to="function2"><a>第2章</a></div>
<div class="catalog-item" auto-to="function3"><a>第3章</a></div>
</div>
<div class="content">
<div menu="function1" class="section">
<h1>第一章</h1>
</div>
<div menu="function2" class="section">
<h1>第二章</h1>
</div>
<div menu="function3" class="section">
<h1>第三章</h1>
</div>
</div>
</div>
</div>
<script src="../jquery-2.2.3.js"></script>
<script>
window.onscroll = function() {
var scrollHeight = $(window).scrollTop();
console.log("滚动高度：");
console.log(scrollHeight);
if (scrollHeight > 50) {
$(".catalog").addClass("fixed");
} else {
$(".catalog").removeClass("fixed");
}
$(".content").children().each(function() {
// 当前元素的对视图的相对高度
var currentOffset = $(this).offset();
var currentOffsetTop = currentOffset.top;
console.log("当前元素的对视图的相对高度：");
console.log(currentOffsetTop);
var totalHeight = currentOffsetTop + $(this).height();
if (currentOffsetTop < scrollHeight && totalHeight > scrollHeight) {
// 滑轮滚动的高度+window的高度 = 文档的高度
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
$(".catalog").children(":last").css("fontSize", "48px").siblings().css("fontSize", "12px");
} else {
var catalogTag = $(this).attr("menu");
var tagat = "div[auto-to='"+catalogTag+"']";
$(".catalog").children(tagat).css("fontSize", "48px").siblings().css("fontSize", "12px");
return;
}
}
})
}
</script>
</body>
</html>
offset
事件：两种绑定事件的方式和委托delegate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>event exercise</title>
</head>
<body>
<div>
<input type="button" value="增加" />
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<script src="../jquery-2.2.3.js"></script>
<script>
$(function() {
$("input").click(function() {
$("ul").append("<li>8</li>");
})
});
// $(document).ready(function() {
// $("li").css("cursor", "pointer");
// $("li").click(function() {
// console.log($(this).text());
// alert($(this).text())
// })
// });
// $(function() {
// $("li").bind("click", function(){
// alert($(this).text());
// })
// });
$(function() {
$("ul").delegate("li", "click", function() {
alert($(this).text());
})
});
</script>
</body>
</html>
委托
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>move exercise</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 src="../jquery-2.2.3.js"></script>
<script>
$(function() {
$("#title").mouseover(function() {
$(this).css("cursor", "move");
}).mousedown(function(e) {
var _event = e || window.event;
var old_x = _event.clientX;
var old_y = _event.clientY;
var parent_old_x = $(this).parent().offset().left;
var parent_old_y = $(this).parent().offset().top;
// 绑定鼠标拖动的事件
$(this).bind("mousemove", function(e) {
var _new_event = e || window.event;
var new_x = _new_event.clientX;
var new_y = _new_event.clientY;
var x = new_x - old_x;
var y = new_y - old_y;
var parent_new_x = parent_old_x + x;
var parent_new_y = parent_old_y + y;
$(this).parent().css("left", parent_new_x+"px");
$(this).parent().css("top", parent_new_y+"px");
})
}).mouseup(function() {
$(this).unbind("mousemove");
});
});
</script>
</body>
</html>
拖动窗口
ajax：普通和跨域（江西卫视的例子）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX 跨域</title>
</head>
<body>
<div>
<input type="button" value="获取节目" onclick="GetInfo();"/>
</div>
<div id="container">
</div>
<script src="../jquery-2.2.3.js"></script>
<script>
function GetInfo() {
$.ajax({
url: "http://www.jxntv.cn/data/jmd-jxtv2.html",
data: {},
type: "GET",
dataType: "jsonp",
jsonpCallback: "list",
success: function(arg) {
console.log(arg);
var jsonpArray = arg.data;
$.each(jsonpArray, function(k, v) {
var week = v.week;
var temp = "<h1>" + week + "</h1>";
$("#container").append(temp);
var infoArray = v.list;
$.each(infoArray, function(kk, vv) {
var infoLink = vv.link;
var infoName = vv.name;
var temp_2 = "<a href='" + infoLink+"'>" + infoName + "</a><br/>";
$("#container").append(temp_2);
})
})
},
error: function(arg) {
// 请求错误之后，自动执行的函数
}
})
}
</script>
</body>
</html>
跨域（jsonp）
jQuery插件
1、验证
a. 获取内容，正则表达式
b. return false
--> parsleyjs
http://parsleyjs.org/
--> jQuery Validate
http://jqueryvalidation.org/
# 不建议，直接使用 # 自己写， ==> 实现自己的定制化，以后自己写项目都可以用
2、UI
--> bxslider
http://bxslider.com/
--> Font Awesome
http://fontawesome.io/
a、图片，自己找图片，挖洞
b、现成的图标
css
使用样式
--以前版本
css
图片库
使用样式
-- 现在
css
字体文件
使用样式
c、css
字体文件
样式
=====> 大图片
--> Bootstrap
http://www.bootcss.com/
--> jQuery EasyUI
http://www.jeasyui.com/download/index.php
--> jQuery UI
http://jqueryui.com/
Python之路Day14的更多相关文章
- Python之路,Day14 - It's time for Django
Python之路,Day14 - It's time for Django 本节内容 Django流程介绍 Django url Django view Django models Django ...
- 初学python之路-day14
一.带参装饰器 # 通常,装饰器为被装饰的函数添加新功能,需要外界的参数 # -- outer参数固定一个,就是func # -- inner参数固定同被装饰的函数,也不能添加新参数 # -- 可以借 ...
- Python之路【第一篇】python基础
一.python开发 1.开发: 1)高级语言:python .Java .PHP. C# Go ruby c++ ===>字节码 2)低级语言:c .汇编 2.语言之间的对比: 1)py ...
- Python之路
Python学习之路 第一天 Python之路,Day1 - Python基础1介绍.基本语法.流程控制 第一天作业第二天 Python之路,Day2 - Pytho ...
- python之路 目录
目录 python python_基础总结1 python由来 字符编码 注释 pyc文件 python变量 导入模块 获取用户输入 流程控制if while python 基础2 编码转换 pych ...
- Python之路【第十九篇】：爬虫
Python之路[第十九篇]:爬虫 网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本.另外一些不常使用 ...
- Python之路【第十八篇】：Web框架们
Python之路[第十八篇]:Web框架们 Python的WEB框架 Bottle Bottle是一个快速.简洁.轻量级的基于WSIG的微型Web框架,此框架只由一个 .py 文件,除了Pytho ...
- Python之路【第十七篇】：Django【进阶篇 】
Python之路[第十七篇]:Django[进阶篇 ] Model 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接 ...
- Python之路【第十六篇】：Django【基础篇】
Python之路[第十六篇]:Django[基础篇] Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了O ...
随机推荐
- dp-史上最戳最长最臭代码-hdu-4733-G(x)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4733 题目大意: 定义G(x)=x⊕(x>>1).给两个由0.1.?组成的长度相同的字符 ...
- 合作开发，导入MyEclipse项目报错问题
因工作原因,同事将他的java项目交接给了我.和平时的交接一样.他把他最新的源代码,打成压缩包,发给我.我解压后,使用myeclipse开发工具,通过导入,将项目导入到我的开发工具中,这个时候有一个问 ...
- nginx与ios实现https双向认证
服务端配置 nginx关键配置例如以下: listen 443; server_name localhost; ssl on; ssl_certificate /usr/local/opt/nginx ...
- iOS面试题05-父子控制器、内存管理
内存管理.父子控制器面试题 1.建立父子关系控制器有什么用 回答:1>监听屏幕选中 2>如果想拿到你当前的很小的一个控制器所在的导航控制器必须要跟外面比较大的控制器建立父子关系,才能一层一 ...
- iOS NSMutableURLRequest 上传图片
- (void)postImage:(UIImage *)_image { //分界线的标识符 NSString *TWITTERFON_FORM_BOUNDARY = @"AaB03x&q ...
- FMDB 直接将查询结果转化为字典
今天学习FMDB框架,发现非常好用的一点,就是就以把查询结果直接转化为字典 NSString *querySql = @"select * from stuInfo"; NSMut ...
- mapreduce 关于小文件导致任务缓慢的问题
小文件导致任务执行缓慢的原因: 1.很容易想到的是map task 任务启动太多,而每个文件的实际输入量很小,所以导致了任务缓慢 这个可以通过 CombineTextInputFormat,解决,主要 ...
- 7．PHP 教程_PHP常量
常量值被定义后,在脚本的其他任何地方都不能被改变. PHP常量 常量是一个简单值的标识符.该值在脚本中不能改变. 一个常量由英文字母.下划线.和数字组成,但数字不能作为首字母出现.(常量名不需要加$修 ...
- 一个Sqrt函数引发的血案(转）
作者: 码农1946 来源: 博客园 发布时间: 2013-10-09 11:37 阅读: 4556 次 推荐: 41 原文链接 [收藏] 好吧,我承认我标题党了,不过既然你来了, ...
- 64位linux下安装oracle10 64位 遇到 ：ins_ctx.mk ；ins_emdb.mk
http://blog.csdn.net/bamuta/article/details/10523835 http://www.cnblogs.com/kerrycode/p/3519446.html ...