加菲猫惹
加菲猫惹

DOM、BOM（一）

目录

Web API

API概念

JavaScript的组成

DOM

DOM概念

获取页面中的元素

根据id获取元素

根据标签名获取元素

根据标签的name属性获取元素

 根据标签的class属性获取元素

根据选择器来获取元素

注册事件及应用

注册事件步骤：

案例之点击按钮切换图片

属性操作

非表单元素的属性

案例二点击按钮显示和隐藏div同时按钮文字改变

案例三点击图片有放大效果，并显示对应的图片文字

innerHTML、innerText、textContent

兼容性处理

表单元素属性

案例一之设置文本框的值并输出以|为分割线的各文本框的值

 案例二检测用户名密码是否符合字数，不满足则改变文本框颜色以示警告

案例三之点击设置按钮随机选择下拉框的一个选项案例四之搜索文本框在输入内容时，提示字消失

案例四之搜索文本框在输入内容时，提示字消失

案例五之全选与反选

自定义属性操作

案例六之模拟DOM（文档树）结构

节点

案例点击菜单后高亮显示所点选项并显示选项下的所有主体内容？

动态创建元素

如案例：点击按钮生成列表

动态创建表格

案例选择水果

 

目标：

  • 掌握API和Web API的概念
  • 掌握常见浏览器提供的API的调用方式
  • 能通过Web API开发常见的页面交互功能
  • 能够利用搜索引擎解决问题

Web API

API概念

API（Application Programming Interface，应用程序编程接口），即API=接口，它定义了一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。通俗的讲：API就是一个工具

  • 任何开发语言都有自己的API
  • API的特征输入和输出（I/O）   如： var max = Math.max(9,8,26);  那么max就是输出，（9，8，26）就是输入
  • API的使用方法（console.log()） 指控制台上可输出

JavaScript的组成

由三部分组成：ECMAScript、DOM、BOM

  • ECMAScript，指由ECMA组织制定了一套规范的语法和语句，它定义了脚本语言的所有属性、方法和对象。其他语言可以实现ECMAScript来作为功能的基准，JavaScript就是遵守了这一基准
  • BOM。broswer object model：浏览器对象模型。比如：弹出新的浏览器窗口、关闭浏览器窗口大小、提供用户屏幕分辨率详细信息的屏幕对象
  • DOM。document object model：文档对象类型。  DOM将把整个页面规划成由节点层级构成的文档。如html、head、title、body等

DOM

DOM概念

简单的说就是一个接口一个API。详细的说DOM是文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口，它是一种与平台和语言无关的应用程序接口（API），它可以动态的访问程序的脚本，更新其内容、结构和www文档的风格（目前HTML和XML文档是通过说明部分来定义的）。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档。它要求在处理过程中整个文档都表示在存储器中。

 DOM又称文档树模型，是一个对象。其下树枝有：

  • 文档：一个网页可以称为一个文档
  • 节点：网页中所有内容都是节点（标签、属性、文本、注释等）
  • 元素：网页中的标签
  • 属性：标签的属性

文档里面所有的东西都是一个对象，都有属性和方法

DOM经常进行的操作

  • 获取元素，也称获取对象，因为元素就是对象
  • 对元素进行操作（设置其属性或调用其方法）
  • 动态创建元素
  • 事件（什么时候做相应的操作）

获取页面中的元素

为什么要获取页面中的元素？

例如：我们想要操作页面上的某部分（显示/隐式，动画），需要先获取到该部分对应的元素，才进行后续的操作。

根据id获取元素

var div = document.getElementById(‘main’);
console.log(div);
// 打印出来的div类型为HTMLDivElement，对象都是有类型的
console.dir(div);   	//.dir为打印对象，即打印出来的div为一个对象，可展开查看属性和方法

document是一个文档对象

get 获取  Element 元素 By 根据 Id 标示

如果页面上没有对应id，此时返回null

注意一：文档是从上到下执行的，若

案例三点击图片有放大效果，并显示对应的图片文字

//style里的css样式省略
//body下的第一个div id=’imagegallery’,存放四个a标签，且每个a标签各添加一个，
//并且a标签的href地址指向对应的img图片路径，title为各自img的title；
//body下还有一个img标签用来作占位符，用于显示点击图片放大后的图片；
//然后body下还有一个p标签用来显示放大后图片对应的title

innerHTML、innerText、textContent

获取开始标签和结束标签之间的内容，所有标签都适用，如div、span、p等

innerHTML： 获取内容的时候，如果内容中有标签，就会把标签也获取到，即原封不动的把内容获取到

innerText： 获取内容的时候，如果内容中有标签，就会把标签过滤调，即会把前后的换行和空白都去掉

两个都可以用来设置标签之间的内容：   如  box.innerHTML = ‘’;   指清空该标签的内容

innerText和textContent作用一样，都是用来获取内部文本，只是浏览器兼容问题。谷歌、新版的火狐和新版的IE两个都支持，旧版的火狐只支持textContent，旧版的IE只支持innerText

兼容性处理

//如何知道浏览器是否支持元素的某个属性？可以用输出元素的属性来查看
var box = document.getElementById(‘box’);
//当属性不存在的时候返回的是undefined，存在的时候返回的是该属性的类型
console.log(typeof box.id);

