深入15个HTML元素方法，你见过吗？

虽然现代化的 web 开发更多地依赖各种 MVC 框架，但开发者仍需要熟练掌握 HTML 与 DOM 方面的基础知识。不过，即使是有着多年经验的前端开发者，也会遇到一些不明所以的情况。本文首先将为初学者介绍 HTML 与 DOM 的基本常识，随后为大家介绍15个比较冷门的 HTML 元素的方法。

初学者指导

首先让我们来讨论一下 HTML 与 DOM 之间的区别。

显然，普通的

元素就是一段 HTML 代码，它可以应用在任何一个以 .html 为扩展名的文件中。元素自带一系列特性（attribute），以控制它的显示方式与行为。

这就是元素的全部内容，它与 JavaScript 没有任何关联。

而 DOM 的作用是将你的 JavaScript 代码与文档中的 HTML 元素关联在一起，让你能够以对象的方式与这些元素进行交互。

这就是所谓的文档对象模型。

在 HTML 中的每个元素都对应着一个 DOM ‘接口’，其中定义了若干属性（property，通常会映射至 HTML 元素上的特性）与方法。举例来说，一个

元素对应着一个 HTMLTableElement 接口。

你可以按以下方式获取某个元素的引用：

const searchBox = document.getElementById('search-box');

现在，你就可以访问该元素上定义的所有属性与方法了。打个比方，你可以通过 searchBox.value 访问它的 value 属性，也可以调用 searchBox.focus() 方法让光标移至输入框上。

感谢你参加这个58秒的 DOM 入门培训课程，哈哈。

现在的问题在于，大多数元素都没有提供什么有趣的方法。因此，除非你特意到官方文档规范上去搜索那些可能永远都用不到的东西，否则很容易忽略掉那些零散的小技巧。

幸运的是，浏览规范与整理小技巧正是我用于避免陷入困境的两种最喜欢的方式。那么，让我们开始吧……

如果你也希望尝试一下这些技巧，又恰好有一些浏览器 DevTools 可以使用的话，可以在元素树型结构中先选中某个元素，然后在控制台中输入 $0，它会返回给你一个所选中元素的引用。如果你需要返回该元素的对象，请输入 dir($0)。

在控制台中，你可以实现各种丰富的功能。

1 table 的方法

原始的 table 元素（时至今日仍然是网站布局方法里的第一名）本身自带许多精巧的方法，使用这些方法创建表格就像搭建宜家里的桌子一样简单。

以下是部分实用的方法。

const tableEl = document.querySelector('table');
const headRow = tableEl.createHead().insertRow();
headerRow.insertCell().textContent = 'Make';
headerRow.insertCell().textContent = 'Model';
headerRow.insertCell().textContent = 'Color';
const newRow = tableEl.insertRow();
newRow.insertCell().textContent = 'Yes';
newRow.insertCell().textContent = 'No';
newRow.insertCell().textContent = 'Thank you';

整段代码里完全用不着使用 document.createElement() 方法。

如果你在一个 table 元素上直接调用 .insertRow() 方法，它甚至会自动为你插入一个

元素，是不是很棒？

2 scrollIntoView()

你知道吗？当页面的 URL 中包含 #something 元素时，一旦页面加载，浏览器就会自动滚动至具有这个 ID 的元素之处。

这确实是一项很贴心的功能，但如果你在页面加载之后再渲染元素，这项功能就不起作用了。

不过，你也可以通过以下方式，手动地让这项功能重新生效：

document.querySelector(document.location.hash).scrollIntoView();

3 hidden

好吧，hidden 或许不是一个方法，但如果你提出抗议，那我也要争论一下：在 hidden 的背后很可能对应着一个 setter，这可是一个货真价实的方法，对不对？

不管怎样，你是否曾经为了隐藏某个元素而使用过 myElement.style.display = 'none' 这种方法呢？如果是的话，请别再这么做了！

只需调用 myElement.hidden = true ，即可实现元素隐藏的功能。

4 toggle()

嗯，toggle 也不算是元素的方法，它实际上是元素属性上的一个方法。严格来说，这是一种为元素添加或删除某个 class 的方法，具体做法是 myElement.classList.toggle('some-class') 。

如果你曾经通过 if 条件语句为元素添加 class，那就应该赶紧改用这种做法。

正确的方式是为 toggle 方法传入第二个参数，如果该参数返回 true ，则指定的 class 就会添加至元素上。

el.classList.toggle('some-orange-class', theme === 'orange');

我知道你在想些什么：这种写法违背了 ‘toggle’ 这个词的本义（开关），那些从 IE 时代过来的开发者们都这么想，他们断言应当彻底摒弃使用第二个参数的做法。

所以，我收回我的话。不必坚持这种写法了，各位请随意！

5 querySelector()

好吧，你当然知道这个方法，但据我推测，应该只有 17% 的开发者才知道，该方法可以使用在任意元素上。

打个比方，myElement.querySelector('.my-class') 的作用是返回在 myElement 的子代中包含 my-class 这个 class 的所有元素。

6 closest

