Python学习笔记第十六周

it2025-02-05 4

　　一、CSS补充

　　　　1、页面布局

　　二、JavaScript补充

　　　　1、条件判断

　　　　2、函数分类

　　　　3、序列化

　　　　4、转义

　　　　5、eval

　　　　6、时间

　　　　7、作用域

　　三、DOM

　　　　1、间接查找

　　　　　　文本操作

　　　　　　样式操作

　　　　　　属性操作

　　　　　　提交表单

　　　　　　其他

　　　　　　事件

内容：

　　一、CSS补充　

　　1、页面布局：

　　　后台管理布局：

　　　　元素补充：

　　　　min-width：防止缩放的时候，只写百分比会变形，需要一个最小宽度

　　　　border-radius：边框变圆，可以设置为50%

　　　例子：

　　 1、后台管理界面布局（左侧菜单不动）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面布局</title> <style> body{ margin:0;/* 到上方没有间隔 */ } .left{ float;left; } .right{ float:right; } .pg-header{ height:48px; background-color:#2459a2; color:white; } .pg-body .body-menu{ width:20%; min-width:200px;/* 当20%的宽度小于200px时应用200px */ background-color:red; position:fixed; top:48px; left:0; bottom:0; } .pg-body .body-content{ width:80%; background-color:green; position:fixed; top:48px; right:0; bottom:0; overflow:auto } </style> </head> <body> <div class="pg-header"> <div class="header-menu"> </div> </div> <div class="pg-body"> <div class="body-menu left">a</div> <div class="body-content left"> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> </div> </div> </body> </html> View Code

　　 2、左侧菜单跟随滚动条移动

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面布局</title> <style> body{ margin:0;/* 到上方没有间隔 */ } .left{ float;left; } .right{ float:right; } .pg-header{ height:48px; background-color:#2459a2; color:white; } .pg-body .body-menu{ position:absolute; top:48px; left:0; bottom:0; width:20%; min-width:200px; background-color:#dddddd; } .pg-body .body-content{ position:absolute; top:48px; bottom:0; right:0; width:80%; background-color:palevioletred; } </style> </head> <body> <div class="pg-header"> <div class="header-menu"> </div> </div> <div class="pg-body"> <div class="body-menu left">a</div> <div class="body-content left"> <div style="background-color:palevioletred"> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> </div> </div> </div> </body> </html> View Code

　　　　3、左侧菜单不动，不同于1中的时，3中position都是absoute，但是在右边添加了overflow：auto属性后达到同1一样的效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面布局</title> <style> body{ margin:0;/* 到上方没有间隔 */ } .left{ float;left; } .right{ float:right; } .pg-header{ height:48px; background-color:#2459a2; color:white; } .pg-body .body-menu{ position:absolute; top:48px; left:0; bottom:0; width:20%; min-width:200px; background-color:#dddddd; } .pg-body .body-content{ position:absolute; top:48px; bottom:0; right:0; width:80%; background-color:palevioletred; overflow:auto; } </style> </head> <body> <div class="pg-header"> <div class="header-menu"> </div> </div> <div class="pg-body"> <div class="body-menu left">a</div> <div class="body-content left"> <div style="background-color:palevioletred"> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> </div> </div> </div> </body> </html> View Code

　　　　4、左右相互不干扰的方式滚动，就是在3的基础上，对左侧也添加了overflow：auto属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面布局</title> <style> body{ margin:0;/* 到上方没有间隔 */ } .left{ float;left; } .right{ float:right; } .pg-header{ height:48px; background-color:#2459a2; color:white; } .pg-body .body-menu{ position:absolute; top:48px; left:0; bottom:0; width:20%; min-width:200px; background-color:#dddddd; overflow:auto; } .pg-body .body-content{ position:absolute; top:48px; bottom:0; right:0; width:80%; background-color:palevioletred; overflow:auto; } </style> </head> <body> <div class="pg-header"> <div class="header-menu"> </div> </div> <div class="pg-body"> <div class="body-menu left"> <div style="background-color:#dddddd"> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> </div> </div> <div class="body-content left"> <div style="background-color:palevioletred"> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> </div> </div> </div> </body> </html> View Code

　　　　小练习：

　　　　鼠标放上去的时候，123表成红色，456背景变为绿色：使用技巧，在class=item的CSS中设置 .item:hover .b {} 表示在item生效时同时生效 class b

<head> <meta charset="UTF-8"> <title>Title</title> <style> .item{ background-color:#dddddd; } .item:hover{ color:red; } .item:hover .b{ background-color:green; } </style> </head> <body> <div class="item"> <div class="a">123</div> <div class="b">456</div> </div> </body> View Code

　　　　后台管理：头部布局

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面布局</title> <style> body{ margin:0;/* 到上方没有间隔 */ } .left{ float:left; } .right{ float:right; } .pg-body .body-menu{ position:absolute; top:48px; left:0; bottom:0; width:20%; min-width:200px; background-color:#dddddd; overflow:auto; } .pg-body .body-content{ position:absolute; top:48px; bottom:0; right:0; width:80%; background-color:palevioletred; overflow:auto; z-index: 9; } .clear{ clear:both; } .pg-header{ height:48px; background-color:#2459a2; color:white; line-height:48px; } .pg-header .logo{ width:200px; background-color:#2459a2; text-align:center; } .pg-header .user{ margin-right:60px; padding:0 20px; background-color:#2459a2; height:48px; position:relative; } .pg-header .user:hover{ background-color:#396bb3; } .pg-header .user .a img{ height: 40px; width:40px; margin-top:4px; border-radius: 50%; } .pg-header .user .img-content{ position:absolute; top:48px; right:-47px; background-color:red; z-index: 20; } .pg-header .user .img-content a{ display: block; width:130px; height:40px; line-height:40px; padding:0; margin:0; display: none; } .pg-header .user:hover .img-content a{ display: block; } </style> </head> <body> <div class="pg-header"> <div class="logo left"> LOGO </div> <div class="user right"> <a class='a' href="#"> <img src="abc.jpg"/> </a> <div class="img-content"> <a>我的资料</a> <a>注销</a> </div> </div> <div class="clear"></div> </div> <div class="pg-body"> <div class="body-menu left"> <div style="background-color:#dddddd"> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> </div> </div> <div class="body-content left"> <div style="background-color:palevioletred"> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> </div> </div> </div> </body> </html> View Code

　　　　备注：小图标网址 www.fontawesome.io/icons

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面布局</title> <link rel="stylesheet" href="font-awesome-master/css/font-awesome.min.css" /> <style> body{ margin:0;/* 到上方没有间隔 */ } .left{ float:left; } .right{ float:right; } .pg-body .body-menu{ position:absolute; top:48px; left:0; bottom:0; width:20%; min-width:200px; background-color:#dddddd; overflow:auto; } .pg-body .body-content{ position:absolute; top:48px; bottom:0; right:0; width:80%; background-color:palevioletred; overflow:auto; z-index: 9; } .clear{ clear:both; } .pg-header{ height:48px; background-color:#2459a2; color:white; line-height:48px; } .pg-header .logo{ width:200px; background-color:#2459a2; text-align:center; } .pg-header .user{ margin-right:60px; padding:0 20px; background-color:#2459a2; height:48px; position:relative; } .pg-header .user:hover{ background-color:#396bb3; } .pg-header .user .a img{ height: 40px; width:40px; margin-top:4px; border-radius: 50%; } .pg-header .user .img-content{ position:absolute; top:48px; right:-47px; background-color:red; z-index: 20; } .pg-header .user .img-content a{ display: block; width:130px; height:40px; line-height:40px; padding:0; margin:0; display: none; } .pg-header .user:hover .img-content a{ display: block; } .pg-header .icons{ padding:0 10px; } .pg-header .icons:hover{ background-color:#396bb3; } </style> </head> <body> <div class="pg-header"> <div class="logo left"> LOGO </div> <div class="user right"> <a class='a' href="#"> <img src="abc.jpg"/> </a> <div class="img-content"> <a>我的资料</a> <a>注销</a> </div> </div> <div class="icons right"> <i class="fa fa-twitter-square" aria-hidden="true"></i> <span style="display: inline-block;padding:2px 5px;line-height: 1;background-color:#104E8B;border-radius: 50%;">5</span> </div> <div class="icons right"> <i class="fa fa-bell-o" aria-hidden="true"></i> </div> <div class="clear"></div> </div> <div class="pg-body"> <div class="body-menu left"> <div style="background-color:#dddddd"> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> <p>bbb</p> </div> </div> <div class="body-content left"> <div style="background-color:palevioletred"> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> <p>aaa</p> </div> </div> </div> </body> </html> View Code

例子：小图标增加，同时在小图标旁边通过调整padding和border-radius比重来给旁边数字画进圆框中

　　二、JavaScript补充

　　1、条件语句增加：

　　name=‘3’

　　switch(name){

　　　　case '1':

　　　　　　age = 123;;

　　　　　　break;

　　　　case '2':

　　　　　　age = 456;

　　　　　　break;

　　　　default:

　　　　　　age = 777;

　　　　}

　　　　2、函数返回值

　　　　function func(arg){

　　　　　　return arg+1

　　　　}

　　　　var result = func(1);

　　　　console.log(result);

　　　　2、函数分类：

　　　　　　1、普通函数

　　　　　　2、匿名函数

　　　　　　setInterval(function(){

　　　　　　　　console.log(123);

　　　　　　　　},5000)

　　　　　　3、自执行函数：创建函数并且自动执行

　　　　　　(function(arg){

　　　　　　　　console.log(arg);

　　　　　　　　})(1) #前面是函数，后面的括号里的1表示的是函数的实参

　　　　3、序列化

　　　　　　JSON.stringify() 对象转换为字符串

　　　　　　JSON.parse()　字符串转换为对象类型

　　　　4、转义　　　

decodeURI( ) URl中未转义的字符decodeURIComponent( ) URI组件中的未转义字符encodeURI( ) URI中的转义字符encodeURIComponent( ) 转义URI组件中的字符escape( ) 对字符串转义unescape( ) 给转义字符串解码URIError 由URl的编码和解码方法抛出

　　将数据经过转义后，保存在cookie中

url = "https://www.sogou.com/web?query=理解"; "https://www.sogou.com/web?query=理解" new_rul = encodeURI(url) "https://www.sogou.com/web?query=%E7%90%86%E8%A7%A3" decodeURI(new_rul) "https://www.sogou.com/web?query=理解"

　　5、eval

　　JS中eval可以写表达式同时也可以执行代码，类似于python只能怪eval（表达式）与exec（执行代码）的集合

　　6、时间

　　　　Date类

　　　　　　var d = new Date（）表示创建一个对象，Date是一个类，d就封装了当前的时间

var d = new Date() undefined d Mon Jun 05 2017 15:42:27 GMT+0800 (CST) d.getMinutes() 42 n = d.getMinutes()+5 47 d.setMinutes(n) 1496648847094 d Mon Jun 05 2017 15:47:27 GMT+0800 (CST)

　　　　7、作用域

　　　　　　1、JS中，以函数作为作用域

　　　　　　2、函数的作用域在函数没有执行之前就已经创建

　　　　　　3、函数的作用域存在作用域链，并且也在被调用之前创建

　　　　　　4、函数内局部变量提前声明　

　　　　8、面向对象：

　　　　原型：

　　　　function Foo(n){

　　　　　　this.name = n;

　　　　}

　　　　#Foo的原型

　　　　Foo.prototype = {

　　　　　　'sayName': function(){

　　　　　　　　console.log(this.name);

　　　　}

　　三、DOM

　　1、间接查找：

　　　　文本内容操作：

　　　　　　1、innerHTML：和innerText不同的地方在于：前者获取的对象包括标签与内容，而后者只能获取内容不能获取内容对应的标签

　　　　　　2、innerText：innerText仅获取文本内容

　　　　　　3、value：

　　　　　　　　　　input value获取当前标签中的值

　　　　　　　　　　select 获取选中的value值，selectedIndex

　　　　　　　　　　textarea value获取当前标签中的值

　　　　　　　　　　例子：搜索框

　　　　　　　　　　备注：onfocus表示获取光标 onblur表示移除光标，本例在获取光标时变为空，移除光标时填充‘获取关键字’ 但是现代浏览器可以只通过 placeholder='请输入关键字’ 来完成该操作

1 <body> 2 <div style="width:600px;margin:0 auto"> 3 <input id='i1' onfocus="Focus();" onblur="Blur();" value="请输入关键字" type="text" /> 4 </div> 5 <script> 6 function Focus(){ 7 console.log(1); 8 var tag = document.getElementById('i1'); 9 var val = tag.value; 10 if(val === '请输入关键字'){ 11 tag.value = '' 12 } 13 14 } 15 function Blur(){ 16 console.log(2); 17 var tag = document.getElementById('i1'); 18 var val = tag.value; 19 if(val.length === 0){ 20 tag.value = '请输入关键字'; 21 } 22 } 23 </script> 24 </body> View Code

　　　　　样式操作：

　　　　　　className：

　　　　　　classList：

　　　　　　　　classList.add

　　　　　　　　classList.remove

　　　　属性操作：

　　　　　　obj = document.getElementById('i1')

　　　　　　obj.setAttribute('key','value'):设置属性

　　　　　　obj.removeAttribute('value'):取消value属性，会将该属性取消

　　　　　　obj.attributes:获取全部属性

　　　　创建标签并添加到HTML中：

　　　　方法一：字符串的形式

<body> <input type="button" onclick="AddEle();" value="+"/> <div id="i1"> <input type="text"/> </div> <script> function AddEle(){ //创建标签 //将标签添加到i1内 var tag = "<input type='text'/>"; document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag); } </script> </body> View Code

　　　　备注：insertAdjacentHTML（）第一个参数包括：

　　　　　　1、beforeBegin：插在对象的前面

　　　　　　2、afterBegin：插在对象的第一个孩子处

　　　　　　3、beforeEnd：插在对象的最后一个孩子处

　　　　　　4、afterEnd：插在对象的后面　　

　　　　方法二：对象的方式

<body> <input type="button" onclick="AddEle();" value="+"/> <div id="i1"> <input type="text"/> </div> <script> function AddEle() { //创建标签 //将标签添加到i1内 var tag = document.createElement('input'); tag.setAttribute('type', 'text'); tag.style.fontSize = '16px'; tag.style.color = 'red'; var p = document.createElement('p'); p.appendChild(tag); document.getElementById('i1').appendChild(p); } </script> </body> View Code

　　　　　　提交表单：

　　　　　　任何标签通过DOM都可提交表单

　　　　　　document.getElementById('f1').submit()　　

<body> <form id='f1' action="http://www.baidu.com"> <input type="text"/> <input type="submit" value="提交"/> <a onclick="submitForm();" >提交</a> </form> <script> function submitForm(){ document.getElementById('f1').submit(); } </script> </body> View Code

　　　　　　其他：

　　　　　　console.log （）打印

　　　　　　alert（）　　　　弹窗

　　　　　　confirm()　　　　确认框

　　　　　　　　例子：

　　　　　　　　var v = confirm（‘提示信息’）

　　　　　　location.href　　　获取当前的URL也可以设置当前URL

　　　　　　　　例子：

　　　　　　　　location.href

　　　　　　　　location.href = 'http://www.baidu.com' #重定向

　　　　　　　　location.reload（） #刷新

　　　　　　setInterval(function(){}, 时间间隔)　　

　　　　　　　　#一直执行

　　　　　　　　var obj= setInterval( function(){

　　　　　　　　　　console.log(1);

　　　　　　　　　　clearInterval(obj);

　　　　　　　　},1000)

　　　　　　#只执行一次

　　　　　　setTimeout（function（）{

　　　　　　　　　　console.log('timeout'); //5秒后执行一次该操作

　　　　　　},5000）　　　　

　　　　　　clearTimeout（）//clearTimeout用法类似于clearInterval

　　　　　　事件：

　　　　　　onclick

　　　　　　onblur

　　　　　　onfocus

　　　　　　onmouseover：鼠标放在上面

　　　　　　onmouseout：鼠标移除

<body> <table border="1" width="300px"> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> </table> <script> var myTrs = document.getElementsByTagName('tr'); var len = myTrs.length; for(var i=0;i<len;i++){ myTrs[i].onmouseover = function(){ this.style.backgroundColor = 'red';//这个this 谁调用这个函数,这个this就指向谁,这里是tr调用,所以this就指代第一二三个tr } myTrs[i].onmouseout = function(){ this.style.backgroundColor = '';//这个this 谁调用这个函数,这个this就指向谁,这里是tr调用,所以this就指代第一二三个tr } } </script> </body> DOM1

　　　　　　绑定事件三种方式：

　　　　　　a. 直接标签绑定 οnclick=‘xxx（）’

　　　　　　b. 先获取DOM对象，然后进行绑定

　　　　　　　　document.getElementById('xxx').onclick

　　　　　　　　this:当前触发事件的标签

　　　　　　c. 通过addEventListner

　　　　　　　　该方法有三个参数，分别是事件，匿名函数，（true|false）最后一个参数有两个选择，true代表capture，false代表冒泡法

<head> <meta charset="UTF-8"> <title>Title</title> <style> #main{ background-color:red; width:300px; height:200px; } #content{ background-color:pink; width: 150 px; height:100px; } </style> </head> <body> <div id="main"> <div id="content"></div> </div> <script> var mymain = document.getElementById('main') mymain.addEventListener('click',function(){console.log('main')},false); var mycontent = document.getElementById('content') mycontent.addEventListener('click',function(){console.log('content')},false); </script> </body> 冒泡 <head> <meta charset="UTF-8"> <title>Title</title> <style> #main{ background-color:red; width:300px; height:200px; } #content{ background-color:pink; width: 150 px; height:100px; } </style> </head> <body> <div id="main"> <div id="content"></div> </div> <script> var mymain = document.getElementById('main') mymain.addEventListener('click',function(){console.log('main')},true); var mycontent = document.getElementById('content') mycontent.addEventListener('click',function(){console.log('content')},true); </script> </body> 捕捉

　　　　词法分析：　　　　首先会有一个活动对象 active object（ao）

　　　　1. 形式参数

　　　　2. 局部变量

　　　　3. 函数声明表达式

　　　　过程：

　　　　1.形式参数

　　　　 ao.age = undefine

　　　　实参为3，所以ao.age = 3

　　　　2. 局部变量声明：

　　　　　ao.age = undefine 局部变量声明时不做任何改变，所以没有被赋值

　　　　3.函数声明表达式：

　　　　　　ao.age = function()

　　　　词法分析后代码开始执行：

　　　　1、从ao上开始查找　age是function age（）　　

　　　　2、第二行开始被赋值为27

　　　　3、第三行是空函数

　　　　4、第四行打印还是27

转载于:https://www.cnblogs.com/xiaopi-python/p/6934215.html

最新回复(0)