Python3学习笔记十五
---恢复内容开始---
1. jquery的属性操作
$().attr(属性名) 取值
$().attr(属性名，属性值) 赋值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.js"></script>
</head>
<body> <p class="c1" id="1" egon="sb">我是谁</p>
</body>
</html>
//针对checked select标签
$().prop(属性名)
$().prop(属性名,属性值)
2. jquery的values操作
$().val() 取值
$().val("aaaa") 赋值
$().val(“”) 清空操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.js"></script>
</head>
<body> <input type="text" class="c1" value="222">
<script>
$(".c1").val()
</script>
</body>
</html>
3. jquery的each循环
jquery有两种循环方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.js"></script> </head>
<body>
<div class="outer">
<p>111</p>
<p>222</p>
<p>333</p>
</div>
<script>
//jquery两种循环方式，第一种
// var arr=[111,222,333,444]
// $.each(arr,function (i,j) {
// console.log(i,j)
// })
// var info={"name":"egon","age":23}
// $.each(info,function (i,j) {
// console.log(i,j)
// })
//第二种方式
$(".outer p").each(function () {
console.log($(this).html())
})
</script>
</body>
</html>
4. jquery的表格正反选操作
全选 取消 反选：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.js"></script>
</head>
<body>
<button class="select_all">全选</button>
<button class="quxiao">取消</button>
<button class="fanxuan">反选</button>
<hr>
<table border="1">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>班级</td>
<td>选择</td>
</tr>
<tr>
<td>张三</td>
<td>22</td>
<td>1</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>李四</td>
<td>23</td>
<td>2</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>王五</td>
<td>24</td>
<td>3</td>
<td><input type="checkbox"></td>
</tr>
</table>
<script>
$(".select_all").click(function () {
$(":checkbox").prop("checked",true) }) $(".quxiao").click(function () {
$(":checkbox").prop("checked",false)
})
$(".fanxuan").click(function () {
$(":checkbox").each(function () {
// if ($(this).prop("checked")){
// $(this).prop("checked",false)
// }
// else{
// $(this).prop("checked",true)
// }
$(this).prop("checked",!$(this).prop("checked")) }) }) </script>
</body>
</html>
5. jquery的css样式操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.js"></script>
</head>
<body> <p class="c1">this is a p</p>
<p id="3">this is a p</p>
<script>
// $("#3").css("color","red")
// $(".c1").css("color","red")
$("#3").click(function () {
$(this).css("color","red")
})
</script>
</body>
</html>
6. jquery事件委派
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<button>add</button>
<script src="jquery-3.2.1.js"></script>
<script>
// $("ul li").click(function () {
// alert($(this).html())
// })
// $("button").click(function () {
// $("ul").append("<li>444</li>")
// })
$("ul").on("click","li",function () {
alert($(this).html()) });
$("button").click(function () {
$("ul").append("<li>444</li>")
});
</script>
</body>
</html>
7. jquery的节点操作
每一个标签对象(Dom对象)都是一个节点对象
jquery对象都是一个数组
Dom对象转jquery对象： $(Dom对象)
jquery对象转Dom对象： $(aaa)[0]
创建标签,删除标签，清空标签内容，替换标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.js"></script>
<style>
.c1{
width: 600px;
height: 600px;
background-color: #6fff3b;
}
</style>
</head>
<body>
<div class="c1">
<h4>hello word</h4>
</div>
<p id="p1">111</p>
<p>222</p>
<button class="add">add</button>
<button class="del">delete</button>
<button class="replace">replace</button>
<script>
$(".add").click(function () {
//定义要插入的标签对象
var $img=$("<img>")
// console.log($img[0])
$img.attr("src","2.jpg")
//添加到指定节点中
// $(".c1").append($img)
// $img.appendTo(".c1")
$(".c1").after($img)
}) $(".del").click(function () {
//删除节点 删除整个节点
// $(".c1 h4").remove()
//清空节点 清空的标签内容
$(".c1").empty()
})
//替换节点
$(".replace").click(function () {
var $img=$("<img>")
$img.attr("src","2.jpg")
$("#p1").replaceWith($img)
})
</script>
</body>
</html>
克隆节点（需要做一个实例）
var $copy=$(".c1").clone()
console.log($copy[0])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.js"></script>
</head>
<body>
<div class="style_box">
<div class="item">
<button class="add">+</button><input type="text">
</div> </div>
<script>
$(".item .add").click(function () { var $clone=$(this).parent().clone()
$clone.children(".add").html("-").attr("class","del")
$(".style_box").append($clone)
}) $(".style_box").on("click",".del",function () {
console.log($(this)[0])
$(this).parent().remove()
})
</script>
</body>
</html>
8. jquery表格的增删改查
9. juqery的动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.js"></script>
</head>
<body>
<div class="c1">
<div class="c2">
<p>111</p>
<p>222</p>
<p>333</p>
</div>
</div>
<button class="xianshi">显示</button>
<button class="yincang">隐藏</button>
<button class="qiehuan">切换</button>
<script>
//快速显示与隐藏
// $(".xianshi").click(function () {
// $(".c1").show()
// })
// $(".yincang").click(function () {
// $(".c1").hide()
// })
//1秒之内显示与隐藏
// $(".xianshi").click(function () {
// $(".c1").show(1000) 时间单位为ms
// })
// $(".yincang").click(function () {
// $(".c1").hide(1000)
// })
//使用上下拉的方式显示与隐藏
// $(".xianshi").click(function () {
// $(".c2").slideDown()
// })
// $(".yincang").click(function () {
// $(".c2").slideUp()
// })
$(".xianshi").click(function () {
$(".c1").fadeIn(2000)
}) $(".yincang").click(function () {
$(".c1").fadeOut(2000)
})
//切换
$(".qiehuan").click(function () {
// $(".c1").fadeToggle(2000)
$(".c1").fadeTo(2000,0.8) //指定时间与透明度
}) </script>
</body>
</html>
10. jquery的css操作
offset: 以当前窗口为参数照的偏移量。
postion：以一定位的父亲标签的偏移量。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.js"></script>
<style>
*{
margin: 0;
}
.c1{
width: 50px;
height: 50px;
background-color: #FF0000;
}
.c2{
width: 50px;
height: 50px;
background-color: #E36E18;
}
.c3{
position: relative; }
</style>
</head>
<body>
<div class="c1">1111</div>
<div class="c3"><div class="c2"></div></div> <script>
//获取偏移量
console.log($(".c1").offset().left)
console.log($(".c1").offset().top)
//设置偏移量
$(".c2").offset({top:200,left:200})
//相对于父亲的偏移量
console.log($(".c2").position().top)
console.log($(".c2").position().left)
</script>
</body>
</html>
11. jquery的返回顶部实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.js"></script>
<style>
*{
margin: 0;
}
.c1{
width: 100%;
height: 3000px;
background-color: #9d9d9d;
}
.c2{
width: 100px;
height: 50px;
background-color: #2aabd2;
color: #FF0000;
text-align: center;
line-height: 50px;
position: fixed;
bottom: 10px;
right: 10px; }
.hide{
display: none;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2 hide">返回顶部</div>
<h1>我是谁</h1>
</div>
<script>
$(".c2").click(function () {
$(window).scrollTop(0) //可以设置参数为200，返回到距离顶部200px的位置，
})
//监控事件为scroll
$(window).scroll(function () {
if ($(window).scrollTop()>400){
$(".c2").show()
}
else{
$(".c2").hide()
}
})
</script>
</body>
</html>
11. boostrap的使用
栅格系统
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<style>
.row div {
border: solid 1px;
}
.container div {
border: solid 1px;
}
.container-fluid div {
border: solid 1px;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-6">111</div>
<div class="col-md-6">111</div>
<div class="col-md-1">111</div>
<div class="col-md-1">111</div>
<div class="col-md-1">111</div>
<div class="col-md-1">111</div>
<div class="col-md-1">111</div>
<div class="col-md-1">111</div>
<div class="col-md-1">111</div>
<div class="col-md-1">111</div>
<div class="col-md-1">111</div>
<div class="col-md-1">111</div>
<!--//列偏移-->
<!--<div class="col-md-5 col-md-offset-3">111</div>-->
<!--//嵌套列 把8个栅格再分成12份。-->
<!--<div class="col-md-8">-->
<!--<div class="col-md-4">222</div>-->
<!--<div class="col-md-4">333</div>-->
<!--</div>-->
</div>
<!--//两边会有边距，并且居中-->
<!--<div class="container">-->
<!--<div class="col-md-6">111</div>-->
<!--<div class="col-md-6">111</div>-->
<!--<div class="col-md-1">111</div>-->
<!--<div class="col-md-1">111</div>-->
<!--<div class="col-md-1">111</div>-->
<!--<div class="col-md-1">111</div>-->
<!--<div class="col-md-1">111</div>-->
<!--<div class="col-md-1">111</div>-->
<!--<div class="col-md-1">111</div>-->
<!--<div class="col-md-1">111</div>-->
<!--<div class="col-md-1">111</div>-->
<!--<div class="col-md-1">111</div>-->
<!--<div class="col-md-1">111</div>-->
<!--</div>--> </body>
</html>
12. jquery的模态对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.js"></script>
<style>
.backend{
width: 100%;
height: 3000px;
background-color: #aaffaa;
}
* {
margin: 0;
}
.shade{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #9d9d9d;
opacity: 0.8;
}
.model{
position: fixed;
left:400px;
top: 100px;
width: 600px;
height: 300px;
background-color: white;
} .hide{
display: none;
}
</style>
</head>
<body>
<div class="backend">
<button class="add">注册</button>
</div>
<div class="shade hide"></div>
<div class="model hide">
<h3>添加学生信息：</h3>
<form action="">
<p>姓名 <input type="text"></p>
<p>年龄 <input type="text"></p>
<p>班级 <input type="text"></p>
<input type="button" value="submit" id="subBtn">
</form>
</div>
<script>
$(".add").click(function () {
$(".model").removeClass("hide")
$(".shade").removeClass("hide")
})
$("#subBtn").click(function () {
$(".model").addClass("hide")
$(".shade").addClass("hide")
})
</script>
</body>
</html>
Python3学习笔记十五的更多相关文章
- python3.4学习笔记(十五) 字符串操作（string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等）
python3.4学习笔记(十五) 字符串操作(string替换.删除.截取.复制.连接.比较.查找.包含.大小写转换.分割等) python print 不换行(在后面加上,end=''),prin ...
- (转载)西门子PLC学习笔记十五-（数据块及数据访问方式）
一.数据块 数据块是在S7 CPU的存储器中定义的,用户可以定义多了数据块,但是CPU对数据块数量及数据总量是有限制的. 数据块与临时数据不同,当逻辑块执行结束或数据块关闭,数据块中的数据是会保留住的 ...
- (C/C++学习笔记) 十五. 构造数据类型
十五. 构造数据类型 ● 构造数据类型概念 Structured data types 构造数据类型 结构体(structure), 联合体/共用体 (union), 枚举类型(enumeration ...
- MySQL学习笔记十五：优化(2)
一.数据库性能评测关键指标 1.IOPS:每秒处理的IO请求次数,这跟磁盘硬件相关,DBA不能左右,但推荐使用SSD. 2.QPS:每秒查询次数,可以使用show status或mysqladmin ...
- Java基础学习笔记十五 集合、迭代器、泛型
Collection 集合,集合是java中提供的一种容器,可以用来存储多个数据. 在前面的学习中,我们知道数据多了,可以使用数组存放或者使用ArrayList集合进行存放数据.那么,集合和数组既然都 ...
- Python3学习笔记十八
1. MTV M: model 与数据库相关 T: Template 与html相关 V: views 与逻辑相关 一. URL配置 启动:python ...
- python3学习笔记十六
1. http协议 GET请求:数据放在url后面 POST请求:数据放在请求体中 <!DOCTYPE html> <html lang="en" ...
- python3学习笔记十（循环语句）
参考http://www.runoob.com/python3/python3-loop.html 循环语句 while循环 # !/usr/bin/env python3 n = 100 sum = ...
- angular学习笔记(十五)-module里的'服务'
本篇介绍angular中的模块:module 在笔记(二)http://www.cnblogs.com/liulangmao/p/3711047.html里已经讲到过模块,这篇主要讲模块的 '服务' ...
随机推荐
- NOT NULL constraint faile（慢就是快，少即是多）
在学习数据库orm操作的过程中,遇到一个写不进去数据的问题 在创建数据库进行数据写入时出错,错误信息是 NOT NULL constraint faile(错误信息没有第一时间找到) 数据库,包括表都 ...
- JS生成随机数进行循环匹配数组
function RndNum(n) { var rnd = ""; for (var i = 0; i < n; i++) rnd += Math.floor(Math.r ...
- git学习01- 下载安装&初始化库&提交
1.windows下安装git,git官网下载安装包安装 2.本地创建一个目录,在目录下创建1个文本 readme.txt 3.cmd进入到该目录,执行git init,初始化git仓库 4.添加文件 ...
- 关于bytes和bytearray
背景 平时工作因为有批量线上数据进行更新,通过Python程序连接数据库,利用连接池和gevent的并发性能,处理大量数据. 因为数据方提供的数据表结构中带有varbinary类型字段,并非全部,所以 ...
- 您必须知道的 Git 分支开发规范
Git 是目前最流行的源代码管理工具. 为规范开发,保持代码提交记录以及 git 分支结构清晰,方便后续维护,现规范 git 的相关操作. 分支管理 分支命名 master 分支 master 为主分 ...
- UVA11825 黑客的攻击 Hackers' Crackdown 状压DP，二进制，子集枚举
题目链接Click Here [题目描述] 假如你是一个黑客,侵入了一个有着\(n\)台计算机(编号为\(1.2.3....n\))的网络.一共有\(n\)种服务,每台计算机都运行着所有服务.对于每台 ...
- 传入list或map进行首字母大小写转换
/** * 首字母小写 * author:wp */ public static Object keyFirstToLower(Object obj) throws Ex ...
- 【C++笔记】析构函数（destructor）
“析构函数”是构造函数的反向函数. 在销毁(释放)对象时将调用它们. 通过在类名前面放置一个波形符 (~) 将函数指定为类的析构函数. 声明析构函数 析构函数是具有与类相同的名称但前面是波形符 ...
- 移动端返回上一页，刚需！document.referrer 详解
返回上一页,在PC端我们可以使用:history.go(-1)或者history.back(),可以正常返回第一层.这样,我们不需要上一页的 url 具体是什么,只要使用 history 一般都没啥问 ...
- L1-Day5
1.他偷了那个装满钱的书包. [我的翻译]He stole the bag full of money. [标准答案]He stole that school bag full of money. ( ...