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 ...
随机推荐
- RTTI、虚函数和虚基类的实现方式、开销分析及使用指导（虚函数的开销很小，就2次操作而已）
白杨 http://baiy.cn “在正确的场合使用恰当的特性” 对称职的C++程序员来说是一个基本标准.想要做到这点,首先要了解语言中每个特性的实现方式及其开销.本文主要讨论相对于传统 C 而言, ...
- android HTTP发送及MD5加密收集
发送部分: public void MyFunction{ HttpClient httpclient = new DefaultHttpClient(); //你的URL HttpPost http ...
- HDU 4417 Super Mario
题解:函数式线段树求区间小于等于k的数有几个,离线做法,首先将所有询问和序列一起离散,然后用函数式线段树处理. #include <map> #include <cstdio> ...
- thoughtbot/capybara-webkit
thoughtbot/capybara-webkit A capybara driver that uses WebKit via QtWebKit. Qt Dependency and Instal ...
- localstroge与cookie的区别
HTML5本地存储是一种让网页可以把键值对存储在用户浏览器客户端的方法.像Cookie一样,这些数据不会因为你打开新网站,刷新页面,乃至关闭你的浏览器而消失. 而与Cookie不同的时,这些数据不会每 ...
- 解决Agent admitted failure to sign using the kye with ssh
之前如果建立 ssh 连接,只要將公匙复制到~/.ssh/authorized_keys就可以直接登录而不需要建立密碼. 如果在使用时候出现如下信息: Agent admitted failure t ...
- string s = HttpContext.Current.Server.MapPath("");
string s = HttpContext.Current.Server.MapPath(""); 获取当前文件夹路径 而后用相对路径读取图片
- List(双向链表)
List是一种双向链表结构,可以从第一个元素开始删除.插入,也可以从最后一个元素删除.插入,下面介绍一下 List 中常用的几个函数: 一.List 中的 begin 和 end 函数 : 和其他几种 ...
- 关于tomcat的clean
1 添加了一个web项目到tomcat,然后进行clean的时候,根目录实际上是在WebContent下,也就是说存放在WebContent目录下的所有文件在clean的时候才会被添加到tomcat对 ...
- 创建android 模拟器并在cmd中打开
因为在运行monkeyrunner之前必须先运行相应的模拟器或连接真机,否则monkeyrunner无法连接到设备,运行模拟器有两种方法:1.通过eclipse中执行模拟器 2.在CMD中通过命令调用 ...