Web前端速成(Html+Css+JavaScript+jQuery)-16.认识JavaScript

乐地课堂

已于 2023-06-11 00:51:07 修改

阅读量234

点赞数

分类专栏：前端开发文章标签： javascript 前端 html css jquery

于 2023-05-15 15:09:02 首次发布

本文链接：https://blog.csdn.net/dhldhl/article/details/130684987

版权

前端开发专栏收录该内容

25 篇文章 1 订阅

订阅专栏

内容摘要：
- 初步认识JavaScript，介绍JavaScript操作页面元素的方法。

16.认识JavaScript

知识点

JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
Javascript 脚本代码可被放置在 HTML 页面的 <body> 和 <head> 部分中。
HTML 中的 Javascript 脚本代码必须位于 <script> 与 </script> 标签之间。
浏览器会解释并执行位于 <script> 和 </script>之间的 JavaScript 代码。

运用例子-引入JavaScript

<head> 中引入JavaScript

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>JavaScript 函数</title> 
		<script>
			function jsTest(){
				document.getElementById("myDemo").innerHTML="JavaScript 函数案例";
			}
		</script>
	</head>
	<body>	
		<span>我的span</span>
		<p id="myDemo">一个段落。</p>
		<button type="button" onclick="jsTest()">点击这里</button>	
	</body>
</html>

<body> 中引入JavaScript

<!DOCTYPE html>
<html>
	<head> 
		<meta charset="utf-8"> 
		<title>JavaScript 函数</title> 
	</head>
	<body>		
		<span>我的span</span>
		<p id="myDemo">一个段落。</p>
		<button type="button" onclick="jsTest()">点击这里</button>
		<script>
			function jsTest(){
				document.getElementById("myDemo").innerHTML="JavaScript 函数案例";
		}
		</script>	
	</body>
</html>

操作页面元素

案例1

<!DOCTYPE html>
<html>
    <head> 
        <meta charset="utf-8"> 
        <title>JavaScript 函数</title> 
    </head>
    <body>		
        <input type="text" name="setsize" id="inputId" value="100px">
        <img id="imgId" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"/>  

        <script type="text/javascript">
                window.onload = function(){
                var inputId= document.getElementById('inputId');
                var imgId= document.getElementById('imgId');
                // 读取属性值
                var sValue = inputId.value;
                var sName = inputId.name;
                var sImg = imgId.url;
                // 写(设置)属性
                inputId.style.color = 'red';
                inputId.style.fontSize = 20;
            }
        </script>	
    </body>
</html>

案例2

<!DOCTYPE html>
<html>
    <head> 
        <meta charset="utf-8"> 
        <title>JavaScript 函数</title> 
    </head>
    <body>		
        <span id="span1">一个span元素</span>
        <script type="text/javascript">
            window.onload = function(){
            var span1 = document.getElementById('span1');
            //读取
            var spanTxt = span1.innerHTML;
            alert(spanTxt);
            //写入
            span1.innerHTML = '<span>我是span标签<span/>';
            }
       </script>
    </body>
</html>