目录
一、DOM概念
二、节点层次
三、Node类型
四、Document类型
五、Element类型
六、Text类型
八、CDATASection类型
九、DocumentType类型
十、DocumentFragment类型
十一、Attr类型
十二、表格DOM
十三、总结中的小结
一、DOM概念
DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口)。DOM将HTML页面描绘成一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。
1998年DOM1级 规范称为W3C的推荐标准。DOM1级 为基本文档结构及查询提供了接口,DOM1级 的目标主要是映射文档的结构。
IE、Firefox、Safari、Chrome和Opera都非常完善地实现了DOM。
二、节点层次
DOM可以将任何HTML或XML文档描绘成一个由多层节点 构成的结构。
节点分为几种不同的类型,每种类型分别标识文档中不同的信息及标记。
每个节点都拥有各自的特点、数据和方法,另外也与其他节点存在某种关系。
所有页面标记表现为一个以特定节点为根节点的树形结构,文档节点 就是每个文档的根节点。
文档节点只有一个子节点,即元素,称为文档元素 ,文档元素是文档的最外层元素。
三、Node类型
DOM1级定义了一个Node接口 ,该接口在JavaScript中是作为Node类型 实现的。
JavaScript中的所有节点类型都继承自Node类型,因此所有节点类型都共享着相同的基本属性和方法 。
1、属性
节点类型由Node类型中定义的下列12个数值常量来表示:
Node.ELEMENT_NODE(1)
Node.ATTRIBUTE_NODE(2)
Node.TEXT_NODE(3)
Node.CDATA_SELECTION_NODE(4)
Node.ENTITY_REFERENCE_NODE(5)
Node.PROCESSING_INSTRUCTION_NODE(7)
Node.COMMENT_NODE(8)
Node.DOCUMENT_NODE(9)
Node.DOCUMENT_TYPE_NODE(10)
Node.DOCUMENT_FRAGMENT_NODE(11)
Node.NOTATION_NODE(12)
nodeName —— 节点名
nodeValue —— 节点值
childNodes —— 返回保存子节点的NodeList对象
parentNode —— 指向父节点
firstChild —— 指向第一个子节点
lastChild —— 指向最后一个子节点
previousSibling —— 指向前一个兄弟节点
nextSibling —— 指向后一个兄弟节点
ownerDocument —— 指向文档节点
2、方法
hasChildNodes() —— 是否包含子节点
appendChild(newNode) —— 在子节点末尾添加新节点
insertBefore(newNode, someNode) —— 在某个子节点前添加一个新的子节点
replaceChild(newNode, oldNode) —— 使用新节点替换旧节点
removeChild(someNode) —— 删除某个节点
cloneNode() | cloneNode(true) —— 浅复制,即只复制节点本身 | 深复制,即复制节点及其整个子节点树
normalize() —— 删除空文本节点或者合并相邻的文本节点
四、Document类型
JavaScript通过Document类型表示文档。
在浏览器中,document对象 是HTMLDocument (继承自Document类型 )的一个实例,表示整个HTML页面。
而且,document对象是window对象 的一个属性
1、Document节点的特征
nodeType的值是9
nodeName的值为"#document"
nodeValue的值为null
parentNode的值为null
ownerDocument的值为null
2、属性
documentElement —— 指向元素,即文档元素
body —— 指向元素
doctype —— 指向文档类型标签
title —— 包含元素中的文本
URL —— 包含页面完整的URL
domain —— 包含页面的域名
referrer —— 保存着链接到当前页面的那个页面的URL
anchors —— 包含文档中所有带有name特性的元素
forms —— 包含文档中所有的
images —— 包含文档中所有的 元素
links —— 包含文档中所有带href特性的元素
3、方法
getElementById() —— 使用元素id获取该元素对象
getElementsByTagName() —— 返回对应标签名元素组成的HTMLCollection对象
getElementsByName() —— 返回对应name特性的元素组成的NodeList对象
implementation.hasFeature(功能,版本号) —— 监测浏览器支持的功能和版本
write() | writeln() —— 写入文档
open() —— 打开网页的输出流
close() —— 关闭网页的输出流
createElement() —— 创建元素节点
createTextNode() —— 创建文本节点
createComment() —— 创建注释节点
createCDataSection() —— 创建CDATASection节点
createDocumentFragment() —— 创建文档片段节点
createAttribute() —— 创建特性节点
五、Element类型
所有HTML元素都由HTMLElement 类型表示,不是直接通过这个类型,也是通过它的子类型来表示。
HTML类型直接继承自Element 并添加了一些属性。
Element类型提供了对元素标签名、子节点及特性的访问。
1、ELEMENT节点的特征
nodeType的值为1
nodeName的值为元素的标签名
nodeValue的值为null
parentNode可能是Document或Element
2、属性
只有公认的(非自定义的)特性才会以属性的形式添加到DOM对象中。
style特性通过getAttribute()访问时,返回的style特性值中包含的是CSS文本,而通过style属性来访问它则会返回一个对象。
onclick特性通过getAttribute()访问时,返回的onclick特性值总包含的是相应代码的字符串,而通过onclick属性来访问它则返回相应的函数
id —— 元素在文档中的唯一标识符
title —— 有关元素的附加说明信息,一般通过工具提示条显示出来
className —— 与元素的class特性对应,即为元素指定的css类
style —— 与元素的style特性对应
onclick —— 与元素的onclick特性对应
attributes ‘—— 保存元素的各个特性
attributes属性的各个方法:
getNamedItem(name) —— 返回nodeName属性等于name的节点
removeNamedItem(name) —— 从列表移除nodeName属性等于name的节点
setNamedItem(node) —— 向列表中添加节点,以节点的nodeName属性为索引
item(pos) —— 返回位于数字pos位置处的节点
3、方法
setAttribute(attr, value) —— 设置元素的特性
getAttribute(att) —— 获取元素的特性
removeAttribute(attr) —— 移除元素的特性
setAttributeNode() —— 添加特性节点
getAttributeNode() —— 获取特性节点
六、Text类型
文本节点由Text类型 表示,包含的是可以按照字面解释的纯文本内容。
纯文本中可以包含转义后的HTML字符,但不能包含HTML代码。
1、Text节点的特征
nodeType的值为3
nodeName的值为"#text"
nodeValue的值为节点所包含的文本
parentNode是一个Element
不支持(没有)子节点
2、属性
data —— 可以通过nodeValue属性或data属性访问文本节点中包含的文本
length —— 文本节点中字符的数目
3、方法
appendData(text) —— 将text添加到节点的末尾
deleteData(offset,count) —— 从offset指定的位置开始删除count个字符
insertData(offset,text) —— 在offset指定的位置插入text
replaceData(offset, count, text) —— 用text替换从offset指定的位置开始到offset+count为止处的文本
splitText(offset) —— 从offset指定的位置将当前文本节点分成两个文本节点
substringData(offset, count) —— 提取从offset指定的位置开始到offset+count为止处的字符串
注释在DOM中是通过Comment类型来表示的。
1、Comment节点的特征
nodeType的值为8
nodeName的值为"#comment"
nodeValue的值是注释的内容
parentNode可能是Document或Element
不支持(没有)子节点
2、属性和方法
Comment类型与Text类型继承自相同的基类,因此它拥有除splitText()之外的所有字符串操作方法。
与Text类型相似,也可以通过nodeValue或data属性来取得注释的内容。
八、CDATASection类型
CDATASection类型只针对基于XML 的文档,表示的是CDATA区域。
1、CDATASection节点的特征
nodeType的值为4
nodeName的值为"#cdata-section"
nodeValue的值是CDATA区域中的内容
parentNode可能是Document或Element
不支持(没有)子节点
2、属性和方法
CDATASection类型继承自Text类型,因此拥有除splitText()之外的所有字符串操作方法。
九、DocumentType类型
DocumentType包含着与文档的doctype有关的所有信息
1、DocumentType节点的特征
nodeType的值为10
nodeName的值为doctype的名称
nodeValue的值为null
parentNode是Document
不支持(没有)子节点
2、属性
十、DocumentFragment类型
DOM规定文档片段(document fragment)是一种“轻量级”的文档,可以包含和控制节点,但不会像完整的文档那样占用额外的资源。
可以将文档片段作为一个“仓库”来使用,即可以在里面保存将来可能会添加到文档中的节点。
1、DocumentFragment节点的特征
nodeType的值为11
nodeName的值为"#document-fragment"
nodeValue的值为null
parentNode的值为null
子节点可以是Element、ProcessingInstruction、Comment、Text、CDATASection或EntityReference
十一、Attr类型
元素的特性在DOM中以Attr类型 来表示。
尽管Attr节点也是节点,但它们却不被认为是DOM文档树的一部分。
1、Attr节点的特征
nodeType的值为2
nodeName的值是特性的名称
nodeValue的值是特性的值
parentNode的值为null
在HTML中不支持(没有)子节点
2、属性
name —— 特性名称
value —— 特性的值
specified —— 用于区别特性是在代码中指定的,还是默认的
十二、表格DOM
1、元素的属性和方法
caption —— 保存着对元素(如果有)的指针
tBodies —— 是一个元素的HTMLCollection
tFoot —— 保存着对元素(如果有)的指针
tHead —— 保存着对元素(如果有)的指针
rows —— 是一个表格中所有行的HTMLCollection
createTHead() —— 创建元素,将其放到表格中,返回引用
createTFoot() —— 创建元素,将其放到表格中,返回引用
createCaption() —— 创建元素,将其放到表格中,返回引用
deleteTHead() —— 删除元素
deleteTFoot() —— 删除元素
deleteCaption() —— 删除元素
deleteRow(pos) —— 删除指定位置的行
insertRow(pos) —— 向row集合中的指定位置插入一行
2、元素的属性和方法
rows —— 保存着元素中行的HTMLCollection
deleteRow(pos) —— 删除指定位置的行
insertRow(pos) —— 向rows集合中的指定位置插入一行,返回对新插入行的引用
3、元素的属性和方法
cells —— 保存着元素中单元格的HTMLCollection
deleteCell(pos) —— 删除指定位置的单元格
insertCell(pos) —— 向cells集合中的指定位置插入一个单元格,返回对新插入单元格的引用
十三、总结中的小结
最基本的节点类型是Node ,用于抽象地表示文档中一个独立的部分;所有其他类型都继承自Node。
Document 类型表示整个文档,是一组分层节点的根节点。在JavaScript中,document对象是Document的一个实例。使用document,有很多中方式可以查询和取得节点。
Element 节点表示文档中的所有HTML或XML元素,可以用来操作这些元素的内容和特性。
另外还有一些节点类型,分别表示文本内容、注释、文档类型、CDATA区域和文档片段。
你可能感兴趣的:(Javascript)
移动端城市区县二级联动选择功能实现包
good2know
本文还有配套的精品资源,点击获取简介:本项目是一套为移动端设计的jQuery实现方案,用于简化用户在选择城市和区县时的流程。它包括所有必需文件:HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项,实现城市到区县的联动效果,支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用,并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery
用代码生成艺术字:设计个性化海报的秘密
本文围绕“用代码生成艺术字:设计个性化海报的秘密”展开,先概述代码生成艺术字在海报设计中的独特价值,接着介绍常用的代码工具(如HTML、CSS、JavaScript等),详细阐述从构思到实现的完整流程,包括字体样式设计、动态效果添加等,还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势,为设计师提供打造个性化海报的实用指南,助力提升海报设计的独特性与吸引力,符合搜索引擎SEO标准
为什么学习Web前端一定要掌握JavaScript?
web前端学习指南
为什么学习Web前端一定要掌握JavaScript?在前端的世界里,没有什么是JavaScript实现不了的,关于JS有一句话:凡是可以用JavaScript来写的应用,最终都会用JavaScript,JavaScript可运行在所有主要平台的所有主流浏览器上,也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。
Vue CSR 到 Nuxt 3 SSR 迁移:技术实现与问题解决实录
二倍速播放
前端 vue.js
1.迁移动机与技术选型1.1CSR架构的局限性基于Vue3和Vite构建的客户端渲染(CSR)单页应用(SPA)提供了良好的开发体验和用户交互流畅性。但是其核心局限在于:搜索引擎优化(SEO):初始HTML响应仅包含一个根div元素,实际内容由JavaScript在浏览器端动态生成。虽然主流搜索引擎(如Google)能够执行部分JavaScript,但其抓取效率和稳定性不如直接获取完整HTML。非
12. 什么是事件委托
yqcoder
前端面试-CSS css 面试
总结事件委托(EventDelegation)是JavaScript中一种重要的事件处理机制,它利用了事件冒泡的特性,将事件的处理程序绑定到父元素或祖先元素上,而不是直接绑定到具体的子元素上。什么是事件委托?事件冒泡:在DOM中,事件通常会从触发元素开始,然后逐级向上冒泡到其父元素、祖先元素,直到window对象。核心思想:事件委托的核心思想是利用事件冒泡机制,在父元素上监听事件,而不是在每个子元
关于前端的性能优化
性能优化主要涵盖了以下四个方面:(tip:仅代表个人总结,如有不当,还希望看到的大佬多多指示)减少网络请求:合并文件、使用CDN、启用缓存。优化资源加载:代码分割、懒加载、图片压缩。提升渲染性能:减少重绘回流、防抖节流、使用WebWorker。监控和迭代:定期使用工具检测性能,持续优化。一、网络层面优化减少HTTP请求合并文件:将多个CSS或JavaScript文件合并成一个,减少请求次数。使用C
时间组件库Day.js那些事
前端小白花
javascript 开发语言 ecmascript
一、简介1.什么是Day.jsDay.js是一个轻量级,易于使用的JavaScript日期库,提供了强大的日期和时间处理功能,与Moment.js的API设计相似,但具有更高的性能和更小的体积。Day.js官网https://day.js.org/docs/zh-CN/installation/installation2.优势a.特点轻量级:Dayjs的压缩后大小只有2KB左右,远小于Moment
JavaScript正则表达式去除括号但保留内容与去除括号与内容
Selicens
javascript 正则表达式
项目上碰到一个需求,是取多个递增文件的文件名,类似于test(1).txt、test(2).txt,但是不需要括号,只要test1、test2这种格式,最开始想到的办法就是js里的replace替换,先上一个比较笨但是也能实现效果的例子letname="test(1).txt"letdata=name.split('.')[0].replace('(','').replace(')','')con
网络安全第14集
不灭锦鲤
web安全 安全
前言:小迪安全14集,这集重点内容:0、什么是js渗透测试?在javascript中也存在变量和函数,存在可控变量和函数就有可能存在在漏洞,js开发的web应用和php、java开发的区别是,js能看得到的源代码,php看不到,但是风险就是未授权访问、配置信息泄露(加密算法、key秘钥等),源代码看得到,存在更多的url泄露,从而可能会出现未授权访问,从url,前提:web应用可以采用前端语言或后
25年不倒的“犀牛书“:为什么《JavaScript权威指南第7版》仍是程序员的案头圣经?
阿蒙Armon
javascript 开发语言 ecmascript
25年不倒的"犀牛书":为什么《JavaScript权威指南第7版》仍是程序员的案头圣经?当一本技术书能连续畅销25年,历经7次迭代仍稳坐领域第一梯队,它必然藏着超越时代的硬实力。《JavaScript权威指南(原书第7版)》就是这样一部传奇——豆瓣9.4分的封神之作,程序员口中的"犀牛书",从网景时代到ES2020,它始终是JavaScript开发者的终极参考书。如果你还在为原型链、闭包、异步编
什么是JSON,如何与Java对象转化
doublez234
java json spring spring boot
JSON概念JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。它易于人阅读和编写,同时也易于机器解析和生成。JSON基于JavaScript(ECMAScript(欧洲计算机协会制定的js规范))编程语言的一个子集,但它是一种独立于语言的数据格式,被广泛应用于各种编程语言和平台之间的数据交换。JSON的主要特点:轻量级:JSON格式非常简洁,只包含必要的数据信
APP开发入门:了解主流的编程语言
agi大模型
Python 职业与职场 程序员 开发语言 数据分析 编程语言
前言在过去的几年里,有许多程序员开始学习和使用编程语言。这其中包括C、C++、Java和Python。尽管有许多语言可供选择,但大多数程序员都会选择最容易学习的编程语言。如今,有很多编程语言供选择。程序员们在学习这些语言时可以自由地选择他们喜欢的方式,因为他们的目标是构建任何软件,而不仅仅是创建一个应用程序。你可以在Linux上学习C/C++、Java、Python、C#或JavaScript,你
探秘CommonJS:Node.js模块化核心解析
CommonJS是JavaScript的模块化规范,主要应用于服务器端环境(尤其是Node.js),其核心目标是解决代码组织、依赖管理和作用域隔离问题。以下是其核心要点:一、核心特性同步加载模块通过require()同步加载并执行,后续代码需等待模块加载完成后执行,适用于I/O快速的服务器环境(如本地文件读取)。作用域隔离每个文件视为独立模块,模块内定义的变量、函数默认私有(不污染全局作用域),仅
壹脉销客AI电子名片源码核心架构
为什么选择源码部署AI电子名片?在数字化转型浪潮中,越来越多的企业意识到拥有自主可控的电子名片系统的重要性。源码部署相比SaaS服务具有三大核心优势:数据完全自主-客户信息存储在企业自有服务器深度定制自由-可根据业务需求二次开发长期成本优化-一次部署永久使用壹脉销客AI电子名片源码核心架构壹脉销客提供的企业级电子名片解决方案采用前后端分离架构:前端技术栈(小程序端)javascript//小程序a
vue 进入一个页面,然后离开这个页面他就重新加载
Java&Develop
vue vue
vue进入一个页面,然后离开这个页面他就重新加载这个代码导致的注释即可window.location.reload();window.location.reload()是JavaScript中的一个方法,用于强制刷新当前页面(重新加载页面内容)。其作用类似于用户手动点击浏览器的刷新按钮,但可以通过代码精确触发。核心作用:刷新页面重新加载当前显示的文档(即重新请求当前URL的资源)。可选参数控制缓存
[python][flask]flask静态资源
在Flask中,静态资源(如图片、CSS文件、JavaScript文件等)通常存储在项目的static文件夹中。Flask会自动为静态资源提供服务,使得你可以通过URL访问这些文件。以下是关于Flask中静态资源的使用方法和一些高级配置。1.默认静态文件夹Flask默认会将项目根目录下的static文件夹作为静态资源目录。例如,如果你的项目结构如下:my_flask_app/│├──app.py├
JavaScript对象与Math对象完全指南
hui函数
Javascript javascript 前端 开发语言
JavaScript对象与Math对象完全指南对象基础概念与操作对象是什么?数据集合:包含相关数据和功能的容器结构组成:属性:描述对象特征的变量(名词性)方法:对象可执行的操作(动词性,本质是函数)对象创建与访问//创建对象letperson={ //属性 name:"张三", age:28, profession:"软件工程师", //方法 introduce(){ return`大家好,我
深入理解JavaScript作用域与编译过程
君子心理
作用域 编译 JavaScript 变量提升 闭包
背景简介在编程领域,作用域和编译过程是理解语言机制的关键概念。JavaScript作为一种广泛使用的语言,其作用域规则和编译机制尤其值得我们深入探讨。本文将基于《你不懂JS》系列书籍中的相关内容,解析JavaScript的作用域系统、函数闭包以及编译过程,帮助读者获得更深层次的理解。作用域是什么?在JavaScript中,作用域定义了变量和函数的可访问范围。编写程序时,我们会频繁使用变量来存储和操
掌握JavaScript对象与函数:深入理解原型与作用域
土城三富
JavaScript 对象 原型链 函数 作用域
掌握JavaScript对象与函数:深入理解原型与作用域背景简介在探索JavaScript的世界时,我们经常遇到对象和函数这两个核心概念。对象是JavaScript中最为基本的结构之一,而函数则是实现代码复用、封装和模块化的主要工具。本文将基于给定的书籍章节内容,深入探讨对象的更新机制、原型继承以及函数的多样性及其调用模式,同时分享对全局变量使用的思考。更新对象在JavaScript中,对象的属性
JavaScript函数使用模式与作用域的深入解析
JavaScript函数使用模式与作用域的深入解析JavaScript作为一门灵活且功能强大的编程语言,其函数的使用和作用域的特性是学习和开发中的关键点。本篇博客将深入解析JavaScript函数的几种使用模式,以及作用域的重要概念。构造器模式在JavaScript中,函数可以作为构造器(constructor)使用,当用new关键字调用时,函数会返回一个新对象。为了区分构造器函数和其他普通函数,
掌握JavaScript函数和作用域:提高代码复用性
捕风捉你
javascript 开发语言 ecmascript
在JavaScript编程中,函数是一个核心概念,它不仅能帮助我们将代码组织得更加清晰,还能提高代码的复用性。理解函数的定义与调用、掌握作用域的概念,对于编写高效和可维护的代码至关重要。本文将通过创建一个计时器应用的案例,帮助你全面掌握JavaScript中的函数和作用域知识。任务目标通过本教程,你将学习并掌握:函数的声明与调用函数表达式的使用作用域的概念及其在函数中的应用闭包的原理及实践学习内容
JavaScript 函数与作用域
前端人类学
JavaScript - 行为 javascript 函数 作用域 闭包 递归 作用域链
Hi,我是布兰妮甜!JavaScript是一种动态类型语言,它支持面向对象编程和函数式编程。函数是JavaScript的核心组成部分之一,而作用域则决定了变量的可见性和生命周期。本文将详细介绍JavaScript中的函数定义、调用、参数传递、闭包、递归以及作用域链的概念。文章目录一、函数基础二、作用域基础三、闭包四、递归五、作用域链六、总结一、函数基础1.定义函数函数声明函数可以通过函数声明的方式
深入理解作用域【JavaScript】
陆仟
Web前端开发 javascript
一、作用域的内部原理JavaScript的作用域机制是理解变量如何被访问和存储的重要概念。下面详细介绍作用域的内部原理,包括编译、执行、查询、嵌套和异常处理这五个步骤。1.编译在JavaScript的执行过程中,首要的步骤是编译。尽管JavaScript是解释性语言,但现代JavaScript引擎(如V8)在执行代码前会先进行编译。编译阶段主要完成以下几项工作:词法分析:将源代码分解成语法单元(t
即便你已经在浏览器中启用了 JavaScript有时网页依然可能出现功能失效、内容加载不完整或按钮点击无反应等问题。这些问题通常由 JavaScript 冲突
即便你已经在浏览器中启用了JavaScript有时网页依然可能出现功能失效、内容加载不完整或按钮点击无反应等问题。这些问题通常由JavaScript冲突、浏览器设置不当或插件干扰等原因引起。作为HostEase的技术人员我将为你提供一系列简单有效的JavaScript故障排除方法帮助你快速定位并解决这些问题。禁用可能干扰JavaScript的浏览器扩展,广告拦截器,安全插件或某些脚本管理器可能会干
技术文章大纲:Anaconda插件开发挑战赛引言介绍Anaconda在数据科学和PythonUH开发中的重要性
aadwje
eclipse ide
即便你已经在浏览器中启用了JavaScript有时网页依然可能出现功能失效、内容加载不完整或按钮点击无反应等问题。这些问题通常由JavaScript冲突、浏览器设置不当或插件干扰等原因引起。作为HostEase的技术人员我将为你提供一系列简单有效的JavaScript故障排除方法帮助你快速定位并解决这些问题。禁用可能干扰JavaScript的浏览器扩展,广告拦截器,安全插件或某些脚本管理器可能会干
深入分析 Node.js 的 V8 引擎如何在内部处理 JavaScript 代码,包括内存管理和垃圾回收机制。
海派程序猿
node.js javascript 开发语言
各位观众老爷们,晚上好!今天咱们就来聊聊Node.js的大心脏——V8引擎,看看它到底是怎么把咱们写的JavaScript代码给“消化”掉的。别害怕,今天咱不搞那些生涩难懂的学院派理论,尽量用大白话,外加一些“栗子”,保证让你听得津津有味。V8引擎:JavaScript的超级翻译官首先,简单介绍一下V8。V8是Google开发的高性能JavaScript和WebAssembly引擎,用C++写的。
Tailwind CSS 响应式设计实战指南
qcidyu
用户体验 代码优化 移动优先 网站布局 前端开发 Tailwind CSS 响应式设计
title:TailwindCSS响应式设计实战指南date:2024/6/13updated:2024/6/13author:cmdragonexcerpt:这篇文章介绍了如何运用TailwindCSS框架创建响应式网页设计,涵盖博客、电商网站及企业官网的布局实例,包括头部导航、内容区域、侧边栏、页脚及轮播图等组件的响应式实现。同时,探讨了与JavaScript框架集成、CSS预处理器配合、设计
JavaScript核心概念全解析
目录1.作用域(1)局部作用域(2)全局作用域2.垃圾回收(1)引用计数法(2)标记清除法3.闭包(1)作用(2)风险4.变量提升(1)var(2)let和const(3)const5.函数提升(1)函数声明(2)函数表达式6.函数参数(1)动态参数(2)剩余参数(3)展开运算符7.必须加分号的两种情况(1)立即执行函数(2)使用数组的时候8.箭头函数(1)特点9.Symbol10.生成器函数11
IntelliJ IDEA 高效开发指南:从基础操作到高级技巧
zqmgx13291
intellij-idea java ide
一、IDEA概述与环境配置1.1IDEA的核心优势智能代码辅助:基于上下文的代码补全(Ctrl+Space)、方法参数提示、错误实时检测全栈开发支持:内置Java/Python/JavaScript等20+语言支持,框架集成(SpringBoot/Vue/React)工具链集成:版本控制(Git/SVN)、数据库(MySQL/PostgreSQL)、容器(Docker/K8s)一站式开发性能优化:
【前端】JavaScript 的事件循环 (Event Loop)
不懂可否
前端 前端 javascript 开发语言
JavaScript的事件循环(EventLoop)是其实现异步编程的核心机制,即使JS是单线程语言,它也能高效处理I/O、网络请求、计时器等非阻塞操作。以下是其工作原理的精要解析:核心概念单线程执行JS引擎(如V8)只能顺序执行一个任务。异步行为需要靠宿主环境(浏览器/Node.js)提供的事件循环调度。任务队列(TaskQueue)所有异步操作完成后对应的回调函数会进入队列等待执行。队列类型包
java类加载顺序
3213213333332132
java
package com.demo;
/**
* @Description 类加载顺序
* @author FuJianyong
* 2015-2-6上午11:21:37
*/
public class ClassLoaderSequence {
String s1 = "成员属性";
static String s2 = "
Hibernate与mybitas的比较
BlueSkator
sql Hibernate 框架 ibatis orm
第一章 Hibernate与MyBatis
Hibernate 是当前最流行的O/R mapping框架,它出身于sf.net,现在已经成为Jboss的一部分。 Mybatis 是另外一种优秀的O/R mapping框架。目前属于apache的一个子项目。
MyBatis 参考资料官网:http:
php多维数组排序以及实际工作中的应用
dcj3sjt126com
PHP usort uasort
自定义排序函数返回false或负数意味着第一个参数应该排在第二个参数的前面, 正数或true反之, 0相等usort不保存键名uasort 键名会保存下来uksort 排序是对键名进行的
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8&q
DOM改变字体大小
周华华
前端
<!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/1999/xhtml&q
c3p0的配置
g21121
c3p0
c3p0是一个开源的JDBC连接池,它实现了数据源和JNDI绑定,支持JDBC3规范和JDBC2的标准扩展。c3p0的下载地址是:http://sourceforge.net/projects/c3p0/这里可以下载到c3p0最新版本。
以在spring中配置dataSource为例:
<!-- spring加载资源文件 -->
<bean name="prope
Java获取工程路径的几种方法
510888780
java
第一种:
File f = new File(this.getClass().getResource("/").getPath());
System.out.println(f);
结果:
C:\Documents%20and%20Settings\Administrator\workspace\projectName\bin
获取当前类的所在工程路径;
如果不加“
在类Unix系统下实现SSH免密码登录服务器
Harry642
免密 ssh
1.客户机
(1)执行ssh-keygen -t rsa -C "xxxxx@xxxxx.com"生成公钥,xxx为自定义大email地址
(2)执行scp ~/.ssh/id_rsa.pub root@xxxxxxxxx:/tmp将公钥拷贝到服务器上,xxx为服务器地址
(3)执行cat
Java新手入门的30个基本概念一
aijuans
java java 入门 新手
在我们学习Java的过程中,掌握其中的基本概念对我们的学习无论是J2SE,J2EE,J2ME都是很重要的,J2SE是Java的基础,所以有必要对其中的基本概念做以归纳,以便大家在以后的学习过程中更好的理解java的精髓,在此我总结了30条基本的概念。 Java概述: 目前Java主要应用于中间件的开发(middleware)---处理客户机于服务器之间的通信技术,早期的实践证明,Java不适合
Memcached for windows 简单介绍
antlove
java Web windows cache memcached
1. 安装memcached server
a. 下载memcached-1.2.6-win32-bin.zip
b. 解压缩,dos 窗口切换到 memcached.exe所在目录,运行memcached.exe -d install
c.启动memcached Server,直接在dos窗口键入 net start "memcached Server&quo
数据库对象的视图和索引
百合不是茶
索引 oeacle数据库 视图
视图
视图是从一个表或视图导出的表,也可以是从多个表或视图导出的表。视图是一个虚表,数据库不对视图所对应的数据进行实际存储,只存储视图的定义,对视图的数据进行操作时,只能将字段定义为视图,不能将具体的数据定义为视图
为什么oracle需要视图;
&
Mockito(一) --入门篇
bijian1013
持续集成 mockito 单元测试
Mockito是一个针对Java的mocking框架,它与EasyMock和jMock很相似,但是通过在执行后校验什么已经被调用,它消除了对期望 行为(expectations)的需要。其它的mocking库需要你在执行前记录期望行为(expectations),而这导致了丑陋的初始化代码。
&nb
精通Oracle10编程SQL(5)SQL函数
bijian1013
oracle 数据库 plsql
/*
* SQL函数
*/
--数字函数
--ABS(n):返回数字n的绝对值
declare
v_abs number(6,2);
begin
v_abs:=abs(&no);
dbms_output.put_line('绝对值:'||v_abs);
end;
--ACOS(n):返回数字n的反余弦值,输入值的范围是-1~1,输出值的单位为弧度
【Log4j一】Log4j总体介绍
bit1129
log4j
Log4j组件:Logger、Appender、Layout
Log4j核心包含三个组件:logger、appender和layout。这三个组件协作提供日志功能:
日志的输出目标
日志的输出格式
日志的输出级别(是否抑制日志的输出)
logger继承特性
A logger is said to be an ancestor of anothe
Java IO笔记
白糖_
java
public static void main(String[] args) throws IOException {
//输入流
InputStream in = Test.class.getResourceAsStream("/test");
InputStreamReader isr = new InputStreamReader(in);
Bu
Docker 监控
ronin47
docker监控
目前项目内部署了docker,于是涉及到关于监控的事情,参考一些经典实例以及一些自己的想法,总结一下思路。 1、关于监控的内容 监控宿主机本身
监控宿主机本身还是比较简单的,同其他服务器监控类似,对cpu、network、io、disk等做通用的检查,这里不再细说。
额外的,因为是docker的
java-顺时针打印图形
bylijinnan
java
一个画图程序 要求打印出:
1.int i=5;
2.1 2 3 4 5
3.16 17 18 19 6
4.15 24 25 20 7
5.14 23 22 21 8
6.13 12 11 10 9
7.
8.int i=6
9.1 2 3 4 5 6
10.20 21 22 23 24 7
11.19
关于iReport汉化版强制使用英文的配置方法
Kai_Ge
iReport汉化 英文版
对于那些具有强迫症的工程师来说,软件汉化固然好用,但是汉化不完整却极为头疼,本方法针对iReport汉化不完整的情况,强制使用英文版,方法如下:
在 iReport 安装路径下的 etc/ireport.conf 里增加红色部分启动参数,即可变为英文版。
# ${HOME} will be replaced by user home directory accordin
[并行计算]论宇宙的可计算性
comsci
并行计算
现在我们知道,一个涡旋系统具有并行计算能力.按照自然运动理论,这个系统也同时具有存储能力,同时具备计算和存储能力的系统,在某种条件下一般都会产生意识......
那么,这种概念让我们推论出一个结论
&nb
用OpenGL实现无限循环的coverflow
dai_lm
android coverflow
网上找了很久,都是用Gallery实现的,效果不是很满意,结果发现这个用OpenGL实现的,稍微修改了一下源码,实现了无限循环功能
源码地址:
https://github.com/jackfengji/glcoverflow
public class CoverFlowOpenGL extends GLSurfaceView implements
GLSurfaceV
JAVA数据计算的几个解决方案1
datamachine
java Hibernate 计算
老大丢过来的软件跑了10天,摸到点门道,正好跟以前攒的私房有关联,整理存档。
-----------------------------华丽的分割线-------------------------------------
数据计算层是指介于数据存储和应用程序之间,负责计算数据存储层的数据,并将计算结果返回应用程序的层次。J
&nbs
简单的用户授权系统,利用给user表添加一个字段标识管理员的方式
dcj3sjt126com
yii
怎么创建一个简单的(非 RBAC)用户授权系统
通过查看论坛,我发现这是一个常见的问题,所以我决定写这篇文章。
本文只包括授权系统.假设你已经知道怎么创建身份验证系统(登录)。 数据库
首先在 user 表创建一个新的字段(integer 类型),字段名 'accessLevel',它定义了用户的访问权限 扩展 CWebUser 类
在配置文件(一般为 protecte
未选之路
dcj3sjt126com
诗
作者:罗伯特*费罗斯特
黄色的树林里分出两条路,
可惜我不能同时去涉足,
我在那路口久久伫立,
我向着一条路极目望去,
直到它消失在丛林深处.
但我却选了另外一条路,
它荒草萋萋,十分幽寂;
显得更诱人,更美丽,
虽然在这两条小路上,
都很少留下旅人的足迹.
那天清晨落叶满地,
两条路都未见脚印痕迹.
呵,留下一条路等改日再
Java处理15位身份证变18位
蕃薯耀
18位身份证变15位 15位身份证变18位 身份证转换
15位身份证变18位,18位身份证变15位
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 201
SpringMVC4零配置--应用上下文配置【AppConfig】
hanqunfeng
springmvc4
从spring3.0开始,Spring将JavaConfig整合到核心模块,普通的POJO只需要标注@Configuration注解,就可以成为spring配置类,并通过在方法上标注@Bean注解的方式注入bean。
Xml配置和Java类配置对比如下:
applicationContext-AppConfig.xml
<!-- 激活自动代理功能 参看:
Android中webview跟JAVASCRIPT中的交互
jackyrong
JavaScript html android 脚本
在android的应用程序中,可以直接调用webview中的javascript代码,而webview中的javascript代码,也可以去调用ANDROID应用程序(也就是JAVA部分的代码).下面举例说明之:
1 JAVASCRIPT脚本调用android程序
要在webview中,调用addJavascriptInterface(OBJ,int
8个最佳Web开发资源推荐
lampcy
编程 Web 程序员
Web开发对程序员来说是一项较为复杂的工作,程序员需要快速地满足用户需求。如今很多的在线资源可以给程序员提供帮助,比如指导手册、在线课程和一些参考资料,而且这些资源基本都是免费和适合初学者的。无论你是需要选择一门新的编程语言,或是了解最新的标准,还是需要从其他地方找到一些灵感,我们这里为你整理了一些很好的Web开发资源,帮助你更成功地进行Web开发。
这里列出10个最佳Web开发资源,它们都是受
架构师之面试------jdk的hashMap实现
nannan408
HashMap
1.前言。
如题。
2.详述。
(1)hashMap算法就是数组链表。数组存放的元素是键值对。jdk通过移位算法(其实也就是简单的加乘算法),如下代码来生成数组下标(生成后indexFor一下就成下标了)。
static int hash(int h)
{
h ^= (h >>> 20) ^ (h >>>
html禁止清除input文本输入缓存
Rainbow702
html 缓存 input 输入框 change
多数浏览器默认会缓存input的值,只有使用ctl+F5强制刷新的才可以清除缓存记录。
如果不想让浏览器缓存input的值,有2种方法:
方法一: 在不想使用缓存的input中添加 autocomplete="off";
<input type="text" autocomplete="off" n
POJO和JavaBean的区别和联系
tjmljw
POJO java beans
POJO 和JavaBean是我们常见的两个关键字,一般容易混淆,POJO全称是Plain Ordinary Java Object / Pure Old Java Object,中文可以翻译成:普通Java类,具有一部分getter/setter方法的那种类就可以称作POJO,但是JavaBean则比 POJO复杂很多, Java Bean 是可复用的组件,对 Java Bean 并没有严格的规
java中单例的五种写法
liuxiaoling
java 单例
/**
* 单例模式的五种写法:
* 1、懒汉
* 2、恶汉
* 3、静态内部类
* 4、枚举
* 5、双重校验锁
*/
/**
* 五、 双重校验锁,在当前的内存模型中无效
*/
class LockSingleton
{
private volatile static LockSingleton singleton;
pri