zoukankan      html  css  js  c++  java
  • 渚漪Day08——web前端入门【JavaScript03】

    5、内部对象

    Date 日期的对象

    Json 对象

    • 对象都用{}
    • 数组都用[]
    • 所有键值对 都是用 key:value

    JSON.stringify()讲对象转化为字符串

    JSON.parse()解析字符串变为对象

    6、面向对象编程

    6.1 什么是面向对象

    JavaScript,Java,c# 面向对象

    JavaScript有些区别

    • 类:模板

    • 对象:具体实例

    在JavaScript这个需要换一下思维方式

    原型:__ proto __

    ES6有class,和java一样 本质是原型

    7、操作BOM对象(重点)

    浏览器的介绍

    JavaScript和浏览器的关系?

    JavaScript诞生就是为了让他在浏览器中运行

    BOM:浏览器对象模型

    • IE6~11
    • Chrome
    • Safari
    • Firefox
    • Opera

    三方

    • QQ浏览器
    • 360浏览器

    可以安装内核

    window

    window代表浏览器窗口

    Navigator

    Navigator 封装了浏览器的信息

    screen

    代表屏幕尺寸

    location

    location代表当前页面的URL信息

    history

    history.back()//后退

    history.forward()//前进

    8、操作DOM(重点)

    DOM:文档对象模型

    核心

    • 更新:更新Dom节点
    • 变量Dom节点:得到Dom节点
    • 删除:删除一个Dom节点
    • 添加:添加一个Dom节点
    <div id="father">
        <h1>标题1</h1>
        <p id="p1">p1</p>
        <p class="p2">p2</p>
    
    </div>
    
    <script>
        //对应选择器
        var h1 = document.getElementsByTagName('h1');
        var p1 = document.getElementById('p1');
        var p2 = document.getElementsByClassName('p2');
        var father = document.getElementById('father');
    
        var childs = father.children;//获取父节点的所有子节点
    </script>
    

    更新节点

    var p1 = document.getElementById('p1');
    p1.innerText="123";
    p1.innerHTML='<strong>123</strong>';
    p1.style.color='yellow';
    

    删除节点

    先获取父节点,再删除自己

    var self = document.getElementById('p1');
    var father = p1.parentElement;
    father.removeChild(self)
    

    插入节点

    var list = document.getElementById('p1');
    
    list.appendChild(js)
    
    insertBefore(newNode,TargetNode)
    

    新建节点

    var NP = document.CreateElement('p');
    NP.id = 'NP1';//或者   NP.setAttribute('id','NP1');
    NP.innerText="123";
    list.appendChild(NP)
    

    9、操作表单(验证)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
    </head>
    <body>
        <form action="https://www.baidu.com/" method="post" id="user" onsubmit="return aaa()">
            <p>
                <span>用户名:</span><input type="text" id="username" name="username">
            </p>
            <p>
                <span>密码:</span><input type="password" id="password">
            </p>
            <input type="hidden" id="md5-password" name="password">
    
            <button type="submit">提交</button>
        </form>
    
        <script>
            function aaa() {
                alert(1);
                var username = document.getElementById('username');
                var pwd = document.getElementById('password');
                var mpwd = document.getElementById('md5-password');
                mpwd.value=md5(pwd.value);
                return true;
            }
        </script>
    </body>
    </html>
    
  • 相关阅读:
    (转载)Java读取ipa中info.plist获取版本信息
    (转)使用Eclipse开发Android源码
    IOS端的摇一摇功能
    (转) 自动编译iOS工程,生成app及ipa文件的方法
    Mac OS 上设置 JAVA_HOME
    macjava
    JS超级酷的导航菜单代码
    JavaScript+Css实现的鼠标悬停时动态翻滚的紫色菜单导航
    全国的省市县联动代码
    【荐】JavaScript制作可伸缩的淡绿色菜单导航
  • 原文地址:https://www.cnblogs.com/ijuysama/p/12711011.html
Copyright © 2011-2022 走看看