首页 > 编程语言 >JavaScript详解（二）

JavaScript详解（二）

时间：2022-09-04 00:12:49浏览次数：87  
标签：name JavaScript js getElementById 详解 var document 节点

面向对象

原型对象

  • 类 模板 原型对象
  • 对象 具体的实例

原型

        var Student = {
            name: "xiaoqiang",
            age: 3,
            run: function (){
                console.log(this.name + " run ...");
            }
        };

        var xiaoming = {
            name: "xiaoming",
        };

        // 小明的原型是 Student
        xiaoming.__proto__ = Student;
        var Bird = {
            fly: function (){
                console.log(this.name+" fly ...")
            }
        }
        xiaoming.__proto__= Bird;

xiaoming.run();
> xiaoming run ...

xiaoming.fly();
> xiaoming fly ...

class继承

class关键字，是在ES6引入的

  1. 定义一个类，属性，方法
        // ES6之后===============
        // 定义一个学生的类
        class Student{

            constructor(name) {
                this.name = name;
            }

            hello(){
              alert("hello")
            }
        }

        var xiaoming = new Student("xiaoming");
  1. 继承
        class Student{

            constructor(name) {
                this.name = name;
            }

            hello(){
              alert("hello")
            }
        }

        class XiaoStudent extends Student{
            constructor(name,grade) {
              super(name);
              this.grade = grade;
            }

            myGrade(){
                alert('我是一名小学生')
            }
        }


        var xiaoming = new Student("xiaoming");
        var xiaohong = new XiaoStudent("xiaohong",2);

原型链

__proto__

操作BOM对象

浏览器介绍

Javascript和浏览器关系

javascript诞生就是为了让它能在浏览器中运行！

BOM（Brower Object Model）：浏览器对象模型

  • IE 6 ~ 11
  • Chrome
  • Safari
  • FireFox

三方

  • QQ浏览器
  • 360浏览器

window

window代表浏览器窗口

window.alert(11);
undefined
window.innerHeight;
201
window.innerWidth;
649
window.outerHeight;
1001
window.outerWidth;
649

navigator

navigator封装了浏览器的信息

navigator.appName;
> 'Netscape'
navigator.appVersion;
> '5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36'
navigator.userAgent;
> 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36'
navigator.platform;
> 'MacIntel'

大多数时候，我们不会使用navigator对象，因为会被认为修改！

不建议使用这些属性来判断和编写代码

screen

代表屏幕尺寸

screen.height;
> 1080
screen.width;
> 1920

location

location代表当前页面的url信息

location.host
> 'www.cnblogs.com'
location.href
> 'https://www.cnblogs.com/zibinchen/'
location.protocol
> 'https:'
location.assign("https://www.cnblogs.com/zibinchen/");

document

document 代表当前页面，HTML DOM 文档树

document.title
> "百度一下，你就知道"

document.title = "binzaza";
> "binzaza"

获取具体的文档树节点

<dl id="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>

<script>
    var dl = document.getElementById("app");
</script>


获取cookie

document.cookie
> 'BIDUPSID=0A31CC83ADD9380D97DC3B6AD0A322EC; PSTM=1658886657; BAIDUID=0A31CC83ADD9380DEB29FEC65D364751:FG=1; ZFY=1Ui17Pr6Lyp0izLVEUKO:BV9PBgA:AOS88o5LTLpegzpE:C; COOKIE_SESSION=0_0_0_0_2_0_0_0_0_0_0_0_63_0_70_0_1658886777_0_1658886707%7C1%230_0_1658886707%7C1; BD_HOME=1; H_PS_PSSID=36551_36625_37112_36885_36917_37003_36569_36807_36776_36789_37103_37135_37055_26350_36862_37204; BD_UPN=123253; BA_HECTOR=a48h2gah84a4a1812k2kneo91hg6b5716; BAIDUID_BFESS=0A31CC83ADD9380DEB29FEC65D364751:FG=1'

history

代表浏览器的历史记录

// 前进
history.forward()

// 后退
history.back()

操作DOM对象

DOM（document object model）：文档对象模型

核心

浏览器网页就是一个DOM 树形结构！

  • 更新：更新DOM节点
  • 遍历：得到DOM节点
  • 删除：删除一个DOM节点
  • 添加：添加一个新的DOM节点

要操作一个DOM节点，就必须要先获取这个DOM节点

获得DOM节点

    var h1 = document.getElementsByTagName("h1");
    var p1 = document.getElementById("p1");
    var p2 = document.getElementsByClassName("p2");
    var father = document.getElementById("father");
    
    var childrens = father.children; // 获取父节点下的所有子节点

