js基础2

最新推荐文章于 2022-11-02 12:49:00 发布

爱哭的星辰

最新推荐文章于 2022-11-02 12:49:00 发布

阅读量260

点赞数

本文链接：https://blog.csdn.net/LALA__ddd/article/details/75041645

版权

鼠标移上去换图片

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" οnmοuseοut="testF()" οnmοuseοver="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" οnmοusedοwn="testG()" οnmοuseup="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" οnclick="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" οnclick="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="百度一下" οnclick="go()"/>

select的使用：

js代码：

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

html代码：

<select id="sheng" οnchange="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" οnclick="testA()" value="隐藏"/>
<input class="ss2" type="button" οnclick="testB()" value="显示"/>

onchange的用法：

js代码：

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

html代码：

<input name="df3" type="text" οnchange="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"  οnclick="test()" value="获取input所有标签，并且返回的是数组"/>

onunload，onload的使用：

html代码：

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

爱哭的星辰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js基础2

鼠标移上去换图片js代码： function testE(){ var a=document.getElementById("p2"); a.src="7.jpg"; } function testF(){ var a=document.getElementById("p2"); a.src="2.jpg"; }html代码：鼠标点击不放开变图片j
复制链接

扫一扫

js基础2

“相关推荐”对你有帮助么？