js基础2

来源：互联网发布：海信电视mac是什么编辑：程序博客网时间：2024/06/06 18:55

鼠标移上去换图片

js代码：

function testE(){var a=document.getElementById("p2");a.src="7.jpg";}function testF(){var a=document.getElementById("p2");a.src="2.jpg";}

html代码：

<img src="2.jpg" id="p2" onmouseout="testF()" onmouseover="testE()" style="width:300px; height:300px;"/>

鼠标点击不放开变图片

js代码：

function testG(){var a=document.getElementById("im");a.src="6.jpg";}function testH(){var a=document.getElementById("im");a.src="5.jpg";}

html代码：

<img id="im" src="5.jpg" onmousedown="testG()" onmouseup="testH()" style="width:300px; height:300px;"/>

增加标签

js代码：

function testJ(){var a=document.getElementById("div2");var para=document.createElement("p");a.appendChild(para);para.innerHTML="哈哈哈哈";}

html代码：

<div id="div2" style="background-color:#FCF; width:100px; height:50px;"><p id="p8">明天看</p></div>

<input class="ss3" type="button" onclick="testJ()" value="添加"/>

删除标签

js代码：

function testK(){var a=document.getElementById("div2");var para=document.getElementById("p8");a.removeChild(para);}

html代码：

<div id="div2" style="background-color:#FCF; width:100px; height:50px;"><p id="p8">明天看</p></div>

<input name="df2" type="button" onclick="testK()" value="删除"/>

window.location.href的使用：

js代码：

function go(){var text = document.getElementById("text5");window.location.href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd="+text.value+"&rsv_pq=a86fdc5e0003abc9&rsv_t=3d1fFOmXMSWx46fJ6dxK3oHQDmit6abMq9ZGsHJv7wJ5H1y9psEf6OL37xY&rqlang=cn&rsv_enter=1&rsv_sug3=9&rsv_sug1=15&rsv_sug7=100";}

html代码：

<input type="text" id="text5"/><input type="button" value="百度一下" onclick="go()"/>

select的使用：

js代码：

function testD(){var a=document.getElementById("sheng");alert(a.options[a.selectedIndex].text);}

html代码：

<select id="sheng" onchange="testD()"><option>北京</option><option>上海</option><option>天津</option><option>山东</option><option>四川</option></select>

隐藏，显示：

js代码：

function testA(){var x=document.getElementById("p1").style.visibility="hidden";}function testB(){var x=document.getElementById("p1").style.visibility="visible";}

html代码：

<input id="df1" type="button" onclick="testA()" value="隐藏"/><input class="ss2" type="button" onclick="testB()" value="显示"/>

onchange的用法：

js代码：

function testC(){alert("哈哈哈");}

html代码：

<input name="df3" type="text" onchange="testC()" value="onchange的用法"/>

获取input所有标签，并且返回的是数组：

js代码：

function test(){//var a=document.getElementsByClassName("ss");var div=document.getElementById("div1");var inputs=div.getElementsByTagName("input");//var d=document.getElementsByTagNameNS("");//alert(b.name);//alert(c.length);for(var i=0;i<inputs.length;i++){alert(inputs[i].type+" "+inputs[i].id+" "+inputs[i].name+" "+inputs[i].class);}}

html代码：

<input id="hh" type="button"  onclick="test()" value="获取input所有标签，并且返回的是数组"/>

onunload，onload的使用：

html代码：

<body onload="alert('没有小葵花了');" onunload="alert('孩子咳嗽老不好，多半是活不长了！');"></body>

阅读全文

0 0