前端JS

最新推荐文章于 2022-12-27 14:59:32 发布

LRyab博客

最新推荐文章于 2022-12-27 14:59:32 发布

阅读量481

点赞数

分类专栏： html5&CSS&Vue前端技术

本文为LRyab原创作品，欢迎转载，请保留出处，微信ID:xiaodaren03

本文链接：https://blog.csdn.net/liguanghui1311/article/details/50984465

版权

html5&CSS&Vue前端技术专栏收录该内容

12 篇文章 1 订阅

订阅专栏

</pre><span style="font-size:14px;">         最近感觉自己的与网页交互的js编程完全没思路，为了自己有一技之长，必须丰富自己的javascripot编程。</span><span style="font-size: 12px;">程序的编写只要有思路，什么都不是问题，善于用百度去解决问题。好了下面让小编我给你讲一下javascript语言吧。。</span></h1><div><span style="font-size: 12px;"></span></div><div><span style="font-size: 12px;"></span></div><div><span style="font-size: 12px;">            2016年3月25号开启js之旅，学知识特别是学编程已经不再是以前的复制粘贴，而是更深入的了解，这个东西为什么这样做，如果不这样做会引发什么问题。。</span></div><div><span style="font-size: 12px;">      </span></div><div><span style="font-size: 12px;"></span></div><div><span style="font-size: 12px;">    js变量的理解：：</span></div><div><span style="font-size: 12px;"></span></div><div><span style="font-size: 12px;"></span><p align="left" style="margin-top: 0.5em; margin-bottom: 0.5em; padding-top: 5px; padding-bottom: 5px; line-height: 1.6; color: rgb(31, 36, 38); font-family: 'Microsoft Yahei', 'Hiragino Sans GB', Helvetica, 'Helvetica Neue', 微软雅黑, Tahoma, Arial, sans-serif; text-indent: 2em; background-color: rgb(237, 241, 242);">什么是变量? 从字面上看，变量是可变的量；从编程角度讲，变量是用于存储某种/某些数值的存储器。我们可以把变量看做一个盒子，为了区分盒子，可以用BOX1,BOX2等名称代表不同盒子，BOX1就是盒子的名字（也就是变量的名字）。</p><p align="left" style="margin-top: 0.5em; margin-bottom: 0.5em; padding-top: 5px; padding-bottom: 5px; line-height: 1.6; color: rgb(31, 36, 38); font-family: 'Microsoft Yahei', 'Hiragino Sans GB', Helvetica, 'Helvetica Neue', 微软雅黑, Tahoma, Arial, sans-serif; text-indent: 2em; background-color: rgb(237, 241, 242);"><a target=_blank href="http://img.mukewang.com/52e32dc90001140c04120228.jpg" style="outline: none; text-decoration: none; color: rgb(7, 130, 193);"><img alt="" src="http://img.mukewang.com/52e32dc90001140c04120228.jpg" style="border: 0px; max-width: 400px; clear: both; width: 330px;" /></a></p></div><p></p><h1><p align="left" style="margin-top: 0.5em; margin-bottom: 0.5em; padding-top: 5px; padding-bottom: 5px; line-height: 1.6; color: rgb(31, 36, 38); font-family: 'Microsoft Yahei', 'Hiragino Sans GB', Helvetica, 'Helvetica Neue', 微软雅黑, Tahoma, Arial, sans-serif; background-color: rgb(237, 241, 242);"><span style="line-height: 1.6em;">定义变量使用关键字var,语法如下：</span></p><div style="margin: 0px; padding: 0px; color: rgb(20, 25, 30); font-family: 'Microsoft Yahei', 'Hiragino Sans GB', Helvetica, 'Helvetica Neue', 微软雅黑, Tahoma, Arial, sans-serif; font-size: 14px; line-height: 22.4px; background-color: rgb(237, 241, 242);"><pre align="left" class="code" style="margin-top: 0px; margin-bottom: 0px; padding: 5px 10px; white-space: pre-wrap; word-wrap: break-word; border: 1px solid rgb(204, 204, 204); font-family: Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro, monospace; line-height: 1.6em; border-radius: 2px; font-size: 13px; word-break: break-word; background: rgb(238, 238, 238);"><strong>var</strong> 变量名

最基本的程序流程if....else 以及for循环语句。

函数调用：：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>函数调用</title>
   <script type="text/javascript">
      function contxt() //定义函数
      {
         alert("哈哈，调用函数了!");
      }
   </script>
</head>
<body>
   <form>
      <input type="button"  value="点击我" οnclick=" contxt()   " />  
   </form>
</body>
</html>

JS操作DOM树：：：DOM树分为属性节点文本节点元素节点

<!DOCTYPE HTML>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document.getElementById</title>
</head>
<body>
<p id="con">JavaScript</p>
<script type="text/javascript">
  var mychar=   document.getElementById("con")    ;
  document.write("结果:"+mychar); //输出获取的P标签。 
  
</script>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
</head>
<body>
<h2 id="con">javascript</H2>
<p> JavaScript是一种基于对象、事件驱动的简单脚本语言，嵌入在HTML文档中，由浏览器负责解释和执行，在网页上产生动态的显示效果并实现与用户交互功能。</p>
<script type="text/javascript">
  var mychar=  document.getElementById("con")         ;
  document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
  
  document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
</script>
</body>
</html>

mychar.style.color="red";
mychar.style.background="blue";

控制显示和隐藏：：

<title>display</title>
    <script type="text/javascript"> 
        function hidetext()  
		{  
		var mychar = document.getElementById("con");
        mychar.style.display="none";
		}  
		function showtext()  
		{  
		var mychar = document.getElementById("con");
         mychar.style.display="block";
		}
    </script>

LRyab博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端JS

最近感觉自己的与网页交互的js编程完全没思路，为了自己有一技之长，必须丰富自己的javascripot编程。程序的编写只要有思路，什么都不是问题，善于用百度去解决问题。好了下面让小编我给你讲一下javascript语言吧。。 2016年3月25号开启js之旅，学知识特别是学编程已经不再是以前的复制粘贴，而是更深入的了解，这个东西为什么这样做，如果不这样做会引发什么问题。。
复制链接

扫一扫