这是原生代码，之后尽量使用jQuery来操作

更新节点

<div id="id1"></div>

<script>
    var id1 = document.getElementById("id1")
</script>
操作文本
  • id1.innerText="123"; 修改文本的值
  • id1.innerHTML="<strong>321</strong>"; 可以解析HTML文本标签

操作JS

id1.style.color='green';
id1.style.fontSize='20px';
id1.style.padding='2em';

删除节点

删除节点的步骤：先获取父节点，再通过父节点删除自己

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    var self = document.getElementById("p1");
    var father = p1.parentElement;
    father.removeChild(self);
    
    // 删除是一个动态的过程
    father.removeChild(father.child[0]);
    father.removeChild(father.child[1]);
    father.removeChild(father.child[2]);
</script>

注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意

插入节点

获得了某个dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了，我们就不能添加了

追加

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    var
        js = document.getElementById("js");
        list = document.getElementById("list")
</script>

list.append(js);

创建一个新的标签，实现插入效果

通过js创建一个新的节点

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    var
        js = document.getElementById("js");
        list = document.getElementById("list")

    // 通过js创建一个新节点
    var newP = document.createElement("p"); // 创建一个新节点
    newP.id = "newP";
    newP.innerText = "hello,binzaza";

</script>

list.append(newP);

创建一个新的标签，实现加入

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    var
        js = document.getElementById("js");
        list = document.getElementById("list")

    // 通过js创建一个新节点
    var newP = document.createElement("p"); // 创建一个新节点
    newP.id = "newP";
    newP.innerText = "hello,binzaza";
    // 创建一个标签节点（通过这个属性可以设置任意的值）
    var myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript')

</script>

list.append(myScript);


    var
        js = document.getElementById("js");
        list = document.getElementById("list")

    // 通过js创建一个新节点
    var newP = document.createElement("p"); // 创建一个新节点
    newP.id = "newP";
    newP.innerText = "hello,binzaza";
    // 创建一个标签节点（通过这个属性可以设置任意的值）
    var myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');

    // 可以创建一个style标签
    var myStyle = document.createElement("style"); // 创建一个style标签
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML = "body{background-color: chartreuse}"; // 设置标签内容
    document.getElementsByTagName('head')[0].append(myStyle);

insert

    var ee = document.getElementById("ee");
    var list = document.getElementById("list");
    var js = document.getElementById("js");
    // 要包含的节点，insertBefore(newNode,targetNode)
    list.insertBefore(js,ee)

操作表单（验证）

表单是什么 form

  1. 文本框 text
  2. 下拉框 select
  3. 单选框 radio
  4. 多选框 checkbox
  5. 隐藏域 hidden
  6. 密码框 password
  7. ...

表达的目的：提交信息

获得需要提交的信息

<form action="post">
    <p>
        <span>用户名：</span><input type="text" id="username">
    </p>
    <p>
        <!--多选框的值，就是定义好的value-->
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="boy"> 男
        <input type="radio" name="sex" value="woman" id="girl"> 女
    </p>
</form>

<script>
    var input_text = document.getElementById("username");
    var boy_radio = document.getElementById("boy");
    var girl_radio = document.getElementById("girl");
    // 得到输入框的值
    input_text.value;
    // 修改输入框的值
    input_text.value = "123456";

    // 对于单选框、多选框等固定的值，boy_radio.value只能取到当前的值
    boy_radio.checked; //查看返回的结果是否为true,如果为true,则被选中～
    girl_radio.checked = true; // 赋值
    
</script>

提交表单,MD5加密密码

    <!--MD5工具类-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

<!--
表单绑定提交事件
onsubmit= 绑定一个提交检测的函数，true,false
将这个结果返回给表单，使用onsubmit 接瘦！
onsubmit="return add()"
-->

<form action="https://www.baidu.com" method="post" onsubmit="return add()">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span><input type="text" id="input-password">
    </p>
    <input type="hidden" id="md5-password" name="password">
    <p>
        <!--绑定事件 onclock 被点击-->
        <!--<input type="submit">-->
        <button type="submit">提交</button>
    </p>
</form>

<script>
    function add(){
        var username = document.getElementById('username');
        var pwd = document.getElementById('input-password');
        var md5pwd = document.getElementById('md5-password');
        md5pwd.value = md5(pwd.value);
        // 可以校验判断表单内容，true就是通过提交，false就是阻止提交
        return true;
    }
</script>

jQuery

javascript

jQuery库，里面存在大量的javascript函数

