Java教程

JavaScript03.BOM编程

本文主要是介绍JavaScript03.BOM编程,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

回顾:JavaScript02.进阶和Bom

导语:BOM(Browser Object Model) 是指浏览器对象模型。

在JS中获取HTML元素

1.通过标签中的id属性

document.getElementById();    //通过标签中的id属性获得html中的元素,()中放html标签的id

//例如:
<body>
	<div id="d1"></div>;   <!--创建一个div标签-->
	    <script type="text/javascript">
			var di = document.getElementById("d1");    //通过标签id获得元素给di赋值
			console.log(di);    //在控制台答应di
		</script>
</body>

2.通过标签名

document.getElementsByTagName();    //通过标签名获得html元素,()中放html标签名

//例如:

<body>
        <!--创建两个div标签-->
		<div id="d1">	</div>
		<div id="d2">	</div>
		<script type="text/javascript">
            
			var ds = document.getElementsByTagName("div");    //定义一个变量来存放得到的元素
			console.log(ds);    //控制台打印定义的变量ds

		</script>
	</body>

运行结果为:

3.通过标签中class属性

document.getElementsByClassName();    //通过标签class属性获得html元素,()中放class名

//例如:
    
    <body>
		<div id="d1" class="ds">	</div>
		<div id="d2" class="ds">	</div>
		<script type="text/javascript">
			
			var ds2 = document.getElementsByClassName("ds");
			console.log(ds2);

		</script>
	</body>

 在控制台查看结果如下

 

 HTML元素上的常用事件

 1.点击事件 onclick

<body>
		<button type="button" onclick="f()"></button>
		
		<script type="text/javascript">
			function f(){
				console.log("我被点击了");
			};
		</script>

</body>

 2. 双击事件 ondblclick

<body>
		<button type="button" ondblclick="f()"></button>
		
		<script type="text/javascript">
			function f(){
				console.log("我被双击了");
			};
		</script>

</body>

 3. 获得焦点事件 onfocus

<body>
		<input type="text" id="i1" onfocus="f2()" value="获得焦点前"/> //如果获得了焦点就会调用f2()方法
	
		<script type="text/javascript">
            function f2(){    //将输入框里的内容变成"获得焦点后"
				var i=document.getElementById("i1");
				i.value="获得焦点后";
			};
		</script>
	</body>

 4.失去焦点事件 onblur

<body>
		<input type="text" id="i1" onfocus="f2()" value="失去焦点前"/> //如果失去了焦点就会调用f2()方法
	
		<script type="text/javascript">
            function f2(){    //将输入框里的内容变成"失去焦点后"
				var i=document.getElementById("i1");
				i.value="失去焦点后";
			};
		</script>
	</body>

 5.鼠标移入事件 onm ouseover

<body>
		<input type="text" id="i1" onfocus="f2()" value="鼠标没有移入"/> //如果鼠标移入就会调用f2()方法
	
		<script type="text/javascript">
            function f2(){    //将输入框里的内容变成""
				var i=document.getElementById("i1");
				i.value="";
			};
		</script>
	</body>

 6.鼠标移出事件 onm ouseout

<body>
		<input type="text" id="i1" onfocus="f2()" value="鼠标没有移出"/> //如果鼠标移出就会调用f2()方法
	
		<script type="text/javascript">
            function f2(){    //将输入框里的内容变成""
				var i=document.getElementById("i1");
				i.value="";
			};
		</script>
	</body>

HTML元素上的常用属性

  1. textContent :标签的文本内容(定义的html语句不生效
  2. innerHTML :标签中的html内容(html语句会生效)
  3. value :元素的值(适用于具备value属性的元素,例如input)
  4. checked :是否被选中(适用于单选框,多选框)
  5. style :标签中的style属性(用于设置样式)

JS中的for循环

控制元素的显示

display

1.none 不显示(页面不会有空间)

2.block 以块状元素显示

3.inline 以行内元素显示

4.inline 以行内块状显示

visibility

1.visible 可见

2.hidden 不可见(会占据页面空间)

opacity

0~1之间的值(用于控制元素的透明度)

案例详解

实现图片点击隐藏和显示功能

效果如下:

当点击第一个按钮时,图片隐藏并不保留空间 

 

当第二个按钮点击时,图片隐藏切保留空间 

  代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例</title>
		 <style>
		        div{    <!--设置div样式,宽高设置为100px,背景颜色设置为红色-->
		            width: 100px;
		            height: 100px;
		            background: red;
		        }
		    </style>
	</head>
	<body>
		<div id="d1" onclick="">   <!--创建div标签,id设置为d1-->
			
		</div>
		<button id="b1" type="button" onclick="fn1()">点我隐藏</button>    <!--创建隐藏按钮b1-->
		<button id="b2" type="button" onclick="fn2()">点我隐藏</button>    <!--创建隐藏按钮b2-->
		<script type="text/javascript">
			    function fn1() {    //定义函数fn1,隐藏不保留空间    
			        // document.getElementById()
			        //如果显示 那么隐藏
			        //如果隐藏 那么显示
			        if(d1.style.display==="none"){
			            d1.style.display="block"
						b1.textContent="点我隐藏"
			        }else{
			            d1.style.display="none"
						b1.textContent="点我显示"
			        }
			    }
			    function fn2() {    //定义函数fn2隐藏但保留空间
			        // document.getElementById()
			        //如果显示 那么隐藏
			        //如果隐藏 那么显示
			        if(d1.style.opacity==0){
			            d1.style.opacity=1    //透明度为1表示完全不透明
						b2.textContent="点我隐藏"
			        }else{
			            d1.style.opacity=0    //透明度为0表示完全透明(不显示)
						b2.textContent="点我显示"
			        }
			    }
		</script>
	</body>
</html>

你要尽全力保护你的梦想。那些嘲笑你梦想的人,他们注定失败,他们想把你变成和他们一样。我坚信,只要心中有梦想,我就会与众不同。你也是。

这篇关于JavaScript03.BOM编程的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!