DOM操作, js事件, jQuery1

目录

• BOM
• DOM
  • DOM查找标签
    • 直接查找
    • 间接查找
  • DOM节点操作
  • DOM获取标签value值
  • DOM操作类属性
  • DOM操作样式
• js绑定事件
  • 事件
  • js绑定事件的两种方式
  • js绑定事件示例
    • 开关灯示例
    • input框获取焦点示例
    • 展示当前时间时间
    • 省市联动
• jQuery
  • 简介
  • jQuery的语法结构
  • jQuery选择器

BOM

Browser Object Model, 浏览器对象模型, 它能使JavaScript有能力与浏览器进行"对话"

window.innerHeight;  // 浏览器内部窗口高度
window.innerWidth;  // 浏览器内部窗口宽度 

window.open(
	'https://www.baidu.com',
	'',
	'width = 400px; height = 800px; top = 200px; left = 500px'
);  // width和height为打开窗口的宽和高, top为距离屏幕上边的距离, left为距离屏幕左边的距离

window.close();  // 自动关闭当前页面

navigator.userAgent;  // 浏览器用户代理

history.back();  // 标签页回退
history.forward();  // 标签页前进

window.location;  
location.href;  // 获取当前页面的url
location.href = "https://www.baidu.com";  // 跳转到指定页面
location.reload();  // 重新加载页面

alert(123);  // 警告框
confirm('are you sure?');  // 确认框
prompt('提示标题', '提示内容');  // 提示框


// 计时器
function func(){
	alert('hello baby!');
};
setTimeout(func, 3000);  // 延迟三秒执行一次func函数


function func(){
    alert(123);
};
function show(){
    var t = setInterval(func, 3000);  // 每隔3秒循环执行一次
    function inner(){
        clearInterval(t);  // 清除计时器
    }
    setTimeout(inner, 9000);
}
show();

DOM

• Document Object Model, 文档对象模型, 通过它, 可以访问HTML文档中的所有元素
• JavaScript可以通过DOM创建动态的HTML
• 标签 == 元素 == 节点
• 属性

DOM查找标签

直接查找

document.getElementsByTagName('span');  // HTMLCollection(2) [span#d1, span]
document.getElementsByClassName('c1');  // [div.c1]
document.getElementById('d1');  // <span id="d1">div上面的span</span>

间接查找

var pEle = document.getElementById('p1');  // 变量名的命名 
pEle.parentElement;  // 查找父标签, <div class="c1">...</div>

var divEle = document.getElementsByClassName('c1')[0];  // 注意数组套标签问题
divEle.children;  // 查找子标签, 列表套标签
divEle.firstElementChild;  // 查找第一个子标签, 单个标签
divEle.lastElementChild;  // 查找最后一个子标签, 单个标签
divEle.nextElementSibling;  // 查找下一个同级的兄弟标签, 单个标签
divEle.previousElementSibling;  // 查找上一个同级的兄弟标签, 单个标签

DOM节点操作

var imgEle = document.createElement('img');  // 创建节点, img标签

imgEle;  // <img>

imgEle.src = '节点操作图片.jpg';  // 设置默认属性, <img src="节点操作图片.jpg">

imgEle.setAttribute('user_name', 'jason');  // 设置自定义属性, <img src="节点操作图片.jpg" user_name="jason">

imgEle.setAttribute('title', '女神刘亦菲!');  // 设置默认属性, <img src="节点操作图片.jpg" user_name="jason" title="女神刘亦菲!">

var divEle = document.getElementsByClassName('c1')[0];
divEle.append(imgEle);  // 追加一个子节点作为最后的子节点, 在div标签内添加img子标签, 刷新不留存

var aEle = document.createElement('a');  // 创建节点, a标签

aEle;  // <a></a>

aEle.setAttribute('href', 'https://www.baidu.com');  // 设置默认属性, <a href="https://www.baidu.com"></a>

aEle.innerText = '点我有你好看哟~';  // 设置标签内文本, <a href="https://www.baidu.com">点我有你好看哟~</a>

var divEle = document.getElementsByClassName('c1')[0];  // 找到div标签

var pEle = document.getElementById('p1');  // 找到div中的p标签

divEle.insertBefore(aEle, pEle);  // 插入节点, 在div标签内的p标签前面动态插入a标签, 刷新不留存

var divEle = document.getElementsByClassName('c1')[0];  // 获取div标签

