Python学习笔记第十七周
目录:
一、jQuery
内容:
一、jQuery:
ps:版本
1.xx (推荐最新版本,兼容性好)
2.xx
3.xx
转换:
jQuery对象[0] => DOM对象
$(DOM对象) => jQuery对象
1、查找元素
基本:
1、id $('#id')
2、class $('.classname')
3、a标签 $('a')
4、$(''a,.c2',#i10) 表示同时拿到所有的a标签、class=c2的标签和id=i10的标签
层级:
$('#i10 a') 表示找到id=10里的所有a标签,不论层级多少都能找到
$('#i10>a') 表示找到id=i10后,只找到它的child的a标签
$('#i10+a') 表示找到id=i 10后,找到它的下一个兄弟的a标签
$('#i10~a') 表示找到id=i 10后,找到它的上一个兄弟的a标签
基本筛选器:
:first
:last
:eq() 索引值,从零开始
:not()
:even 奇数行
:odd 偶数行
:gt()
:lt()
:header 匹配 h1~h6的标题元素
查找:
next() 下一个标签
prev()上一个标签
parent()父标签
children()所有的孩子标签
siblings()所有的兄弟标签
find() 查找所有的内容
nextAll()
nextUntil()
prevAll()
prevUntil()
parents()
parentsUntil()
eq()
first()
last()
hasClass()
属性:
$('[属性]') 具有所有该属性的标签
$('[属性=“值”]') 所有有该属性对应该值的标签
例子:
$("input[type='text']") 查找input标签里type等于text的标签
例子:多选、反选、取消实例
<!--实例:-->
<!--多选/反选/全选-->
<!-- -选择器-->
<!-- -$(this).prop('checked') 获取值-->
<!-- -$(this).prop('checked',false) 设置值-->
<!-- -jQuery方法内置循环:$('[type="checkbox"]').prop('checked',true);-->
<!-- -var v = 条件? 真值:假值-->
<!-- -$('[type="checkbox"]').each(function () {-->
<!--var v = $(this).prop('checked')?false:true;//三元运算-->
<!--$(this).prop('checked',v)-->
<!--})-->
<!--} this表示DOM元素-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body>
<input type="button" value="全选" onclick="checkAll();"/>
<input type="button" value="反选" onclick="reverseAll();"/>
<input type="button" value="取消" onclick="cancelAll();"/>
<table border="1">
<thead>
<tr>
<th>选项</th>
<th>IP</th>
<th>PORT</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
function checkAll(){
$('[type="checkbox"]').prop('checked',true);
}
function cancelAll(){
$('[type=checkbox]').prop('checked',false);
}
function reverseAll(){
$('[type="checkbox"]').each(function () {
//this 代指当前循环的每一个元素
//反选
//DOM方式
// if(this.checked){
// this.checked = false;
// }else{
// this.checked = true;
// }
//jQuery方式
// if($(this).prop('checked')){//prop传递一个参数表示获取状态值
// $(this).prop('checked',false);//prop传递两个参数表示设置值
// }else{
// $(this).prop('checked',true);
// }
var v = $(this).prop('checked')?false:true;//三元运算
$(this).prop('checked',v)
})
}
</script>
</body>
</html>
例子:左侧边框显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.header{
background-color:black;
color:white;
}
.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">标题1</div>
<div class="content ">内容</div>
</div>
<div class="item">
<div class="header">标题2</div>
<div class="content hide">内容</div>
</div>
<div class="item">
<div class="header">标题3</div>
<div class="content hide">内容</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.header').click(function(){
//$(this)表示当前点击的标签
//获取该标签的上一级标签,找到它上一级标签的兄弟标签
//添加样式和移除样式
// $(this).parent().siblings().find('.content').addClass('hide');
// $(this).next().removeClass('hide');
//链式编程
$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');
})//把所有class=header都绑定onclick事件
</script>
</body>
</html>
2、操作元素
文本操作:
text()获取内容 ()里加参数是设置文本内容,如果包含标签html不解析
html() 获取标签 ()力加参数是设置内容,包含标签自动解析
val()获取input select textarea中标签
例子:
模态对话框,使用jQuery实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display:none;
}
.shadow{
position:fixed;
top:0;
bottom:0;
right:0;
left:0;
opacity: 0.6;
z-index:9;
background-color:black;
}
.addcontent{
position:fixed;
top:50%;
left:50%;
width:500px;
height:400px;
margin-top:-250px;
margin-left:-200px;
z-index:10;
background-color:white;
}
</style>
</head>
<body>
<div id='add1' border="1">添加</div>
<table border="1">
<thead>
<tr>
<th>IP</th>
<th>PORT</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1.1.1</td>
<td>80</td>
<td class="edit"><a>修改</a> | <a>删除</a></td>
</tr>
<tr>
<td>1.1.1.2</td>
<td>80</td>
<td class="edit"><a>修改</a> | <a>删除</a></td>
</tr>
<tr>
<td>1.1.1.3</td>
<td>80</td>
<td class="edit"><a>修改</a> | <a>删除</a></td>
</tr>
</tbody>
<div class="shadow hide"></div>
<div class="addcontent hide">
<div><input name='hostname' type="text"/></div>
<div><input name='port' type="text"/></div>
<div><input type="button" value="确定"/><input class='c1' type="button" value="取消"/></div>
</div>
</table>
<script src="jquery-1.12.4.js"></script>
<script >
$('#add1').click(function(){
$('.shadow').removeClass('hide').next().removeClass('hide');
$('.addcontent input[type="text"]').val(''); });
$('.c1').click(function(){
$(".shadow").addClass('hide').next().addClass('hide');
});
$('.edit').click(function() {
$('.shadow').removeClass('hide').next().removeClass('hide');
var port = $($(this).prevAll()[0]).text();
var ip = $($(this).prevAll()[1]).text();
console.log($('.addcontent input[name="hostname"]').val('123'))
$('.addcontent input[name="hostname"]').val(ip);
$('.addcontent input[name="port"]').val(port);
}); </script>
</body>
</html>
样式操作:
addClass()
removeClass()
toggleClass()自动判断括号内class是否存在,如果存在就删除,如果不存在就添加
例子:
开关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<input id='i1' type="button" value="开关"/>
<div class="c1">aaaaaa</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('#i1').click(function(){
$('.c1').toggleClass('hide')
})
</script>
</body>
</html>
属性操作:
#专门用于做自定义属性
.attr(): attr('属性名') 获取属性名称对应的属性 .attr('name', 'gavin') 传两个参数表示设置值
removeAttr(‘属性名’): 删除属性
#专门用于checkbox,radio操作
.prop
例子:增强版模态对话框(可以任意添加属性值)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display:none;
}
.shadow{
position:fixed;
top:0;
bottom:0;
right:0;
left:0;
opacity: 0.6;
z-index:9;
background-color:black;
}
.addcontent{
position:fixed;
top:50%;
left:50%;
width:500px;
height:400px;
margin-top:-250px;
margin-left:-200px;
z-index:10;
background-color:white;
}
</style>
</head>
<body>
<div id='add1' border="1">添加</div>
<table border="1">
<thead>
<tr>
<th>IP</th>
<th>PORT</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td target="hostname">1.1.1.1</td>
<td target="port">80</td>
<td target="name">a</td>
<td class="edit"><a>修改</a> | <a>删除</a></td>
</tr>
<tr>
<td target="hostname">1.1.1.2</td>
<td target="port">80</td>
<td target="name">b</td>
<td class="edit"><a>修改</a> | <a>删除</a></td>
</tr>
<tr>
<td target="hostname">1.1.1.3</td>
<td target="port">80</td>
<td target="name">c</td>
<td class="edit"><a>修改</a> | <a>删除</a></td>
</tr>
</tbody>
<div class="shadow hide"></div>
<div class="addcontent hide">
<div><input name='hostname' type="text"/></div>
<div><input name='port' type="text"/></div>
<div><input name='name' type="text"/></div>
<div><input type="button" value="确定"/><input class='c1' type="button" value="取消"/></div>
</div>
</table>
<script src="jquery-1.12.4.js"></script>
<script >
$('#add1').click(function(){
$('.shadow').removeClass('hide').next().removeClass('hide');
$('.addcontent input[type="text"]').val(''); });
$('.c1').click(function(){
$(".shadow").addClass('hide').next().addClass('hide');
});
$('.edit').click(function() {
$('.shadow').removeClass('hide').next().removeClass('hide');
$(this).prevAll().each(function(){
var tap = $(this).attr('target');
var text = $(this).text();
$('.addcontent input[name="' + tap + '"]').val(text);
})
}); </script>
</body>
</html>
index() 获取索引位置
eq($(this).index()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.menu{
height: 38px;
line-height:38px;
background-color:#eeeeee;
border-bottom:1px solid #dddddd; }
.menu .menu-item{
float:left;
border-right:1px solid red;
padding:0 20px;
cursor:pointer; }
.content{
min-height:100px;
border:1px solid #dddddd;
}
.active{
background-color:green;
}
</style>
</head>
<body>
<div style="width:700px;margin:0 auto;">
<div class="menu">
<div class="menu-item ">菜单1</div>
<div class="menu-item ">菜单2</div>
<div class="menu-item ">菜单3</div>
<div style="clear:both"></div>
</div>
<div class="content">
<div class="cotent-item ">内容1</div>
<div class="cotent-item hide">内容2</div>
<div class="cotent-item hide">内容3</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.menu-item').click(function(){
$(this).addClass('active').siblings().removeClass('active');
$('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide'); })
</script>
</body>
</html>
文档处理:
append 添加到最后一个位置
prepend 添加到第一个位置
after 添加到元素的后面
before 添加到元素的前面
remove 删除样式和内容
empty 只删除内容, 不删除样式
clone 复制选定的内容
例子:模态对话框的删除功能:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<style>
.hide{
display:none;
}
.shadow{
position: fixed;
top:0;
right:0;
left:0;
bottom:0;
background-color:black;
opacity: 0.6;
z-index: 9;
}
.menu{
position:fixed;
top:50%;
left:50%;
background-color:#eeeeee;
width:400px;
height:500px;
margin-top:-250px;
margin-left:-200px;
z-index:10;
} </style>
</head>
<body>
<a id="add">添加</a>
<table border="1">
<thead>
<tr>
<th >IP</th>
<th >Port</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td target="hostname">1.1.1.1</td>
<td target="hostname">80</td>
<td><a class="edit">编辑</a> | <a class="del">删除</a></td>
</tr>
<tr>
<td target="hostname">1.1.1.2</td>
<td target="port">80</td>
<td><a class="edit">编辑</a> | <a class="del">删除</a></td>
</tr>
<tr>
<td target="hostname">1.1.1.3</td>
<td target="port">80</td>
<td><a class="edit">编辑</a> | <a class="del">删除</a></td>
</tr>
</tbody>
</table>
<div>
<div class="menu hide">
<input target="hostname" type="text"/>
<input target="port" type="text"/>
<div>
<input id="remove" type="button" value="取消"/>
</div>
</div> </div>
<div class="shadow hide"></div>
<script src="jquery-1.12.4.js"></script>
<script>
$("#add").click(function(){
$('.menu, .shadow').removeClass('hide');
$('.menu input[type="text"]').val("")
});
$('#remove').click(function(){
$('.menu, .shadow').addClass('hide');
});
$('.edit').click(function(){
$('.menu, .shadow').removeClass('hide');
var tds = $(this).parent().prevAll();
tds.each(function(){
var target = $(this).attr('target');
var value = $(this).text();
$('.menu input[target="'+target+'"]').val(value);
});
});
$('.del').click(function () {
$(this).parent().parent().remove();
})
</script>
</body>
</html>
css处理:
$('t1').css('样式名称',‘样式值’)
例子:点赞功能
知识点:
- $().append()
- setInterval()
- 透明度 1---> 0
- position
- 字体大小,位置
-clearInterval
-setInterval
-remove
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点赞</title>
<style>
.container{
padding:50px;
border:1px solid #dddddd;
}
.item{
position:relative;
width:48px;
}
</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('top',top + 'px');
$(tag).css('right',right+ 'px');
$(tag).css('opacity',opacity);
$(self).append(tag); var obj = setInterval(function(){
fontSize += 10;
top -= 10;
right -= 10;
opacity -= 0.1;
$(tag).css('fontDSize',fontSize + 'px');
$(tag).css('right',right + 'px');
$(tag).css('top',top + 'px');
$(tag).css('opacity',opacity);
if(opacity < 0){
clearInterval(obj);
$(tag).remove();
} },100)
}
</script>
</body>
</html>
位置:
scrollTop() 不加值表示获取
scrollTop(值) 表示设置
scrollLeft()
offset 指定标签在文档中的坐标
offset().top offset().left 指定标签的横纵坐标
position() 指定标签相对父标签(relative)的坐标
height()获取标签的高度,只能看到纯高度
innerHeight() 只获取边框+纯高度
outerHeight() 获取边框+ 纯高度+边距
outerHeight(true)
#纯高度、边框、外边距、内边距
绑定事件:
click() 等操作
bind('click',function(){})
unbind('click',function(){})
delegate('a','click', function(){}) 委托方式
undelegate('a','click', function(){}) 委托方式
on('click', function(){})
off('click',function(){})
绑定事件的问题:
默认情况下,需要在所有元素都加载完毕后才执行js操作,例如当执行js时,如果上述有图片之类需要加载,需要在等图片加载完毕后,才能执行js操作,在图片加载过程中,其实事件已经可以操作,所以在js中,可以变为当页面框架加载完毕后,自动执行:
操作方式:
<script>
$(function(){});将执行的操作放入该匿名函数中,可以保证在页面框架加载完毕后就开始执行操作
</script>
jQuery扩展:
- $.extend $.方法
- $.fn.extend $(变量).方法
自己写的时候需要写成自执行函数
(function(arg){
//使用该方式引入可以封装其他人在定义时的全局变量
var status =1;
arg.extend({
'function_name': function(){
return 'XXX';
})
})(jQuery);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery扩展</title>
</head>
<body> <script src="jquery-1.12.4.js"></script>
<script src="plugin1.js"></script>
<script>
//通过文件方式调用
var v = $.wangsen();
alert(v);
//调用方式1
// $.extend({
// 'wangsen':function(){
// return 'sb';
// }
// });
// var v = $.wangsen();
// alert(v); //调用方式2:
// $.fn.extend({
// 'hanyang': function(){
// return 'db';
// }
// });
// var v = $('#i1').hanyang();
// alert(v); </script>
</body>
</html>
网页
status = 1; $.extend({
'wangsen': function () {
return 'sb';
}
});
plugin1.js
Python学习笔记第十七周的更多相关文章
- Python学习笔记第二十七周(Bootstrap)
目录: 全局样式 一.栅格系统 二.表单 三.按钮 四.导航 五.按钮组 六.面板 七.表格 八.分页 九.排版 十.图片 十一.辅助类 十二.响应式工具 组件 内容: 前言: 首先通过https: ...
- Python学习笔记第五周
目录 一.基础概念 1.模块定义 2.包的定义 3.导入包的本质 4.导入模块的本质 5.导入方法 6.import的本质 7.导入优化 8.模块分类 9.标准库介绍 1.time与datetime ...
- Python学习笔记整理(十七)异常处理
一.异常基础 try/except:捕捉由代码中的异常并恢复,匹配except里面的错误,并自行except中定义的代码,后继续执行程序(发生异常后,由except捕捉到异常后,不会中断程序,继续执行 ...
- Python学习笔记第二十三周(Flask架构)
目录: 一.变量引用 内容: 备注:PyCharm小技巧,comm+alt+l 自动修改格式,comm+alt+return 向上添加新行 一.变量引用 1.url生成 from flask im ...
- Python学习笔记第十一周
目录: 1.RabbitMQ 2.Redis 内容: 1.RabbitMQ 实现简单的队列通信 send端 import pika credentials = pika.PlainCredent ...
- Python学习笔记第十周
目录: 一.基础概念 1.多进程 2.进程间通信 3.进程锁 4.进程池 5.协程 a) greenlet b) Gevent 6.论事件驱动与异步IO 7.IO多路复用 8.Python Selec ...
- Python学习笔记第八周
目录: 一.基础概念 1.动态导入模块 2.断言机制 3.SocketServer 二.作业 FTP服务器 三.单独注明 1.类中装饰器 2.进度条 一.基础概念 1.动态导入模块 有时在编程过程中, ...
- Python学习笔记第七周
目录: 1.静态方法 @staticmethod 2.类方法 @classmethod 3.属性方法 @property 4.类的特殊成员方法 a) __doc__表示类的描述信息 b) __ ...
- Python学习笔记第六周
目录 一.基础概念 面向对象编程 1.面向对象的几个核心特点 1.class类 2.object对象 3.encapsulation封装 4.inheritance继承 5.polymorphism多 ...
随机推荐
- 9. Palindrome Number(回文数)C++
将int转换为string,注意for循环判断条件的简化 class Solution { public: bool isPalindrome(int x) { ) return false; str ...
- ECharts 报表事件联动系列三:柱状图,饼状图实现联动
源码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- Spring注解之 @SuppressWarnings注解
简介:java.lang.SuppressWarnings是J2SE5.0中标准的Annotation之一.可以标注在类.字段.方法.参数.构造方法,以及局部变量上.作用:告诉编译器忽略指定的警告,不 ...
- 部署项目到linux中报Spring MVC报异常:org.springframework.web.util.NestedServletException: Request processing failed
@RequestMapping(value = "/security/login", method = RequestMethod.POST) public ModelAndVie ...
- Qt中漂亮的几款QSS
/* === Shared === */QStackedWidget, QLabel, QPushButton, QRadioButton, QCheckBox, QGroupBox, QStatus ...
- jQuery滚屏插件XSwitch.js
1.需要有基本的HTML结构 <div style="margin-top: 124px;" id="container" data-XSwitch> ...
- Java自动装箱中的缓存原理
今天看到一道'经典'面试题: Integer a = 100; Integer b = 100; System.out.println(a==b); Integer a2 = 200; Integer ...
- 逆袭之旅DAY14.东软实训.Oracle.多表连接、分组函数、子查询
2018-07-10 08:29:55 思考应用场景 异常数据的测试 6.显示能挣得奖金的雇员的姓名.工资.奖金,并以工资和奖金降序排列.select ename,sal,commfrom empWH ...
- break&&continue
break和continue的区别: 1. 当它们用在循环语句的循环体时,break用于立即退出本层循环,而continue仅仅结束本次循环(本次循环体内不执行continue语句后的其它语句,但下一 ...
- 尚学堂java答案解析 第一章
本答案为本人个人编辑,仅供参考,如果读者发现,请私信本人或在下方评论,提醒本人修改 一.选择题: 1.C 解析:java为了安全,中并没有引入C语言的指针概念. 2.AD 解析:B:Java先通过ja ...