zoukankan html css js c++ java

web开发：javascript操作

本文目录：

一、函数闭包

二、面向对象

一、函数闭包

```js
// 函数的嵌套定义, 定义在内部的函数就称之为闭包
// 1.一个函数要使用另一个函数的局部变量
// 2.闭包会持久化包裹自身的函数的局部变量
// 3.解决循环绑定

function outer() {
    var num = 10;
    function inner() { // 闭包
        // 1.在inner函数中,使用了outer的局部变量num
        return num;
    }
    return inner;
}
var innerFn = outer();
// 2.借助闭包,将局部变量num的生命周期提升了
var num = innerFn();
console.log(num);
```

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>闭包</title>
</head>
<body>
闭包
</body>
<script>
    // 了解知识点
    // 闭包: 局部的函数(被一个函数包裹的函数)
    // 为什么使用闭包:
    // 1.一个函数要使用另一个函数的局部变量
    // 2.闭包会持久化包裹自身的函数的局部变量
    // 3.解决循环绑定

    // 函数的嵌套定义
    function outer() {
        var num = 10;
        function inner() {
            // 1.在inner函数中,使用了outer的局部变量num
            return num;
        }
        return inner;
    }
    var innerFn = outer();
    // 2.借助闭包,将局部变量num的生命周期提升了
    var num = innerFn();
    console.log(num);


</script>
</html>

二、面向对象

```js
// 1.单一对象
var obj = {
    // 属性
    name: 'Zero',
    // 方法
    teach: function () {
        console.log("教学");
    }
};
obj.name | obj.teach()

// 2.构造函数
function Person(name) { // 类似于python中的类一样来使用
   // this代表Person构造函数实例化出的所有具体对象中的某一个
    this.name = name;
    this.teach = function () {
        console.log(this.name + "正在教学");
    }
}
// ①通过构造函数实例化出具体对象
// ②通过对象.语法调用属性与方法
var p1 = new Person("张三");
p1.name // 张三, this指向p1对象
var p2 = new Person("李四");
p2.teach // 李四正在教学, this指向p2对象

// 3.ES6类语法
class Student {
    // 需要构造器(构造函数)来完成对象的声明与初始化
    constructor (name) {
        // 属性在构造器中声明并完成初始化
        this.name = name;
    }
    // 类中规定普通方法
    study () {
        console.log(this.name + "正在学习");
    }
    // 类方法
    static fn() {
        console.log("我是类方法")
    }
}
// 类中的普通方法由类的具体实例化对象来调用
// 类中的类方法由类直接来调用(这类型的方法大多是功能性方法,不需要对象的存在)
```

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>面向对象js</title>
</head>
<body>
面向对象js
</body>
<script>
    // 对象: 特征与行为的结合体, 是一个具象的实体

    // js对象语法
    var obj = {
        // 属性
        name: 'Zero',
        // 方法
        teach: function () {
            console.log("教学");
        }
    };
    // 对象使用属性与方法, 采用.语法
    console.log(obj.name);
    obj.teach();

    // 构造函数: 声明与普通函数一样, 只是函数名采用大驼峰命名规则
    function Person(name) {  // 类似于python中的类一样来使用
        // 构造函数内部属性方式不同于普通函数
        this.name = name;  // this代表Person构造函数实例化出的所有具体对象中的某一个
        this.teach = function () {
            console.log(this.name + "正在教学");
        }
    }
    // 如何使用构造函数中的属性与方法
    // 1. 通过构造函数实例化出具体对象
    // 2. 通过对象.语法调用属性与方法
    var p1 = new Person("杨虎虎");  // name: 杨虎虎
    var p2 = new Person("刘xx");  // name: 刘xx
    console.log(p1.name);
    console.log(p2.name);
    p1.teach();
    p2.teach();


    // ES6
    // 引入了类
    class Student {  // 类, 可以实例化对象, 但实例化出的对象需要加以区分
        // 需要构造器(构造函数)来完成对象的声明与初始化
        // ES6规定方法的语法
        constructor (name) {
            // 属性在构造器中声明并完成初始化
            this.name = name;
        }
        // 类中规定普通方法
        study () {
            console.log(this.name + "正在学习");
        }
        // 类方法
        static fn() {
            console.log("我是类方法")
        }
    }
    // 1.实例化类的对象
    let stu1 = new Student("嘿嘿");
    // 2.使用属性与方法
    console.log(stu1.name);
    stu1.study();

    let stu2 = new Student("嘻嘻");
    console.log(stu2.name);
    stu2.study();

    Student.fn()
