Dayday up ---- python Day15
前端第二章
css 样式
position:
fixed 固定在页面的某个位置
absolute 绝对位置 结合+relative 使用，放在父类标签的某个位置
relative 单独存在没有任何变化
opacity: 0.5 透明度
z-index: 10; 层级顺序,谁的值大就谁飘在上面
overflow: hidden 隐藏滚动条
auto 出现滚动条
hover: 鼠标的应用
background-image: url(图片地址) # 默认，如果div大图片重复叠放
background-repeat: no-repeat repeat-x repeat-y 表示图片应用的时候往哪个方向重复叠放
background-position: 10px 10px 分别代表x,y轴 移动图片 -x -y
例子:
1、返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.go_up{
width: 50px;
height: 50px;
background-color: black;
color: white;
position: fixed;
bottom: 20px;
right: 20px;
}
.gound{
height: 5000px;
background-color: #DDDDDD;
}
</style>
</head>
<body style="margin: 0 auto;">
<div onclick="GoTop();" class="go_up">
返回顶部
</div>
<div class="gound">
</div>
<script>
function GoTop(){
document.body.scrollTop = 0;
}
</script>
</body>
</html>
2、页面头部固定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.page_header{
height: 48px;
background-color: #2a556e;
color: white;
position: fixed;
top:0;
left: 0;
right: 0;
}
.page_body{
background-color: #DDDDDD;
height: 5000px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="page_header">
头部
</div>
<div class="page_body">
内容
</div>
</body>
</html>
3、div 套 div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.relative_div{
position: relative;
width: 500px;
height: 400px;
border: 1px solid red;
margin: 0 auto;
}
.absolute_div{
position: absolute;
height: 50px;
width: 50px;
bottom: 0;
right: 0;
background-color: black;
}
</style>
</head>
<body>
<div class="relative_div">
<div class="absolute_div">
</div>
</div>
</body>
</html>
4、 遮罩层应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 5000px;
background-color: green;
}
.c2{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0.6;
z-index: 9;
}
.c3{
position: fixed;
width: 500px;
height: 400px;
background-color: white;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -250px;
z-index: 10;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>
5、滚动条的显示和隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.i1{
height: 200px;
width: 300px;
overflow: auto;
/*显示滚动条*/
}
.i2{
height: 200px;
width: 300px;
overflow: hidden;
/*隐藏滚动条*/
}
</style>
</head>
<body>
<div class="i1">
<img src="aaa.jpg"/>
</div>
<div class="i2">
<img src="aaa.jpg"/>
</div>
</body>
</html>
6、顶部菜单变色显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg_header{
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #2d5b75;
height: 48px;
line-height: 48px;
}
.pg_body{
margin-top: 50px;
}
a{
text-decoration: none;
}
.w{
width: 980px;
margin: 0 auto;
}
.pg_header .menu{
display: inline-block;
padding: 0 10px 0 10px;
color: white;
}
.pg_header .menu:hover{
background-color: blue;
}
</style>
</head>
<body>
<div class="pg_header">
<div class="w">
<a href="#" class="menu">LOGO</a>
<a href="#" class="menu">全部</a>
<a href="#" class="menu">42区</a>
<a href="#" class="menu">段子</a>
<a href="#" class="menu">1024</a>
</div>
</div>
<div class="pg_body">
<div class="w">a
</div>
</div>
</body>
</html>
7、背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 100px"></div>
<div style="background-image: url(chafing_cook02.jpg);background-repeat: no-repeat;height: 81px;width: 76px;border:1px solid red; ">
</div>
</body>
</html>
javascript
独立的语言，浏览器具有js解释器
存在形式:
1、head 中
<script type="text/javascript">
<!--javascript 代码-->
</script>
2、文件中
<script src="command.js"> </script>
ps: js 代码需要放置在body内部的最下面
注释:
单行注释: //
多行注释: /**/
变量:
name="aaa" # 全局变量
var name ="aaa" # 局部变量
写js 代码:
---- html 文件中编写
---- 临时 浏览器的终端 console
基本数据类型:
数字(整数 小数)
字符串转换成数字
<body>
<div style="height: 100px"></div>
<div>
<a onclick="GetData()"><img src="chafing_cook02.jpg"></a>
</div>
<script>
function GetData() {
var age = "18";
i = parseInt(age);
alert(typeof i);
// 查看数据类型
}
</script>
</body>
</html>
字符串
字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript并未提供修改已知字符串内容的方法。
常见功能：
obj.length 长度
obj.trim() 移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n) 返回字符串中的第n个字符
obj.concat(value, ...) 拼接
obj.indexOf(substring,start) 子序列位置
obj.lastIndexOf(substring,start) 子序列位置
obj.substring(from, to) 根据索引获取子序列
obj.slice(start, end) 切片
obj.toLowerCase() 大写
obj.toUpperCase() 小写
obj.split(delimiter, limit) 分割
obj.search(regexp) 从头开始匹配，返回匹配成功的第一个位置(g无效)
obj.match(regexp) 全局搜索，如果正则中有g表示找到全部，否则只找到第一个。
obj.replace(regexp, replacement) 替换，正则中有g则替换所有，否则只替换第一个匹配项，
$数字：匹配的第n个组内容；
$&：当前匹配的内容；
$`：位于匹配子串左侧的文本；
$'：位于匹配子串右侧的文本
$$：直接量$符号
列表(数组):
JavaScript中的数组类似于Python中的列表
常见功能：
obj.length 数组的大小
obj.push(ele) 尾部追加元素
obj.pop() 尾部获取一个元素
obj.unshift(ele) 头部插入元素
obj.shift() 头部移除元素
obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素
obj.splice(n,0,val) 指定位置插入元素
obj.splice(n,1,val) 指定位置替换元素
obj.splice(n,1) 指定位置删除元素
obj.slice( ) 切片
obj.reverse( ) 反转
obj.join(sep) 将数组元素连接起来以构建一个字符串
obj.concat(val,..) 连接数组
obj.sort( ) 对数组元素进行排序
字典:
a = {'k1':'v1','k2':'v2'}
布尔值:
true真 false假 (小写)
== 比较值相等
!= 不等于
=== 比较值和类型相等
!=== 不等于
|| 或
&& 且
定时器:
setInterval("执行的代码",执行时间) 单位ms
setInterval("alert(123)",2000) 单位 ms
弹窗: alert()
定义函数:
1、 function func(){}
2、function 函数名(a,b,c){}
for 循环:
列表循环时，循环的是索引
javascript 支持三种循环语句，分别是:
1、不支持字典的循环
var names = ["alex", "tony", "rain"];
for(var i=0;i<names.length;i++){
console.log(i);
console.log(names[i]);
}
2、支持字典循环
a = {'k1':'v1','k2':'v2'};
for(var item in a){
console.log(item);
}
while 循环
while(条件){
// break;
// continue;
}
条件语句
if(条件){
}else if(条件){
}else{
}
dom 操作
1、找到标签
获取单个元素 document.getElementById('i1')
获取多个元素（列表）document.getElementsByTagName('div')
获取多个元素（列表）document.getElementsByClassName('c1')
a、直接找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
b、间接找
tag = document.getElementById('i1')
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
2、操作标签
总文档高度
document.documentElement.offsetHeight
当前文档占屏幕高度
document.documentElement.clientHeight
自身高度
tag.offsetHeight
距离上级定位高度
tag.offsetTop
父定位标签
tag.offsetParent
滚动高度
tag.scrollTop
/*
clientHeight -> 可见区域：height + padding
clientTop -> border高度
offsetHeight -> 可见区域：height + padding + border
offsetTop -> 上级定位标签的高度
scrollHeight -> 全文高：height + padding
scrollTop -> 滚动高度
特别的：
document.documentElement代指文档根节点
*/
e. 提交表单
document.geElementById('form').submit()
f. 其他操作
console.log 输出框
alert 弹出框
confirm 确认框
// URL和刷新
location.href 获取URL
location.href = "url" 重定向
location.reload() 重新加载
// 定时器
setInterval 多次定时器
clearInterval 清除多次定时器
setTimeout 单次定时器
clearTimeout 清除单次定时器
例子:
1、跑马灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 id="i1" style="color: #00A000;">迎接未来</h1>
<script>
function func(){
var tag = document.getElementById('i1');
var content = tag.innerText;
var f = content.charAt(0);
var l = content.substring(1,content.length);
var new_content = l + f;
tag.innerText = new_content;
}
setInterval('func()',500);
</script>
</body>
</html>
2、全选反选取消
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .c1{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: black; opacity: 0.6; z-index: 9; } .c2{ width: 500px; height: 400px; background-color: white; position: fixed; left: 50%; top: 50%; margin-left: -250px; margin-top: -200px; z-index: 10; } </style> </head> <body style="margin: 0;"> <div> <input type="button" value="添加" onclick="ShowModel();" /> <input type="button" value="全选" onclick="ChooseAll();" /> <input type="button" value="取消" onclick="CancleAll();" /> <input type="button" value="反选" onclick="ReverseAll();" /> <table> <thead> <tr> <th>选择</th> <th>主机名</th> <th>端口</th> </tr> </thead> <tbody id="tb"> <tr> <td> <input type="checkbox" /> </td> <td>1.1.1.1</td> <td>190</td> </tr> <tr> <td><input type="checkbox" id="test" /></td> <td>1.1.1.2</td> <td>192</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.3</td> <td>193</td> </tr> </tbody> </table> </div> <!-- 遮罩层开始 --> <div id="i1" class="c1 hide"></div> <!-- 遮罩层结束 --> <!-- 弹出框开始 --> <div id="i2" class="c2 hide"> <p><input type="text" /></p> <p><input type="text" /></p> <p> <input type="button" value="取消" onclick="HideModel();"/> <input type="button" value="确定"/> </p> </div> <!-- 弹出框结束 --> <script> function ShowModel(){ document.getElementById('i1').classList.remove('hide'); document.getElementById('i2').classList.remove('hide'); } function HideModel(){ document.getElementById('i1').classList.add('hide'); document.getElementById('i2').classList.add('hide'); } // 全选 function ChooseAll(){ var tbody = document.getElementById('tb'); // 获取所有的tr var tr_list = tbody.children; for(var i=0;i<tr_list.length;i++){ // 循环所有的tr，current_tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; checkbox.checked = true; } } // 取消选择 function CancleAll(){ var tbody = document.getElementById('tb'); // 获取所有的tr var tr_list = tbody.children; for(var i=0;i<tr_list.length;i++){ // 循环所有的tr，current_tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; checkbox.checked = false; } } // 反选 function ReverseAll(){ var tbody = document.getElementById('tb'); // 获取所有的tr var tr_list = tbody.children; for(var i=0;i<tr_list.length;i++){ // 循环所有的tr，current_tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; if(checkbox.checked){checkbox.checked = false;}else{checkbox.checked = true;}}} </script> </body> </html>
3、菜单栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .item .header{ height: 35px; background-color: #2459a2; color: white; line-height: 35px; } </style> </head> <body> <div style="height: 48px"></div> <div style="width: 300px;"> <div class="item"> <div id='i1' class="header" onclick="ChangeMenu('i1');">菜单1</div> <div class="content"> <div>内容1</div> <div>内容1</div> <div>内容1</div> </div> </div> <div class="item"> <div id='i2' class="header" onclick="ChangeMenu('i2');">菜单2</div> <div class="hide"> <div>内容2</div> <div>内容2</div> <div>内容2</div> </div> </div> <div class="item"> <div id='i3' class="header" onclick="ChangeMenu('i3');">菜单3</div> <div class="hide"> <div>内容3</div> <div>内容3</div> <div>内容3</div> </div> </div> <div class="item"> <div id='i4' class="header" onclick="ChangeMenu('i4');">菜单4</div> <div class="hide"> <div>内容4</div> <div>内容4</div> <div>内容4</div> </div> </div> </div> <script> function ChangeMenu(nid){ var current_header = document.getElementById(nid); var item_list = current_header.parentElement.parentElement.children; for(var i=0;i<item_list.length;i++){ var current_item = item_list[i]; current_item.children[1].classList.add('hide'); } current_header.nextElementSibling.classList.remove('hide'); } </script> </body> </html>
浙公网安备 33010602011771号