py-day17-jquery
jquery实现案例
案例：
1、点赞
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
padding: 50px;
border: 1px solid #dddddd;
}
.item{
position: relative;
width: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div> <script src="jquery-1.12.4.js"></script>
<script>
$('.item').click(function () {
AddFavor(this);
}); function AddFavor(self) {
// DOM对象
var fontSize = 15;
var top = 0;
var right = 0;
var opacity = 1; var tag = document.createElement('span');
$(tag).text('+1');
$(tag).css('color','green');
$(tag).css('position','absolute');
$(tag).css('fontSize',fontSize + "px");
$(tag).css('right',right + "px");
$(tag).css('top',top + 'px');
$(tag).css('opacity',opacity);
$(self).append(tag); var obj = setInterval(function () {
fontSize = fontSize + 10;
top = top - 10;
right = right - 10;
opacity = opacity - 0.1; $(tag).css('fontSize',fontSize + "px");
$(tag).css('right',right + "px");
$(tag).css('top',top + 'px');
$(tag).css('opacity',opacity);
if(opacity < 0){
clearInterval(obj);
$(tag).remove();
}
}, 40); }
</script> </body>
</html>
2、多选、反选、取消、编辑、删除
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.hide{
display: none;
}
.modal{
position: fixed;
top: 50%;
left: 50%;
width: 500px;
height: 400px;
margin-left: -250px;
margin-top: -250px;
background-color: #eeeeee;
z-index: 10;
}
.shadow{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.6;
background-color: black;
z-index: 9;
}
</style>
</head>
<body>
<div style="border: 1px solid #ddd;width: 700px;position: absolute;">
<div id="title" style="background-color: black;height: 40px;"></div>
<div style="height: 500px;">
<div class="ziti" style="float: left;margin-left: 200px">
<p><b>运维主机如下：</b></p>
<input type="button" value="添加" onclick="addElement();" class="ziti shou " onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" />
<input type="button" value="全选" onclick="chooseAll();" class="ziti shou" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000'" />
<input type="button" value="取消" onclick="cancleAll();" class="ziti shou" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000'" />
<input type="button" value="反选" onclick="reverseAll();" class="ziti shou" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000'" />
<input type="button" value="编辑模式" class="ziti shou edit" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000'" /> <table border="1" id="zs">
<thead>
<tr>
<th>选择</th>
<th>主机名</th>
<th>IP</th>
<th>端口</th>
<th>操作</th>
</tr>
</thead >
<tbody id="tb"> <tr>
<td>
<input type="checkbox" />
</td>
<td target="hostname">aa</td>
<td target="ip">192.168.1.1</td>
<td target="port">22</td>
<td><input class="edit" type="button" value="编辑" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /> | <input class="del" type="button" value="删除" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /></td>
</tr>
<tr>
<td><input type="checkbox" id="test" /></td>
<td target="hostname">aa</td>
<td target="ip">192.168.2.2</td>
<td target="port">80</td>
<td><input class="edit" type="button" value="编辑" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /> | <input class="del" type="button" value="删除" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td target="hostname">aa</td>
<td target="ip">192.168.3.3</td>
<td target="port">8080</td>
<td><input class="edit" type="button" value="编辑" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /> | <input class="del" type="button" value="删除" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td target="hostname">aa</td>
<td target="ip">192.168.4.4</td>
<td target="port">8080</td>
<td><input class="edit" type="button" value="编辑" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /> | <input class="del" type="button" value="删除" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td target="hostname">aa</td>
<td target="ip">192.168.5.5</td>
<td target="port">88</td>
<td><input class="edit" type="button" value="编辑" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /> | <input class="del" type="button" value="删除" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td target="hostname">aa</td>
<td target="ip">192.168.6.6</td>
<td target="port">66</td>
<td><input class="edit" type="button" value="编辑" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /> | <input class="del" type="button" value="删除" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td target="hostname">aa</td>
<td target="ip">192.168.8.8</td>
<td target="port">111</td>
<td><input class="edit" type="button" value="编辑" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /> | <input class="del" type="button" value="删除" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td target="hostname">aa</td>
<td target="ip">192.168.9.9</td>
<td target="port">23</td>
<td><input class="edit" type="button" value="编辑" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /> | <input class="del" type="button" value="删除" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td target="hostname">aa</td>
<td target="ip">192.168.10.10</td>
<td target="port">99</td>
<td><input class="edit" type="button" value="编辑" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /> | <input class="del" type="button" value="删除" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td target="hostname">aa</td>
<td target="ip">192.168.11.11</td>
<td target="port">000</td>
<td><input class="edit" type="button" value="编辑" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /> | <input class="del" type="button" value="删除" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td target="hostname">aa</td>
<td target="ip">192.168.12.12</td>
<td target="port">66</td>
<td><input class="edit" type="button" value="编辑" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /> | <input class="del" type="button" value="删除" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /></td>
</tr>
</tbody>
</table>
<div class="modal hide">
<div>
<input name="hostname" type="text" />
<input name="ip" type="text" />
<input name="port" type="text" />
</div> <div>
<input type="button" value="取消" onclick="cancelModal();" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '"/>
<input type="button" value="确定" onclick="confirmModal();" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '"/>
</div>
</div> <div class="shadow hide"></div>
</div>
</div>
</div> <script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
$(function(){
$('#title').mouseover(function(){
$(this).css('cursor','move');
});
$("#title").mousedown(function(e){
//console.log($(this).offset());
var _event = e || window.event;
var ord_x = _event.clientX;
var ord_y = _event.clientY; var parent_left = $(this).parent().offset().left;
var parent_top = $(this).parent().offset().top; $('#title').on('mousemove', function(e){
var _new_event = e || window.event;
var new_x = _new_event.clientX;
var new_y = _new_event.clientY; var x = parent_left + (new_x - ord_x);
var y = parent_top + (new_y - ord_y); $(this).parent().css('left',x+'px');
$(this).parent().css('top',y+'px'); })
});
$("#title").mouseup(function(){
$("#title").off('mousemove');
});
})
</script> <script>
function chooseAll(){
$('#tb :checkbox').prop('checked',true);
}
function cancleAll(){
$('#tb :checkbox').prop('checked',false);
}
function reverseAll(){
$(':checkbox').each(function(){
var v = $(this).prop('checked')?false:true;
$(this).prop('checked',v);
})
} </script> <script> $('.del').click(function () {
$(this).parent().parent().remove();
}); function confirmModal() {
var liu = '<tr> <td><input type="checkbox" /></td> <td>aa</td> <td>192.168.10.10</td> <td>99</td> <td><input class="edit" type="button" value="编辑" /> | <input class="del" type="button" value="删除" /></td> </tr>';
$("#tb").append(liu) $(".modal,.shadow").addClass('hide'); } function addElement() {
$(".modal,.shadow").removeClass('hide');
}
function cancelModal() {
$(".modal,.shadow").addClass('hide');
$('.modal input[type="text"]').val("");
} $('.edit').click(function(){
$(".modal,.shadow").removeClass('hide');
// this
var tds = $(this).parent().prevAll();
tds.each(function () {
// 获取td的target属性值
var n = $(this).attr('target');
// 获取td中的内容
var text = $(this).text();
var a1 = '.modal input[name="';
var a2 = '"]';
var temp = a1 + n + a2;
$(temp).val(text);
});
});
</script>
</body>
</html>
3、菜单1 | 2 | 3 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.menu{
height: 38px;
background-color: #eeeeee;
line-height: 38px;
}
.active{
background-color: brown;
}
.menu .menu-item{
float: left;
border-right: 1px solid red;
padding: 0 5px;
cursor: pointer;
}
.content{
min-height: 100px;
border: 1px solid #eeeeee;
}
</style>
</head>
<body> <div style="width: 700px;margin:0 auto"> <div class="menu">
<div class="menu-item active" a="1">菜单一</div>
<div class="menu-item" a="2">菜单二</div>
<div class="menu-item" a="3">菜单三</div>
</div>
<div class="content">
<div b="1">内容一</div>
<div class="hide" b="2">内容二</div>
<div class="hide" b="3">内容三</div>
</div> </div> <script src="jquery-1.12.4.js"></script>
<script>
$('.menu-item').click(function(){
$(this).addClass('active').siblings().removeClass('active');
var target = $(this).attr('a');
$('.content').children("[b='"+ target + "']").removeClass('hide').siblings().addClass('hide');
});
</script>
</body>
</html>
4、标题
内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.header{
background-color: black;
color: wheat;
}
.content{
min-height: 50px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div style="height:400px;width: 200px;border: 1px solid #dddddd">
<div class="item">
<div class="header">标题一</div>
<div id="i1" class="content hide">内容</div>
</div>
<div class="item">
<div class="header">标题二</div>
<div class="content hide">内容</div>
</div> <div class="item">
<div class="header">标题三</div>
<div class="content hide">内容</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.header').click(function(){
// 当前点击的标签 $(this)
// 获取某个标签的下一个标签
// 获取某个标签的父标签
// 获取所有的兄弟标签
// 添加样式和移除样式
// $('.i1').addClass('hide')
// $('#i1').removeClass('hide')
// var v = $("this + div");
// $("label + input")
// console.log(v);
//
// $("afsldkfja;skjdf;aksdjf") // 筛选器
/*
$(this).next() 下一个
$(this).prev() 上一个
$(this).parent() 父
$(this).children() 孩子
$('#i1').siblings() 兄弟
$('#i1').find('#i1') 子子孙孙中查找
// . . .
//
$('#i1').addClass(..)
$('#i1').removeClass(..)
*/ // 链式编程
// $(...).click(function(){
// this..
// }) // $(this).next().removeClass('hide');
// $(this).parent().siblings().find('.content').addClass('hide') $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide') })
</script>
</body>
</html>
5、jquery超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a onclick="return ClickOn()" href="http://www.oldboyedu.com">走你1</a> <a id="i1" href="http://www.oldboyedu.com">走你2</a>
<script src="jquery-1.12.4.js"></script>
<script>
function ClickOn() {
alert(123);
return true;
}
$('#i1').click(function () {
alert(456);
return false;
})
</script>
</body>
</html>
6、有规则添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="t1" type="text" />
<input id="a1" type="button" value="添加" /> <ul id="u1">
<li>1</li>
<li>2</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$('#a1').click(function () {
var v = $('#t1').val();
var temp = "<li>" + v + "</li>";
$('#u1').append(temp);
}); // $('ul li').click(function () {
// var v = $(this).text();
// alert(v);
// }) // $('ul li').bind('click',function () {
// var v = $(this).text();
// alert(v);
// }) // $('ul li').on('click', function () {
// var v = $(this).text();
// alert(v);
// }) $('ul').delegate('li','click',function () {
var v = $(this).text();
alert(v);
}) </script>
</body>
</html>
7、<div></div>鼠标可随意拖动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="border: 1px solid #ddd;width: 700px;position: absolute;">
<div id="title" style="background-color: black;height: 40px;"></div>
<div style="height: 500px;">
<div class="ziti" style="float: left;margin-left: 200px"></div>
</div>
</div>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
$(function(){
$('#title').mouseover(function(){
$(this).css('cursor','move');
});
$("#title").mousedown(function(e){
//console.log($(this).offset());
var _event = e || window.event;
var ord_x = _event.clientX;
var ord_y = _event.clientY; var parent_left = $(this).parent().offset().left;
var parent_top = $(this).parent().offset().top; $('#title').on('mousemove', function(e){
var _new_event = e || window.event;
var new_x = _new_event.clientX;
var new_y = _new_event.clientY; var x = parent_left + (new_x - ord_x);
var y = parent_top + (new_y - ord_y); $(this).parent().css('left',x+'px');
$(this).parent().css('top',y+'px'); })
});
$("#title").mouseup(function(){
$("#title").off('mousemove');
});
})
</script>
</body>
</html>
py-day17-jquery的更多相关文章
- python_way day17 jQuery表单验证，事件绑定，插件，文本框架，正则表达式
python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...
- Python学习-day17 jQuery method and demo
一:介绍: jQuery:是DOM和js的封装.jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多).现在大多数的pc端的网站都 ...
- [Python自学] day-17 (jQuery)
一.jQuery简介 参考文档链接:http://jquery.cuishifeng.cn/ jQuery是JS的一个类库,是对DOM.BOM等的封装,方便我们来查找和操作元素. jQuery分为1. ...
- Django之验证码 + session 认证
验证码 + session认证 目录结构 . └── project ├── app01 │ ├── admin.py │ ├── apps.py │ ├── __init__.py │ ...
- python 全栈开发，Day130(多玩具端的遥控功能, 简单的双向聊天,聊天记录存放数据库,消息提醒,玩具主动发起消息,玩具主动发起点播)
先下载github代码,下面的操作,都是基于这个版本来的! https://github.com/987334176/Intelligent_toy/archive/v1.3.zip 注意:由于涉及到 ...
- python 全栈开发，Day129(玩具开机提示语,为多个玩具发送点播,聊天界面,app录音,app与服务器端文件传输,简单的对话)
一.玩具开机提示语 先下载github代码,下面的操作,都是基于这个版本来的! https://github.com/987334176/Intelligent_toy/archive/v1.2.zi ...
- python 全栈开发，Day67(Django简介)
昨日内容回顾 1. socket创建服务器 2. http协议: 请求协议 请求首行 请求方式 url?a=1&b=2 协议 请求头 key:value 请求体 a=1&b=2(只有p ...
- web.py网页模板中使用jquery
由于$是web.py针对模板的保留字符,所以在模板文件内不能直接使用$("#id")的格式. 解决办法: 1.$$("#id")可以避免$被误解析 2.jque ...
- jQuery Ajax使用FormData上传文件和其他数据，后端web.py获取
参考博文: 通过jQuery Ajax使用FormData对象上传文件 方法一:使用<form>表单初始化FormData对象方式上传文件 前端(JQuery): <form enc ...
- python_way day17 html-day3 前端插件（fontawsome，easyui，bootstrap，jqueryui，bxslider，jquerylazyload），web框架
python_way day17 一.模板插件 图标的插件 fontawsome: 后台管理: easyui jqueryui 很多网站都会用: bootstrap :引入jQuery:(2.x,1. ...
随机推荐
- 微信自带浏览器被输入法阻挡文本框的 jQuery 解决方法 by FungLeo
微信自带浏览器被输入法阻挡文本框的 jQuery 解决方法 by FungLeo 前言 做好了项目之后,在各种浏览器里面測试,都没有问题.非常高兴,交付后端使用.然而发如今微信自带浏览器里面,却是出现 ...
- Spring MVC传值乱码解决
在web.xml中进行配置,加入以下代码: <!-- 乱码解决 --> <filter> <filter-name>characterEncodingFilter& ...
- PHP计算两个时间差的方法
<?php //PHP计算两个时间差的方法 $startdate="2010-12-11 11:40:00"; $enddate="2012-12-12 11:45 ...
- Qt Creator设置黑色主题背景
黑色的主题看起来比較炫酷一点.也有人说黑色主题用起来对眼睛好.只是个人感觉然并卵,依据自己的习惯爱好设置就好. 假设想保护眼睛,还是将屏幕调到合适的亮度,不要太暗.自己眼睛认为舒服最好.也能够通过&q ...
- 传统的Java虚拟机和Android的Dalvik虚拟机及其ART模式
Java虚拟机的解释执行引擎称为“基于栈的执行引擎”,其中所指的“栈”就是操作数栈.因此我们也称Java虚拟机是基于栈的,这点不同于Android虚拟机,Android虚拟机是基于寄存器的. 基于栈的 ...
- C#.NET开源项目、机器学习、Power BI (转载)
.NET技术, 开源项目, 数据挖掘, 机器学习, 微软Power BI, 足球赛事分析, Matlab与C#编程 博客园 管理 本站首页 头条推荐 Power BI .NET开源 机器学习 博客美化 ...
- mysql启动warning: World-writable config file
如果在启动warning: World-writable config file /home/mysql/my.cnf is ignored原因:my.cnf的读取权限进行了设置,不允许World-w ...
- EasyDarwin开源流媒体服务器gettimeofday性能优化（3000万/秒次优化至8000万次/秒）
-本文由EasyDarwin开源团队成员贡献 一.问题描述 Easydarwin中大量使用gettimeofday来获取系统时间,对系统性能造成了一定的影响.我们来做个测试: While(1) { G ...
- java基础知识查漏 四
1.JAVA多线程实现方式 (1)继承Thread类,并重写run()方法 (2)实现Runnable接口,,实现run()方法 (3)使用ExecutorService.Callable.Futur ...
- 在给mysql数据库备份时，报错： mysqldump: Got error: 145: Table '.\shengdaxcom\pre_forum_thread' is marked as c rashed and should be repaired when using LOCK TABLES
在给mysql数据库备份时,报错: mysqldump: Got error: 145: Table '.\shengdaxcom\pre_forum_thread' is marked as cra ...