标签每出现一次,一个 TableCell 对象就会被创建
Table 对象方法
方法
描述
createCaption()
为表格创建一个 caption 元素。
createTFoot()
在表格中创建一个空的 tFoot 元素。
createTHead()
在表格中创建一个空的 tHead 元素。
deleteCaption()
从表格删除 caption 元素以及其内容。
deleteRow()
从表格删除一行。
deleteTFoot()
从表格删除 tFoot 元素及其内容。
deleteTHead()
从表格删除 tHead 元素及其内容。
insertRow()
在表格中插入一个新行。
四.文档对象模型(DOM)
DOM节点树模型(以HTML DOM树为例)
DOM模型将整个文档(XML文档和HTML文档)看成一个树形结构,
在DOM中,HTML文档的层次结构被表示为一个树形结构。并用document对象表示该文档,树的每个子节点表示HTML文档中的不同内容。
每个载入浏览器的 HTML 文档都会成为 Document 对象,Document是探索DOM的入口,利用全局变量document可以访问Document对象
4.1认识DOM
先看下面代码
将HTML代码分解为DOM节点层次图:
DOM通过创建树来表示文档,描述了处理网页内容的方法和接口,从而使开发者对文档的内容和结构具有空前的控制力,用DOM API可以轻松地删除、添加和替换节点。
1)节点类型
DOM规定文档中的每个成分都是一个节点(Node),HTML文档可以说由节点构成的集合,DOM节点有:
2) DOM节点三大属性(XML DOM)
属性
描述
nodeName
元素节点、属性节点、文本节点分别返回元素的名称、属性的名称和#text的字符串。
nodeType
元素节点、属性节点、文本节点的nodeType值分别为1、2、3.、
nodeValue
元素节点、属性节点、文本节点的返回值分别为null、属性值和文本节点内容。
4.2 DOM常见操作
Node为所有节点的父接口,其定义了一组公共的属性和方法,如下:
1)获取节点
① 获取元素节点 :通过document对象的三个方法获取
document.getElementById("ID")
document.getElementByName("name")
document.getElementsByTagName("p");
② 获取属性节点 :属性节点附属于元素节点,可通过元素节点的getAttributeNode(attrName) 方法获取属性节点,也可通过getAttribute(attrName) 直接获取属性值。(与之相对的是Element接口的setAttribute(attrName , attrValue)方法,如果属性不存在,则直接添加到元素节点上)
③ 获取文本节点 :文本节点为元素节点的子节点,可通过元素节点(Element接口)提供的childnodes()[index] 方法获得。
childNodes //NodeList,所有子节点的列表
firstChild //Node,指向在childNodes列表中的第一个节点
lastChild //Node,指向在childNodes列表中的最后一个节点
parentNode //Node,指向父节点
previousSibling /Node,/指向前一个兄弟节点:如果这个节点就是第一个节点,那么该值为 null
nextSibling //Node,指向后一个兄弟节点:如果这个节点就是最后一个节点,那么该值为null
hasChildNodes()` //Boolean,当childNodes包含一个或多个节点时,返回真值
2)改变节点
① 改变属性节点的值 :可以通过属性节点的nodeValue直接修改属性值,也可通过元素节点的setAttribute()方法改变。
② 改变文本节点的值 :通过文本节点的nodeValue直接修改。
在HTML DOM中,获取和改变元素内容最简单方法是使用元素的innerHTML属性(innerText属性返回去掉标签的innerHTML)
拓展:
innerText、innerHTML、outerHTML、outerText
innerText: 表示起始标签和结束标签之间的文本
innerHTML: 表示元素的所有元素和文本的HTML代码
如:
Hello world
的innerText为Hello world,innerHTML为Hello world
outerText: 与前者的区别是替换的是整个目标节点,问题返回和innerText一样的内容
outerHTML: 与前者的区别是替换的是整个目标节点,返回元素完整的HTML代码,包括元素本身
一张图了解OUTHTML和innerText、innerHTML:
改变HTML样式(style属性):element.style.color =“red”;
3)删除节点
① 删除元素节点 :要想删除元素节点A,需获得A的父节点B,父节点可通过17.1.1中的方法获得,也可以直接通过A的parentNode属性获得(推荐)。调用B的removeChild(A) 即可删除A节点。
② 删除属性节点 :可通过属性节点所属的元素节点的removeAttribute(attrName)或removeAttributeNode(node)删除。
③ 清空文本节点 :最简单也是最常用的方法就是直接设置文本节点的nameNode属性为空串:textNode.nodeValue = ””。
混淆点:
这是一段文本
var p = document.getElementById('example');
p.nodeValue //null,p是元素节点,所以nodeValue为null
p.getAttributeNode('id').nodeValue //example,这里获取到p的id属性的属性节点,nodeValue就是它的属性值
p.childNodes[0].nodeValue //这是一段文本,
p是含有两个子节点的,插入的文本虽然没有标签,但它依然是一个节点。
其类型是是文本节点,其nodeValue是就是写入在其中的字符串,包含换行和缩进
p.innerHTML//这是一段文本 "
这里innerHTML返回了p所包含的全部的节点的所包含的各种值了,以字符串的形式。
4)创建和添加节点
① 创建节点 :通过document对象的createElement(eleName)、createTextNode(nodeValue)方法可分别创建元素节点和文本节点。属性节点也有自己的create方法,但是用的少,直接用元素节点的setAttribute()方法即可添加属性。
② 添加节点 :两个重要的方法:appendChild()和insertBefore(),具体见Node接口中的方法。
扩展 :上面的两个方法都是在已知父节点时用到的,也可以直接在兄弟节点后添加新节点:x.insertBefore(newNode) 和 x.appendChild(newNode) 都可以向 x 后追加一个新的子节点。
5)替换节点
主要掌握replaceChild(newNode , oldNode) 替换元素节点。(属性节点和文本节点有更简单的方法)
4.3 DOM事件
DOM同时两种事件模型:冒泡型事件和捕获型事件
冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标的顺序触发
Click Me
触发的顺序是:div、body、html(IE 6.0和Mozilla 1.0)、document、window(Mozilla 1.0)
捕获型事件:与冒泡事件相反的过程,事件从最不精确的对象开始触发,然后到最精确
上面例子触发的顺序是:document、div
DOM事件模型最独特的性质是,文本节点也触发事件(在IE中不会)。
1)事件处理函数/监听函数
在JavaScript中:
var oDiv = document.getElementById("div1");
oDiv.onclick = function(){ //onclick只能用小写
alert("Clicked!");
}
或者
var elem =document.getElementById(“id”)
elem.οnmοuseοver=handleMouseOver //handleMouseOver 是函数名
function handleMouseOve(e){...}
在HTML中:
//onclick大小写任意
扩展:
IE事件处理程序attachEvent()和detachEvent()
在IE中,每个元素和window对象都有两个方法:attachEvent()和detachEvent(),这两个方法接受两个相同的参数,事件处理程序名称和事件处理程序函数,如:
[object].attachEvent("name_of_event_handler","function_to_attach")
[object].detachEvent("name_of_event_handler","function_to_remove")
var fnClick = function(){
alert("Clicked!");
}
oDiv.attachEvent("onclick", fnClick); //添加事件处理函数
oDiv.attachEvent("onclick", fnClickAnother); // 可以添加多个事件处理函数
oDiv.detachEvent("onclick", fnClick); //移除事件处理函数
在使用attachEvent()方法的情况下,事件处理程序会在全局作用域中运行,因此this等于window。
2)跨浏览器的事件处理程序
addHandler()和removeHandler()
addHandler()方法属于一个叫EventUntil()的对象,这两个方法均接受三个相同的参数,要操作的元素,事件名称和事件处理程序函数。
3)事件处理器
执行JavaScript 代码的程序在事件发生时会对事件做出响应。为了响应一个特定事件
而被执行的代码称为事件处理器。
在HTML标签中使用事件处理器的语法是:
4)事件处理程序
事件就是用户或浏览器自身执行的某种动作。比如click,mouseup,keydown,mouseover等都是事件的名字。而响应某个事件的函数就叫事件处理程序(事件监听器),事件处理程序以on开头,因此click的事件处理程序就是onclick
5)DOM 0级事件处理程序
DOM 0级事件处理程序:把一个函数赋值给一个事件的处理程序属性
HTML
JS
var btn2=document.getElementById('btn2');获得btn2按钮对象
btn2.onclick //给btn2添加onclick属性,属性又触发了一个事件处理程序
btn2.οnclick=function(){
} //添加匿名函数
btn2.οnclick=null //删除onclick属性
6)DOM 2级事件处理程序
DOM 2级事件定义了两个方法,用于指定和删除事件处理程序的操作。addEventListener()和removeEventListener()
addEventListener()和removeEventListener()
在DOM中,addEventListener()和removeEventListener()用来分配和移除事件处理函数,与IE不同的是,这些方法需要三个参数:事件名称,要分配的函数和处理函数是用于冒泡阶段(false)还是捕获阶段(true),默认为冒泡阶段false
[object].addEventListener("name_of_event",fnhander,bcapture)
[object].removeEventListener("name_of_event",fnhander,bcapture)
var fnClick = function(){
alert("Clicked!");
}
oDiv.addEventListener("onclick", fnClick, false); //添加事件处理函数
oDiv.addEventListener("onclick", fnClickAnother, false); // 与IE一样,可以添加多个事件处理函数
oDiv.removeEventListener("onclick", fnClick, false); //移除事件处理函数
如果使用addEventListener()将事件处理函数加入到捕获阶段,则必须在removeEventListener()中指明是捕获阶段,才能正确地将这个事件处理函数删除
oDiv.onclick = fnClick;
oDiv.onclick = fnClickAnother; //使用直接赋值,后续的事件处理函数会覆盖前面的处理函数
oDiv.onclick = fnClick;
oDiv.addEventListener("onclick", fnClickAnother, false); //会按顺序进行调用,不会覆盖
7)事件类型
鼠标事件: click、dbclick、mousedown、mouseup、mouseover、mouseout、mousemove
键盘事件 :keydown、keypress、keyup
HTML事件 :load、unload、abort、error、select、change、submit、reset、resize、scroll、focus、blur
Window 事件属性(没加蓝的都是h 5新事件)
针对 window 对象触发的事件(应用到
标签):
属性
onafterprint 文档打印之后运行的脚本。
onbeforeprint 文档打印之前运行的脚本。
onbeforeunload 文档卸载之前运行的脚本。
onerror 在错误发生时运行的脚本。
onhaschange 当文档已改变时运行的脚本。
onload 页面结束加载之后触发。
onmessage 在消息被触发时运行的脚本。
可以使用调用 postMessage ()向主线程发送消息,在某些场景下,业务调用方可能需要主动跟定位组件通信,可以通过html5 postMessage的方式主动与定位组件发起通信
onoffline 当文档离线时运行的脚本。
ononline 当文档上线时运行的脚本。
onpagehide 当窗口隐藏时运行的脚本。
onpageshow 当窗口成为可见时运行的脚本。
onpopstate 当窗口历史记录改变时运行的脚本。
onredo 当文档执行撤销(redo)时运行的脚本。
onresize 当浏览器窗口被调整大小时触发。
onstorage 在 Web Storage 区域更新后运行的脚本。
onundo 在文档执行 undo 时运行的脚本。
onunload 一旦页面已下载时触发(或者浏览器窗口已被关闭)。
Form 事件
由 HTML 表单内的动作触发的事件(应用到几乎所有 HTML 元素,但最常用在 form 元素中):
属性
onblur 元素失去焦点时运行的脚本。
onchange在元素值被改变时运行的脚本。
oncontextmenu 当上下文菜单被触发时运行的脚本。
onfocus 当元素失去焦点时运行的脚本。
onformchange 在表单改变时运行的脚本。
onforminput 当表单获得用户输入时运行的脚本。
oninput 当元素获得用户输入时运行的脚本。
oninvalid 当元素无效时运行的脚本。
onreset 当表单中的重置按钮被点击时触发。HTML5 中不支持。
onselect 在元素中文本被选中后触发。
onsubmit 在提交表单时触发。
Event对象
Event对象的常用属性
名称
说明
返回
type
事件的名称如mouseover
字符串
target
事件指向的元素
HTMLElement
获得event对象兼容性写法
document.οnclick=function(event){
event = event || window.event;
};
个别事件讲解
oninput,onpropertychange,onchange的用法
oninput:
oninput 事件在用户输入时触发。
该事件在 或
提示: 该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发, onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 和 元素。
onchange
onchange 事件会在域的内容改变时发生。
onchange 事件也可用于单选框与复选框改变后触发的事件。
onchange 触发事件必须满足两个条件:
a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效)
b)当前对象失去焦点(onblur);
onpropertychange 的话,只要当前对象属性发生改变,都会触发事件,但是它是IE专属的;
oninput 是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事件,它只在对象value值发生改变时奏效。
在textarea中,如果想捕获用户的键盘输入,用onkeyup检查事件就可以了,但是onkeyup并不支持复制和粘贴,因此需要动态监测textarea中值的变化,这就需要onpropertychange (用在IE浏览器)和oninput(非IE浏览器)结合在一起使用了。
移动端 触摸事件
ontouchstart、ontouchmove、ontouchend、ontouchcancel
1、Touch事件简介
pc上的web页面鼠 标会产生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件,但是在移动终端如 iphone、ipod Touch、ipad上的web页面触屏时会产生ontouchstart、ontouchmove、ontouchend、ontouchcancel 事件,分别对应了触屏开始、拖拽及完成触屏事件和取消。
当按下手指时,触发ontouchstart;
当移动手指时,触发ontouchmove;
当移走手指时,触发ontouchend。
当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发ontouchcancel。一般会在ontouchcancel时暂停游戏、存档等操作。
2、Touch事件与Mouse事件的出发关系
在触屏操作后,手指提起的一刹那(即发生ontouchend后),系统会判断接收到事件的element的内容是否被改变,如果内容被改变,接下来的事 件都不会触发,如果没有改变,会按照mousedown,mouseup,click的顺序触发事件。特别需要提到的是,只有再触发一个触屏事件时,才会 触发上一个事件的mouseout事件。
附:DOM基本操作思维导图
window对象思维导图
你可能感兴趣的:(#,js,js)
利用阿里云Atlas地区选择器与Plotly.js实现数据可视化与交互
源代码杀手
开发工具使用 阿里云 plotly javascript
在数据科学与可视化领域,交互式图表和地图应用越来越成为数据分析和展示的重要手段。本文将介绍如何结合阿里云Atlas地区选择器与Plotly.js,创建动态交互式的数据可视化应用。一、阿里云Atlas地区选择器简介阿里云Atlas是阿里云的一款数据可视化产品,提供了强大的地图与地区选择功能。你可以使用阿里云Atlas地区选择器轻松选择需要展示的数据所在地区。阿里云Atlas的地区选择器提供了一个简洁
服务器带宽堵塞会对网站访问产生哪些影响?
Jtti
服务器
服务器带宽堵塞会对网站访问产生一系列负面影响,具体包括以下几个方面:1.网站加载速度变慢页面打开时间延长:服务器带宽被占满后,网站的数据传输变慢,导致网页加载时间增加,特别是涉及图片、视频、CSS、JS文件等较大资源时更加明显。TTFB(首字节时间)增加:服务器响应延迟变大,用户在访问网站时需要更长时间才能收到服务器的第一个数据包。表现:用户打开网页时,浏览器可能会长时间停留在“正在加载...”状
前端开发中如何使用ChatGPT辅助开发?
破碎的天堂鸟
学习教程 chatgpt
以下是前端开发中使用ChatGPT辅助开发的完整指南,涵盖核心应用场景、实践方法及注意事项:一、代码生成与优化基础代码生成HTML/CSS/JS框架搭建:通过自然语言描述需求(如"生成带导航栏的响应式页面"),ChatGPT可快速生成结构清晰的代码骨架。例如,输入“用Flexbox实现垂直水平居中布局”,可得到包含justify-content和align-items属性的代码[1][32]。组件
Geo3D建筑材质切换+屋顶纹理
苹果园dog
WebGL GIS 3d 材质 webgl
一、简介基于Threejs开发封装建筑渲染管线,利用简单二维建筑矢量面轮廓程序化生成3D建筑,支持材质一键切换,支持多样化建筑墙面材质和屋顶材质,支持建筑透明,支持地形高程适配,支持按空间范围裁剪挖洞等。二、效果三、代码///建筑///constbuildingPipline=newGeo3D.BuildingPipline({themeName:Geo3D.ThemeName.Theme_Rea
React基础之类组件
青红光硫化黑
react.js 前端 javascript
类组件是基于ES6类来编写的组件,使用React.Component作为基类,并定义render方法,是一种定义组件的方式实现按钮计数import{Component}from"react";classCounterextendsComponent{//1.状态变量2.事件回调3.UI(JSX)//1.定义状态变量state={count:0}//2.定义事件回调setCount=()=>{//修
Vue打包后生成的文件及编程细节
心之飞翼
vue.js 前端 javascript 编程
Vue.js是一种流行的JavaScript框架,用于构建现代化的单页应用程序。当我们开发一个Vue应用并准备将其部署到生产环境时,我们需要对应用进行打包,以便生成最终的可执行文件。在这篇文章中,我们将详细讨论Vue打包后生成的文件,以及与之相关的编程细节。1.打包工具:Webpack在Vue项目中,常用的打包工具是Webpack。Webpack提供了强大的模块打包能力,能够将Vue应用中的各种资
vscode setting.json 全局设置 工作区设置 位置 优先级
AllBlue
vscode vscode ide 编辑器
vscode中setting.json有两种配置权限一、全局配置:setting.json文件位于C:\Users\Administrator\AppData\Roaming\Code\User\settings.json二、工作区配置:setting.json文件位于工作区的.vscode\settings.json当两种配置同时存在时,工作区配置的优先级高于全局配置。vscode如何打开set
物联网服务器搭建及部署详细说明:掌握 Node.js、MongoDB、Socket.IO 和 JWT 的实用指南
极客小张
物联网 服务器 node.js mongodb 数据库 json 运维开发
关键知识点目录1.环境准备1.1硬件要求1.2软件要求2.搭建步骤3.数据处理与存储3.1数据存储3.2数据实时处理3.2.1安装Socket.IO3.2.2修改服务器代码4.安全性4.1身份验证与授权4.2加密通信4.2.1生成自签名证书(开发环境)4.2.2修改服务器以支持HTTPS5.数据分析和可视化5.1集成Grafana5.2.2图表数据更新6.事件处理与报警6.1事件检测7.接口与集成
168. Excel表列名称(JS实现)
PAT-python-zjw
剑指offer
1题目给定一个正整数,返回它在Excel表中相对应的列名称。例如,1->A2->B3->C…26->Z27->AA28->AB…示例1:输入:1输出:“A”示例2:输入:28输出:“AB”示例3:输入:701输出:“ZY”链接:https://leetcode-cn.com/problems/excel-sheet-column-title2思路这道题看起来挺简单,但实际做的时候要好好考虑一下索引
轻量级python编辑器 内存_vscode-轻量级实用编辑器
weixin_39557402
轻量级python编辑器 内存
前言:经网友推荐,下载vscode,发现速度确实快,度娘看了下,是微软抽调的一小波人做的。这样就不担心windows平台插件支持了。js,python都支持高亮,本身自带插件也都实用。自带控制台,终端,emmet格式插件,图标插件,小地图插件。占用内存少,推荐!先整理部分觉得不错的插件,体验一段时间再修改一、常用插件1.vscode-icon让vscode的文件夹目录添加上对应的图标注:安装好如果
Java面试专业技能怎么写_Java面试——专业技能
靳天羽
Java面试专业技能怎么写
目录一、简单讲下Java的跨平台原理二、装箱与拆箱三、实现一个拷贝文件的工具类使用字节流还是字符流四、介绍下线程池五、JSP和Servlet有哪些相同点和不同点六、简单介绍一下关系数据库三范式七、Mysql数据库的默认的最大连接数八、说一下Mysql和Oracle的分页九、简单讲一下数据库的触发器的使用场景十、简单讲一下数据库的存储过程的使用场景十一、简单介绍一下Activiti十二、编写一个Se
高斯溅射融合之路(一)- webgl渲染3d gaussian splatting
山海鲸可视化
数字孪生 GIS系统 webgl 数字孪生 GIS 高斯泼溅 AI重构
大家好,我是山海鲸的技术负责人。之前已经写了一个GIS融合系列。其实CesiumJS的整合有相当的难度,同时也有很多方面的工作,很难在几篇文章内写完,整个山海鲸团队也是投入了接近两年的时间,才把周边整套工具链进行了完善,后续有新的内容也会持续分享,隔壁系列传送门:GIS融合之路一坑未平,一坑又起。去年年末,我们的AI合作伙伴突然给山海鲸技术团队丢来了一个新技术-3DGaussianSplattin
js 截取 指定 字符前面或者后面的字符串
WQ_MItu
js uni-app vue javascript
functioncutAppointStr(str,srt,type){letresolve={};//截取第一个srt前面的字符串varindex=str.indexOf(srt);resolve.befStr1=str.substring(0,index);//截取第一个srt后面的字符串resolve.aftStr1=str.substring(index+1,str.length);//截
linux下jsoncpp编译
虎皮猫大人王
linux系统 linux 系统
折腾了一顿,我使用ubuntu16.04编译的jsoncpp,由于使用的芯片工程需要16.04,无法使用最新的ubuntu系统。发现jsoncpp编译时,CMakeError:CouldnotfindCMAKE_ROOT!!!CMakehasmostlikelynotbeeninstalledcorrectly.Modulesdirectorynotfoundin/usr/local/share/
华为OD机试2025年真题题库(E卷+D卷+C卷+B卷+A卷)(Python/JS/C/C++)
哪 吒
搬砖工逆袭Java架构师 华为od c语言 python
专栏导读本专栏收录于《华为OD机试真题(Python/JS/C/C++)》。刷的越多,抽中的概率越大,私信哪吒,备注华为OD,加入华为OD刷题交流群,每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景,发现新题目,随时更新。2024年8月14日,华为官方已经将华为OD机试(D卷)切换为E卷。目前正在考的是E卷,按照华为OD往常的操作,E卷题目是由往
华为OD机试 - 没有回文串(Python/JS/C/C++ 2024 E卷 100分)
哪 吒
华为od python javascript
华为OD机试2024E卷题库疯狂收录中,刷题点这里专栏导读本专栏收录于《华为OD机试真题(Python/JS/C/C++)》。刷的越多,抽中的概率越大,私信哪吒,备注华为OD,加入华为OD刷题交流群,每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景,发现新题目,随时更新,全天CSDN在线答疑。一、题目描述回文串Q的定义:正读和反读都一样的字符串。
华为OD机试 - 三阶积幻方(Python/JS/C/C++ 2024 E卷 100分)
哪 吒
华为od python javascript
华为OD机试2024E卷题库疯狂收录中,刷题点这里专栏导读本专栏收录于《华为OD机试真题(Python/JS/C/C++)》。刷的越多,抽中的概率越大,私信哪吒,备注华为OD,加入华为OD刷题交流群,每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景,发现新题目,随时更新,全天CSDN在线答疑。一、题目描述九宫格是一款广为流传的游戏,起源于河图洛书
华为OD机试 - 士兵过河 - 二分查找(Python/JS/C/C++ 2024 E卷 100分)
哪 吒
华为od python javascript
华为OD机试2024E卷题库疯狂收录中,刷题点这里专栏导读本专栏收录于《华为OD机试真题(Python/JS/C/C++)》。刷的越多,抽中的概率越大,私信哪吒,备注华为OD,加入华为OD刷题交流群,每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景,发现新题目,随时更新,全天CSDN在线答疑。一、题目描述一支N个士兵的军队正在赶夜夜行军,途中遇到
华为OD机试真题 - 精准核酸检测 - 深度优先搜索DFS(Python/JS/C/C++ 2024 D卷 200分)
哪 吒
华为od 深度优先 python
华为OD机试2024E卷题库疯狂收录中,刷题点这里专栏导读本专栏收录于《华为OD机试真题(Python/JS/C/C++)》。刷的越多,抽中的概率越大,私信哪吒,备注华为OD,加入华为OD刷题交流群,每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景,发现新题目,随时更新,全天CSDN在线答疑。一、题目描述为了达到新冠疫情精准防控的需要,为了避免全
华为OD机试 - 最优策略组合下的总的系统消耗资源数(Python/JS/C/C++ 2024 D卷 100分)
哪 吒
python 华为od java c c++ javascript
华为OD机试2024E卷题库疯狂收录中,刷题点这里专栏导读本专栏收录于《华为OD机试真题(Python/JS/C/C++)》。刷的越多,抽中的概率越大,私信哪吒,备注华为OD,加入华为OD刷题交流群,每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景,发现新题目,随时更新,全天CSDN在线答疑。一、题目描述在通信系统中有一个常见的问题是对用户进行不
华为OD机试 - 信道分配 - 贪心算法(Python/JS/C/C++ 2024 D卷 200分)
哪 吒
python 华为od 贪心算法
一、题目描述算法工程师Q小明面对着这样一个问题,需要将通信用的信道分配给尽量多的用户:信道的条件及分配规则如下:所有信道都有属性"阶"。阶为r的信道的容量为2^r比特;所有用户需要传输的数据量都一样:D比特;一个用户可以分配多个信道,但每个信道只能分配给一个用户;当且仅当分配给一个用户的所有信道的容量和>=D,用户才能传输数据;给出一组信道资源,最多可以为多少用户传输数据?二、输入描述第一行,一个
springmvc 国际化实例
卿乌
java java struts spring
springmvc国际化实例springMVC.xml配置文件设置首先在配置文件中声明我们的国际化的配置文件,从那个文件中取只mvc:interceptors>然后配置我们的拦截器请求jsp页面关键内容用到我们的jstl来取值然后就可以用显示相关内容了,language.cn与前面资源文件定义的内容相对应然后直接点击跳转页面
Json工具(一)- Jackson
小胖子许愿
Json json java spring
1、Jackson简介Jackson是常用的高效安全的Json序列化和反序列化框架。SpringMVC默认的json解析器是Jackson。Jackson有三个核心模块。jackson-core:提供Jackson处理JSON数据的核心功能,如流式解析和生成JSON,提供基本的API。jackson-annotations:提供注解编程相关的核心注解。jackson-databind:提供数据绑定
Spring Web MVC(1)
我爱Jack
spring mvc 后端 java
一、SpringMVC是什么?核心角色:SpringMVC是⼀套基于Servlet规范的Web开发框架,像餐厅的标准化管理流程,规定了每个环节的职责。用户发起请求(点餐)时,SpringMVC协调各组件处理并响应结果(上菜)。二、MVC模式深度解析类比餐厅模型:角色职责对应Spring组件顾客(用户)发起请求(点菜)浏览器用户服务员(View)展示菜单并上菜(显示结果)JSP/Thymeleaf模
threejs:射线拾取封装
粉末的沉淀
javascript 开发语言 前端
射线拾取封装代码:import*asTHREEfrom'three';//点击事件//1.坐标转化(鼠标单击的屏幕坐标转标准设备坐标)//2.射线计算(通过鼠标单击位置+相机参数计算射线值)//3.射线交叉计算//ObjectsArr是用来做射线拾取的对象数组,一个二维数组exportfunctionrayChoose(event,width,height,camera,ObjectsArr){/
Excel-to-JSON v2.0.0发布,可以在Excel内部,把Excel表格转换成JSON,嵌套的JSON也能转
wtsolutions
excel与json互相转换 excel json excel-to-json 转换
本文是Excel-to-JSON插件的官方文档https://excel-to-json.wtsolutions.cn简化浓缩翻译的中文版,仅供参考。详细的还请查看官方文档。在数据处理和交换的过程中,将Excel文件转换为JSON格式是一项常见需求。Excel-to-JSON作为一款MicrosoftExcel插件,为我们提供了便捷的解决方案。本文将详细介绍如何使用Excel-to-JSON以及它
Spring Boot整合Spring Security与JWT实现无状态认证:实战指南
老哥不老
笔记 spring spring boot 数据库
SpringBoot整合SpringSecurity与JWT实现无状态认证:实战指南一、JWT认证原理简介JSONWebToken(JWT)是一种开放标准(RFC7519),由三部分组成:Header(头部):声明令牌类型和签名算法Payload(负载):携带用户身份信息Signature(签名):防篡改验证认证流程:客户端提交登录凭证服务端验证通过后生成JWT客户端后续请求携带JWT服务端验证J
前端vue用jsmind写思维导图
Tan-玛卡巴卡
前端 vue.js javascript
1、下载依赖npm安装npminstall--savejsmindyarn安装yarnjsmind版本:"jsmind":"^0.4.6",2、完整代码:查看节点删除节点-->放大缩小展开:主题:名称:{{obj.topic?obj.topic:'-'}}部门:{{obj.orgName?obj.orgName:'-'}}描述:{{obj.jobType?obj.jobType:'-'}}状态:正
使用 Spring Boot 实现前后端分离的海康威视 SDK 视频监控
William Dawson
spring boot
使用SpringBoot实现前后端分离的海康威视SDK视频监控系统,可以分为以下几个步骤:1.系统架构设计前端:使用Vue.js、React或Angular等前端框架实现用户界面。后端:使用SpringBoot提供RESTfulAPI,负责与海康威视SDK交互。通信:前后端通过HTTP/WebSocket进行通信。视频流:通过海康威视SDK获取视频流,并使用RTSP/RTMP/HLS等协议推送到前
JavaScript逆向爬虫教程-------基础篇之JavaScript混淆原理
zru_9602
热门话题 javascript 爬虫 开发语言
目录一、常量的混淆原理1.1对象属性的两种访问方式1.2十六进制字符串1.3Unicode字符串1.4字符串的ASCII码混淆1.5字符串常量加密1.6数值常量加密二、增加JS逆向者的工作量2.1数组混淆2.2数组乱序2.3花指令2.4jsfuck三、代码执行流程的防护原理3.1流程平坦化3.2逗号表达式混淆四、其他代码防护方案4.1eval加密4.2内存爆破4.3检测代码是否格式化一、常量的混淆
java短路运算符和逻辑运算符的区别
3213213333332132
java基础
/*
* 逻辑运算符——不论是什么条件都要执行左右两边代码
* 短路运算符——我认为在底层就是利用物理电路的“并联”和“串联”实现的
* 原理很简单,并联电路代表短路或(||),串联电路代表短路与(&&)。
*
* 并联电路两个开关只要有一个开关闭合,电路就会通。
* 类似于短路或(||),只要有其中一个为true(开关闭合)是
Java异常那些不得不说的事
白糖_
java exception
一、在finally块中做数据回收操作
比如数据库连接都是很宝贵的,所以最好在finally中关闭连接。
JDBCAgent jdbc = new JDBCAgent();
try{
jdbc.excute("select * from ctp_log");
}catch(SQLException e){
...
}finally{
jdbc.close();
utf-8与utf-8(无BOM)的区别
dcj3sjt126com
PHP
BOM——Byte Order Mark,就是字节序标记 在UCS 编码中有一个叫做"ZERO WIDTH NO-BREAK SPACE"的字符,它的编码是FEFF。而FFFE在UCS中是不存在的字符,所以不应该出现在实际传输中。UCS规范建议我们在传输字节流前,先传输 字符"ZERO WIDTH NO-BREAK SPACE"。这样如
JAVA Annotation之定义篇
周凡杨
java 注解 annotation 入门 注释
Annotation: 译为注释或注解
An annotation, in the Java computer programming language, is a form of syntactic metadata that can be added to Java source code. Classes, methods, variables, pa
tomcat的多域名、虚拟主机配置
g21121
tomcat
众所周知apache可以配置多域名和虚拟主机,而且配置起来比较简单,但是项目用到的是tomcat,配来配去总是不成功。查了些资料才总算可以,下面就跟大家分享下经验。
很多朋友搜索的内容基本是告诉我们这么配置:
在Engine标签下增面积Host标签,如下:
<Host name="www.site1.com" appBase="webapps"
Linux SSH 错误解析(Capistrano 的cap 访问错误 Permission )
510888780
linux capistrano
1.ssh -v hdfs@192.168.18.133 出现
Permission denied (publickey,gssapi-keyex,gssapi-with-mic,password).
错误
运行状况如下:
OpenSSH_5.3p1, OpenSSL 1.0.1e-fips 11 Feb 2013
debug1: Reading configuratio
log4j的用法
Harry642
java log4j
一、前言: log4j 是一个开放源码项目,是广泛使用的以Java编写的日志记录包。由于log4j出色的表现, 当时在log4j完成时,log4j开发组织曾建议sun在jdk1.4中用log4j取代jdk1.4 的日志工具类,但当时jdk1.4已接近完成,所以sun拒绝使用log4j,当在java开发中
mysql、sqlserver、oracle分页,java分页统一接口实现
aijuans
oracle jave
定义:pageStart 起始页,pageEnd 终止页,pageSize页面容量
oracle分页:
select * from ( select mytable.*,rownum num from (实际传的SQL) where rownum<=pageEnd) where num>=pageStart
sqlServer分页:
 
Hessian 简单例子
antlove
java Web service hessian
hello.hessian.MyCar.java
package hessian.pojo;
import java.io.Serializable;
public class MyCar implements Serializable {
private static final long serialVersionUID = 473690540190845543
数据库对象的同义词和序列
百合不是茶
sql 序列 同义词 ORACLE权限
回顾简单的数据库权限等命令;
解锁用户和锁定用户
alter user scott account lock/unlock;
//system下查看系统中的用户
select * dba_users;
//创建用户名和密码
create user wj identified by wj;
identified by
//授予连接权和建表权
grant connect to
使用Powermock和mockito测试静态方法
bijian1013
持续集成 单元测试 mockito Powermock
实例:
package com.bijian.study;
import static org.junit.Assert.assertEquals;
import java.io.IOException;
import org.junit.Before;
import org.junit.Test;
import or
精通Oracle10编程SQL(6)访问ORACLE
bijian1013
oracle 数据库 plsql
/*
*访问ORACLE
*/
--检索单行数据
--使用标量变量接收数据
DECLARE
v_ename emp.ename%TYPE;
v_sal emp.sal%TYPE;
BEGIN
select ename,sal into v_ename,v_sal
from emp where empno=&no;
dbms_output.pu
【Nginx四】Nginx作为HTTP负载均衡服务器
bit1129
nginx
Nginx的另一个常用的功能是作为负载均衡服务器。一个典型的web应用系统,通过负载均衡服务器,可以使得应用有多台后端服务器来响应客户端的请求。一个应用配置多台后端服务器,可以带来很多好处:
负载均衡的好处
增加可用资源
增加吞吐量
加快响应速度,降低延时
出错的重试验机制
Nginx主要支持三种均衡算法:
round-robin
l
jquery-validation备忘
白糖_
jquery css F# Firebug
留点学习jquery validation总结的代码:
function checkForm(){
validator = $("#commentForm").validate({// #formId为需要进行验证的表单ID
errorElement :"span",// 使用"div"标签标记错误, 默认:&
solr限制admin界面访问(端口限制和http授权限制)
ronin47
限定Ip访问
solr的管理界面可以帮助我们做很多事情,但是把solr程序放到公网之后就要限制对admin的访问了。
可以通过tomcat的http基本授权来做限制,也可以通过iptables防火墙来限制。
我们先看如何通过tomcat配置http授权限制。
第一步: 在tomcat的conf/tomcat-users.xml文件中添加管理用户,比如:
<userusername="ad
多线程-用JAVA写一个多线程程序,写四个线程,其中二个对一个变量加1,另外二个对一个变量减1
bylijinnan
java 多线程
public class IncDecThread {
private int j=10;
/*
* 题目:用JAVA写一个多线程程序,写四个线程,其中二个对一个变量加1,另外二个对一个变量减1
* 两个问题:
* 1、线程同步--synchronized
* 2、线程之间如何共享同一个j变量--内部类
*/
public static
买房历程
cfyme
2015-06-21: 万科未来城,看房子
2015-06-26: 办理贷款手续,贷款73万,贷款利率5.65=5.3675
2015-06-27: 房子首付,签完合同
2015-06-28,央行宣布降息 0.25,就2天的时间差啊,没赶上。
首付,老婆找他的小姐妹接了5万,另外几个朋友借了1-
[军事与科技]制造大型太空战舰的前奏
comsci
制造
天气热了........空调和电扇要准备好..........
最近,世界形势日趋复杂化,战争的阴影开始覆盖全世界..........
所以,我们不得不关
dateformat
dai_lm
DateFormat
"Symbol Meaning Presentation Ex."
"------ ------- ------------ ----"
"G era designator (Text) AD"
"y year
Hadoop如何实现关联计算
datamachine
mapreduce hadoop 关联计算
选择Hadoop,低成本和高扩展性是主要原因,但但它的开发效率实在无法让人满意。
以关联计算为例。
假设:HDFS上有2个文件,分别是客户信息和订单信息,customerID是它们之间的关联字段。如何进行关联计算,以便将客户名称添加到订单列表中?
&nbs
用户模型中修改用户信息时,密码是如何处理的
dcj3sjt126com
yii
当我添加或修改用户记录的时候对于处理确认密码我遇到了一些麻烦,所有我想分享一下我是怎么处理的。
场景是使用的基本的那些(系统自带),你需要有一个数据表(user)并且表中有一个密码字段(password),它使用 sha1、md5或其他加密方式加密用户密码。
面是它的工作流程: 当创建用户的时候密码需要加密并且保存,但当修改用户记录时如果使用同样的场景我们最终就会把用户加密过的密码再次加密,这
中文 iOS/Mac 开发博客列表
dcj3sjt126com
Blog
本博客列表会不断更新维护,如果有推荐的博客,请到此处提交博客信息。
本博客列表涉及的文章内容支持 定制化Google搜索,特别感谢 JeOam 提供并帮助更新。
本博客列表也提供同步更新的OPML文件(下载OPML文件),可供导入到例如feedly等第三方定阅工具中,特别感谢 lcepy 提供自动转换脚本。这里有导入教程。
js去除空格,去除左右两端的空格
蕃薯耀
去除左右两端的空格 js去掉所有空格 js去除空格
js去除空格,去除左右两端的空格
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>&g
SpringMVC4零配置--web.xml
hanqunfeng
springmvc4
servlet3.0+规范后,允许servlet,filter,listener不必声明在web.xml中,而是以硬编码的方式存在,实现容器的零配置。
ServletContainerInitializer:启动容器时负责加载相关配置
package javax.servlet;
import java.util.Set;
public interface ServletContainer
《开源框架那些事儿21》:巧借力与借巧力
j2eetop
框架 UI
同样做前端UI,为什么有人花了一点力气,就可以做好?而有的人费尽全力,仍然错误百出?我们可以先看看几个故事。
故事1:巧借力,乌鸦也可以吃核桃
有一个盛产核桃的村子,每年秋末冬初,成群的乌鸦总会来到这里,到果园里捡拾那些被果农们遗落的核桃。
核桃仁虽然美味,但是外壳那么坚硬,乌鸦怎么才能吃到呢?原来乌鸦先把核桃叼起,然后飞到高高的树枝上,再将核桃摔下去,核桃落到坚硬的地面上,被撞破了,于是,
JQuery EasyUI 验证扩展
可怜的猫
jquery easyui 验证
最近项目中用到了前端框架-- EasyUI,在做校验的时候会涉及到很多需要自定义的内容,现把常用的验证方式总结出来,留待后用。
以下内容只需要在公用js中添加即可。
使用类似于如下:
<input class="easyui-textbox" name="mobile" id="mobile&
架构师之httpurlconnection----------读取和发送(流读取效率通用类)
nannan408
1.前言.
如题.
2.代码.
/*
* Copyright (c) 2015, S.F. Express Inc. All rights reserved.
*/
package com.test.test.test.send;
import java.io.IOException;
import java.io.InputStream
Jquery性能优化
r361251
JavaScript jquery
一、注意定义jQuery变量的时候添加var关键字
这个不仅仅是jQuery,所有javascript开发过程中,都需要注意,请一定不要定义成如下:
$loading = $('#loading'); //这个是全局定义,不知道哪里位置倒霉引用了相同的变量名,就会郁闷至死的
二、请使用一个var来定义变量
如果你使用多个变量的话,请如下方式定义:
. 代码如下:
var page
在eclipse项目中使用maven管理依赖
tjj006
eclipse maven
概览:
如何导入maven项目至eclipse中
建立自有Maven Java类库服务器
建立符合maven代码库标准的自定义类库
Maven在管理Java类库方面有巨大的优势,像白衣所说就是非常“环保”。
我们平时用IDE开发都是把所需要的类库一股脑的全丢到项目目录下,然后全部添加到ide的构建路径中,如果用了SVN/CVS,这样会很容易就 把
中国天气网省市级联页面
x125858805
级联
1、页面及级联js
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
&l