</script>
<script>
    // 类方法
    class Tool {  // 功能类(工具类)中的方法都定义为类方法
        static max (num1, num2) {
            return num1 > num2 ? num1 : num2;
        }
    }
    // 通过Tool类来求两个数中的大值, 需要Tool类的对象出现吗? 不需要 => 功能有类直接使用
    console.log(Tool.max(666, 888));


    // throw "自定义异常";
    // console.log("上面如果出现了异常, 逻辑将会被强制停止");
    // var num = 10 / 0;
    // console.log(num)
</script>
</html>

三、js选择器

- 直接通过id名(不严谨, 也不推荐使用)
- getElement系列(最严谨)

```js
// id获取:
// getElementById('id名')
// 只能由document来调用

// class获取
// getElementsByClassName('class名')
// 可以由document以及所属父级调用

// tag获取
// getElementsByTagName('标签名')
// 可以由document以及所属父级调用

```

- querySelector

```js
// 获取第一个满足要求的目标
// querySelector()

// 获取所有满足要求的目标
// querySelectorAll()

// 1.参数: 就采用的是css选择器语法
// 2.可以由document及父级来调用
// 3.对id检索不严谨
```

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js选择器</title>
    <style>
        #d {
            color: red;
        }
    </style>
</head>
<body id="bd">
    <!--注释-->
    <div id="d" class="dd">我是ddd111</div>
    <div id="d" class="dd">我是ddd222</div>

    <div class="sup1">
        <div id="div"></div>
    </div>
    <div class="sup2">
        <div id="div"></div>
    </div>
</body>
<script>
    // 节点(了解): 在文档(document)中出现的所有内容都是document中的节点
    // 节点(node): 标签节点(元素element) | 注释节点 | 文本节点 | <!doctype>节点
    console.log([bd]) // 文本 注释 文本 标签 文本 标签 文本 标签 文本 标签 文本
</script>
<script>
    // js选择器: 将js与html建立起连接
    // js中一般称标签为页面元素

    // 1.直接通过id名进行匹配
    console.log(d);  // 两个都可以找到

    // 2.getElement系列(最严谨)
    // 所有显示在页面中的内容(展现给用户看的), 都是属于文档(document)对象的内容, 存放在文档中
    // console.log(document)
    // 获取文档中的标签 => document对象通过.语法去获取具体的目标标签元素
    // ① id
    var div = document.getElementById('d');  // 检索得到页面中出现的第一个满足条件的目标
    console.log(">>>", div);

    var body = document.getElementById("bd");
    console.log(body);

    // 注: getElementById该方法只能由document来调用
    // 原因: 我们需要保证一个文档中一个id只能出现一次, document检索的就是文档,
    // 而某父级标签只能检索自身标签内部区域, document可以保证文档中只能一个id
    // 只出现一次,某父级标签只能保证自身内部区域id不重复,能不能保证与外界不重复?
    // 不能, 所以从安全角度出发, 获取唯一对象的getElementById方法只能由能确定唯一id的
    // 对象来调用, 能被document调用, 不能被sup来调用

    // ② 类名
    var divs = document.getElementsByClassName('dd');
    console.log(divs);
    // 两个div在body之中, 上方已经获取了body, 那能否通过body来获取body中的div
    var divs1 = body.getElementsByClassName('dd');
    console.log(divs1);

    // ③ 标签名
    var divs = document.getElementsByTagName('div');
    console.log(divs)

    console.log('--------------------------------------------------');

    // 3.querySelector系列(最方便)
    // 参数: 就是css选择器语法
    // querySelector检索第一个
    var div = document.querySelector('body > .dd');
    console.log(div);

    // querySelectorAll检索所有满足结果
    var divs = document.querySelectorAll('body > .dd');
    console.log(divs);
    var divs = body.querySelectorAll('.dd');
    console.log(divs)

    var divs = body.querySelectorAll('#d');  // 不严谨
    console.log(divs)


</script>
</html>

四、事件初始

