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 ...
随机推荐
- 64位WINDOWS系统环境下应用软件开发的兼容性问题（CPU 注册表 目录）
应用软件开发的64 位WINDOWS 系统环境兼容性 1. 64 位CPU 硬件 目前的64位CPU分为两类:x64和IA64.x64的全称是x86-64,从名字上也可以看出来它和 x86是兼容的,原 ...
- windows 下面的内存泄漏排查.
内存泄漏排查 一下本人只是简单的介绍一个实用, 如果读者很感兴趣, 可以查阅msdn自己去深入调查相关的API和原理. API 介绍 1. 马上打印泄漏信息:_CrtDumpMemoryLeaks() ...
- 物理DG主备库切换时遇到ORA-16139: media recovery required错误
在物理DG主备库切换时遇到ORA-16139: media recovery required错误 SQL> ALTER DATABASE COMMIT TO SWITCHOVER TO PRI ...
- 视频媒体播放，最好的 HTML 解决方法
最好的 HTML 解决方法 HTML 5 + <object> + <embed> <video width="320" height="2 ...
- 运用DIV拖拽实现resize和碰撞检测
运用DIV拖拽实现resize和碰撞检测 Div由拖拽改变大小 演示demo 当我们运用html元素"textarea"写一个文本输入框时,浏览器会自动生成以下样式 用鼠标拖动右下 ...
- 10min系列之二日志可视化进阶
10min系列之二日志可视化进阶(作者原创,同步发布在github) 本文需要有一定的python和前端基础,如果没基础的,请关注我后续的基础教程系列博客 本文所有的demo,都是浏览器下展示的 原创 ...
- 08-C语言循环
目录: 一.for循环 二.break,continue 三.循环嵌套 四.while 五.do while 六.三个循环的对比 七.空语句 回到顶部 一.for循环 标识每次循环,循环终止条件,循环 ...
- [转]swift 学习资源 大集合
今天看到了一个swift的学习网站,里面收集了很多学习资源 [转自http://blog.csdn.net/sqc3375177/article/details/29206779] Swift 介绍 ...
- 基于SIM 卡卡基不同制作工艺的研究
1 国内外现行的SIM 卡卡基制作工艺 SIM 卡由卡基和芯片两部分组成.卡基上有植入芯片的台阶式芯片槽,SIM 卡的芯片通过多点焊接植入台阶式芯片槽之中与卡基组成SIM 卡,然后经过个性化数据处理, ...
- SIM卡厂商的识别方法
ICCID(SIM卡号码)的定义应该是: 1-6位:国际移动运营商识别码(IMSI),898600为中国移动,898601为中国联通 7-20位:移动和联通的定义是不同的. 中国移动: 第7.8 ...