Javascript笔记

/ 0评 / 0

Javascript

变量

var 变量名;

<script type="text/javascript">
    var mynum;
    mynum = 8;
</script>

 

JS区分大小写,num与Num是两个变量

 

IF判断

小明成绩为80,判断是否合格(>60)

<script type="text/javascript">
    var score = 80;
    if (score >= 60) {
        document.write("及格");
    } else {
        document.write("不及格");
    }
</script>

 

调用函数

function:定义函数关键词

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        function numCount()
        {
            var num = 10;
            num++;
            alert(num);
        }
    </script>
</head>

<body>
    <input type="button" value="点击我" onclick="numCount()">
</body>

 

document.write();输出内容

输出指定变量、字符串内容,也可以输出换行等标签

document.write(字符串或变量);

<script type="text/javascript">
    var baigei1 = "wdnmd";
    var baigei2 = "真的熬";
    document.write(baigei1 + "<br />");
    document.write(baigei1 + baigei2 + "玩NM都");
</script>

 

alert 消息对话框

弹出一个消息对话框

alert(字符串或变量);

<script type="text/javascript">
    var baigei1 = "wdnmd";
    alert(baigei1);
</script>

 

confirm 消息对话框

confirm:点击确定返回true,反之false

confirm(字符串或变量);

<script type="text/javascript">
    var mymessage = confirm("你是女生吗");
    if (mymessage == true) {
        document.write("你是女士!");
    } else {
        document.write("你是男士!");
    }
</script>

 

prompt消息对话框

prompt(字符串1, 字符串2);

字符串1为消息框中的文本,不可修改

字符串2为文本框的文本,可修改

点击确定返回文本框内容,取消返回null

<script type="text/javascript">
    var score;
    score = prompt("请输入您的分数:", "100");
    if (score >= 90) {
        document.write("你很棒!");
    } else if (score >= 75) {
        document.write("不错吆!");
    } else if (score >= 60) {
        document.write("要加油!");
    } else {
        document.write("要努力了!");
    }
</script>

 

window.open打开新窗口

新建一个浏览器窗口

window.open(URL, 名字或特殊名称, 参数);

URL为打开浏览器的指定链接;

名字可自定义,相同名字的窗体只能存在一个;特殊名称包含了 _blank,_top,_self 等;

参数有

<script type="text/javascript">
    function Wopen() {
        window.open('https://blog.nutssss.cn', 'test', 'width = 600, height = 400, top = 100, left = 0');
    }
</script>

 

window.close关闭窗口

window.close(); //关闭本窗口
对象窗口.close(); //关闭指定窗口

<script type="text/javascript">
    var blog = window.open('https://blog.nutssss.cn');
    blog.close();
</script>

 

DOM基操

ID获取元素

找到指定ID并返回Object元素: [object HTMLParagraphElement]

未找到则返回NULL

document.getElementById("ID名");

<body>
    <p id="con">JavaScript</p>
    <script type="text/javascript">
        var mychar = document.getElementById("con");
        document.write("结果:" + mychar); 
    </script>
</body>

 

innerHTML 属性

获取或替换html元素内容

Object.innerHTML

Object是获取的元素对象,如通过document.getElementById("ID")获取的元素

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

 

改变HTML样式

修改指定ID元素样式

Object.style.样式= "样式属性";

Object是获取的元素对象,如通过document.getElementById("ID")获取的元素

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

 

显示和隐藏

Object.style.display = "值";

<body>
    <h1>JavaScript</h1>
    <p id="con">做为一个Web开发师来说,如果你想提供漂亮的网页、令用户满意的上网体验,JavaScript是必不可少的工具。</p>
    <form>
        <input type="button" onclick="hidetext()" value="隐藏内容" />
        <input type="button" onclick="showtext()" value="显示内容" />
    </form>
    <script type="text/javascript">
        function hidetext() {
            var mychar = document.getElementById("con").style.display = "none";
        }

        function showtext() {
            var mychar = document.getElementById("con").style.display = "block";
        }
    </script>
</body>

 

className控制类名

修改指定元素的CSS样式或获取元素class属性

发表评论

电子邮件地址不会被公开。 必填项已用*标注