该方法可在任意元素上使用，它能够向上查找元素的树型结构，可以理解为与 querySelector() 相反的方法。因此，我可以通过以下方法获取当前内容的对应标头：

myElement.closest('article').querySelector('h1');

这段方法首先向上找到最近的

元素，然后再向下找到最近的

元素。

7 getBoundingClientRect()

在对 DOM 元素调用该方法时，将返回一个包含其空间结构详细信息的简单对象。

{
  x: 604.875,
  y: 1312,
  width: 701.625,
  height: 31,
  top: 1312,
  right: 1306.5,
  bottom: 1343,
  left: 604.875
}

不过，在调用该方法时需要注意两点：

调用该方法会导致元素的重绘，根据设备与页面复杂程度的不同，重绘的时间可能会占用几毫秒。因此，如果你需要重复地调用该方法，例如在使用动画的场景下，需要特别注意这一点。
并非所有的浏览器都会返回这些值，他们有这个责任么？

8 matches()

假设我需要检查某个元素是否包括一个特定的 class。

这是最复杂的方式：

if (myElement.className.indexOf('some-class') > -1) {
  // do something
}

比上面的好一点，但和本文没什么关系：

if (myElement.className.includes('some-class')) {
  // do something
}

最佳方式：

if (myElement.matches('.some-class')) {
  // do something
}

9 insertAdjacentElement()

我今天才刚学到这一条！它的作用类似于 appendChild() ，但能够更好地控制插入子元素的具体位置。

parentEl.insertAdjacentElement('beforeend', newEl) 与 parentEl.appendChild(newEl) 的作用是一样的，但除此之外，你还可以指定 beforebegin、afterbegin 或 afterend 这几个参数值，元素将按这些值的名称所示插入相应的位置。

多么强大的控制能力！

多棒的点子。

10 contains()

你有没有遇到过这样的情形，需要知道某个元素是否被包含在另一个元素中？至少我本人经常会遇到这样的问题。

打个比方，假设我在处理一个鼠标点击事件时，需要知道它是发生在一个模态窗口中还是发生在外面（这样我才能够关闭这个窗口），我大概会这么做：

const handleClick = e => {
  if (!modalEl.contains(e.target)) modalEl.hidden = true;
};

代码中的 modalEl 是模态窗口的引用，而 e.target 则代表各种发生点击事件的元素。

有趣的是，每当遇到这种情形，在我第一遍写代码的时候，100%的概率会将其中的判断逻辑写反。

哪怕是我提高了警惕，并在保存代码之前尝试将逻辑颠倒过来写，仍然还是写错。

#11 getAttribute()

这毫无疑问是所有元素方法中最没用的一个，但有一个场景除外。

你是否记得，我在本文的开头部分曾提到，对象的属性 property 通常也会映射到它的特性 attribute 中（我在上文中特别用粗体强调了这一点，注意不是斜体）？

但在某一个场景中，这种假设并不成立，这就是某个元素的 href 特性，例如 Cat 。

调用 el.href 不会返回 /animals/cat，这可能与你的猜测不符。原因在于元素实现了 HTMLHyperlinkElementUtils接口，该接口提供了一系列辅助属性，例如 prototol 与 hash 等等，以展现与链接的目标相关的值。

href 就是其中一个实用的属性，它将返回完整的 URL，并去掉无用的空格，而不是返回在特性中所指定的相对 URL。

这样一来，如果你需要获取 href 特性中的字符串字面值，就只能使用 el.getAttribute('href') 方法了。

12 dialog 元素的三大法宝

是一个相对较新的元素，它带来了两个还算能用的方法，和一个非常棒的方法。其中show() 和 close() 方法的功能与你所想象的一样，我感觉还算可以。

而 showModal() 方法能够将

元素显示在页面的顶层，居中对齐，这正是所期望的模态窗口行为。你无需指定 z-index，或者手动添加一个灰色的背景，也不需要监听 esc 按键以关闭此窗口。浏览器能够理解模态窗口的工作方式，并自动完成你所期望的行为。

这真是太棒了。

13 forEach()

某些情况下，当你获取到一个元素列表的引用时，可以通过 forEach() 方法进行迭代式调用。

用 for() 进行循环已经是 2014 年代的老古董了。

假设你需要记录页面中所有链接的 URL，可以输入以下代码，只要你不介意看到报错。

document.getElementsByTagName('a').forEach(el ==> {
  console.log(el.href);
});

也可以这么做：

document.querySelectorAll('a').forEach(el ==> {
  console.log(el.href);
});

问题出在 getElementsByTagName 与其他类似的 get… 方法返回的是一个 HTMLCollection 接口，而 querySelectorAll返回的是一个 NodeList 接口。

而 NodeList 接口为我们提供了 forEach() 方法（此外还包括 keys()、values()，和 entries() 等方法）。

理想的情况下，最好是每个方法都只返回简单的数组，而不是返回一些类似数组的对象。不过别担心，ECMA 大神为我们提供了 Array.from() 方法，它能够把所有这些类数组对象转化为一个真正的数组。

所以，这样的代码就能够正常工作：

Array.from(document.getElementsByTagName('a')).forEach(el ==> {
  console.log(el.href);
});

