zoukankan html css js c++ java

JavaScript基础

1、JavaScript存在形式

1.1、直接放在HTML文件的head中

 <script type="text/javascript">
        alert(123);
 </script>

1.2、保存在文件中

　　 html调用方式： <script src="commons.js"></script>

1.3、放在html中<body>标签内部的最下方

2、JavaScript基本语法

2.1、变量

　　name = "Trump"，全局变量。

　　var name="Trump"，局部变量

2.2、基本数据类型

a. 数字

　　a = 18

b. 字符串

　　a = "Trump"；

　　a.chartAt(索引位置)；

　　a.substirng(起始位置,结束位置)；

　　a.lenght：获取当前字符串长度。

c. 列表（数组）

　　a = [1,2,3]

d. 字典（对象）

e. 布尔类型

　　小写，true；false。

2.3、条件语句

a. if语句

if(条件){
    
}else if(){

}else{

}

b. 条件

　　== ：值相等；

　　===：值和类型都相等；

　　&&：与；

　　||：或；

　　！：非。

2.4、for循环

a. 第一种循环：循环时，循环的元素是索引

a = [11,22,33,44];
for(var item in a){
     console.log(a[item]);
}

a = ['k1':'v1','k2':'v2'];
for(var item in a){
       console.log(a[item]);
}

b. 第二种循环：

　　这种循环不支持字典。

a = [11,22,33,44];
for(var i=0;i<a.length; i++){
     console.log(a[i]);
}

2.5、定时器

　　setInterval("func();",间隔时间);

　　间隔时间以ms为单位。

2.6、定义函数

　　定义：function func(a,b,c){ };

　　调用方式：func(1,2,3);

2.7、其他

　　alert()：弹窗；

　　console.log()：在console中输出内容。

3、HTML中DOM的

　　通过 HTML DOM，可以使用JavaScript 访问HTML 文档的所有元素。

　　具体内容见：https://www.cnblogs.com/bad-robot/p/9316550.html

4、JavaScript实例

4.1、实例1

　　JavaScript的基本使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .welcome{
            color: red;
            font-weight: bold;
            background-color: blanchedalmond;
            text-align: center;
        }
        .pg-header{
            display: inline-block;
            float: left;
            width: 20%;
        }
    </style>
</head>
<body>
    <div id="i1" class="welcome">欢迎大家登录淘宝商城</div>
    <div id="header" style="height: 48px; line-height: 48px; margin: 0 auto; background-color: #1a66b3;">
        a
        <span id="item1" class="pg-header">男装</span>b
        <span id="item2" class="pg-header">女装</span>c
        <span id="item3" class="pg-header">男鞋</span>d
        <span id="item4" class="pg-header">女鞋</span>e
        <span id="item5" class="pg-header">箱包</span>f
    </div>
    <div>
        <p>用户登录</p>
        <input type="text" id="user" name="user">
        <input type="password" id="pwd" name="pwd">
        <input type="button" onclick="GetData()" value="点我">
    </div>

    <!--网址不存在，加载不成功-->
    <!--<script src="https://www.gstasdfasdfc.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q"></script>-->

    <!--打开网页后在弹出框中显示“123”-->
    <!--<script type="text/javascript" src="javascript/commons.js">-->
    <script type="text/javascript" >

        function GetData() {
            var i = document.getElementById("user");
            // alert(i.value);
            // alert(i.parentElement.innerText);
            // alert(i.nextElementSibling.nextElementSibling.value);
            // alert(i.parentElement.previousElementSibling.innerHTML);
            // alert(i.parentElement.previousElementSibling.firstChild.textContent);
            alert(i.parentElement.previousElementSibling.firstElementChild.innerText);
        }

        // 格式转换
        age = "18";
        i = parseInt(age);
        j = parseFloat(age);
        // alert(j);

        // 定时处理
        function f1() {
            console.log(1);
        }
        setInterval("f1();",2000);

        //
        function func() {
            // 根据ID获取指定标签的内容， 定义局部变量接收
            var tag = document.getElementById("i1")
            // 获取标签内部的内容
            var content = tag.innerText;

            var first= content.charAt(0);
            var last = content.substring(1,content.length);
            var new_content = last + first;
            tag.innerText = new_content;
        }

        setInterval("func();", 1000)
    </script>
</body>
</html>

4.2、实例2

　　使用Javascript实现主机信息的添加、全选、取消、反选、删除功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .main-page{

        }

        .add-page{
            position: fixed;
            width: 400px;
            height: 300px;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -150px;
            background-color: white;
            z-index: 10;
        }

        .shade{
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }
        .hide{
            display: none;
        }
        .input-box{
            width: 300px;
            height: 60px;
            text-align: center;
            line-height: 60px;
        }
    </style>
