当前位置:首页 » JavaScript技术

前端JS

2016-03-25 22:59 本站整理 浏览(7)

</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="点击我" onclick=" 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>