//处理innerText的兼容性问题
function getInnerText(element) {
    //判断当前浏览器是否支持元素的innerText属性，即支持innerText适用element.innerText获取内容,
    //如果不支持innerText则使用element.textContent获取内容
    if (typeof element.innerText === ‘string’) {
        return element.innerText;
    }else {
        return element.textContent;
     }
}
var box = document.getInnerText(‘box’);
console.log(gerInnerText(box));

表单元素属性

value：用于大部分表单元素的内容的获取（option除外）

type：可以获取input标签的类型（输入框和复选框等）

disabled：禁用属性，如禁用文本框输入等

checked：复选框选中属性

selected：下拉菜单选中属性

当html中标签属性的属性值只有一个的时候，DOM中对应的元素的属性值是布尔类型，只有true和false，如以上disabled、checked和selected属性要特别注意

案例一之设置文本框的值并输出以|为分割线的各文本框的值

//body标签里有9个文本框，一个type为button其余八个input的type为text
//1.当页面加载完毕，给所有的文本框赋值
var inputs = document.getElementsByTagName(‘input’);	//获取所有input的标签
var array = [];
for (var i = 0; i < inputs.length; i++) {	//遍历标签将按钮的input去除
    var input = inputs[i];		
    //根据type属性，判断是否是文本框
    if (input.type === ‘text’) {
        input.value = i;
    }
}
//2.当点击按钮的时候，获取所有的文本框的值，并适用|分割输出的值
var btn = document.getElementById(‘btn’);
btn.onclik = function () {
    var array = [];
    for (var i =0; i < inputs.length; i++) {
        var input = inputs[i];
        //判断是否是文本框
        if (input.type === ‘text’) {
            array.push(input.value);
        }
    }
console.log(array.join(‘|’));
}

 案例二检测用户名密码是否符合字数，不满足则改变文本框颜色以示警告

//body标签里有三个input，分别为用户名文本框、密码文本框、登陆按钮的input
var btnLogin = document.getElementById(‘btnLogin’);
btnLogin.onclick = function () {
    //检测用户名是否是3-6位，密码是否是6-8位
    var txtUserName = document.getElementById(‘txtUserName’);
    var txtUserPassword = document.getElementById(‘txtUserPassword’);

    //检测用户名是否是3-6位	，value为文本框的内容属性，类型为string，所以有length
    if(txtUserName.value.length < 3 || txtUserName.value.length > 6) {
        txtUserName.className = ‘bg’;	//这里若满足则要跳转到class为.bg的样式
        return;
    }else {
        txtUserName.className = ‘’;  //class名本身就为空，此处只是去掉文本框的颜色
        return;
    }
    //检测密码是否是6-8位
    if(txtUserPassword.value.length < 6 || txtUserPassword.value.length > 8) {
        txtUserPassword.className = ‘bg’;	//这里若满足则要跳转到class为.bg的样式
        return;
    }else {
        txtUserPassword.className = ‘’;  //class名本身就为空，此处只是去掉文本框的颜色
        return;
    }
    console.log(‘执行登陆’);
}

案例三之点击设置按钮随机选择下拉框的一个选项案例四之搜索文本框在输入内容时，提示字消失

//body里有一个select标签，该标签下有五个option标签，value值分别为1-5
//1.给按钮注册事件
var btnSet = document.getElementById(‘btnSet’);
btnSet.onclick = function () {
//2.获取下拉框中所有的option
var selCities = document.getElementById(‘selCities’);
var options = selCities.getElementByTagName(‘option’);
//3.随机生成索引
var randomIndex = parseInt(Math.random() * option.length);
//4.根据索引获取option，并让option选中
var option = options[randomIndex];
option.selected = ture;
}

案例四之搜索文本框在输入内容时，提示字消失

//body下有两个input，分别为文本框和按钮
//当文本框获得焦点，如果文本框里的内容是 请输入搜索关键字，清空文本框，并且让字体变为黑色
var txtSearch = document.getElementById(‘ txtSearch’);
//获得焦点也是一个事件，就像鼠标点击onclick一样,此处为focus
txtSearch.onfocus = function () {
    if (this.value === ‘请输入搜索关键字’) {
    this.value = ‘’;		//获得焦点时清空文本框的提示字
    this.className = ‘black’;		//设置样式为.black的样式
    }
}
//当文本框失去焦点，如果文本框里的内容为空，还原文本框里的文字，并且让字体变为灰色
//失去焦点的事件为blur
txtSearch.onblur = function () {
    //判断文本框中的内容为空可用if(this.value===’’),但是下面的方法更常用
    if(this.value.length === 0 || this.value ===’请输入搜索关键字’) {
        this.value = ‘请输入搜索关键字’;
        this.className = ‘gray’;		//调用样式为.gray的样式
    }
}

案例五之全选与反选