</head>
<body style="margin: 0">
    <div id="main-page" class="main-page">
        <div id="menu">
            <input id="add_button" type="button" value="添加" onclick="add_info();">
            <input id="all_button" type="button" value="全选" onclick="select_all();">
            <input id="cancel_button" type="button" value="取消" onclick="cancel();">
            <input id=invert_button" type="button" value="反选" onclick="invert_select();">
            <input id=delete_button" type="button" value="删除" onclick="delete_info();">
        </div>
        <div id="table">
            <table>
                <thead>
                    <tr>
                        <th>请选择</th>
                        <th>主机名</th>
                        <th>端口</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="checkbox"></td>
                        <td>192.168.1.1</td>
                        <td>8080</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox"></td>
                        <td>192.168.22.8</td>
                        <td>5000</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox"></td>
                        <td>192.128.16.5</td>
                        <td>9000</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>


    <div id="add-page" class="add-page hide">
        <div>
            <div class="input-box">
                <label for="host">主机名</label>
            <input id="host" type="text" name="host">
            </div>
            <div class="input-box">
                <label for="port">端  口</label>
            <input id="port" type="text" name="port">
            </div>
            <div class="input-box">
                <input type="submit" value="提交" onclick="submit_info()">
                <input type="submit" value="取消" onclick="cancel_info()">
            </div>
        </div>
    </div>

    <div id="shade-page" class="shade hide">
    </div>

    <script>
        function add_info() {

            var tag_1 = document.getElementById("add-page");
            tag_1.classList.remove("hide");

            var tag_2 = document.getElementById("shade-page");
            tag_2.classList.remove("hide")


        }

        function select_all() {
            var tag = document.getElementById("table");
            var trs = tag.firstElementChild.lastElementChild.children;
            for(var i=0;i<trs.length;i++){
                var checkbox = trs[i].firstElementChild.firstElementChild;
                checkbox.checked = true;
            }

        }

        function cancel() {
            var tag = document.getElementById("table");
            var trs = tag.firstElementChild.lastElementChild.children;
            for(var i=0;i<trs.length;i++){
                var checkbox = trs[i].firstElementChild.firstElementChild;
                if(checkbox.checked){
                    checkbox.checked = false
                }
            }
        }

        function invert_select() {
            var tag = document.getElementById("table");
            var trs = tag.firstElementChild.lastElementChild.children;
            for(var i=0;i<trs.length;i++){
                var checkbox = trs[i].firstElementChild.firstElementChild;
                if(checkbox.checked){
                    checkbox.checked = false
                }else{
                    checkbox.checked = true;
                }
            }
        }
        
        function submit_info() {

            // 获取tbody标签
            var tag = document.getElementById("table");
            var tbody = tag.lastElementChild.lastElementChild;

            //获取新添加的值
            var host = document.getElementById("host").value;
            var port = document.getElementById("port").value;
            if(host || port){
                //新建tr标签
                var new_tr = document.createElement("tr");

                //新家checkbox标签
                var new_checkbox = document.createElement("input");
                new_checkbox.setAttribute("type", "checkbox");

                //装备:<td><input type="checkbox"></td>
                var new_td = document.createElement("td");
                new_td.appendChild(new_checkbox);
                new_tr.appendChild(new_td);

                //装配:<td>192.168.1.1</td>
                var new_td = document.createElement("td");
                new_td.innerText = host;
                new_tr.appendChild(new_td);

                //装配:<td>8080</td>
                var new_td = document.createElement("td");
                new_td.innerText = port;
                new_tr.appendChild(new_td);

                //总装配
                // new_tr.appendChild(node);
                tbody.appendChild(new_tr);
            }


            var tag_1 = document.getElementById("add-page");
            tag_1.classList.add("hide");

            var tag_2 = document.getElementById("shade-page");
            tag_2.classList.add("hide")
        }

        function cancel_info() {

            var tag_1 = document.getElementById("add-page");
            tag_1.classList.add("hide");

            var tag_2 = document.getElementById("shade-page");
            tag_2.classList.add("hide")
        }

        function delete_info() {
            var tag = document.getElementById("table")
            var trs = tag.firstElementChild.lastElementChild.children;
            for(var i=0;i<trs.length;i++){
                var checkbox = trs[i].firstElementChild.firstElementChild;
                if(checkbox.checked){
                    checkbox.parentElement.parentElement.remove();
                }
            }
        }
    </script>
</body>
</html>

4.3、实例3

　　使用JavaScript实现左侧菜单。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .item .menu{
            height: 35px;
            background-color: blue;
            color: white;
            line-height: 35px;
        }
    </style>
</head>
<body style="margin: 0">
    <div style="height: 48px;"></div>
    <div id="main-page" style=" 300px;">
        <div class="item">
            <p class="menu" onclick="click_menu(this);">菜单1</p>
            <div>
                <div>内容1</div>
                <div>内容1</div>
                <div>内容1</div>
            </div>
        </div>

        <div class="item">
            <p class="menu" onclick="click_menu(this);">菜单2</p>
            <div class="hide">
                <div>内容2</div>
                <div>内容2</div>
                <div>内容2</div>
            </div>
        </div>

        <div class="item">
            <p class="menu" onclick="click_menu(this);">菜单3</p>
            <div class="hide">
                <div>内容3</div>
                <div>内容3</div>
                <div>内容3</div>
            </div>
        </div>

        <div class="item">
            <p class="menu" onclick="click_menu(this);">菜单4</p>
            <div class="hide">
                <div>内容4</div>
                <div>内容4</div>
                <div>内容4</div>
            </div>
        </div>

    </div>

    <script>
        function click_menu(ths) {

            var parents = ths.parentElement.parentElement.children;

            for(var i=0; i<parents.length; i++){
                var content = parents[i].lastElementChild;
                if(ths == parents[i].firstElementChild){
                    content.classList.remove("hide");
                }else{
                    content.classList.add("hide");
                }
            }
        }
    </script>
</body>
</html>

查看全文

相关阅读:
Spring Boot + Vue 开发前后端分离的员工管理系统
 树莓派4B部署docker
免费的论文查重网站
 JavaScript设计模式
 js继承的用法
 js闭包与柯里化
 Javascript编程小技巧
 spy-debugger和fiddler实现移动端抓包
 grid布局
 js判断对象是否为空对象的几种方法

原文地址：https://www.cnblogs.com/bad-robot/p/9316381.html