javescript基础

来源：互联网发布：json解析html标签编辑：程序博客网时间：2024/05/16 05:06

1、<script type="text/javascript">表示在<script></script>之间的是文本类型(text),javascript是为了告诉浏览器里面的文本是属于JavaScript语言。

也可将JS文件嵌入HTML文件中

<script src="script.js"></script>

一般放在网页的head或者body部分

2、函数

function 函数名(){     函数代码;}

<!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>

3、输出内容

第一种:输出内容用“”括起，直接输出""号内的内容。

<script type="text/javascript">  document.write("I love JavaScript！"); //内容用""括起来，""里的内容直接输出。</script>

第二种:通过变量，输出内容

<script type="text/javascript">  var mystr="hello world!";  document.write(mystr);  //直接写变量名，输出变量存储的内容。</script>

第三种:输出多项内容，内容之间用+号连接。

<scripttype="text/javascript">  var mystr="hello";  document.write(mystr+"I love JavaScript"); //多项内容之间用+号连接</script>

第四种:输出HTML标签，并起作用，标签使用“”括起来。

<script type="text/javascript">  var mystr="hello";document.write(mystr+"<br>");//输出hello后，输出一个换行符  document.write("JavaScript");</script>

4、警告（alert 消息对话框）

alert(字符串或变量);

5、确认（confirm 消息对话框）

<script type="text/javascript">    var mymessage=confirm("你喜欢JavaScript吗?"); //若便于调用，可在外层加function    if(mymessage==true)    {   document.write("很好,加油!");   }    else    {  document.write("JS功能强大，要学习噢!");   }</script>

6、提问（prompt 消息对话框）

var myname=prompt("请输入你的姓名:");if(myname!=null)  {   alert("你好"+myname); }else  {  alert("你好 my friend.");  }

7、打开新窗口（window.open）

<script type="text/javascript"> window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')</script>

8、关闭窗口（window.close）

window.close();   //关闭本窗口

<script type="text/javascript">   var mywin=window.open('http://www.imooc.com'); //将新打的窗口对象，存储在变量mywin中   mywin.close();</script>

9、文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）

10、getElementByI，根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。

<!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>

<p id="con" style="font-family: Simsun;font-size:14px;">JavaScript</p><span style="font-family: Simsun;font-size:14px;">结果:[object HTMLParagraphElement]</span>

11、Object是获取的元素对象，如通过document.getElementById("ID")获取的元素。

innerHTML 属性用于获取或替换 HTML 元素的内容。

Object.innerHTML

<!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><script type="text/javascript">  var mychar=document.getElementById("con");  document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容 mychar.innerHTML='Hello World!'   document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容</script></body></html>

12、HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

Object.style.property=new style;

<p id="pcon">Hello World!</p><script>   var mychar = document.getElementById("pcon");   mychar.style.color="red";   mychar.style.fontSize="20";   mychar.style.backgroundColor ="blue";</script>

13、显示和隐藏（display属性）

Object.style.display = value

Object是获取的元素对象，如通过document.getElementById("id")获取的元素。

value为”none“，隐藏，为”block“，显示

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><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> </head> <body>      <h1>JavaScript</h1>      <p id="con">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p>     <form>       <input type="button" onclick="hidetext()" value="隐藏内容" />        <input type="button" onclick="showtext()" value="显示内容" />     </form></body> </html>

14、控制类名（className 属性）

0 0