```js
// js事件: 页面标签在满足某种条件下可以完成指定功能的这种过程, 成之为事件
// 某种条件: 如鼠标点击标签: 点击事件 | 鼠标双击标签: 双击事件 | 键盘按下: 键盘按下事件
// 指定功能: 就是开发者根据实际需求完整相应的功能实现

// 钩子函数: 就是满足某种条件被系统回调的函数(完成指定功能)
// 点击事件: 明确激活钩子的条件 = 激活钩子后改处理什么逻辑, 完成指定功能(函数)

// 获取页面标签是前提
var div = document.querySelector('.div');
// 钩子条件: 双击 = 指定功能(自身背景颜色变红)
div.ondblclick = function () {
this.style.backgroundColor = 'red';
}
```

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>事件初识</title>
    <style>
        .div {
            width: 200px;
            height: 200px;
            background-color: coral;
        }
    </style>
</head>
<body>
    <div class="div"></div>
    <div class="div"></div>
</body>
<script>
    // js事件: 页面标签在满足某种条件下可以完成指定功能的这种过程, 成之为事件
    // 某种条件: 如鼠标点击标签: 点击事件 | 鼠标双击标签: 双击事件 | 键盘按下: 键盘按下事件
    // 指定功能: 就是开发者根据实际需求完整相应的功能实现

    // 钩子函数: 就是满足某种条件被系统回调的函数(完成指定功能)

    // 点击事件: 明确激活钩子的条件 = 激活钩子后改处理什么逻辑, 完成指定功能(函数)
    var div = document.querySelector(".div");  // 找到的是第一个.div
    div.onclick = function () {
        // alert(123)
        this.style.backgroundColor = "pink";
    }

    // 明确第一个及第二个
    var divs = document.querySelectorAll('.div');
    divs[1].ondblclick = function () {
        divs[0].style.backgroundColor = "yellow";
    }

</script>
</html>

五、js处理页面内容

- 文本内容

```js
// box.innerText
// 可以设值, 也可以获取值
```

- 标签内容

```js
// box.innerHTML
// 可以设值, 也可以获取值, 能解析html语法代码

// box.outerHTML
// 获取包含自身标签信息的所有子内容信息
```

- 样式

```js
// box.style.样式名 ==> 可以设值,也可以获取,但操作的只能是行间式

// getComputedStyle(box, null).样式名 ==> 只能获取值,不能设值, 能获取所有方式设置的值(行间式与计算后样式)

// 注: 获取计算后样式,需要关注值的格式
```

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JS处理页面内容</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: cyan;
            margin-top: 15px;
        }
    </style>
</head>
<body>
<div class="d1">001</div>
<div class="d2">002</div>
<div class="d3">003</div>
<div class="box"></div>
</body>
<script>
    // 先获取页面元素
    var d1 = document.querySelector('.d1');
    var d2 = document.querySelector('.d2');
    var d3 = document.querySelector('.d3');

    // ① 操作文本内容
    var text = d1.innerText;
    // 获取内容
    console.log(text);
    // 修改(删除)内容
    d1.innerText = "";
    d1.innerText = "修改后的文本内容";

    // ② 操作子标签
    // 获取
    var html = d2.innerHTML;
    console.log(html)
    // 修改
    d2.innerHTML = "<b>加粗的文本</b>";  // 可以解析html语法的代码
    // d2.innerText = "<b>加粗的文本</b>";

    // 了解
    console.log(d2.innerHTML);  // 只是标签内部的子标签与子内容
    console.log(d2.outerHTML);  // 不仅包含标签内部的子标签与子内容,还包含自身标签信息

    // ③ 操作页面样式
    // 获取 ??
    var bgColor = d3.style.backgroundColor;  // 只能获取行间式
    console.log(bgColor);

    // 修改
    d3.style.backgroundColor = "yellow";  // 只能修改行间式

    // 问题: 那用内联外联设置的样式如何获取
    // 内联与外联设置的样式叫: 计算后样式
    // getComputedStyle(目标标签, 伪类(null填充)).具体的样式
    bgColor = window.getComputedStyle(d3, null).backgroundColor;  // 兼容性较差
    console.log(bgColor);
    // 可以获取计算后样式, 也可以获取行间式, 但它为只读
    bgColor = getComputedStyle(d3, null).getPropertyValue('background-color');  // 兼容性较好
    console.log(bgColor);

    // 一些不常用的属性会出现浏览器之间的兼容问题, 通过添加前缀来处理
    console.log(d3.style);
    // chrome: -webkit-
    // ie: -ms-
    // opera: -o-

