老男孩14期自动化运维day15随笔和作业(一)

1.JavaScript简介

独立的语言，浏览器本身就是一个JavaScript的解释器 js要加分号
是因为网页上要尽量把js代码压缩成一行，所以必须加分号来识别哪个是一行

2.JavaScript代码存在形式：

head中 (一进入网页就触发)

1.        < script>
           // js代码
           alert(123);
       < /script>

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

文件

 <script src="文件路径"></script>

注意：除开在head中的情况，JS代码需要放置在< body>标签内部的最下方

3.JS注释

当行注释 //
多行注释 /* */

4.变量

python: name=‘alex’
JavaScript: name=‘alex’ # js中这样是默认全局变量
var name=‘alex’ # 这个才是局部变量 最好都这样全局变量一般很少

5.写JS代码

html 文件中编写
调试： - 浏览器终端比如chrome 点审查然后console里面写代码

在浏览器consle打印信息：

function func(){
          console.log(内容);
}

可在百度的console看到校园招聘的信息

扫描二维码关注公众号，回复： 4696456 查看本文章

回到顶部的实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div onclick="GoTop();" style="width: 50px;height: 50px;background-color: black;color: white;
    position: fixed;
    bottom:20px;
    right: 20px;
    ">返回顶部</div>
    <div style="height: 5000px;background-color: #dddddd;">
        asdfasdf
    </div>
    <script>
        function GoTop(){
            document.body.scrollTop = 0;
        }
    </script>
</body>
</html>

6.定时器

setInterval(‘func();’,1000)

7.基本数据类型

（1）数字

a =18;

（2）字符串

a = ‘alex’ a.chartAt(索引未知)
a.substring(起始位置，结束位置) 取头不取尾
比如：substring(0,length) 就都取完了因为第一个index为0 最后一个是index是长度-1 a.length
获取当前字符串长度
…

滚动条的实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="i1">欢迎杨浩然大帅哥</div>
    <script>
           function func(){
               // 根据ID获取指定标签的内容,定义局部变量接受
               var tag=document.getElementById('i1');
               // 获取标签内部的内容
               var content = tag.innerText;
               var f = content.charAt(0);
               var l = content.substring(1,content.length)
               var new_content = l+f;

               tag.innerText=new_content;
           }
           setInterval('func();',1000)
    </script>
</body>
</html>

（3）列表(数组)

a=[1,2,3] 方法见博客
最难的是a.splice 加入删除数组元素

（4）字典

a = {‘k1’:‘v1’,‘k2’:‘v2’}
a[‘k1’]=v1

（5）布尔类型

python: True False
Js:true false (小写)

8.for循环
（1）循环时，循环的是元素的索引
字典循环的是元素的key

a=[1,2,3,4]
for(var item in a){
console.log(item); # 输出的是下表索引
}

（2）第二种循环（不支持字典，因为字典是无序的）

（1）for(var i=0;i<10;i++){

}
a=[1,2,3,4]

