python自动化之路-javascript补充

来源：互联网发布：sql developer怎么卸载编辑：程序博客网时间：2024/06/18 11:35

内容居中：

例子：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        body{            margin: 0;            padding: 0;        }        .w{            margin: 0 auto;            width: 980px;            color: seashell;            border: 1px solid black;        }    </style></head><body>    <div style="background-color: red;">        <div class="w"> 歌手</div>    </div>    <div class="w"style="background-color: red">content</div></body></html>

把外标签撑起来：

解决办法（1）-><div style="clear:both"></div>

解决办法（2）->.clearfix:after{       content: "..";       display: block;       clear: both;       visibility: hidden;       height: 0;       }
响应式布局：
解决办法（1）->简单粗暴，在最外层加宽度。例如：style="width: 800px"
解决办法（2）->使用@media
例子：@media(max-width: 700px) {     .item{    width: 20%;    float: left;     }}@media (max-width: 500px) {    .item{        width: 100%;        float: left;    }}
DOM绑定事件：
有些标签自带事件，如何屏蔽掉默认事件。
解决方法（1）->自定义函数，并return false，在onclick事件中也return。
例子：
<a href="http://www.baidu.com" onclick=" return func()">揍你</a>
<script>    function func(){        alert(123);        return false;    }</script>
解决办法（2）->绑定事件。
例子：
<a href="http://www.baidu.com" id="i1">揍你</a>
<script>document.getElementById("i1").onclick = function(){    alert(123);    return false;}</script>

例子2：
<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>0){            return true;        }else {            alert("...");            return false;        }    }</script>
或者
<input type="submit"  id="sb" value="提交" />
<script>    document.getElementById("sb").onclick = function (){           var v = document.getElementById("user").value;        if(v.length>0){            return true;        }else {            alert("...");            return false;        }    }</script>
this参数：
标签绑定：
解决办法（1）->根据id绑定
例子：
<div id="i1" onclick="func();">战争</div>
function func(){    var v = document.getElementById("i1").innerText;    alert(123);}
解决办法（2）->添加this参数
例子：
<div  onclick="func(this);">战争</div>
function func(ths){    var v = ths.innerText;    alert(v);}
或者
document.getElementById("i1").onclick = function(){    var  v = this.innerText;    alert(v);    alert(123);}
获取焦点和移走后重新重新赋值。
例子：
<input type="text" placeholder="请输入关键字" value="请输入关键字" onfocus="func1(this);" onblur="func2(this);" /><input type="button" value="提交"/>
    function func1(ths){        var v =  ths.value;//        alert(v);        if (v == "请输入关键字"){            ths.value = "";        }    }    function func2(ths){        var v = ths.value;        if (v == ""){            ths.value = "请输入关键字";        }    }
注意：获取元素值使用value（表单），或者用innertext获取div，span标签的值。innerhtml与innertext的区别是一个标签，一个文本内容。
事件学习：点击事件，双击事件，鼠标放置事件，鼠标移走事件。<div onclick="console.log(1)" ondblclick="console.log(2)" onmouseover="console.log(3)"  onmouseout="console.log(4)">纪建明</div>
绑定两个onclick事件：
<div id="i1" onclick="console.log(1)" >纪建明</div>
document.getElementById("i1").addEventListener("click",function(){    console.log(34);})
使用addEventListener绑定事件。

事件冒泡：一层一层的触发事件。
例子：（冒泡式）
<div style="height: 400px;width: 400px;background-color: red" onclick="alert(1)">    <div style="height: 300px;width: 300px;background-color: green" onclick="alert(2)">        <div style="height: 200px;width:200px;background-color: black" onclick="alert(3)"></div>    </div></div>

例子2：（捕获式）
<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: black" ></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>

绑定事件：onkeydown
例子：
<input type="text" onkeydown="func(this,event);" />
<script>    //某个标签绑定事件    function func(ths,e){        console.log(ths,e);    }    //整个窗口绑定事件    window.onkeydown = function(event){        alert(1);        console.log(event);    }</script>

绑定事件监听触发。。。
表单提交除了submit，还可以通过改造标签进行提交。
例子：
<form id="i1" action="http://www.baidu.com">    <input type="submit" value="提交"/>    <a onclick="func()">提交</a></form>
<script>    function  func(){        document.getElementById("i1").submit();    }</script>

页面刷新：（1）在head头部添加刷新功能。（2）使用window.location.reload()刷新。
网页跳转：window.location.href = "http://www.baidu.com"

0 0