Python 15 html 基础 jQuery & Javascript研究
Posted Dandy Zhang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Python 15 html 基础 jQuery & Javascript研究相关的知识，希望对你有一定的参考价值。
基础内容
DOM操作
javascript探讨
JQuery初识
DOM
innerText ==>获取仅文本
innerHtml ==>获取全部内容
1 <div id="aaa">dandy<span>aaa</span>taylor</div>
value
input value 获取当前标签的值
select 获取选中的value值 selectIndex
textarea 获取标签的值
tooltip:
placeholder ="请输入关键字" ==> html5里面可以直接看到input标签的提示字符。
onfocus; onblur 光标锁定，光标消失事件。
属性操作
setAttribute
getAttribute
removeAttribute
创建标签：
1 var tag = "<input type=\'button\' />" 2 document.getElementById("aaa").insertAdjacentHTML("beforeEND",tag);
1 var tag = document.createElement(\'input\') 2 tag.setAttribute(\'type\',\'text\') 3 document.getElementById(\'aaa\').appendChild(tag)
其他功能
1 var conf = confirm("确定删除么？") 2 console.log(conf)
如果点击确认，则返回true；如果点击取消，则返回false.
location.href 获取当前url location.href = "" 重新定向 location.reload() 刷新
1 var obj = setInterval(function(){ 2 console.log(1); 3 },1000) 4 clearInterval(obj)清空定时器 5 6 setTimeout("func()",5000) 邮箱删除提醒，删除邮件
Javascript
javascript的函数：
1、普通函数 function func(){ ... } 2、匿名函数 setInterval(function(){ ... },1000) 3、自执行函数 (function(arg){ console.log(arg); })
序列化
JSON.stringify(li) ==> 数组转换成字符串
JSON.parse() ==> 字符串转换成对象
转义
encodeURL(url)
decodeURL(url)
客户端(cookie) ==> 服务器端
将数据经过转义后保存在cookie
eval
python:
val = eval(表达式) 可以执行表达式，返回结果，但是例如for循环之类的就不能执行了。
exec(代码) 可以执行类似for循环之类的代码，没有返回
python里面eval后面写一个表达式，实际上是做不了的
javascript:
eval 是python的eval跟exec的合集
时间
date对象
创建时间对象
var d = new Date()
d.get 获取
d.set 设置
作用域：
python中是以函数作为作用域的:
1 def func(): 2 if 1==1: 3 name="dandy" 4 print(name)
其他语言以{}或代码块作为作用域
public void func() { if(1==1){ string name = "dandy" } console.write(name) }
//# 会报错的。因为声明的变量name是一个局部变量
**********************javascript中以函数作为作用域（除了let）
**********************函数的作用域在函数未被调用前，就已经被创建
**********************函数的作用域存在作用域链并且也是在被调用前创建
1 obj = \'text\' 2 function func(){ 3 var obj = \'dandy\'; 4 function inner(){ 5 var obj = \'renee\'; 6 console.log(obj) 7 } 8 inner() ==>所以这边调用先会在函数本身查找 obj, 没有的话去上层"dandy",没有的话再上层"text",再没有就报错。 9 }
1 所以下面这段代码 2 obj = \'text\' 3 function func(){ 4 var obj = \'dandy\'; 5 function inner(){ 6 console.log(obj) 7 } 8 return inner; 9 } 10 var ret = func() 11 ret() 的输出是dandy 12 ====================函数的作用域在函数未被调用前，就已经被创建
1 所以下面这段代码 2 obj = \'text\' 3 function func(){ 4 var obj = \'dandy\'; 5 function inner(){ 6 console.log(obj) 7 } 8 var obj = \'renee\'; 9 return inner; 10 } 11 var ret = func() 12 ret() 的输出是renee 13 解释器解释的时候，内部代码不执行，只创建作用域，所以解释器从上到下解释(先作用域)。首先 var obj,然后func,inner,然后执行ret=func()，
此时obj="text",执行func时，obj=\'dandy\',obj = \'renee\',最后执行inner,此时obj="renee"
*******************************javascript函数内部局部变量会提前申明
function func(){ console.log(xxoo); var xxoo = "dandy" } func() 输出什么？ undefined
函数在生成作用域链的同时，会将所有的局部变量定义一下（不赋值）
词法分析：
切记词法分析：1、形式参数；2、局部变量；3、函数声明表达式；执行函数
javascript 面向对象
1 function Foo(){ 2 var name ="dandy"; 3 } 4 foo() 5 相当于 6 function Foo(){ 7 this.name ="dandy"; 8 } 9 var obj = new Foo() 10 obj.name ==> "dandy"
那么再看下面这个案例代码
1 function Foo(n){ 2 this.name = n; 3 } 4 var obj = new Foo("dandy")
这里的this就相当于python中的self。创建对象用new 函数();
1 function Foo(n){ 2 this.name = \'n\' 3 this.sayname = function(){ 4 console.log(this.name); 5 } 6 } 7 var obj1 = new Foo("renee"); 8 obj1.name; 9 obj1.sayname() 10 11 var obj2 = new Foo("renee"); 12 obj2.name; 13 obj2.sayname() 14 javascript 会在内存中创建2个对象，重复;而且对象在内存中也是2个sayname();重复定义
1 原型 2 function Foo(n){ 3 this.name = n; 4 } 5 # Foo 原型 6 Foo.prototype = { 7 \'sayname\':function(){ 8 console.log(this.name) 9 } 10 } 11 obj1 = new Foo(\'dandy\') 12 13 obj2 = new Foo(\'renee\') 14 类里面没有重复定义原型，对象去类的原型去查找,这样避免了重复定义类
下面我们来讲一下DOM里面的this，大家先记住一句话，谁调用事件或者函数，this就指向谁
绑定事件的两种方式：
this 当前出发事件标签
a、第一种绑定方式
<input type=\'button\' onclick = \'clickon(this)\'>
b、第二种绑定方式
document.getElementById("id").onclick=function(){
this ==>被调用的标签对象
}
c、第三种绑定方式(click 绑定2个方法同时)
var mydiv = document.getElementById("id")
mydiv.addEventlistener("click",function(){console.log(\'aa\')},false)
mydiv.addEventlistener("click",function(){console.log(\'bb\')},false)
特别注意一下下面这张图
<body>
<div id="main">
<div id="content"></div>
</div>
<script>
var mymain = document.getElementById("main");
var mycontent = document.getElementById("content");
// mymain.addEventListener(\'click\',function() {console.log("main")},false);
// mycontent.addEventListener(\'click\',function() {console.log("content")},false);
mymain.addEventListener(\'click\',function() {console.log("main")},true);
mycontent.addEventListener(\'click\',function() {console.log("content")},true);
// false ==> 是一种冒泡方式
// true ==> 则是表示一种捕捉方式
</script>
</body>
1 this作用域 2 <body> 3 <table border="1" width="400px"> 4 <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr> 5 <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr> 6 <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr> 7 <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr> 8 </table> 9 <script> 10 var objs = document.getElementsByTagName("tr"); 11 for (var i = 0; i < objs.length; i++){ 12 objs[i].onmouseover= function() { 13 this.style.backgroundColor = "red"; 14 //objs[i].style.backgroundColor = "red"; 因为作用域的问题，所以不可以这样写 for循环先执行解析，i=0、1、2 15 //但是function还只是放在内存中没有执行 16 }; 17 objs[i].onmouseout = function() { 18 this.style.backgroundColor = ""; 19 } 20 } 21 </script> 22 </body>
对于position做页面的补充，跟overflow的联合使用，首先让我们假想这样一种场景，我们需要一个页面，有一个header一直存在在顶端，左边的菜单栏也是一直存在在页面，右边的正文内容则很长，也需要一个下拉框，不改变菜单跟header的情况下，自己滚动：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .pg-header{ 8 background-color: #073763; 9 height: 50px; 10 width: 100%; 11 color: white; 12 } 13 .content{ 14 position: fixed; 15 top: 50px; 16 bottom: 0; 17 left: 0; 18 width: 200px; 19 background-color: seagreen; 20 } 21 .main{ 22 position: fixed; 23 top: 50px; 24 right:0; 25 bottom:0; 26 left: 200px; 27 background-color: brown; 28 overflow: auto; 29 } 30 </style> 31 </head> 32 <body style="margin: 0;"> 33 <div class="pg-header"> 34 Flex 35 </div> 36 <div class="content">菜单</div> 37 <div class="main"> 38 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p> 39 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p> 40 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p> 41 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p> 42 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p> 43 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p> 44 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p> 45 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p> 46 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p> 47 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p> 48 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p> 49 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p> 50 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p> 51 <p>asdfas</ppython_day15_jquery