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编程的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航