（2）for (var i=0;i<a.length;i++){

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="i1">我是i1</div>
    <a>aa</a>
    <a>aa</a>
    <a>aa</a>
    <script>

            var tag=document.getElementsByTagName('a')
            for (var i=0;i<tag.length;i++) {
                tag[i].innerText = 123;
            }
    </script>
</body>
</html>

9.条件语句

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

== 值相等
=== 值和类型都相等
!= 值不相等
!== 值和类型都不相等
&& and
|| or

10.函数

function 函数名(a,b,c){
}
函数名（1,2,3）

11.Dom 直接选择器：
（1）找到标签

a.直接找

           获取单个元素：document.getElementById('')
           获取单个元素：document.getElementByName('')
           获取多个元素（数组）document.getElementsByTagName('div')
           获取多个元素（数组）document.getElementsByClassName('')

b.间接找

            parentElement           // 父节点标签元素
            children                // 所有子标签
            firstElementChild       // 第一个子标签元素
            lastElementChild        // 最后一个子标签元素
            nextElementtSibling     // 下一个兄弟标签元素
            previousElementSibling  // 上一个兄弟标签元素

（2）操作标签

a.innerText

获取标签中的文本内容
标签.innerText

对标签内部文本进行重新赋值
标签.innerText=’’

b.className

tag.className = > 直接整体做操作
tag.classList.add(‘样式名’) 添加指定样式
tag.classList.remove(‘样式名’) 删除指定样式

c.checkbox

选中 checkbox对象.checked=true
不选中 checkbox对象.checked=false

全选反选取消添加的实现：

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

        .hide{
            display:none;
        }
        .c1{
            position: fixed;
            left:0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }

        .c2{
            width: 500px;
            height: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top:50%;
            margin-left: -250px;
            margin-top: -200px;
            z-index: 10;
        }
    </style>
</head>
<body style="margin: 0;">
   <div>
       <input type="button" value="添加" onclick="ShowModel();" />
       <input type="button" value="全选" onclick="ChooseAll();" />
       <input type="button" value="取消" onclick="CancleAll();" />
       <input type="button" value="反选" onclick="ReverseAll();" />

       <table>
           <thead>
               <tr>
                   <th>选择</th>
                   <th>主机名</th>
                   <th>端口</th>
               </tr>
           </thead>
           <tbody id="tb">
               <tr>
                   <td>
                        <input type="checkbox">
                    </td>
                   <td>1.1.1.1</td>
                   <td>190</td>
               </tr>
               <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                   <td>1.1.1.2</td>
                   <td>192</td>
               </tr>
               <tr>
                   <td>
                        <input type="checkbox">
                    </td>
                   <td>1.1.1.3</td>
                   <td>193</td>
               </tr>

           </tbody>
       </table>
   </div>

    <!-- 遮罩层开始-->
    <div id="i1" class="c1 hide"></div>
    <!-- 遮罩层结束-->
    <!-- 弹出框开始-->
   <div id="i2" class="c2 hide">
       <p><input type="text"></p>
       <p><input type="text"></p>
       <p>
           <input type="button" value="取消" onclick="HideModel();" />
           <input type="button" value="确定">
       </p>
   </div>
    <!-- 弹出框结束-->

   <script>
       function ShowModel(){
           document.getElementById('i1').classList.remove('hide');
           document.getElementById('i2').classList.remove('hide');
       }

       function HideModel(){
           document.getElementById('i1').classList.add('hide');
           document.getElementById('i2').classList.add('hide');
       }

       function ChooseAll(){
           var tbody=document.getElementById('tb');
           // 获取所有tr
           var trlist=tbody.children;
           for(var i=0;i<trlist.length;i++){
               //循环所有tr
               var current_tr =trlist[i];
               var checkbox=current_tr.children[0].children[0];
               checkbox.checked=true;
           }
       }

        function CancleAll(){
           var tbody=document.getElementById('tb');
           // 获取所有tr
           var trlist=tbody.children;
           for(var i=0;i<trlist.length;i++){
               //循环所有tr
               var current_tr =trlist[i];
               var checkbox=current_tr.children[0].children[0];
               checkbox.checked=false;
           }
       }

        function ReverseAll(){
           var tbody=document.getElementById('tb');
           // 获取所有tr
           var trlist=tbody.children;
           for(var i=0;i<trlist.length;i++){
               //循环所有tr
               var current_tr =trlist[i];
               var checkbox=current_tr.children[0].children[0];
               if (checkbox.checked==true){
                   checkbox.checked=false;
               }
               else{
                   checkbox.checked=true;
               }

           }
       }
   </script>
</body>
</html>

左侧导航栏的实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display:none;
        }

        .item .header{
            height:35px;
            background-color: #2459a2;
            color: white;
            line-height: 35px;
        }
    </style>
</head>
<body>

    <div style="height: 48px;"> </div>
    <div style="width: 300px;">
          <div class="item">
               <div id="i1" class="header" onclick="ChangeMenu('i1');">菜单1</div>
              <div class="content hide">
                  <div>内容1</div>
                  <div>内容1</div>
                  <div>内容1</div>
              </div>
          </div>
          <div class="item">
               <div id="i2" class="header" onclick="ChangeMenu('i2');">菜单2</div>
              <div class="content hide">
                  <div>内容2</div>
                  <div>内容2</div>
                  <div>内容2</div>
              </div>
          </div>
         <div class="item">
               <div id="i3" class="header" onclick="ChangeMenu('i3')">菜单3</div>
              <div class="content hide">
                  <div>内容3</div>
                  <div>内容3</div>
                  <div>内容3</div>
              </div>
          </div>
         <div class="item">
               <div id="i4" class="header" onclick="ChangeMenu('i4')">菜单4</div>
              <div class="content hide">
                  <div>内容4</div>
                  <div>内容4</div>
                  <div>内容4</div>
              </div>
          </div>


    </div>
    <script>
        function ChangeMenu(nid){
            var current_header=document.getElementById(nid);
            var item_list=current_header.parentElement.parentElement.children;
            for(var i=0;i<item_list.length;i++){
                var current_item=item_list[i];
                current_item.children[1].classList.add('hide')
            }
            current_header.nextElementSibling.classList.remove('hide')
        }

    </script>


</body>
</html>

上述JS代码解读，先为每个菜单定制div的id,将id传入JS函数中，查找父节点再查找父节点找到item标签，并取item标签所有的子节点，for循环进行添加hide属性的操作，实现点击该菜单，其他菜单消失的功能,然后调用nextElementSibling把下一个兄弟节点也就是该菜单的内容属性移除hide，进而展示出来。

老男孩14期自动化运维day15随笔和作业(一)

猜你喜欢