码迷，mamicode.com
首页 > 编程语言 > 详细

JavaScript基础

时间：2018-07-16 14:09:42      阅读：193      评论：0      收藏：0      [点我收藏+]

标签：ring   文件的   logs   data   形式   间隔   指定   主机名   结束   

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="width: 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>

 

JavaScript基础

标签：ring   文件的   logs   data   形式   间隔   指定   主机名   结束   

原文地址：https://www.cnblogs.com/bad-robot/p/9316381.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！