</script>
<script>
    // 需求: box的颜色通过点击在cyan与red之间切换
    var box = document.querySelector('.box');
    box.onclick = function () {
        var bgColor = getComputedStyle(this, null).backgroundColor;
        console.log(bgColor);
        // 要注意计算后样式获取的结果, 以及结果具体的字符串格式
        if (bgColor == 'rgb(0, 255, 255)') {
            this.style.backgroundColor = 'red';
        } else {
            this.style.backgroundColor = 'cyan';
        }
    }


</script>
</html>

六、js事件控制标题栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js事件控制标题栏</title>
    <style>
        .part1 div {
            width: 100px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            float: left;
            cursor: pointer;
        }
        .part1 {
            overflow: hidden;
        }
        h2 {
            height: 30px;
            background-color: cyan;
        }
    </style>
</head>
<body>
    <div class="part1">
        <div class="b1">标题栏</div>
        <div class="b2">标题栏</div>
        <div class="b3">标题栏</div>
        <div class="b4">标题栏</div>
    </div>
    <h2></h2>
</body>
<script>
    /*
    var b1 = document.querySelector('.b1');
    // 鼠标悬浮事件
    b1.onmouseenter = function () {
        console.log("鼠标悬浮上了");
        // 悬浮上后,该标签的字体颜色变化橘色
        this.style.color = "#FF6700";
    }
    // 需求并非为鼠标移走,去除颜色
    b1.onmouseleave = function () {
        this.style.color = "#000";
    }
    */
</script>
<script>
    // 制作数据
    var data = ["标题1", "标题2", "标题3", "标题4"];

    var divs = document.querySelectorAll('.part1 div');
    console.log(divs);

    // 循环绑定 => 会出现变量(i)污染
    for (let i = 0; i < divs.length; i++) {
        divs[i].onmouseenter = function () {
            // 打印自身索引值
            console.log(i);
            // 将自身颜色变为橘色,其他兄弟颜色变为黑色
            // 就是i为橘色, 非i为黑色
            changeColor(i);

            // 悬浮内容
            changeContent(i)
        }
    }
    // console.log(i);

    // 自定义的修改颜色的方法
    function changeColor(index) {
        for (let i = 0; i < divs.length; i++) {
            // 先不管三七二十一,全改成黑色
            divs[i].style.color = "black";
            // 如果是目标选中标签,它的颜色再重新设置为橘色
            if (i == index) {
                divs[i].style.color = "#FF6700";
            }
        }
    }

    var h2 = document.querySelector('h2');
    // 修改内容
    function changeContent(index) {
        h2.innerText = data[index];
    }

</script>
</html>

七、js控制类名

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js控制类名</title>
    <style>
        .y {
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 50%;
        }
        .f {
            width: 100px;
            height: 100px;
            background-color: orange;
        }
        .g {
            display: none;
        }
        .ttt {

        }
    </style>
</head>
<body>
<ul>
    <li class="l1">圆</li>
    <li class="l2">方</li>
    <li class="l3">滚</li>
</ul>
<div></div>
</body>
<script>
    var box = document.querySelector('div');

    var l1 = document.querySelector('.l1');
    l1.onclick = function () {
        box.className = 'y'
    }
    var l2 = document.querySelector('.l2');
    l2.onclick = function () {
        box.className = 'f'
    }
    var l3 = document.querySelector('.l3');
    l3.onclick = function () {
        box.className = 'g';
        // box.className = ""; // 清除类名
        // box.className = 'y f';
        // box.className += " ttt";
    }

</script>
</html>

查看全文

相关阅读:
win10 uwp 异步进度条
 win10 uwp 异步进度条
 win10 uwp 简单MasterDetail
win10 uwp 简单MasterDetail
如何使用PHP验证客户端提交的表单数据
 PHP 表单和用户输入讲解
 什么是PHP 面向对象
 PHP 命名空间(namespace)定义
 PHP 魔术常量介绍
 archer 安装

原文地址：https://www.cnblogs.com/wuzhengzheng/p/10273561.html