一.一些问题
1.页面布局不好看
float,clear:both,margin,padding
position:left：
参考网上的末班：HTML模板，bootstrap2.内容回顾
a.HTML
一堆标签：行内，块级标签
b.CSS
position background text-align margin padding font-size z-index over-flow :hover opacity float (clear:both) line-height border color display
3.页面布局
主站— <div class='pg-header'> <div style='width:980px;margin:0 auto;'> 内容自动居中 </div> </div> <div class='pg-content'></div> <div class='pg-footer'></div>
position: fiexd -- 永远固定在窗口的某个位置 relative -- 单独无意义 absolute -- 第一次定位，可以在指定位置，滚轮滚动时，不在了。。。。 a. 左侧菜单跟随滚动条 b. 左侧以及上不不动 ******
页面布局范例1：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; #这个是上右下左的值都为0, margin:auto; 这个是上右下左的值都是自适应的 } .left{ float: left; #给这个图层添加一个浮动,而且这个图层将浮zuo边 } .right{ float: right; } .pg-header{ height: 48px; background-color: #2459a2; color: white; } .pg-content .menu{ width: 20%; background-color: red; min-width: 200px; #最小宽度，当页面缩放当宽度20%小于200px时以此为准 height: 500px; } .pg-content .content{ width: 80%; background-color: green; overflow: auto;#如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容 } </style> </head> <body> <div class="pg-header"></div> <div class="pg-content"> <div class="menu left">a</div> <div class="content left"> <p>b</p> </div> </div> <div class="pg-footer"></div> </body> </html>
4. 当鼠标放到item上为内容加上样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="Font-Awesome-master/css/font-awesome.min.css"> //rel告诉浏览器你link过来的是一个样式,href为首先引入CSS文件 <style> .item{ background-color: #dddddd; } .item:hover{ //:hover 选择器用于选择鼠标指针浮动在上面的元素 color: red; //字体为红色 } .item:hover .b{ background-color: green; //背景颜色为绿色 } </style> </head> <body> <div class="item"> <div class="a"> <i class="fa fa-superpowers" aria-hidden="true"></i> //aria-expanded表示展开状态。默认为undefined, 表示当前展开状态未知。其它可选值：true表示元素是展开的；false表示元素不是展开的。 </div> <div class="b">456</div> </div> </body> </html>
补充：http://fontawesome.io/ 下载图标
5.javascript回顾
a.for循环
for (var item in [11,22,33,44]){ console.log(item) } var arra = [11,22,33,44] for (var i=0;i<arra.length;i++){ console.log(item) break； }
b.while循环
while(条件){ }
c.条件语句
if(){ }else if(){ }else{ }
除了python其他语言都有的条件语句
switch(name){ case '1': age = 123; break; case '2': age = 456; break; default: age=777; }
二、javascript补充
1、函数（普通函数，匿名函数，自执行函数）
a.普通函数
function func(){
}
b.匿名函数
function func(arg){ return arg+1 } setInterval("func()",5000); 相当于： setInterval (function)(){ console.log(123)； }，5000）
c.自执行函数
function func(arg){ console.log(arg)； } //func(1) (function()arg{ console.log(arg); })(1)
2、序列化
JSON.stringify() 将对象转换成字符串
l = [11,22,33,44]
[11, 22, 33, 44]
JSON.stringify(l)
"[11,22,33,44]"
l_str=JSON.stringify(l)
"[11,22,33,44]"
JOSN.parse() 将字符串转换成对象类型
new_list = JSON.parse(l_str)
[11, 22, 33, 44]
3、转义
decodeURI() URI中未转义的字符
decodeURIComponet() URI组件中的未转义字符
decodeURI() URI中的转义字符
encodeURIComponent() 转义URI组件中的字符
escape() 对字符串转义
unescape() 给转义字符串解码
URIError 由URI的编码和解码方法抛出
4、eval
JavaScript中的eval是Python中eval和exec的合集，即可以编译代码也可以获取返回值。
eval()
EvalError 执行字符串中的JavaScript代码
5、时间
JavaScript中提供了时间相关的操作，时间操作中分为两种时间：
时间统一时间
本地时间（东八区）
更多操作参见：http://www.shouce.ren/api/javascript/main.html
data是一个对象，如果我们要使用这个对象首先要实例化这个对象
data是一个对象，如果我们要使用这个对象首先要实例化对象
data = new data()
获取当前的时间的分钟为多少？
data = new data()
min = data.getMinutes()
需要说的是，实例化一个data的对象，会把实例化那一时刻的时间封装到data这个变量中，时间并不是变化的。
6.JavaScript作用域
python中的作用域是以函数当做作用域
执行成功:
def func(): if 1==1: name = 'sean' print(name) func()
执行失败：
def func(): if 1==1: name = 'sean' print(name) func() print(name)
1.JavaScript中也是以函数作为作用域；
2.函数的作用域在函数未被调用之前已经创建
解释：当解释变异解释的过程中，作用域就已经创建。
3.函数的作用域存在作用域链，并且也是在被调用之前创建
解释：函数的作用域存在作用域链
xo = 'sean'; "sean" <!--定义一个函数fun--> function fun(){ xo = 'tom'; <!--里面套一个函数inner--> function inner(){ xo = 'jack'; console.log(xo); } }
输出结果：
undefined
当fun函数被调用的时候，会一次执行到最里面的inner函数，它会打印一个xo的变量，如果inner作用域有xo变量那么久打印，如果没有就向上找看fun的作用域，里面是有xo这个变量，如果依旧没有就去最外面找。如果找到了就打印，如果没找到就报错。解释：作用域链在被调用之前就被创建。
xo = 'sean' "sean" <!--定义一个函数fun--> function fun(){ xo = 'tom'<!--里面套一个函数inner--> function inner(){ console.log(xo) } return inner; } a = fun() inner(){ console.log(xo) } a()
输出结果：
tom
因为作用域链未被调用之前，作用域链的作用域已经创建，所以是tom不是sean。
4.函数内部局部变量声明提前
function func(){ console.log(xxoo); var xxoo = 'sean'; }
当执行func()函数的时候，结果为：undefined
解释：当解释器JavaScript代码的时候，函数里面的局部变量都会被先声明，声明的过程为：var xxoo;
因为只是声明一个xxoo变量，并未赋值，所以现在的值是undefined，因此上面的结果也是undefined；这里就体现了“函数内部局部变量声明提前”
7、JavaScript面向对象
function Foo(n) { this.name = n; } var obj = new Foo('sir')
a.封装一个对象的时候，this关键字相对于对象名；
b.创建对象时，new关键字进行创建，方法为new函数（）即可
8、DOM补充
8.1 查找
8.1.1 直接查找
var obj = document.getElemntById('i1')
8.1.2 间接查找
文件内容操作：
innerText 仅文本
innerHTML 全内容
value
input value获取当前标签中的值
select 获取选中的value值（selectedIndex）
textarea value获取当前标签中的值
操作示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i1"> 帅哥 <a>谷<span>歌</span></a> </div> <input type="text" id="i2" /> <select id="i3"> <option value="11">北京1</option> <option value="12">北京2</option> <option value="13">北京3</option> </select> <textarea id="i4"></textarea> </body> </html>
搜索框范例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width: 600px;margin: 0 auto;"> <input id="i1" οnfοcus="Focus();" οnblur="Blur();" type="text" value="请输入关键字"/> <input type="text" placeholder="请输入关键字" /> </div> <script> function Focus(){ var tag = document.getElementById('i1'); var val = tag.value; if(val == "请输入关键字"){ tag.value = ""; } } function Blur(){ var tag = document.getElementById('i1'); var val = tag.value; if(val.length ==0){ tag.value = "请输入关键字"; } } </script> </body> </html>
8.2 操作
8.2.1 文件内容操作：
innerText:只获取内容
innerHTML:全部内容，各种标签都能拿到
注意:不管是获取内容还是操作内容，innerText都是字符串的格式，innerHtml则会转义特殊字符（标签）获取数据的区别
获取数据的区别
8.2.2 样式操作：
a. class操作
className // 获取所有类名 classList.remove(cls) // 删除指定类 classList.add(cls) // 添加类
obj.style.fontSize = '16px';
obj.style.backgroundColor = 'red';
obj.style.color = "red"
b.属性操作：
attributes
setAttribute
getAttribute
removeAttribute
8.2.3 标签
a.创建标签
// 方式一 var tag = document.createElement('a') tag.innerText = "wupeiqi" tag.className = "c1" tag.href = "http://www.cnblogs.com/youngcheung" // 方式二 var tag = "<a class='c1' href='http://www.cnblogs.com/chaishao'>chaishao</a>"
范式--创建标签两种形式：字符串和对象方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" οnclick="AddEle1();" value="+" /> <input type="button" οnclick="AddEle2();" value="+" /> <div id="i1"> <p><input type="text" /></p> // <hr >#分割线 </div> <script> function AddEle1(){ // 创建一个标签 // 将标签添加到i1里面 var tag = "<p><input type='text'/></p>"; // 注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd' document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag); } function AddEle2(){ // 创建一个标签 // 将标签添加到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> </html>
4.提交表单
任何标签通过DOM可以提交表单
document.getElementById('form').submit()
5.其他操作
console.log 输出框 alert 弹出框 confirm 确认框 // URL和刷新 location.href 获取URL location.href = "url" 重定向 location.reload() 重新加载 // 定时器 setInterval 多次定时器 clearInterval 清除多次定时器 setTimeout 单次定时器 clearTimeout 清除单次定时器
五、事件
a.参考图
写一个行为样式结构相分离的页面？js css html
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> #test{ background-color: red;width:300px;height:400px; } </style> <body> <div id="test"> 内容 </div> <script> /* 方法一 function t1(){ console.log('dsads'); } */ var mydiv = document.getElementById("test"); //console.log(mydiv); mydiv.onclick = function(){ console.log("dsads"); } </script> </body> </html>
范例2：将鼠标放在一个表格上高亮显示
方式一：dom0
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> </style> <body> <table border="1" width="300px"> <tr οnmοuseοver="t1(0);" οnmοuseοut="t2(0);"><td>1</td><td>2</td><td>2</td></tr> <tr οnmοuseοver="t1(1);" οnmοuseοut="t2(1);"><td>1</td><td>2</td><td>2</td></tr> <tr οnmοuseοver="t1(2);" οnmοuseοut="t2(2);"><td>1</td><td>2</td><td>2</td></tr> </table> <script> function t1(n){ var myTrs = document.getElementsByTagName("tr")[n]; // console.log(myTrs); myTrs.style.backgroundColor = "red"; } function t2(n){ var myTrs = document.getElementsByTagName("tr")[n]; myTrs.style.backgroundColor = ""; } </script> </body> </html>
方式二：dom1
<body> <table id="i1" border="1" width="300px"> <tr><td>1</td><td>2</td><td>2</td></tr> <tr><td>1</td><td>2</td><td>2</td></tr> <tr><td>1</td><td>2</td><td>2</td></tr> </table> <table id='i2' border="1" width="300px"> <tr><td>1</td><td>2</td><td>2</td></tr> <tr><td>1</td><td>2</td><td>2</td></tr> <tr><td>1</td><td>2</td><td>2</td></tr> </table> <script> var myTrs = document.getElementsByTagName("tr"); var len = myTrs.length; for(var i=0;i<len;i++) { // i=0,i=1,i=2 myTrs[i].onmouseover = function () { this.style.backgroundColor = "red"; }; myTrs[i].onmouseout = function () { this.style.backgroundColor = ""; }; } </script> </body>
绑定事件两种方式： a. 直接标签绑定 onclick='xxx()' onfocus b. 先获取Dom对象，然后进行绑定 document.getElementById('xx').onclick document.getElementById('xx').onfocus this，当前触发事件的标签 a. 第一种绑定方式 <input id='i1' type='button' οnclick='ClickOn(this)'> function ClickOn(self){ // self 当前点击的标签 } b. 第二种绑定方式 <input id='i1' type='button' > document.getElementById('i1').onclick = function(){ // this 代指当前点击的标签 } c.第三种绑定方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> #main{ background-color: red; width:300px; height:400px; } #content{ background-color: pink; width:150px; height:200px; }</style><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")},true); mycontent.addEventListener("click",function(){console.log("content")},true); </script></body></html>
作用域的示例：
var myTrs = document.getElementsByTagName("tr"); var len = myTrs.length; for(var i=0;i<len;i++){ // i=0,i=1,i=2 myTrs[i].onmouseover = function(){ this.style.backgroundColor = "red"; }; }
3821
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