奖励关卡：创建了一个数组之后，你就能够对其使用 map() 、filter() 和 reduce() 以及其他各种数组方法了。打个比方，先不管目的是什么，总之你可以按以下方式返回所有外部链接的数组：

Array.from(document.querySelectorAll('a'))
  .map(el => el.origin)
  .filter(origin => origin !== document.origin)
  .filter(Boolean);

我最喜欢的一个方法是 .filter(Boolean)，它肯定会给将来的我在调试问题时带来无穷的烦恼，哈哈。

14 表单

或许你已经知道，有一个 submit() 方法。但或许你不知道表单还有一个 reset() 方法，而且当你需要对表单元素进行验证时，还可以调用 reportValidity() 方法。

此外，你也可以通过对表单的 elements 属性加上元素的 name 特性的方式调用它的属性。打个比方，myFormEl.elements.email 将返回属于某个中的元素（‘属于’，并不代表它一定是一个‘子元素’）。

好吧，其实刚才我是骗你的。elements 并不会返回一个元素列表，而是返回一个控件列表（显然它不是一个数组，因为没必要这么做）。

举例来说：假设你有三个单选按钮，每个都有相同的名称 animal，那么 formEl.elements.animal 将返回一个单选按钮集的引用（一个控件，三个元素）。

而 formEl.elements.animal.value 将返回所选中的单选按钮的值。

这种语法看起来非常古怪，让我们来分解一下看看：formEl 是一个元素，elements 则对应 HTMLFormControlsCollection 接口，这并非一个真正的数组，其中的每一项内容也未必代表一个 HTML 元素。animal是多个单选按钮的集合，只是因为他们具有相同的 name 特性才聚集在一起（RadioNodeList 接口就是为此而生的），而 value 则返回该集合中所选中的那个单选按钮的 value 特性。

非常直观，嗯……

15 select()

感谢你耐心阅读本文，希望本文能为你带来一些新知识，给你的工作带来实际的用途。

你可能感兴趣的:(深入15个HTML元素方法，你见过吗？)

