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 ...
随机推荐
- HDU 3374 String Problem （KMP+最小最大表示）
[题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=3374 [题目大意] 给出一个字符串,求出最小和最大表示是从哪一位开始的,并且输出数量. [题解] ...
- python import 自己的包
在写python时,有时候写的一个python文件可能需要被其他python文件所用,那么可以用导入包 import 的 方式: 1.自己写的包放到哪里? >>> import sy ...
- 字符串的MD5的32位加密和16位加密
import java.security.MessageDigest; import java.util.Locale; public class MD5Util { public static St ...
- C++ Primer 学习笔记_88_用于大型程序的工具 --异常处理[续1]
用于大型程序的工具 --异常处理[续1] 四.又一次抛出 有可能单个catch不能全然处理一个异常.在进行了一些校正行动之后,catch可能确定该异常必须由函数调用链中更上层的函数来处理,catch能 ...
- ADO.NET详解----核心对象的使用
一.Connection对象 指定某个具体数据源以及提供登陆方式及用户名与密码. Connection对象的主要成员: 1.ConnectionString属性:连接字符串,指定要操作的数据库以及登录 ...
- centos7 环境搭建
centos7 环境搭建 CentOS-7-x86_64-DVD-1511.iso vmware121. 安装 使用iso安装系统:2. 修改yum源到光盘 先把光盘C ...
- Java虚拟机体系结构
转自:http://www.cnblogs.com/java-my-life/archive/2012/08/01/2615221.html JAVA虚拟机的生命周期 一个运行时的Java虚拟机实例的 ...
- dubbo架构演变之路
背景 (#) 随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. 单一应用架构 当网站流量很小时, ...
- 设置windows密码只存在NTLM-Hash下
修改注册表 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Lsa 下添加名为"NoLMHash"的DWORD值,并设置为1 ...
- cocos2dx 随机函数
cocos2dx 随机数 2.2.3版本 1.初始化时设定随机数种子,只需一次. time_t now = time(NULL); srand((unsigned int)now); 2.需要的时候 ...