获取jquery

https://jquery.cuishifeng.cn/

https://www.jq22.com/cdn/

<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<!--
公式： $(selector).action()
-->

<a href="" id="test-jquery">点我</a>

<script>
    document.getElementById("id");
    // 选择器就是css的选择器
    $('#test-jquery').click(function (){
        alert("hello,jquery");
    })
</script>

选择器

    // 原生js，选择器少，麻烦不好记
    // 标签
    document.getElementsByTagName();
    // id
    document.getElementById();
    // 类
    document.getElementsByClassName();

    // jQuery css 中的选择器它全部都能用
    $('p').click(); // 标签选择器
    $('#id1').click(); // id选择器
    $('.class1').click(); // class选择器

事件

鼠标事件，键盘事件，其他事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/jquery-3.6.1.js"></script>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<!--获取鼠标当前坐标移动轨迹-->
mouse: <span id="mouseMove"></span>
<div id="divMove">
    在这里移动鼠标试试
</div>

<script>
    // 当网页元素加载完毕之后，响应事件
    $(function (){
        $("#divMove").mousemove(function (e){
            $("#mouseMove").text('x:'+e.pageX+'y:'+e.pageY)
        })
    })
</script>
</body>
</html>

操作DOM

节点文本操作

$("#test-ul li[name='python']").text(); // 获得值
$("#test-ul li[name='python']").text("设置值"); // 设置值
$("#test-ul").html(); // 获得值
$("#test-ul").html("<strong>123</strong>"); // 设置值

CSS操作

$("#test-ul li[name='python']").css("color","red");

元素的显示和隐藏

$("#test-ul li[name='python']").show() // 显示
$("#test-ul li[name='python']").hide() // 隐藏

高度宽度

$(window).width() // 宽
$(window).height() // 高

标签：name,JavaScript,js,getElementById,详解,var,document,节点
From： https://www.cnblogs.com/zibinchen/p/16654039.html

相关文章

  • HTML、CSS 和 JavaScript 格式的 3D 玻璃天气图标
    HTML、CSS和JavaScript格式的3D玻璃天气图标3D玻璃天气图标免费下载****在HTML、CSS和JavaScript中HTML：<divclass="weatherweather--sun"><divclass......
  • Linux下用户组、文件权限详解
    Linux下用户组、文件权限详解-打伞的鱼-博客园 https://www.cnblogs.com/123-/p/4189072.html用户组在linux中的每个用户必须属于一个组，不能独立于组外。在linux中......
  • 系统优化-----sysctl.conf文件内核设置参数详解
    系统优化-----sysctl.conf文件内核设置参数详解_tallercc的博客-CSDN博客 https://blog.csdn.net/tallercc/article/details/52823075sysctl.conf工作原理 sysctl命......
  • ClickHouse(05)ClickHouse数据类型详解
    ClickHouse属于分析型数据库，ClickHouse提供了许多数据类型，它们可以划分为基础类型、复合类型和特殊类型。其中基础类型使ClickHouse具备了描述数据的基本能力，而另外两种类......
  • Linux top命令的用法详细详解
    Linuxtop命令的用法详细详解_xiaoL_clo的博客-CSDN博客_linuxtop命令的用法详细详解 https://blog.csdn.net/dxl342/article/details/53507673查看多核CPU命令mpstat......
  • 详解iptables
    iptables4表5链1、5链2、4表iptables用法示例1、只允许172.16.0.0网段的机器访问本机的443端口#-A是加到末尾，这种情况万一前面的规则拒绝了，这个规则就......
  • 开学的JavaScript第一次测试
    这次的课堂测试我的成绩并不理想，经过一些时间的反思，我总结了一些不周到的原因，首先是我在做老师的给定的程序是没有仔细阅读，没有看到一些具体的要求，导致多米诺古效应，所以进......
  • JavaScript 非运算(!)之双感叹号的使用技巧
    我的另一篇博文中提到JavaScript有哪些是假值，哪些是真值。对于null、undefined、""，等一些假值，JavaScript直接视为false。我有一个需求，判断从浏览器中获取的Cookie是......
  • linux常用命令详解
    一、常用linux命令的基本使用命令对应英文作用lslist查看当前文件夹下的内容pwdprintworjdirectory查看当前所在文件夹cd[目录名]changedirectory......
  • 如何在 JavaScript 中从日期中减去秒数
    如何在JavaScript中从日期中减去秒数让我们学习如何轻松地从a中减去任意秒数日期JavaScript中的对象。1.日期setSeconds()和getSeconds()方法从a中减去......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99