javascript_入门

作者: 老北瓜 | 来源:发表于2020-04-08 16:38 被阅读0次

javascript_入门
JavaScript_对象
javascript_函数
javascript_进阶
JavaScript_事件
JavaScript_循环
JavaScript_对象
JavaScript_函数
JavaScript_数组
JavaScript_闭包

document.write("xxx"); // 在html页面中输出点东西
alert("弹窗")； // 这个东西是一个弹窗，在点击弹窗的按钮之前，页面中不能做任何操作。
confirm("你喜欢js吗") 返回值 boolean , true 确定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证Confirm</title>
</head>
<body>
        <script type="text/javascript">
            var  myChar = confirm("你喜欢javaScript 吗？")
            if(myChar){
                document.write("真棒，加油")
            }else{
                document.write("不喜欢拉倒")
            }
        </script>
</body>
</html>

image.png

window.open("url","窗口名称","参数字符串")

     /*
      * _blank：      在新窗口显示目标网页
      * _self：         在当前窗口显示目标网页
      *_top：          框架网页中在上部窗口中显示目标网页
      */
    window.open("www.imooc.com","_blank","width=300，height=200")

window.close() 关闭窗口
window.close(); 直接关闭当前窗口

<script type="text/javascript">
     var mywin=window.open("http://www.imooc.com");
     mywin.close();
  </script>

认识DOM

我觉得通过 document.getElementById("id") 拿回来的对象就是一个 DOM。

document.getElementById("id")

<p id="con">JavaScript</p>
<script type="text/javascript">

  var mychar=document.getElementById("con");
  document.write("结果:"+mychar); //输出获取的P标签。 

</script>

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

<h2 id="con">javascript</H2>
<p> 。。。。</p>
<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>

输出结果 == 原标题:javascript
修改后的标题:Hello world!

修改Html的样式

<h2 id="con">I love JavaScript</H2>
<p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>

<script type="text/javascript">
    var myChar= document.getElementById("con");
    myChar.style.color ="red";
    myChar.style.backgroundColor="#CCC";
    myChar.style.width="300px";
</script>

显示和隐藏属性 object.style.display

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

控制类名 className

 <p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="添加样式" onclick="add()"/>
    <p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="更改外观" onclick="modify()"/>

    <script type="text/javascript">
       function add(){
          var p1 = document.getElementById("p1");
          p1.className ="one";
          
       }
       function modify(){
          var p2 = document.getElementById("p2");
          p2.className="two";
          
       }
    </script>