var pEle = document.getElementById('p1');  // 获取div中的p标签

divEle.innerText;  // 获取div标签内的文本内容
/*
"div标签!

div中的p标签!"
*/

divEle.innerHTML;  // 获取div标签内的文本内容 + html代码
/*
" div标签!
    <p id="p1">div中的p标签!</p>
"
*/

divEle.innerText = '<h1>上海第一帅</h1>';  // 不识别html代码

divEle.innerHTML = '<h1>上海第一帅</h1>';  // 识别html代码, 刷新不留存

// 补充

// 删除节点
parent_node.removeChild(child_node);

// 替换节点
some_node.replaceChild(new_child_node, some_child_node);

// 获取属性
divEle.getAttribute('age');

// 删除属性
divEle.removeAttribute('age');

// 自带的属性可以通过".属性名"来获取和设置
imgEle.src;
imgEle.src = '...';

DOM获取标签value值

var iEle = document.getElementById('d1');  // 获取input标签
iEle.value;  // 通过".value"获取用户输入的内容: "上海第一帅"

<select name="" id="">
    <option value="111">1</option>
    <option value="222">2</option>
</select>
var selEle = document.getElementById('d2');  // 获取select标签
selEle.value;  // "222", 多选不适用

<input type="file" id="d3">
var iEle = document.getElementById('d3');
iEle.value;  // 只能获取文件名
iEle.files[0];  // 获取用户上传的文件对象

DOM操作类属性

    <style>
        .c1 {
            height: 200px;
            width: 200px;
            border-radius: 50%;
        }

        .c2 {
            background-color: green;
        }

        .c3 {
            background-color: red;
        }
    </style>

<div class="c1 c2 c3"></div>

var divEle = document.getElementsByTagName('div')[0];  // 获取div标签

divEle.classList;  // 查看标签包含的类属性, DOMTokenList(3) ["c1", "c2", "c3", value: "c1 c2 c3"]

divEle.classList.remove('c3');  // 移除类属性

divEle.classList.add('c3');  // 添加类属性

divEle.classList.contains('c3');  // true, 判断是否包含类属性

divEle.classList.toggle('c3');  // 有则移除, 没有则添加

DOM操作样式

<p>上海第一帅: 蔡启龙!</p>

var pEle = document.getElementsByTagName('p')[0];  // 获取p标签

pEle.style.color = 'red';  // 设置字体颜色

pEle.style.backgroundColor = 'blue';  // 设置背景颜色, css中的"-"用驼峰体替代

// js操作标签样式统一先".syle", 然后再".属性"即可

js绑定事件

事件

• 当符合某个条件时, 会自动触发的动作/响应, 称为事件

js绑定事件的两种方式

方式一: 不推荐使用

<script>
    function func() {
        alert('我被点击了!')
    }
</script>

<button onclick="func()">button按钮</button>

方式二: 一般将script标签放在body最下方, 或者: xxx.onload = function (){}

<script>
    function func() {
        alert('我被点击了!')
    }

    window.onload = function () {  // onload等待window对象加载完所有html代码之后再执行

        var iEle = document.getElementById('d1');  

        iEle.onclick = function () {
            // iEle标签被点击之后, 需要响应的操作
            func()
        }
    }
</script>

<input type="button" value="input标签的按钮" id="d1">

js绑定事件示例

开关灯示例

    <style>
        .c1 {
            width: 200px;
            height: 200px;
            border-radius: 50%;
        }

        .c2 {
            background-color: green;
        }

        .c3 {
            background-color: red;
        }
    </style>

<div class="c1 c2 c3"></div>
<button>变色</button>

<script>
    let btnEle = document.getElementsByTagName('button')[0];  // 找到button标签

    btnEle.onclick = function () {
        var divEle = document.getElementsByTagName('div')[0];  // 找到div标签
        divEle.classList.toggle('c3'); 
    }
</script>

input框获取焦点示例

<input type="text" placeholder="是兄弟就来砍我!">  <!--placeHolder, 留白, 默认小文本-->

<input type="text" value="linux运维" id="d1">

<script>
    var iEle = document.getElementById('d1');

    iEle.onfocus = function () {  // input框获取焦点绑定事件
        iEle.value = '';  // 将input框中的文本值清除
    };

    iEle.onblur = function () {  // input框失去焦点绑定事件
        iEle.value = '欢迎老板下次光临!'
    };