python 读excel每行替换_Python脚本操作Excel实现批量替换功能 weixin_39646695 python 读excel每行替换
Python脚本操作Excel实现批量替换功能大家好，给大家分享下如何使用Python脚本操作Excel实现批量替换。使用的工具Openpyxl，一个处理excel的python库，处理excel，其实针对的就是WorkBook，Sheet，Cell这三个最根本的元素~明确需求原始excel如下我们的目标是把下面excel工作表的sheet1表页A列的内容“替换我吧”批量替换为B列的“我用来替换的
x86-64汇编语言训练程序与实战十除以十等于一
本文还有配套的精品资源，点击获取简介：汇编语言是一种低级语言，与机器代码紧密相关，特别适用于编写系统级代码及性能要求高的应用。nasm编译器是针对x86和x86-64架构的汇编语言编译器，支持多种语法风格和指令集。项目Euler提供数学和计算机科学问题，鼓励编程技巧应用，前100个问题的答案可共享。x86-64架构扩展了寄存器数量并引入新指令，提升了数据处理效率。学习汇编语言能够深入理解计算机底层
男士护肤品哪个牌子好？十大男士护肤品排行榜高省APP珊珊
很多男生意识到护肤的必要性，开始着手护肤，但不知道该选哪个男士护肤品品牌使用好。目前市面上很多男士护肤品品牌，可谓琳琅满目，让人眼花缭乱。男士挑选护肤品时，根据自己皮肤需求去正规渠道挑选合适的知名护肤品比较放心靠谱。高省APP，是2021年推出的平台，0投资，0风险、高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个自用省钱佣金高，分享推广赚钱多的平台，百度有几百万篇报道，也期待你的加入
三菱PLC全套学习资料及应用手册 good2know
本文还有配套的精品资源，点击获取简介：三菱PLC作为工业自动化领域的核心设备，其系列产品的学习和应用需要全面深入的知识。本次资料包为学习者提供从基础到进阶的全方位学习资源，包括各种型号PLC的操作手册、编程指南、软件操作教程以及实际案例分析，旨在帮助用户系统掌握PLC的编程语言、指令系统及在各类工业应用中的实施。1.三菱PLC基础知识入门1.1PLC的基本概念可编程逻辑控制器（PLC）是工业自动化
程翔授《评价一篇记叙文》行吟斯基
桂林十一中高一2中学生自读程老师学生文章板书课题师巡看。看完举手。问：它是记叙文。不商量。独立打分。学生评价打分。师：高低都正常，不受干扰。师巡，略评。打完举手。调查：分层次举手——高分先举手。最低分。最高95分。最低45分。女：差距太大！师：同一篇，相差55分。若是你的文章，愿落谁手？男：身临其境感觉。师：你有此经历？没也没关系。女：不优美……，结尾无升华……无感悟……师：辞藻不美？(师追问)男
《玉骨遥》：大司命为什么不杀朱颜？原因没那么简单 windy天意晚晴
《玉骨遥》里，朱颜就是时影的命劫之人。重明与时影早就知道，他们一直瞒着大司命，如今大司命也知道了真相。可是大司命却没有杀朱颜，而是给朱颜下了诛心咒，还说时影的命劫已经破了，真的如此吗？1、计划总是赶不上变化的大司命从目前剧情来说，大司命还不如时影，他信心十足的事情总会有纰漏。他不让时影见命劫之女，结果时影还是遇上了。他想让时影走火入魔，一心复仇，结果时影在朱颜的劝说下放下了仇恨。大司命让时影开山收
移动端城市区县二级联动选择功能实现包 good2know
本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery
日更006 终极训练营day3 懒cici
人生创业课（2）今天的主题：学习方法一：遇到有用的书，反复读，然后结合自身实际，列践行清单，不要再写读书笔记思考这本书与我有什么关系，我在哪些地方能用到，之后我该怎么用方法二：读完书没映像怎么办?训练你的大脑，方法：每读完一遍书，立马合上书，做一场分享，几分钟都行对自己的学习要求太低，要逼自己方法三：学习深度不够怎么办？找到细分领域的榜样，把他们的文章、书籍、产品都体验一遍，成为他们的超级用户，向
15个小技巧，让我的Windows电脑更好用了！曹元_
01.桌面及文档处理第一部分的技巧，主要是围绕桌面的一些基本操作，包括主题设置、常用文档文件快捷打开的多种方式等等。主题换色默认情况下，我们的Win界面可能就是白色的文档界面，天蓝色的图表背景，说不出哪里不好看，但是就是觉得不够高级。imageimage说到高级感，本能第一反应就会和暗色模式联想起来，如果我们将整个界面换成黑夜模式的话，它会是这样的。imageimage更改主题颜色及暗色模式，我们
月光下的罪恶（5）允歌玖沐
5.被孤立顾纨是转校过来的，进入学校后，回头率很高“诶诶诶，你看那女生，哪个系的？”“不知道没见过。”“看那样，一看就是个胆小的货。”顾纨当做没听到，更狠的话她都听过，更何况女生们耍心眼？“他爸爸是做黑生意的，估计女儿也不是什么好的，你以后离他一家子远点。”她走向自己要上课的教室，一进门，所有人的目光看向她，顾纨若无其事的走进教室，开始上课。下课，一群人站起来，但是很显然，她周围的一圈人都不愿意和
day15｜前端框架学习和算法 universe_01 前端算法笔记
T22括号生成先把所有情况都画出来，然后（在满足什么情况下）把不符合条件的删除。T78子集要画树状图，把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索：每个边都走完，再回溯应用：二叉树搜索，图搜索回溯算法=DFS+剪枝T200岛屿数量（非常经典BFS宽度把树状转化成队列形式，lambda匿名函数“一次性的小函数，没有名字”setup语法糖：让代码更简洁好写的语法ref创建：基本类型的
贝多芬诞辰250周年纪念万千星河赴远方
就算不是古典音乐爱好者，你也一定听说过贝多芬。作为古典音乐史上最伟大的音乐家之一，他不仅是古典主义风格的集大成者，同时也是浪漫主义风格的开创者。贝多芬肖像画（1813年）贝多芬的一生共创作了9部交响曲、36首钢琴奏鸣曲、10部小提琴奏鸣曲、16首弦乐四重奏、1部歌剧及2部弥撒曲等等。数量虽然不及前辈海顿、莫扎特多，但他几乎改造了当时所有的音乐表达形式，赋予了它们全新的价值，对后世音乐的发展产生了极
《极简思维》第三部分小洋苏兮
整理你的人际关系如何改善人际关系？摘录：因为人际关系问题是人们生活中不快乐的主要原因。感想：感觉这个说的挺对，之前我总是埋头学习，不管舍友不管自己的合作伙伴的一些事情，但实际上，这学期关注了之后好多了摘录：“亲密关系与社交会让你健康而快乐。这是基础。太过于关注成就或不太关心人际关系的人都不怎么快乐。基本上来说，人类就是建立在人脉关系上的。”感想：但是如果有时想的太多就不太好，要以一个开放的心态跟别
力扣热题100-------54. 螺旋矩阵海航Java之路力扣 leetcode 矩阵 java
给你一个m行n列的矩阵matrix，请按照顺时针螺旋顺序，返回矩阵中的所有元素。示例1：输入：matrix=[[1,2,3],[4,5,6],[7,8,9]]输出：[1,2,3,6,9,8,7,4,5]示例2：输入：matrix=[[1,2,3,4],[5,6,7,8],[9,10,11,12]]输出：[1,2,3,4,8,12,11,10,9,5,6,7]提示：m==matrix.lengthn
我不懂什么是爱，但我给你全部我拥有的香尧
因为怕黑，所以愿意陪伴在夜中行走的人，给他一点点的安全感。因为渴望温柔与爱，所以愿意为别的孩子付出爱与温柔。因为曾遭受侮辱和伤害，所以不以同样的方式施于其他人。如果你向别人出之以利刃，对方还了你爱与包容，真的不要感激他，真的不要赞美他。每一个被人伤害过的人心里都留下了一颗仇恨的种子，他也会想要有一天以眼还眼，以牙还牙。但他未让那颗种子生根发芽，他用一把心剑又一次刺向他自己，用他血荐仇恨，开出一朵温
你要记住，最重要的是:随时做好准备，为了你可能成为更好的自己，放弃现在的自己。霖霖z
打卡人:周云日期:2018年11月09日【日精进打卡第180天】【知～学习】《六项精进》0遍共214遍《通篇》1遍共106遍《大学》2遍共347遍《坚强工作，温柔生活》ok《不抱怨的世界》104-108页《经典名句》你要记住，最重要的是:随时做好准备，为了你可能成为更好的自己，放弃现在的自己。【行～实践】一、修身：（对自己个人）1、坚持打卡二、齐家：（对家庭和家人）打扫卫生，接送孩子，洗衣做饭，陪
SpringMVC执行流程（原理），通俗易懂国服冰 SpringMVC spring mvc
SpringMVC执行流程（原理），通俗易懂一、图解SpringMVC流程二、进一步理解Springmvc的执行流程1、导入依赖2、建立展示的视图3、web.xml4、spring配置文件springmvc-servlet5、Controller6、tomcat配置7、访问的url8、视图页面一、图解SpringMVC流程图为SpringMVC的一个较完整的流程图，实线表示SpringMVC框架提
C++ 计数排序、归并排序、快速排序每天搬一点点砖 c++数据结构算法
计数排序：是一种基于哈希的排序算法。他的基本思想是通过统计每个元素的出现次数，然后根据统计结果将元素依次放入排序后的序列中。这种排序算法适用于范围较小的情况，例如整数范围在0到k之间计数排序步骤：1初始化一个长度为最大元素值加1的计数数组，所有元素初始化为02遍历原始数组，将每个元素值作为索引，在计数数组中对应位置加13将数组清空4遍历计数器数组，按照数组中的元素个数放回到元数组中计数排序的优点和
现在发挥你的优势爱生活的佑嘉
来和我做咨询的一些朋友，涉及到定位的，都会说，我不知道我的优势是什么，你能不能帮我看看？还有一些朋友，喜欢做各种测试来了解自己，测试过后，然并卵。今天，我想来聊聊优势，如何能了解自己的优势是什么。首先，我们要知道，如果要成为“不一般”的人，我们所做的事情，就要基于自身的优势。我做管理者十多年，看到每个员工都有不同的特长，有的擅长数字，有的擅长人际，有的擅长写作。这些知道自己优势并且在这方面刻意练习
2023-11-02 一帆f
发现浸润心田的感觉：今天一个机缘之下突然想分享我的婆媳关系，我一边分享一边回忆我之前和儿媳妇关系的微妙变化，特别是分享到我能感受到儿媳妇的各种美好，现在也能心平气和的和老公平等对话，看到自己看到老公，以己推人以人推己自然而然的换位思考，心中有一种美好的能量在涌动，一种浸润心田的感觉从心胸向全身扩散，美好极了……我很想记住这种感觉，赶紧把它写下来以留纪念，也就是当我看见他人的美好，美好的美妙的浸润心
贫穷家庭的孩子考上985以后会怎样？ Mellisa蜜思言
我出生在一个贫穷的农村家庭，据我妈说，我出生的时候才4斤多，而她生完我以后月子里就瘦到70斤。家里一直很穷，父母都是在菜市场卖菜的，家里还有几亩地种庄稼的。我很小开始就要去帮忙，暑假的生活就是帮忙去卖菜和割稻谷，那时候自己对于割稻谷这种事情有着莫名的恐惧，生怕自己长大以后还是每年都要过着割稻谷这种日子。父母因为忙于生计无暇顾及我的学习，幸好我因为看到他们这样子的生活，内心里有深深的恐惧感，驱使着我
实时数据流计算引擎Flink和Spark剖析程小舰 flink spark 数据库 kafka hadoop
在过去几年，业界的主流流计算引擎大多采用SparkStreaming，随着近两年Flink的快速发展，Flink的使用也越来越广泛。与此同时，Spark针对SparkStreaming的不足，也继而推出了新的流计算组件。本文旨在深入分析不同的流计算引擎的内在机制和功能特点，为流处理场景的选型提供参考。（DLab数据实验室w.x.公众号出品）一.SparkStreamingSparkStreamin
48. 旋转图像 - 力扣（LeetCode） Fiee-77 #数组 leetcode 算法 python 数据结构数组
题目：给定一个n×n的二维矩阵matrix表示一个图像。请你将图像顺时针旋转90度。你必须在原地旋转图像，这意味着你需要直接修改输入的二维矩阵。请不要使用另一个矩阵来旋转图像。示例1：输入：matrix=[[1,2,3],[4,5,6],[7,8,9]]输出：[[7,4,1],[8,5,2],[9,6,3]]示例2：输入：matrix=[[5,1,9,11],[2,4,8,10],[13,3,6,
日更50天有什么收益？星湾二宝
坚持在平台上日更50天了，平台也为我生成了日更50天徽章，小开心一下这份坚持。日更50天徽章那坚持50天都有哪些收益呢？收益一，就是最直观的那些钻和贝，我这边确实不太高，但是这些贝足够支撑我保持会员的资格，能够在发文的时候帮助友友们去除广告，方便阅读。钻和贝收益二，文章的收获，日更50天，坚持写作3.7万文字，书写的文字也从开始的流水账/碎碎念逐渐加入自己的思考和观点。以前，一个念头会一晃而过，如
别再讲道理啦，对方听不进去的方所
我之前写过一篇叫做《你总妄想改变他人》，然后就有朋友跟我说，有一些方法可以改变他人之类的。嗯，是这样，但是任何具体的问题，都要限定好语境，描述清楚前提条件，然后再表达观点，我的这位朋友的说法就犯了一刀切的错误，这样并不能让讨论正常展开（这篇我得先给她看看，不然可能会挨揍）。好了，hhhh，谁让她不能写文章呢，我就来再说一说吧。我前面说过，我们在学到一个道理、学会一种方法之后，总是迫不及待地想要去与
Git 与 GitHub 的对比与使用指南一念& 其它 git github
Git与GitHub的对比与使用指南在软件开发中，Git和GitHub是两个密切相关但本质不同的工具。下面我将逐步解释它们的定义、区别、核心概念以及如何协同使用，确保内容真实可靠，基于广泛的技术实践。1.什么是Git？Git是一个分布式版本控制系统，由LinusTorvalds于2005年创建。它的核心功能是跟踪代码文件的变化，帮助开发者管理项目历史记录、协作和回滚错误。Git是开源的，可以在本地
深入解析JVM工作原理：从字节码到机器指令的全过程
一、JVM概述Java虚拟机(JVM)是Java平台的核心组件，它实现了Java"一次编写，到处运行"的理念。JVM是一个抽象的计算机器，它有自己的指令集和运行时内存管理机制。JVM的主要职责：加载：读取.class文件并验证其正确性存储：管理内存分配和垃圾回收执行：解释或编译字节码为机器指令安全：提供沙箱环境限制恶意代码二、JVM架构详解JVM由三个主要子系统组成：1.类加载子系统类加载过程分为
Spring进阶 - SpringMVC实现原理之DispatcherServlet处理请求的过程倾听铃的声后端 spring java mvc 开发语言分布式
前文我们有了IOC的源码基础以及SpringMVC的基础，我们便可以进一步深入理解SpringMVC主要实现原理，包含DispatcherServlet的初始化过程和DispatcherServlet处理请求的过程的源码解析。本文是第二篇：DispatcherServlet处理请求的过程的源码解析。@pdaiSpring进阶-SpringMVC实现原理之DispatcherServlet处理请求的
叮嘱!北恒高级班周一丰创投杯量化私募大赛不正规！受骗不能提现出金被骗真相曝光！天权顾问
量化北恒私募实盘大赛周一丰投票项目安全吗?量化北恒私募实盘大赛周一丰积分投票已经亏损被骗了怎么办？警惕!量化北恒私募实盘大赛周一丰十选五项目合法吗——杀猪盘骗局！被骗提不了款!提不了现!出不来金!不要上当!自古有句话讲得好“人善被欺、马善被骑”，现如今也是被骗子利用到了极致，人善就真该被欺骗吗？狡猾的骗子们就利用到了这点，利用同情心、爱心去进行诈骗，宣传公益捐款、爱心慈善打比赛来骗取资金！正常的投
读书能沁润心灵平等乡马回营小学方燕姣
书，是一泓清澈的溪水，是一片充满生机的芳草地。读书能让孩子的心变得宁静、诗意、豁达。在美好年纪，美好的时光里，我们要创造一切可以创造的机会，让孩子去遨游浩瀚的书海，浸润美好的人生。每个早晨，一股花草的清香扑了个满怀，清脆的读书声响彻了整个校园，回荡在空中久久不能停息。自然界的清韵声音有：鸟鸣声、溪流声、松风声、雨打芭蕉声，而惟读书声最为动听。孩子们的读书声，混和着树上的鸟鸣声，还有微风吹动竹叶的声
Nginx负载均衡 510888780 nginx 应用服务器
Nginx负载均衡一些基础知识: nginx 的 upstream目前支持 4 种方式的分配 1)、轮询（默认）每个请求按时间顺序逐一分配到不同的后端服务器，如果后端服务器down掉，能自动剔除。 2)、weight 指定轮询几率，weight和访问比率成正比
RedHat 6.4 安装 rabbitmq bylijinnan erlang rabbitmq redhat
在 linux 下安装软件就是折腾，首先是测试机不能上外网要找运维开通，开通后发现测试机的 yum 不能使用于是又要配置 yum 源，最后安装 rabbitmq 时也尝试了两种方法最后才安装成功机器版本： [root@redhat1 rabbitmq]# lsb_release LSB Version: :base-4.0-amd64:base-4.0-noarch:core
FilenameUtils工具类 eksliang FilenameUtils common-io
转载请出自出处：http://eksliang.iteye.com/blog/2217081 一、概述这是一个Java操作文件的常用库，是Apache对java的IO包的封装，这里面有两个非常核心的类FilenameUtils跟FileUtils，其中FilenameUtils是对文件名操作的封装;FileUtils是文件封装，开发中对文件的操作，几乎都可以在这个框架里面找到。非常的好用。
xml文件解析SAX 不懂事的小屁孩 xml
xml文件解析:xml文件解析有四种方式， 1.DOM生成和解析XML文档(SAX是基于事件流的解析) 2.SAX生成和解析XML文档(基于XML文档树结构的解析) 3.DOM4J生成和解析XML文档 4.JDOM生成和解析XML 本文章用第一种方法进行解析，使用android常用的DefaultHandler import org.xml.sax.Attributes;
通过定时任务执行mysql的定期删除和新建分区，此处是按日分区酷的飞上天空 mysql
使用python脚本作为命令脚本，linux的定时任务来每天定时执行 #!/usr/bin/python # -*- coding: utf8 -*- import pymysql import datetime import calendar #要分区的表 table_name = 'my_table' #连接数据库的信息 host,user,passwd,db =
如何搭建数据湖架构？听听专家的意见蓝儿唯美架构
Edo Interactive在几年前遇到一个大问题：公司使用交易数据来帮助零售商和餐馆进行个性化促销，但其数据仓库没有足够时间去处理所有的信用卡和借记卡交易数据 “我们要花费27小时来处理每日的数据量，”Edo主管基础设施和信息系统的高级副总裁Tim Garnto说道：“所以在2013年，我们放弃了现有的基于PostgreSQL的关系型数据库系统，使用了Hadoop集群作为公司的数
spring学习——控制反转与依赖注入 a-john spring
控制反转（Inversion of Control，英文缩写为IoC）是一个重要的面向对象编程的法则来削减计算机程序的耦合问题，也是轻量级的Spring框架的核心。控制反转一般分为两种类型，依赖注入（Dependency Injection，简称DI）和依赖查找（Dependency Lookup）。依赖注入应用比较广泛。
用spool+unixshell生成文本文件的方法 aijuans xshell
例如我们把scott.dept表生成文本文件的语句写成dept.sql,内容如下: 　　set pages 50000; 　　set lines 200; 　　set trims on; 　　set heading off; 　　spool /oracle_backup/log/test/dept.lst; 　　select deptno||','||dname||','||loc
1、基础--名词解析(OOA/OOD/OOP) asia007 学习基础知识
OOA:Object-Oriented Analysis（面向对象分析方法）是在一个系统的开发过程中进行了系统业务调查以后，按照面向对象的思想来分析问题。OOA与结构化分析有较大的区别。OOA所强调的是在系统调查资料的基础上，针对OO方法所需要的素材进行的归类分析和整理，而不是对管理业务现状和方法的分析。　　OOA（面向对象的分析）模型由5个层次（主题层、对象类层、结构层、属性层和服务层）
浅谈java转成json编码格式技术百合不是茶 json编码 java转成json编码
json编码;是一个轻量级的数据存储和传输的语言在java中需要引入json相关的包,引包方式在工程的lib下就可以了 JSON与JAVA数据的转换（JSON 即 JavaScript Object Natation，它是一种轻量级的数据交换格式，非常适合于服务器与 JavaScript 之间的数据的交
web.xml之Spring配置(基于Spring+Struts+Ibatis) bijian1013 java web.xml SSI spring配置
指定Spring配置文件位置 <context-param> <param-name>contextConfigLocation</param-name> <param-value> /WEB-INF/spring-dao-bean.xml,/WEB-INF/spring-resources.xml, /WEB-INF/
Installing SonarQube（Fail to download libraries from server） sunjing Install Sonar
1. Download and unzip the SonarQube distribution 2. Starting the Web Server The default port is "9000" and the context path is "/". These values can be changed in &l
【MongoDB学习笔记十一】Mongo副本集基本的增删查 bit1129 mongodb
一、创建复本集假设mongod,mongo已经配置在系统路径变量上，启动三个命令行窗口，分别执行如下命令： mongod --port 27017 --dbpath data1 --replSet rs0 mongod --port 27018 --dbpath data2 --replSet rs0 mongod --port 27019 -
Anychart图表系列二之执行Flash和HTML5渲染白糖_ Flash
今天介绍Anychart的Flash和HTML5渲染功能 HTML5 Anychart从6.0第一个版本起，已经逐渐开始支持各种图的HTML5渲染效果了，也就是说即使你没有安装Flash插件，只要浏览器支持HTML5，也能看到Anychart的图形（不过这些是需要做一些配置的）。这里要提醒下大家，Anychart6.0版本对HTML5的支持还不算很成熟，目前还处于
Laravel版本更新异常4.2.8-> 4.2.9 Declaration of ... CompilerEngine ... should be compa bozch laravel
昨天在为了把laravel升级到最新的版本，突然之间就出现了如下错误： ErrorException thrown with message "Declaration of Illuminate\View\Engines\CompilerEngine::handleViewException() should be compatible with Illuminate\View\Eng
编程之美-NIM游戏分析-石头总数为奇数时如何保证先动手者必胜 bylijinnan 编程之美
import java.util.Arrays; import java.util.Random; public class Nim { /**编程之美 NIM游戏分析问题：有N块石头和两个玩家A和B，玩家A先将石头随机分成若干堆，然后按照BABA...的顺序不断轮流取石头，能将剩下的石头一次取光的玩家获胜，每次取石头时，每个玩家只能从若干堆石头中任选一堆，
lunce创建索引及简单查询 chengxuyuancsdn 查询创建索引 lunce
import java.io.File; import java.io.IOException; import org.apache.lucene.analysis.Analyzer; import org.apache.lucene.analysis.standard.StandardAnalyzer; import org.apache.lucene.document.Docume
[IT与投资]坚持独立自主的研究核心技术 comsci it
和别人合作开发某项产品....如果互相之间的技术水平不同,那么这种合作很难进行,一般都会成为强者控制弱者的方法和手段..... 所以弱者,在遇到技术难题的时候,最好不要一开始就去寻求强者的帮助,因为在我们这颗星球上,生物都有一种控制其
flashback transaction闪回事务查询 daizj oracle sql 闪回事务
闪回事务查询有别于闪回查询的特点有以下3个：（1）其正常工作不但需要利用撤销数据，还需要事先启用最小补充日志。（2）返回的结果不是以前的“旧”数据，而是能够将当前数据修改为以前的样子的撤销SQL（Undo SQL）语句。（3）集中地在名为flashback_transaction_query表上查询，而不是在各个表上通过“as of”或“vers
Java I/O之FilenameFilter类列举出指定路径下某个扩展名的文件游其是你 FilenameFilter
这是一个FilenameFilter类用法的例子，实现的列举出“c:\\folder“路径下所有以“.jpg”扩展名的文件。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
C语言学习五函数，函数的前置声明以及如何在软件开发中合理的设计函数来解决实际问题 dcj3sjt126com c
# include <stdio.h> int f(void) //括号中的void表示该函数不能接受数据，int表示返回的类型为int类型 { return 10; //向主调函数返回10 } void g(void) //函数名前面的void表示该函数没有返回值 { //return 10; //error 与第8行行首的void相矛盾 } in
今天在测试环境使用yum安装，遇到一个问题： Error: Cannot retrieve metalink for repository: epel. Pl dcj3sjt126com centos
今天在测试环境使用yum安装，遇到一个问题： Error: Cannot retrieve metalink for repository: epel. Please verify its path and try again 处理很简单，修改文件“/etc/yum.repos.d/epel.repo”，将baseurl的注释取消， mirrorlist注释掉。即可。 &n
单例模式 shuizhaosi888 单例模式
单例模式懒汉式 public class RunMain { /** * 私有构造 */ private RunMain() { } /** * 内部类，用于占位，只有 */ private static class SingletonRunMain { priv
Spring Security（09）——Filter 234390216 Spring Security
Filter 目录 1.1 Filter顺序 1.2 添加Filter到FilterChain 1.3 DelegatingFilterProxy 1.4 FilterChainProxy 1.5
公司项目NODEJS实践0.1 逐行分析JS源代码 mongodb nginx ubuntu nodejs
一、前言前端如何独立用nodeJs实现一个简单的注册、登录功能，是不是只用nodejs+sql就可以了？其实是可以实现，但离实际应用还有距离，那要怎么做才是实际可用的。网上有很多nod
java.lang.Math liuhaibo_ljf java Math lang
System.out.println(Math.PI); System.out.println(Math.abs(1.2)); System.out.println(Math.abs(1.2)); System.out.println(Math.abs(1)); System.out.println(Math.abs(111111111)); System.out.println(Mat
linux下时间同步 nonobaba ntp
今天在linux下做hbase集群的时候，发现hmaster启动成功了，但是用hbase命令进入shell的时候报了一个错误 PleaseHoldException: Master is initializing，查看了日志，大致意思是说master和slave时间不同步，没办法，只好找一种手动同步一下，后来发现一共部署了10来台机器，手动同步偏差又比较大，所以还是从网上找现成的解决方
ZooKeeper3.4.6的集群部署 roadrunners zookeeper 集群部署
ZooKeeper是Apache的一个开源项目，在分布式服务中应用比较广泛。它主要用来解决分布式应用中经常遇到的一些数据管理问题，如：统一命名服务、状态同步、集群管理、配置文件管理、同步锁、队列等。这里主要讲集群中ZooKeeper的部署。 1、准备工作我们准备3台机器做ZooKeeper集群，分别在3台机器上创建ZooKeeper需要的目录。数据存储目录
Java高效读取大文件 tomcat_oracle java
　　读取文件行的标准方式是在内存中读取，Guava 和Apache Commons IO都提供了如下所示快速读取文件行的方法：　　Files.readLines(new File(path), Charsets.UTF_8); 　　FileUtils.readLines(new File(path)); 　　这种方法带来的问题是文件的所有行都被存放在内存中，当文件足够大时很快就会导致
微信支付api返回的xml转换为Map的方法 xu3508620 xml map 微信api
举例如下： <xml> <return_code><![CDATA[SUCCESS]]></return_code> <return_msg><![CDATA[OK]]></return_msg> <appid><

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他