补充1:页面布局
一般像京东主页左侧右侧都留有空白,用margin:0 auto居中,一般.w。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .w{ width: 980px; margin: 0 auto; border: 1px solid green; } </style> </head> <body> <div style="background-color: black;color: white"> <div class="w">标题</div> </div> <div> <div class="w">内容</div> </div> </body> </html>
补充2:页面清除浮动
之前都是用clear:both
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
</style> </head> <body> <div style="background-color: #3ba354" class="clearfix"> <div style="border: 1px solid red; 100px;height: 100px;float: left"></div> <div style="border: 1px solid red; 100px;height: 100px;float: left"></div> <div style="border: 1px solid red; 100px;height: 100px;float: left"></div> <div style="border: 1px solid red; 100px;height: 100px;float: left"></div> </div> </body> </html>
.clearfix:after对clearfix类里面的孩子做点什么
display:none隐藏,位置都不留 visibility:hidden隐藏,位置留着
一般页面都需要,放在commons.css,引入
补充3:页面响应式布局
页面布局随着页面大小变化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> @media (min- 800px) { .item { float: left; width: 20%; } } @media (max- 600px) { .item{ float: left; width: 25%; } } </style> </head> <body> <div class="item"> <label>用户名</label> <input type="text"> </div> <div class="item"> <label>用户名</label> <input type="text"> </div> <div class="item"> <label>用户名</label> <input type="text"> </div> <div class="item"> <label>用户名</label> <input type="text"> </div> <div class="item"> <label>用户名</label> <input type="text"> </div> </body> </html>
补充四:事件绑定的两种方式
阻止默认事件的发生 return false
方式1(直接在标签中绑定事件)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="jquery-3.1.1.js"></script> <title>Title</title> </head> <body> <a href="http://www.baidu.com" onclick="return func();">揍你</a> <script> function func() { alert(123); return false; } </script> </body> </html>
方式2(在js中找到这个标签再绑定事件)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="jquery-3.1.1.js"></script> <title>Title</title> </head> <body> <a href="http://www.baidu.com" id="i1">揍你</a> <script> document.getElementById('i1').onclick = function () { alert(123);
return false; } </script> </body> </html>
应用:用户没输入就不让他往后台发
input标签取值用value,其他标签用innerText
方式一:
<!DOCTYPE html> <html lang="en"> <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" value="提交" onclick="return func()"/> </form> <script> function func() { var v = document.getElementById('user').value; if (v.length){ return true; }else { alert('请输入内容') return false; } } </script> </body> </html>
方式二:
<!DOCTYPE html> <html lang="en"> <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="sb" value="提交"/> </form> <script> document.getElementById('sb').onclick = function () { var v = document.getElementById('user').value; if (v.length){ return true }else { alert('输入内容'); return false } } </script> </body> </html>
补充五:this
this表示当前触发事件的标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--<div id="i1">--> <!--whatever--> <!--</div>--> <div onclick="oclick(this);">anyway</div> </body> <!--<script>--> <!--document.getElementById('i1').onclick = function () {--> <!--var v = this.innerHTML--> <!--alert(v)--> <!--}--> <!--</script>--> <script> function oclick(sel){ var v = sel.innerHTML; alert(v); } </script> </html>
应用:文本框有默认值,鼠标放在文本框里面,默认值消失,鼠标点文本框外,默认值出现。
用了两种绑定事件,一个标签可以绑定多个不同的事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--<input type="text" value="请输入关键字" onfocus="ofocus(this);"onblur="oblur(this);"/>--> <input id="test" type="text" value="请输入关键字"/> </body> <script> // function ofocus(ths) { // var v = ths.value; // if (v == '请输入关键字'){ // ths.value = ''; // } // } // function oblur(ths){ // var v = ths.value; // if(v.length==0){ // ths.value='请输入关键字' // } // } document.getElementById('test').onfocus = function () { var v = this.value; if (v == '请输入关键字'){ this.value = ''; } } document.getElementById('test').onblur = function () { var v = this.value; if(v.length==0){ this.value = '请输入关键字' } } </script> </html>
补充六:一个标签绑定多个相同的事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="jquery-3.1.1.js"></script> <title>Title</title> </head> <body> <div id="i1" onclick="console.log(1);" >鸡建明</div> <script> // document.getElementById('i1').onclick = function () { // console.log(2); // } document.getElementById('i1').addEventListener('click',function () { console.log(2); }) </script> </body> </html>
补充七:事件执行顺序
捕获 true
冒泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="jquery-3.1.1.js"></script> <title>Title</title> </head> <body> <!--<div id="i1" style="height: 400px; 400px;background-color: red" onclick="alert(1);">--> <!--<div id="i2" style="height: 300px; 300px;background-color: green" onclick="alert(2);">--> <!--<div id="i3" style="height: 200px; 200px;background-color: antiquewhite" onclick="alert(3);"></div>--> <!--</div>--> <!--</div>--> <div id="i1" style="height: 400px; 400px;background-color: red" > <div id="i2" style="height: 300px; 300px;background-color: green" > <div id="i3" style="height: 200px; 200px;background-color: antiquewhite" ></div> </div> </div> <script> document.getElementById('i1').addEventListener('click',function () {alert(1);},true); document.getElementById('i2').addEventListener('click',function () { alert(2); },true); document.getElementById('i3').addEventListener('click',function () { alert(3); },true); </script> </body> </html>
补充八:event当前事件的信息
全局绑定事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="jquery-3.1.1.js"></script> <title>Title</title> </head> <body> <input type="text" onkeydown="func(this,event);" /> <script> function func(ths,e) { console.log(ths,e); } window.onkeydown = function(e){ console.log(e); } </script> </body> </html>
补充九:表单提交
1.submit
2.js 找到form这个标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="jquery-3.1.1.js"></script> <title></title> </head> <body> <form id="f1" action="http://www.baidu.com"> <input type="submit" value="提交" /> <a onclick="submitForm();">提交</a> </form> <script> function submitForm() { document.getElementById('f1').submit(); } </script> </body> </html>
window.location.href 获取当前url
window.location.href = "http://www.baidu.com" 跳转
window.location.reload() 重新加载当前页面