js笔记入门（基础）-CSDN博客

本文链接：https://blog.csdn.net/chenyuhua08042/article/details/109178055

1.1输出

<body>
    <p id="p1">我是第一段文字</p>
    <script type="text/javascript">//在html中插入js代码
    document.write("hello,world!");//输出hello,world!
    console.log("hello,world!")//控制台输出hello,world!
    document.getElementById("p1").style.color="red";//获取id为p1的对象，访问样式中的颜色，并将其设置为红色
    alert("hello,world");//弹框显示"hello world"
    </script>
</body>

直接在js里面写：document.getElementById(“hello,world”).style.color=“red”;会报错。因为document.getElementById(" ") 得到的是一个对象；alert 显示得到的是“ object ”，而不是具体的值，它有 value 和 length 等属性，加上 .value 得到的才是具体的值！

1.2 在head和在body中用js的区别
js在head里写是看不见的，但是在body里写能看见，就像一个人，有外表和内部结构，一个看得见，一个看不见。

1.3 注释的两种方法

//单行注释
/*
多行注释
我哥
牛逼
*/

1.4 函数

<body>
   <script>
       function zxx()
       {  
          var cousinage=23;//定义一个变量并赋值
          document.write("the function name is my cousin's acronym,his age ");
          if(cousinage==23)
          alert("is"+cousinage);//输出结果就是这个
          else
          alert("...e...I don't know his age, but he is very cute!");
       }
   </script>
   <input style="background-color: red;"  type="button" value="zxx" onclick="zxx()">;//在onclick中调用了zxx()函数
</body>

2.1 js 输出内容

 var num1 = 1;
 var num2 = 2;
 var char1 = "zxx";
 var char2 = "666";
 document.write(num1 + num2 + "<br>");//输出3，运算符功能
 document.write(num1 + char1 + "<br>");//输出1zxx，实现连接
 document.write(num1 + char2 + "<br>");//输出1666
 document.write(char1 + char2 + "<br>");//输出zxx666

2.2 弹框

对话框：confirm();

function money()
    {
        var money = confirm("您是否要续费");
        if(money==true)
        document.write("续费成功");
        else
        document.write("支付失败");
    }
    money();

在这里插入图片描述
2.警告框：alert();

alert("警告");

在这里插入图片描述
3.消息对话框：prompt()

    var zxx;
    var mycousin = prompt("请输入我堂哥的名字：",zxx);//将变量zxx的值赋值给mycousin
    if(mycousin=="zxx")
    alert("是");
    else
    alert("否");

在这里插入图片描述
4.打开新窗口：window.open(‘网页地址’,‘窗口名称’,‘设置窗口参数’);
例如：

window.open('http://baidu.com','window_name','height=200px,width=300px');

就会直接打开窗口
在这里插入图片描述
5.关闭窗口：

关闭本窗口：window.close(‘网址’);
关闭指定窗口：[窗口对象].close();

var baidu= window.open('http://baidu.com','window_name','height=200px,width=300px');
    baidu.close();

3.1dom操作:
1.通过ID获取元素:
document.getElementById();
2.获取或替换html元素内容:
对象.innerHTML;

<body>
    <p1 id="zxx">我哥牛逼！</p1>
   <script>
   var name = document.getElementById("zxx");
   document.write(zxx.innerHTML);
   zxx.innerHTML="我哥爱唱歌";//在控制台时zxx的语句被替换成了这个
   document.write(zxx.innerHTML);
   </script>   
</body>

3.2 隐藏与显示
隐藏：Object.style.display=“none”;
显示：Object.style.display=“block”;

var cousin = document.getElementById("zxx");
   function text1()
   {
     cousin.style.display = "none";
   }
   function text2()
   {
       cousin.style.display = "block";
   }
   </script>
   <input type="button" value="隐藏内容" onclick="text1()">
   <input type="button" value="显示内容" onclick="text2()">

3.3 控制类名：className 属性
className 属性设置或返回元素的class 属性。
语法：
object.className = classname

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      body{
          font-size: 20px;
      } 
      .zxx1{
          color: springgreen;
          font-size: 30px;
      } 
      .zxx2{
          color: steelblue;
          font-size: 40px;
      }
    </style>
</head>
<body>
    <p id="p1">zxx牛逼</p>
    <input type="button" value="zxx" onclick="cousin1()"/>
    <p id="p2" class="zxx1">我哥牛逼</p>
    <input type="button" value="666" onclick="cousin2()"/>
   <script>
     function cousin1()
     {
         var name1=document.getElementById("p1");
         p1.className="zxx1";//设置属性为zxx1
     }
     function cousin2()
     {
         var name2=document.getElementById("p2");
         p2.className="zxx2";//修改属性变成zxx2
     }
   </script> 
</body>
</html>