//获取父checkbox，注册点击事件
var j_tb = document.getElementById(‘j_tb’);
var inputs = j_tb.getElementByTagName(‘input’);
var j_cbAll = document.getElementById(‘j_cbA’);		//父checkbox
j_cbAll.onclick = function () {
    //找到所有子checkbox，让这些checkbox的状态与父checkbox的状态保持一致
    for(var i = 0; i

自定义属性操作

除了各标签自带的一些属性外，我们也可以给标签自定义一些属性，如：

我是一个自定义属性的div

但是要获得这些自定义的属性值时时要用getAttribute( );

首先还是要先获取id

然后console.log(No1.getAttribute(‘age’));

设置自定义属性用setAtrribute():

No1.setAttribute(‘age’, ‘23’); 两个参数，分别操作属性和值

移除自定义属性要用removeAtrribute():

No1.removeAttribute(‘age’);

上面的attribute其实也可以用于个标签自带的属性，但是不够方便

案例六之模拟DOM（文档树）结构

在HTML里其实存在文本节点和注释节点，如1 2

3

45, body下其实有五个节点，可以用console.dir(body的id)查看body的节点。
模拟DOM对象下html、head、body、span层次，首先创建一些列具有相同属性的对象，即创建构造函数

function Node(options) {		//传入的参数为一个对象/函数
    if (options.className) {	
        //因为在DOM里如果一个属性没有属性值，默认为null而不是undefined，所有我们要用if来判断一下
        this.className = options.className;
    }else {
        this.className = ‘’;
     }
    //但是用if来判断那么多的属性会过于麻烦，所有换成了下面逻辑或||来判断
    this.className = options.className || ‘’;	//有这个属性则设置为className，没有则默认为 null
    this.id = options.id || ‘’;
    this.nodeName = options.nodeName || ‘’;//节点的名称，是的话则为标签的名称
    this.nodeType = options.nodeType || ‘1’;//节点的类型，元素节点为1，属性2，文本3
    this.nodeValue = options.nodeValue || null;//节点的值，如果是元素节点，始终未null
    this.children = options.children || [];	//即用来创建元素的 层次关系，如html、body
}
var html = new Node( {		//创建html节点
    nodeName: ‘html’;
});
var head = new Node({
    nodeName: ‘head’;
});
html.children.push(head);	//设置html中的字节的head
var body = new Node({
    nodeName: ‘body’;
});
html.children.push(body);		//设置html中的子节点body
    console.dir(html);		//在运行的时候，浏览器内部维护了一颗DOM树，即自身创建了树模型
    //在这颗树里我们要深刻理解DOM；了解节点的相关属性如nodeName、nodeType、nodeValue；
    //了解节点的层次关系

节点

父子结构：parentNode 父节点（只有一个）  childNodes 子节点（有很多个，空白也是节点叫text节点，注释comment也是节点）

children  子元素（注意：注释comment也是一个子元素）

有没有能够直接获取子元素的属性？  children，获取到的是所有的子元素

 nodeType 节点类型

  1. 元素节点、2.属性节点、3.文本节点（即空白区域）

nodeName 节点的名称（标签名称）  nodeValue 节点值 （元素节点的nodeValue始终是null）

如何获取第一个子标签和最后一个子标签？子元素呢？

如  box.firstChild 为获取第一个子节点，但空白区域也是一个text节点，所以不可取。

box.firstElementChild 获取第一个子元素，但有兼容性问题，IE9以后才支持，以前的可能会包含注释comment子元素

同理有lastChild、lastElementChild

处理关于element兼容性问题示例：

function getFirstElementChild(element){

var node,nodes = element.childNodes,i = 0;

while (node = nodes[i++]) {

if (node.nodeType === 1){

return node;

}

}

return null;

}

案例点击菜单后高亮显示所点选项并显示选项下的所有主体内容？

  • 首页
    • ...(省略n个li标签及a标签)...

你可能感兴趣的:(前端大集合)

  • day15｜前端框架学习和算法 universe_01 前端算法笔记
    T22括号生成先把所有情况都画出来，然后（在满足什么情况下）把不符合条件的删除。T78子集要画树状图，把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索：每个边都走完，再回溯应用：二叉树搜索，图搜索回溯算法=DFS+剪枝T200岛屿数量（非常经典BFS宽度把树状转化成队列形式，lambda匿名函数“一次性的小函数，没有名字”setup语法糖：让代码更简洁好写的语法ref创建：基本类型的
  • vue element 封装表单 影子信息 vuevue.jsjavascript前端
    背景：在前端系统开发中，系统页面涉及到的表单组件比较多，所以进行了简单的封装。封装的包括一些Form表单组件，如下：input输入框、select下拉框、等实现效果：理论知识：表单组件官方链接：点击跳转封装组件：封装组件的思路：不封装element组件，每一个input组件绑定一个form对象，例如官网。简单封装element组件，利用for循环生成form表单的每一项el-form-item。进
  • 前端面试每日 3+1 —— 第39天 浪子神剑
    今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss
  • 前端数据库：IndexedDB从基础到高级使用指南
    文章目录前端数据库：IndexedDB从基础到高级使用指南引言一、IndexedDB概述1.1什么是IndexedDB1.2与其他存储方案的比较二、基础使用2.1打开/创建数据库2.2基本CRUD操作添加数据读取数据更新数据删除数据三、高级特性3.1复杂查询与游标3.2事务高级用法3.3性能优化技巧四、实战案例：构建离线优先的待办事项应用4.1数据库设计4.2同步策略实现五、常见问题与解决方案5.
  • 【Java Web实战】从零到一打造企业级网上购书网站系统 | 完整开发实录（三） 笙囧同学 java前端状态模式
    核心功能设计用户管理系统用户管理是整个系统的基础，我设计了完整的用户生命周期管理：用户注册流程验证失败验证通过验证失败验证通过用户名已存在用户名可用失败成功用户访问注册页面填写注册信息前端表单验证显示错误提示提交到后端后端数据验证返回错误信息用户名唯一性检查提示用户名重复密码加密处理保存用户信息保存成功?显示系统错误注册成功跳转登录页面登录认证机制深度解析我实现了一套企业级的多层次安全认证机制：认
  • 从零到一：打造基于GigaChat AI的艺术创作平台 | 笙囧同学的全栈开发实战
    作者简介：笙囧同学，中科院计算机大模型方向硕士，全栈开发爱好者联系方式：[email protected]各大平台账号：笙囧同学座右铭：偷懒是人生进步的阶梯前言在AI技术飞速发展的今天，如何将前沿的大模型技术与实际应用相结合，一直是我们开发者关注的焦点。今天，笙囧同学将带大家从零开始，构建一个基于GigaChatAI的艺术创作平台，实现React前端+Django后端的完整全栈解决方案。这不仅仅是
  • 14.tornado操作之应用Websocket协议实现聊天室功能 孤寒者 Tornado框架从入门到实战websockettornado聊天室功能实现python
    目录：每篇前言：1.什么是WebSocket（1）定义（2）优点（3）和HTTP对比（4）适用场景2.WebSocket关键方法3.本tornado项目中使用WebSocket（1）准备一个聊天室的页面：第一步：编写视图：第二步：编写接口：（app.py中加入以下接口！）第三步：编写前端页面：测试接口——响应OK！（2）使用WebSocket：（3）聊天室的聊天功能的最终实现：第一步：战前准备第二
  • 为什么学习Web前端一定要掌握JavaScript？ web前端学习指南
    为什么学习Web前端一定要掌握JavaScript？在前端的世界里，没有什么是JavaScript实现不了的，关于JS有一句话：凡是可以用JavaScript来写的应用，最终都会用JavaScript，JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。
  • 小架构step系列25：错误码 秋千码途 架构java
    1概述一个系统中，可能产生各种各样的错误，对这些错误进行编码。当错误发生时，通过这个错误码就有可能快速判断是什么错误，不一定需要查看代码就可以进行处理，提高问题处理效率。有了统一的错误码，还可以标准化错误信息，方便把错误信息纳入文档管理和对错误信息进行国际化等。没有错误码的管理，开发人员就会按自己的理解处理这些错误。有些直接把堆栈直接反馈到前端页面上，使用看不懂这些信息体验很差，也暴露了堆栈信息有
  • Java朴实无华按天计划从入门到实战（强化速战版-66天） 岫珩 Java后端java开发语言学习Java时间安排学习计划
    致敬读者感谢阅读笑口常开生日快乐⬛早点睡觉博主相关博主信息博客首页专栏推荐活动信息文章目录Java朴实无华按天计划从入门到实战（强化速战版-66天）1.基础（18）1.1JavaSE核心（5天）1.2数据库与SQL（5天）1.3前端基础（8天）2.进阶（17天）2.1JavaWeb核心（5天）2.2Mybatis与Spring全家桶（6天）2.3中间件入门（4天）2.4实践项目（2天）3.高阶（1
  • 《跨域资源共享CORS的深层逻辑与前端实践精要》
    不同源头的资源交互已成为常态，而跨域资源共享（CORS）正是支撑这种交互的隐形架构。现代Web安全体系中平衡开放与防护的精妙设计。理解CORS的深层逻辑，不仅能解决实际开发中的跨域难题，更能触及网络安全与资源流通的核心矛盾，为前端工程师构建稳健的应用提供底层认知支撑。跨域资源共享的诞生，源于网络安全与应用发展的必然冲突。浏览器的同源策略，作为早期网络安全的基石，通过限制不同源文档的交互，有效阻挡了
  • 深入了解 Kubernetes（k8s）：从概念到实践
    目录一、k8s核心概念二、k8s的优势三、k8s架构组件控制平面组件节点组件四、k8s+docker运行前后端分离项目的例子1.准备前端项目2.准备后端项目3.创建k8s部署配置文件4.部署应用到k8s集群在当今云计算和容器化技术飞速发展的时代，Kubernetes（简称k8s）已成为容器编排领域的事实标准。无论是互联网巨头、传统企业还是初创公司，都在广泛采用k8s来管理和部署容器化应用。本文将带
  • 大厂都在用的前端缓存策略，你掌握了吗？ AI架构全栈开发实战笔记 前端缓存ai
    大厂都在用的前端缓存策略，你掌握了吗？关键词：前端缓存、HTTP缓存、ServiceWorker、CDN缓存、缓存策略、性能优化、浏览器缓存摘要：本文将深入探讨前端开发中常用的缓存策略，从浏览器缓存到ServiceWorker，从HTTP缓存头到CDN缓存，全面解析大厂都在使用的高效缓存技术。通过生动的比喻和实际代码示例，帮助开发者理解并掌握这些提升Web应用性能的关键技术。背景介绍目的和范围本文
  • 26. 什么是雪碧图，作用和原理了解吗 yqcoder 前端面试-CSScss前端html
    总结小图合成一张，使用background来使用，减少资源请求一、什么是雪碧图？雪碧图（CSSSprite）是一种前端优化技术，指的是将多个小图标合并成一张大图，通过CSS控制显示其中的某一部分。它常用于网站中图标、按钮等小图较多的场景。二、雪碧图的作用作用说明✅减少HTTP请求次数合并多个图片为一张图，减少请求资源数✅提升页面加载速度尤其在图片较多时效果明显✅避免图片加载闪烁鼠标悬停切换图片时不
  • H5UI微信小程序前端框架实战指南 ai
    本文还有配套的精品资源，点击获取简介：H5UI是一个为微信小程序开发设计的前端框架，基于H5技术，提供简洁高效的组件库。框架集成了丰富的UI元素，如按钮、表格、导航栏等，简化了界面布局和交互的实现。通过安装、引入、使用组件和事件绑定四个步骤，开发者可以轻松构建功能齐全的应用。了解性能优化等注意事项对于高效开发同样重要。1.微信小程序前端开发框架介绍微信小程序概述微信小程序是微信官方推出的一种无需下
  • Ubuntu安装LAMP L_h1 测试ubuntulinux
    在安装vim时遇到了一个问题：E:无法获得锁/var/lib/dpkg/lock-frontend-open(11:资源暂时不可用)E:无法获取dpkg前端锁(/var/lib/dpkg/lock-frontend)，是否有其他进程正占用它？解决办法：强制解锁sudorm/var/lib/dpkg/lock-frontendsudorm/var/cache/apt/archives/locksud
  • 震惊！DOM变化监控神器MutationObserver，前端开发必知的隐藏武器！ coding随想 JavaScript前端javascripthtml5
    一、什么是MutationObserver？如果你是一个前端开发者，一定会遇到这样的场景：页面动态加载内容后，某些操作失效了。比如，你写了一个监听按钮点击的代码，但按钮是通过AJAX动态加载的，你的代码根本无法触发。这个时候，你就需要一个“监控哨兵”——MutationObserver，它能实时监听DOM树的变化，帮你捕获那些“暗中作祟”的节点变动。MutationObserver是HTML5引入
  • Coze Studio 架构拆解：AI Agent 开发平台项目结构全分析 代码简单说 2025开发必备(限时特惠)架构人工智能CozeStudio架构AIAgent开发平台全栈AI工程化图解架构
    CozeStudio架构拆解：AIAgent开发平台项目结构全分析标签：CozeStudio项目架构、领域驱动设计DDD、全栈开发规范、Hertz框架、前后端协作、云原生容器、前端测试、IDL接口设计、微服务解耦、AI开发平台源码分析在最近研究AIAgent开发平台的过程中，我深入分析了刚刚开源的CozeStudio项目。这套系统是国内少有的开源全栈AI工程化项目，代码整洁、架构先进，特别是它基于
  • 关于前端的性能优化
    性能优化主要涵盖了以下四个方面：(tip:仅代表个人总结，如有不当，还希望看到的大佬多多指示)减少网络请求：合并文件、使用CDN、启用缓存。优化资源加载：代码分割、懒加载、图片压缩。提升渲染性能：减少重绘回流、防抖节流、使用WebWorker。监控和迭代：定期使用工具检测性能，持续优化。一、网络层面优化减少HTTP请求合并文件：将多个CSS或JavaScript文件合并成一个，减少请求次数。使用C
  • linux网卡显示未知未托管,linux有线网络显示设备未托管
    NetworkManagerNetworkManager是为了使网络配置尽可能简单而开发的网络管理软件包，如果使用DHCP，NetworkManager会替换默认的路由表、从DHCP服务器获取IP地址并根据情况设置域名服务器，NetworkManager的目标是使网络能够开箱即用。NetworkManager由两部分组成:一个以超级用户运行的守护进程(network-manager)；一个前端管理
  • 页面开发样式和布局入门：Vite + Vue 3 + Less
    页面开发样式和布局入门：Vite+Vue3+Less引言在现代前端开发中，样式和布局是页面开发的核心部分。随着技术的不断发展，Vite、Vue3和Less等工具和框架的出现，使得前端开发变得更加高效和灵活。然而，尽管这些工具和框架提供了强大的功能，但在实际开发中仍然会遇到各种样式和布局的问题。本文将结合Vite、Vue3和Less，详细介绍在页面开发中常见的样式和布局问题，并提供解决方案和最佳实践
  • 推客系统小程序机构版开发上线全攻略（2025年最新版） vx_qutudy 推客小程序推客系统开发推客系统源码
    一、开发前准备：筑牢基础，合规先行1.1注册与认证账号注册：登录微信公众平台注册小程序账号，选择“机构版”类型，获取唯一AppID。资质认证：基础资质：企业营业执照、法人身份证、对公账户信息。特殊资质：涉及支付功能：需办理《增值电信业务经营许可证》（ICP证）。涉及教育/医疗内容：需《互联网信息服务许可证》或相关行业资质。1.2技术选型：高效与扩展并重模块推荐方案前端框架微信原生框架（WXML+W
  • 医生招聘平台有哪些？当下具高热度的8家网站 配音就业圈
    医疗招聘平台大集合！找医生工作的网站这么多，哪些最受欢迎、岗位最多、最靠谱呢？兼职副业推荐公众号，配音新手圈，声优配音圈，新配音兼职圈，配音就业圈，鼎音副业，有声新手圈，每天更新各种远程工作与在线兼职，职位包括：写手、程序开发、剪辑、设计、翻译、配音、无门槛、插画、翻译、等等。。。每日更新兼职。为了帮助大家找到心仪的医疗职位，我们精选了当下最新、最热、最活跃、最受欢迎的医疗招聘网站，保证好用，快来
  • 网络安全第14集 不灭锦鲤 web安全安全
    前言：小迪安全14集，这集重点内容：0、什么是js渗透测试？在javascript中也存在变量和函数，存在可控变量和函数就有可能存在在漏洞，js开发的web应用和php、java开发的区别是，js能看得到的源代码，php看不到，但是风险就是未授权访问、配置信息泄露（加密算法、key秘钥等），源代码看得到，存在更多的url泄露，从而可能会出现未授权访问，从url，前提：web应用可以采用前端语言或后
  • 怎么判断一个DAPP是否真正去中心化
    判断一个DAPP（去中心化应用）是否真正去中心化，需要从多个维度进行考察。以下是关键评估标准：1.区块链依赖程度✅真正去中心化：核心逻辑和数据处理完全依赖智能合约，运行在区块链上（如以太坊、Solana等）。❌伪去中心化：依赖中心化服务器处理关键数据或业务逻辑，仅前端去中心化。2.智能合约控制权✅去中心化：合约代码开源，无管理员密钥（adminkey）或可升级后门，治理由DAO（去中心化自治组织）
  • Web前端交互利用Python跟大模型操作 哥本哈士奇 前端交互python
    Web前端交互利用Python跟大模型操作一个简单的演示，如何把大模型应用集成到自己的应用场景当中。这里的场景我们模拟的是在吃鸡游戏中，一个作战计划，是否符合老六的行为规范。吃鸡游戏已经风靡很多年，游戏里每个人的游戏风格都不一样，有喜欢钢枪的，有喜欢随机应变的，也有喜欢当老六苟分的。每种风格的游戏方式以及游戏里的行为都不同，所以这里将演示如何应用大模型，去判断一个人的游戏方式，是否符合一个老六的行
  • 尚硅谷微服务尚医通前端npm报错
    尚硅谷微服务尚医通前端npm报错血泪史我的版本的8.0.0，弹幕里说降级npm到6.多就能安装，经过许久挣扎还是各种报错，最后通过一下办法解决解决办法:不需要降低npm版本，办法如下这里需要使用到cnpm：1.导入下载好到的项目2.安装cnpm：npminstallcnpm-g3.安装node-sass：cnpminstallnode-sass4.继续安装：cnpminode-sass-D5.删除
  • Layui核心语法快速入门指南 bemyrunningdog layui前端javascript开发语言
    Layui基本语法学习指南Layui是一个经典的模块化前端框架，以其轻量易用、组件丰富著称。以下是Layui的核心语法结构和使用方法：一、模块加载机制（核心基础）//标准模块加载语法layui.use(['module1','module2'],function(){//回调函数中获取模块varmod1=layui.module1;varmod2=layui.module2;//模块功能调用mod
  • 前端基础知识Vue3系列 - 04（Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同）
    开始之前CompositionAPI可以说是Vue3的最大特点，那么为什么要推出CompositionApi，解决了什么问题？通常使用Vue2开发的项目，普遍会存在以下问题：代码的可读性随着组件变大而变差每一种代码复用的方式，都存在缺点TypeScript支持有限以上通过使用CompositionApi都能迎刃而解正文一、OptionsApiOptionsAPI，即大家常说的选项API，即以vue
  • Vue 工程化开发入门 dawn191228 前端学习vue.js前端javascript前端框架
    文章目录一、Vue工程化开发概述二、Vue脚手架三、项目运行流程四、组件化开发五、组件注册六、总结在当今的前端开发领域，Vue.js以其简洁、高效的特性受到了广泛的欢迎。Vue的工程化开发能够帮助我们更好地组织和管理项目，提高开发效率和代码质量。本文将带你了解Vue工程化开发入门知识，包括脚手架、项目运行流程、组件化以及组件注册。一、Vue工程化开发概述工程化开发是一种将软件开发过程规范化、标准化
  • Algorithm 香水浓 javaAlgorithm
    冒泡排序 public static void sort(Integer[] param) { for (int i = param.length - 1; i > 0; i--) { for (int j = 0; j < i; j++) { int current = param[j]; int next = param[j + 1];
  • mongoDB 复杂查询表达式 开窍的石头 mongodb
    1:count    Pg: db.user.find().count();    统计多少条数据 2:不等于$ne    Pg: db.user.find({_id:{$ne:3}},{name:1,sex:1,_id:0});    查询id不等于3的数据。 3：大于$gt $gte(大于等于) &n
  • Jboss Java heap space异常解决方法, jboss OutOfMemoryError : PermGen space 0624chenhong jvmjboss
    转自 http://blog.csdn.net/zou274/article/details/5552630 解决办法： window->preferences->java->installed jres->edit jre 把default vm arguments 的参数设为-Xms64m -Xmx512m ----------------
  • 文件上传 下载 解析 相对路径 不懂事的小屁孩 文件上传
    有点坑吧，弄这么一个简单的东西弄了一天多，身边还有大神指导着，网上各种百度着。 下面总结一下遇到的问题： 文件上传，在页面上传的时候，不要想着去操作绝对路径，浏览器会对客户端的信息进行保护，避免用户信息收到攻击。 在上传图片，或者文件时，使用form表单来操作。 前台通过form表单传输一个流到后台，而不是ajax传递参数到后台，代码如下: <form action=&
  • 怎么实现qq空间批量点赞 换个号韩国红果果 qq
    纯粹为了好玩！！ 逻辑很简单 1 打开浏览器console；输入以下代码。 先上添加赞的代码 var tools={}; //添加所有赞 function init(){ document.body.scrollTop=10000; setTimeout(function(){document.body.scrollTop=0;},2000);//加
  • 判断是否为中文 灵静志远 中文
    方法一： public class Zhidao { public static void main(String args[]) { String s = "sdf灭礌 kjl d{';\fdsjlk是"; int n=0; for(int i=0; i<s.length(); i++) { n = (int)s.charAt(i); if((
  • 一个电话面试后总结 a-john 面试
    今天，接了一个电话面试，对于还是初学者的我来说，紧张了半天。 面试的问题分了层次，对于一类问题，由简到难。自己觉得回答不好的地方作了一下总结：   在谈到集合类的时候，举几个常用的集合类，想都没想，直接说了list,map。   然后对list和map分别举几个类型：   list方面：ArrayList,LinkedList。在谈到他们的区别时，愣住了
  • MSSQL中Escape转义的使用 aijuans MSSQL
    IF OBJECT_ID('tempdb..#ABC') is not null drop table tempdb..#ABC create table #ABC ( PATHNAME NVARCHAR(50) ) insert into #ABC SELECT N'/ABCDEFGHI' UNION ALL SELECT N'/ABCDGAFGASASSDFA' UNION ALL
  • 一个简单的存储过程 asialee mysql存储过程构造数据批量插入
               今天要批量的生成一批测试数据，其中中间有部分数据是变化的，本来想写个程序来生成的，后来想到存储过程就可以搞定，所以随手写了一个，记录在此：            DELIMITER $$ DROP PROCEDURE IF EXISTS inse
  • annot convert from HomeFragment_1 to Fragment 百合不是茶 android导包错误
    创建了几个类继承Fragment, 需要将创建的类存储在ArrayList<Fragment>中; 出现不能将new 出来的对象放到队列中,原因很简单;     创建类时引入包是:import android.app.Fragment;      创建队列和对象时使用的包是:import android.support.v4.ap
  • Weblogic10两种修改端口的方法 bijian1013 weblogic端口号配置管理config.xml
    一.进入控制台进行修改    1.进入控制台:  http://127.0.0.1:7001/console     2.展开左边树菜单         域结构->环境->服务器-->点击AdminServer(管理) &
  • mysql 操作指令 征客丶 mysql
    一、连接mysql 进入 mysql 的安装目录； $ bin/mysql -p [host IP 如果是登录本地的mysql 可以不写 -p 直接 -u] -u [userName] -p 输入密码，回车，接连； 二、权限操作［如果你很了解mysql数据库后，你可以直接去修改系统表，然后用 mysql> flush privileges; 指令让权限生效］ 1、赋权 mys
  • 【Hive一】Hive入门 bit1129 hive
    Hive安装与配置 Hive的运行需要依赖于Hadoop，因此需要首先安装Hadoop2.5.2，并且Hive的启动前需要首先启动Hadoop。   Hive安装和配置的步骤   1. 从如下地址下载Hive0.14.0   http://mirror.bit.edu.cn/apache/hive/    2.解压hive，在系统变
  • ajax 三种提交请求的方法 BlueSkator Ajaxjqery
    1、ajax 提交请求 $.ajax({ type:"post", url : "${ctx}/front/Hotel/getAllHotelByAjax.do", dataType : "json", success : function(result) { try { for(v
  • mongodb开发环境下的搭建入门 braveCS 运维
      linux下安装mongodb 1）官网下载mongodb-linux-x86_64-rhel62-3.0.4.gz 2）linux 解压  gzip -d mongodb-linux-x86_64-rhel62-3.0.4.gz; mv mongodb-linux-x86_64-rhel62-3.0.4 mongodb-linux-x86_64-rhel62-
  • 编程之美-最短摘要的生成 bylijinnan java数据结构算法编程之美
    import java.util.HashMap; import java.util.Map; import java.util.Map.Entry; public class ShortestAbstract { /** * 编程之美 最短摘要的生成 * 扫描过程始终保持一个[pBegin,pEnd]的range,初始化确保[pBegin,pEnd]的ran
  • json数据解析及typeof chengxuyuancsdn jstypeofjson解析
    // json格式 var people='{"authors": [{"firstName": "AAA","lastName": "BBB"},' +' {"firstName": "CCC&
  • 流程系统设计的层次和目标 comsci 设计模式数据结构sql框架脚本
                                  流程系统设计的层次和目标  
  • RMAN List和report 命令 daizj oraclelistreportrman
    LIST 命令 使用RMAN LIST 命令显示有关资料档案库中记录的备份集、代理副本和映像副本的 信息。使用此命令可列出： • RMAN 资料档案库中状态不是AVAILABLE 的备份和副本 • 可用的且可以用于还原操作的数据文件备份和副本 • 备份集和副本，其中包含指定数据文件列表或指定表空间的备份 • 包含指定名称或范围的所有归档日志备份的备份集和副本 • 由标记、完成时间、可
  • 二叉树:红黑树 dieslrae 二叉树
        红黑树是一种自平衡的二叉树,它的查找,插入,删除操作时间复杂度皆为O(logN),不会出现普通二叉搜索树在最差情况时时间复杂度会变为O(N)的问题.     红黑树必须遵循红黑规则,规则如下     1、每个节点不是红就是黑。     2、根总是黑的  &
  • C语言homework3，7个小题目的代码 dcj3sjt126com c
    1、打印100以内的所有奇数。 # include <stdio.h> int main(void) { int i; for (i=1; i<=100; i++) { if (i%2 != 0) printf("%d ", i); } return 0; }  2、从键盘上输入10个整数，
  • 自定义按钮, 图片在上, 文字在下, 居中显示 dcj3sjt126com 自定义
    #import <UIKit/UIKit.h> @interface MyButton : UIButton -(void)setFrame:(CGRect)frame ImageName:(NSString*)imageName Target:(id)target Action:(SEL)action Title:(NSString*)title Font:(CGFloa
  • MySQL查询语句练习题，测试足够用了 flyvszhb sqlmysql
    http://blog.sina.com.cn/s/blog_767d65530101861c.html 1.创建student和score表 CREATE  TABLE  student ( id  INT(10)  NOT NULL  UNIQUE  PRIMARY KEY  , name  VARCHAR
  • 转：MyBatis Generator 详解 happyqing mybatis
      MyBatis Generator 详解 http://blog.csdn.net/isea533/article/details/42102297   MyBatis Generator详解 http://git.oschina.net/free/Mybatis_Utils/blob/master/MybatisGeneator/MybatisGeneator.
  • 让程序员少走弯路的14个忠告 jingjing0907 工作计划学习
      无论是谁，在刚进入某个领域之时，有再大的雄心壮志也敌不过眼前的迷茫：不知道应该怎么做，不知道应该做什么。下面是一名软件开发人员所学到的经验，希望能对大家有所帮助   1.不要害怕在工作中学习。 只要有电脑，就可以通过电子阅读器阅读报纸和大多数书籍。如果你只是做好自己的本职工作以及分配的任务，那是学不到很多东西的。如果你盲目地要求更多的工作，也是不可能提升自己的。放
  • nginx和NetScaler区别 流浪鱼 nginx
    NetScaler是一个完整的包含操作系统和应用交付功能的产品，Nginx并不包含操作系统，在处理连接方面，需要依赖于操作系统，所以在并发连接数方面和防DoS攻击方面，Nginx不具备优势。 2.易用性方面差别也比较大。Nginx对管理员的水平要求比较高，参数比较多，不确定性给运营带来隐患。在NetScaler常见的配置如健康检查，HA等，在Nginx上的配置的实现相对复杂。 3.策略灵活度方
  • 第11章 动画效果（下） onestopweb 动画
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • FAQ - SAP BW BO roadmap blueoxygen BOBW
    http://www.sdn.sap.com/irj/boc/business-objects-for-sap-faq   Besides, I care that how to integrate tightly.   By the way, for BW consultants, please just focus on Query Designer which i
  • 关于java堆内存溢出的几种情况 tomcat_oracle javajvmjdkthread
    【情况一】： 　　 java.lang.OutOfMemoryError: Java heap space：这种是java堆内存不够，一个原因是真不够，另一个原因是程序中有死循环； 　　如果是java堆内存不够的话，可以通过调整JVM下面的配置来解决： 　　<jvm-arg>-Xms3062m</jvm-arg> 　　<jvm-arg>-Xmx
  • Manifest.permission_group权限组 阿尔萨斯 Permission
    结构 继承关系 public static final class Manifest.permission_group extends Object java.lang.Object android. Manifest.permission_group 常量 ACCOUNTS 直接通过统计管理器访问管理的统计 COST_MONEY可以用来让用户花钱但不需要通过与他们直接牵涉的权限 D