1. HTML+CSS补充
- 布局：
<style> .w{ width:980px;margin:0 auto; } </style> <body> <div style='background-color:red;'> <div class='w'>dsfg</div> </div> </body>
清除浮动
.clearfix:after{ content: '.'; display: block; clear: both; visibility: hidden; height: 0; }
响应式布局 @media
<style> @media (min-width: 800px){ .item{ width: 20%; float: left; } } @media (max-width: 800px){ .item{ width: 33.3%; float: left; } } </style>
2. DOM事件
- 如何绑定事件（2）
- 如何阻止默认事件的发生（2），DOM绑定事件的时候，必须在前面加return
方法一： <a href="http://www.baidu.com" onclick="return func();">走一发</a> <script> function func() { alert(123); return false; } </script> 方法二： <a href="http://www.google.com.hk" id="i1">走一发</a> <script> document.getElementById('i1').onclick = function () { alert('123'); return false } </script>
匿名函数循环方式
setInterval(function () {},500)
实例：阻止空字符提交：
<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>0){ return true; }else{ alert('请输入内容222'); return false; } }; </script>
- this表示当前触发事件的标签
<div id="i1">战争</div> <script> document.getElementById('i1').onclick = function () { var v = this.innerHTML; alert(v); } </script>
- 一个标签可以绑定多个不同的事件
实例：获取焦点
<body>
<input type="text" value="请输入关键字" onfocus="fuckFocus(this);" onblur="fuckBlur(this);"/>
<input type="button" value="提交" />
<script>
/*
当标签获取焦点时，执行该函数
*/
function fuckFocus(ths) {
// value innerText innerHtml
var v = ths.value;
if(v == '请输入关键字'){
ths.value = "";
}
}
/*
当标签失去焦点时
*/
function fuckBlur(ths) {
var v = ths.value;
if(v.length == 0){
ths.value = "请输入关键字";
}
}
</script>
</body>
- 绑定多个相同的事件
<div id="i1" onclick="console.log(1);" >鸡建明</div> <script> document.getElementById('i1').addEventListener('click',function () { console.log(2); }) </script>
- 事件执行顺序：
- 冒泡：从内向外查找
<div id="i1" style="height: 400px;width: 400px;background-color: red" onclick="alert(1);"> <div id="i2" style="height: 300px;width: 300px;background-color: green" onclick="alert(2);"> <div id="i3" style="height: 200px;width: 200px;background-color: antiquewhite" onclick="alert(3);"></div> </div> </div>
- 捕获：从外向内查找
<div id="i1" style="height: 400px;width: 400px;background-color: red" > <div id="i2" style="height: 300px;width: 300px;background-color: green" > <div id="i3" style="height: 200px;width: 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>
- event是当前事件的信息，
window.onkeydown监控全局事件
捕获用户按下ctrl键
<body>
<input type="text" onkeydown="func(this,event);" />
<script>
function func(ths,e) {
console.log(ths,e);
}
window.onkeydown = function(j){
console.log(j);
console.log(j['j'])
}
</script>
</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>
window.location.href 获取当前url window.location.href = "http://www.baidu.com" 跳转 window.location.reload() 重新加载当前页面