</script>

展示当前时间时间

<input type="text" id="d1">
<button id="b1">开始</button>
<button id="b2">结束</button>

<script>
    function showTime() {
        var currentTime = new Date();
        var cTime = currentTime.toLocaleString();

        var iEle = document.getElementById('d1');
        iEle.value = cTime;
    }


    var b1Ele = document.getElementById('b1');
    var b2Ele = document.getElementById('b2');
    var t = null;  // 创建全局变量记录计数器状态

    b1Ele.onclick = function () {
        if (!t) {  // 控制只创建一个循环计数器
            t = setInterval(showTime, 1000);
        }


        b2Ele.onclick = function () {
            clearInterval(t);  // 清除循环计数器
            t = null;  // 将计数器变量置为0
        }
    }
</script>

省市联动

<select name="" id="d1">
    <option value="">--请选择--</option>  <!--设置省的select标签的默认option-->
</select>

<select name="" id="d2"></select>

<script>
    var sel1Ele = document.getElementById('d1');  // 获取省的select标签
    var sel2Ele = document.getElementById('d2');  // 获取市的select标签

    var data = {  // 定义省市字典
        "河北省": ["廊坊", "邯郸", "石家庄"],
        "北京": ["朝阳区", "海淀区", "昌平区"],
        "上海": ["静安区", "黄浦区", "徐汇区"]
    }

    for (let province in data) {  // 循环遍历省市字典获取每个省, 遍历字典时可以使用成员运算
        var optEle = document.createElement('option');  // 创建省的option标签

        optEle.innerText = province;  // 设置省的option标签的文本内容
        optEle.value = province;  // 设置省的option标签的value值

        sel1Ele.appendChild(optEle);  // 将省的option标签添加到省的select标签中

        sel1Ele.onchange = function () {  // 选择省时绑定市的选择事件

            if (!this.value) {  // 过滤省的select标签中的默认option
                sel2Ele.innerHTML = '';  // 清空上次选择留存在市的select标签中的option
            }

            else {
                var currentPro = this.value;  // 获取选择的省名, this指代的是当前操作对象本身, 类似于python后端的self

                var cityArr = data[currentPro];  // 获取选择的省名对应的市的数组

                sel2Ele.innerHTML = '';  // 清空上次选择留存在市的select标签中的option

                for (let i = 0; i < cityArr.length; i++) {  // 循环遍历市的数组获取每个市, 循环数组时, 需要三个条件: 开始, 结束, 自增
                    var optEle = document.createElement('option');  // 创建市的option标签
                    optEle.innerText = cityArr[i];  // 设置市的option标签的文本内容
                    optEle.value = cityArr[i];  // 设置市的option标签的value值
                    sel2Ele.appendChild(optEle);  // 将市的option标签添加到市的select标签中
                }
            }
        };


    }
</script>

常见事件: onclick, onfocus, onblur, onchange

jQuery

简介

• jQuery类似于python后端的模块, 封装了一些JavaScript的操作
• 类似于ORM封装对数据库的操作
• 支持链式操作, 使代码更加简洁
• 对不同浏览器的兼容性良好

jQuery的语法结构

• $('选择器').action(属性)
• 先导入再使用, <script src="jQuery.3.4.1.js"></script>
• bootcdn, --> 赋值script标签
• HTML模板: settings-->File and Code Templates-->HTML FILe

// 设置p标签内容文本字体颜色, 原生js代码与jQuery代码对比

var pEle = document.getElementsByTagName('p')[0];
pEle.style.color = 'blue';

$('p').css('color', 'red');

pEle = document.getElementById('d1');  // <p id='d1'>jQuery</p>

$('#d1');  // jQuery查询到的结果都是jQuery对象, 即列表套标签, [p#d1] 
$('#d1')[0];  // <p id='d1'>jQuery</p>

$(pEle);  // js对象转jQuery对象, [p#d1]

jQuery选择器

// 基本选择器
$('span');  // 元素选择器
$('c1');  // 类选择器
$('#d1');  // id选择器
$('div.c1');  // 选择含有c1样式的div
$('div#d1');  // 选择id值为d1的div
$('#d1, span');  // 组合选择器, 逗号表示同级并列关系 

// 层级选择器
$('div span')  // 后代选择器
$('div > span')  // 儿子选择器