python15-day17
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了python15-day17相关的知识，希望对你有一定的参考价值。
目录
今日内容：
1. HTML+CSS的补充
2. DOM事件补充
3. jQuery（示例）
1. HTML+CSS内容补充
1.1 CSS布局
示例：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.w{
background-color: green;
width: 980px;
margin: 0 auto;
}
</style>
</head>
<body>
<div style="background-color: red">
<div class="w">页面布局</div>
</div>
</body>
显示：
1.2 撑起外边框
示例：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*现在常用这种方法来代替最后加clear：both*/
.clearfix:after{
content: ".";
display: block;
clear: both;
#visibility隐藏，类似于display的用法，但虽然隐藏但位置依然存在，不同于display
visibility: hidden;
height: 0px;
}
</style>
</head>
<body>
<div style="border: red solid 5px" class="clearfix">
<div style="width: 200px; height: 200px;border: green solid 1px;float: left"></div>
<div style="width: 200px; height: 200px;border: green solid 1px;float: left"></div>
<div style="width: 200px; height: 200px;border: green solid 1px;float: left"></div>
<div style="width: 200px; height: 200px;border: green solid 1px;float: left"></div>
<div style="width: 200px; height: 200px;border: green solid 1px;float: left"></div>
<div style="width: 200px; height: 200px;border: green solid 1px;float: left"></div>
<div style="width: 200px; height: 200px;border: green solid 1px;float: left"></div>
<div style="width: 200px; height: 200px;border: green solid 1px;float: left"></div>
<!--以前最外边的边框需要撑起来，没有这行代码是撑不起来的-->
<!--<div style="clear:
both"></div>-->
</div>
</body>
显示：
1.3 响应式布局
根据浏览器窗口大小，调整呈现出的内容个数。不同的浏览器宽度可以显示出排列不同的内容。
示例：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@media (min-width: 1500px) {
.item{
width:
20%;
float:
left;
}
}
@media (max-width: 1500px) {
.item{
width:
25%;
float:
left;
}
}
@media (max-width: 1000px) {
.item{
width:
33.3%;
float:
left;
}
}
@media (max-width: 500px) {
.item{
width:
50%;
float:
left;
}
}
@media (max-width: 300px) {
.item{
width:
100%;
float:
left;
}
}
@media (max-width: 100px) {
.item{
display: none;
float:
left;
}
}
</style>
</head>
<body>
<div class="item">
<p>用户名：<input
type="text"></p>
</div>
<div class="item">
<p>用户名：<input
type="text"></p>
</div>
<div class="item">
<p>用户名：<input
type="text"></p>
</div>
<div class="item">
<p>用户名：<input
type="text"></p>
</div>
<div class="item">
<p>用户名：<input
type="text"></p>
</div>
<div class="item">
<p>用户名：<input
type="text"></p>
</div>
<div class="item">
<p>用户名：<input
type="text"></p>
</div>
<div class="item">
<p>用户名：<input
type="text"></p>
</div>
<div class="item">
<p>用户名：<input
type="text"></p>
</div>
<div class="item">
<p>用户名：<input
type="text"></p>
</div>
</body>
显示：
1.4 绑定事件的操作
1.4.1 第一种事件操作方法
示例：如果输入有内容则跳转百度，如果没有内容则alert提醒用户输入。
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://www.baidu.com">
<input type="text" id="user" name="user">
<input type="submit" id="test" value="提交" onclick="return one()">
</form>
</body>
<script>
function one() {
var v
= document.getElementById("user").value;
if(v.length>0){
return true
}else {
// 这里先执行alert，然后执行跳转，这里返回false即结束，不再跳转。
alert("请输入内容")
return false
}
}
</script>
1.4.2 第二种实践操作方法（推荐）
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://www.baidu.com">
<input type="text" id="user">
<input type="submit" id="submit" value="提交">
</form>
</body>
<script>
document.getElementById("submit").onclick = function ()
{
var v= document.getElementById("user").value;
if (v.length>0){
return true
}else {
alert("请输入内容")
return false
}
}
</script>
1.5 获取焦点
示例：（注意this的用法）
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://www.baidu.com">
<input type="text" value="请输入用户名" id="user" onfocus="get_focus(this);" onblur="lost_focus(this);"> #一个标签可以绑定多个不同事件
<input type="submit" id="submit" value="提交">
</form>
</body>
<script>
function get_focus(ths) {
var v
= ths.value;
if (v == "请输入用户名"){
ths.value = "";
}
}
function lost_focus(ths) {
var v
= ths.value;
if (v.length == 0 )
ths.value = "请输入用户名";
}
</script>
显示：
鼠标选中输入框，则内容消失，鼠标移开后而用户有没有输入内容，则重新自动填写内容。
1.6 this的用法
1.6.1 第一种用法
示例：
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="test" style="color: red;font-size: 50px">战争</div>
</body>
<script>
document.getElementById("test").onclick = function ()
{##匿名函数
alert(this.innerText)
}
</script>
显示：
1.6.2 第二种用法
示例：
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="test" style="color: red;font-size: 50px" onclick="test(this)">战争</div>
</body>
<script>
function test(ths) {
alert(ths.innerText)
}
</script>
显示：
1.6.3 附innertext和innerHTML的区别
innertext：
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="test" style="color: red;font-size: 50px" onclick="test(this)">战争
<span style="color: darkgreen;font-size: 50px;">和平</span>
</div>
</body>
<script>
function test(ths) {
alert(ths.innerText)
}
</script>
显示：
innerHTML：
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="test" style="color: red;font-size: 50px" onclick="test(this)">战争
<span style="color: darkgreen;font-size: 50px;">和平</span>
</div>
</body>
<script>
function test(ths) {
alert(ths.innerHTML)
}
</script>
显示：
总结：
l innertext：只获取到文本内容
l innerHTML：获取到样式标签以及文本内容
可以从test和HTML的意思理解，text指代文本内容，而html指代html语句。
1.7 绑定多个相同事件
1.7.1 鼠标事件响应
示例：
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="font-size: 50px;color: green" onclick=console.log(1) ondblclick=console.log(2) onmouseover=console.log(3) onmouseout=console.log(4) >
和平
</div>
</body>
显示：
说明：
l onmouseover：鼠标放到内容上时响应事件
l onmouseout：鼠标离开内容时响应事件
l ondblclick：鼠标双击时响应事件
l onclick：鼠标单击时响应事件
1.7.2 绑定多个相同事件
<div style="font-size: 50px;color: green" onclick=console.log(1) onclick=console.log(2)>
以上这样绑定时无法同时绑定两个事件的，鼠标点击后只会响应第一个事件。
如果需要绑定多个相同事件，可以使用addEventListener方法：
示例：
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="test" style="font-size: 50px;color: green" onclick=console.log(1)>
#第一个事件
和平
</div>
</body>
<script>
document.getElementById("test").addEventListener("click",function()
{
console.log(2); #第二个事件
})
</script>
显示：
说明：同时相应单击事件。
1.8 事件执行顺序
1.8.1 冒泡式（默认是冒泡式）
示例：
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="one" style="background-color: red;width: 500px;height: 500px">
<div id="two" style="background-color: green;width: 400px;height: 400px;">
<div id="three" style="background-color: aquamarine;width: 300px;height: 300px">
</div>
</div>
</div>
</body>
<script>
document.getElementById("one").addEventListener("click",function () {
alert("one")
})
document.getElementById("two").addEventListener("click",function () {
alert("two")
})
document.getElementById("three").addEventListener("click",function () {
alert("three")
})
</script>
</html>
显示：
1.8.2 捕获式
示例：
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="one" style="background-color: red;width: 500px;height: 500px">
<div id="two" style="background-color: green;width: 400px;height: 400px;">
<div id="three" style="background-color: aquamarine;width: 300px;height: 300px">
</div>
</div>
</div>
</body>
<script>
document.getElementById("one").addEventListener("click",function () {
alert("one")
},true)
document.getElementById("two").addEventListener("click",function () {
alert("two")
},true)
document.getElementById("three").addEventListener("click",function () {
alert("three")
},true)
显示：
1.9 响应键盘事件
只响应文本输入，对于光标不在文本框内的事件不响应。
示例：
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" onkeydown="result(this,event)">
</body>
<script>
function result(ths,eve) {
console.log(ths,eve)
}
</script>
</html>
说明：
n onkeydown：键盘按下响应事件，可以响应系统键，包括shift、ctrl、delete等。
n onkeyup：键盘抬起响应事件，包括系统按键，shift、delete等
n onkeypress：用户按下并放开字母数字键时响应。不包括系统键shift、delete等。
响应窗口内的任何按键输入：
示例：
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" onkeyup="result(event)">
</body>
<script>
function result(eve) {
console.log(eve)
}
window.onkeydown=function (e) { #响应全部的键盘输入，而不是只在文本框内
console.log(e)
}
</script>
</html>
显示：
1.10 JS配合提交表单
我们之前接触到的提交表单的方法只有form+input标签和a标签。现在我们用JS配合form标签也可以构造出提交表单的方法。
示例：
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="js" action="http://www.baidu.com">
<input type="submit" value="提交"><p></p>
<a href="http://www.baidu.com">百度一下</a>
<p onclick="submitFrom()">JS提交表单</p>
</form>
</body>
<script>
function
submitFrom() {
document.getElementById("js").submit()
}
</script>
</html>
1.11 页面刷新和跳转
刷新页面：window.location.reload()
跳转页面：window.location.href = "http://www.baidu.com"
获取当前URL：window.location.href
2. jQuery
jQuery是封装的Dom对象，二者之间存在转换关系：
n jQuery对象[0] ==> Dom对象
n Dom对象 ==> $(Dom对象)
2.1 选择器
n $(‘#test‘) 找id=test的标签
n $(‘.test‘) 找class=test的标签
n $(‘div‘) 找所有div的标签
n $(‘*‘) 找所有的标签
n $(‘#test .c1 div‘) 找到id=test，在其下边找class=c1的标签
示例：
源代码：
2.2 筛选器
2.2.1 找到子元素
描述：取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。
$("div").children()
描述：在每个div中查找 .selected 的类。
$("div").children(".selected")
2.2.2 找到下一个元素
描述：找到每个段落的后面紧邻的同辈元素。
$("p").next()
描述：找到每个段落的后面紧邻的同辈元素中类名为selected的元素。
$("p").next(".selected")
2.2.3 找到前一个元素
描述：找到每个段落紧邻的前一个同一辈元素
$("p").prev()
描述：找到每个段落紧邻的前一个同辈元素中类名为selected的元素。
$("p").prev(".selected")
2.2.4 找到父元素
取得一个包含着所有匹配元素的唯一父元素的元素集合。你可以使用可选的表达式来筛选。
描述：查找每个段落的父元素。
$("p").parent()
描述：查找每个段落的父元素每个类名为selected的父元素。
$("p").parent(".selected")
注意区分parents()，取得一个包含着所有匹配元素的祖先元素[l1] 的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
parents()
2.2.5 获取兄弟标签
取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
描述：找到每个div的所有同辈元素。
$("div").siblings()
描述：找到每个div的所有同辈元素中带有类名为selected的元素。
$("div").siblings(".selected")
2.2.6 示例
描述：写一个导航栏，包含标题和内容，初始状态内容为隐藏，点击标题则显示下拉的内容，其他的标题则隐藏内容。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.head{
background-color: aquamarine;
color: black;
}
.content{
background-color: antiquewhite;
color: black;
height: 80px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div style="height: 500px;width: 200px;border: 1px
solid black">
<div class="item">
<div class="head">标题1</div>
<div class="content hide">内容1</div>
</div>
<div class="item">
<div class="head">标题2</div>
<div class="content hide">内容2</div>
</div>
<div class="item">
<div class="head">标题3</div>
<div class="content hide">内容3</div>
</div>
</div>
</body>
<script src="jquery-1.12.4.js"></script>
<script>
$(‘.head‘).click(function ()
{
$(this).next().removeClass(‘hide‘) $(this).parents().siblings().children(".content").addClass(‘hide‘)
})
</script>
注意：标黄部分可以使用一行代替：
$(this).next().removeClass("hide").parent().siblings().children(".content").addClass("hide")
或者（使用find查找）：
$(this).next().removeClass("hide").parent().siblings().find(".content").addClass("hide")
2.3 内容操作
2.3.1 文本操作
l $(..).text() ##不加参数，获取文本内容
l $(..).text("<a>1<\\a>") ##设置文本内容，不解析HTML文本
l $(..).html() ##不加参数，获取HTML内容
l $(..).html("<a>1<\\a ") ##加参数，设置文本内容，可以解析
文本操作：
$(..).text() # 获取文本内容
$(..).text(“<a>1</a>”) # 设置文本内容
$(..).html()
$(..).html("<a>1</a>")
$(..).val()
$(..).val(..)
样式操作：
addClass
removeClass
toggleClass
属性操作：
# 专门用于做自定义属性
$(..).attr(‘n‘)
$(..).attr(‘n‘,‘v‘)
$(..).removeAttr(‘n‘)
<input type=‘checkbox‘ id=‘i1‘ />
# 专门用于chekbox,radio
$(..).prop(‘checked‘)
$(..).prop(‘checked‘, true)
PS:
index 获取索引位置
[l1]不仅仅包含父元素，还包括父元素的父元素。
附件列表
以上是关于python15-day17的主要内容，如果未能解决你的问题，请参考以下文章