queryselector | 易学教程

强大DOM选择器querySelector

阅读更多关于强大DOM选择器querySelector

今天碰到问题，用了下不经常用的 querySelector 还不错 querySelector 和 querySelectorAll 的使用非常的简单，就像标题说到的一样，它和 CSS 的写法完全一样，对于前端开发人员来说，这是难度几乎为零的一次学习。假如我们有一个 id 为 test 的 DIV，为了获取到这个元素，你也许会像下面这样： document.getElementById("test"); 现在我们来试试使用新方法来获取这个 DIV： document.querySelector("#test"); document.querySelectorAll("#test")[0]; 感觉区别不大是吧，但如果是稍微复杂点的情况，原始的方法将变得非常麻烦，这时候 querySelector 和 querySelectorAll 的优势就发挥出来了。比如接下来这个例子，我们将在 document 中选取 class 为 test 的 div 的子元素 p 的第一个子元素，当然这很拗口，但是用本文的新方法来选择这个元素，比用言语来描述它还要简单。 1 document.querySelector("div.test>p:first-child"); 2 3 document.querySelectorAll("div.test>p:first-child")[0]; 4 5 6

webAPI

阅读更多关于 webAPI

graph TDA[JS]A -->|JS语法| D[ECMAScript]A -->|页面文档对象模型| E[DOM]A -->|浏览器对象模型| F[BOM] API 应用程序编程接口，就是一个工具，以便于能轻松实现想要完成的功能 Web API Web API是浏览器提供的一套操作浏览器功能和页面元素的API（DOM和BOM） DOM 可以改变网页的内容、结构和样式 DOM树文档：一个页面就是一个文档 document 元素：页面中的所有标签都是元素，element 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），node DOM把以上内容都看作是对象 DOM操作获取元素 getElementById() 注意：因为文档页面从上往下加载，所以先有标签，然后才能getElementById 参数是字符串，所以需要加引号返回的是一个 element 对象 console.dir 可以打印返回的元素对象，更好的查看里面的属性和方法 getElementsByTagName() 参数是字符串，所以需要加引号d 得到的是对象的集合，可以用遍历来获取所有对象得到的是动态的例子: 获取ol里面的li <ol><li>123一二三四五</li><li>123上山打老虎</li><li>123老虎有几只</li><li>123快来数一数</li><li>123一二三四五

js语法

阅读更多关于 js语法

js选择器 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js选择器</title> </head> <body> <div id="d" class="box"></div> <input type="text" id="d2" class="box" /> <h3 class="h3"></h3> </body> <script> // 1、标签id名会存放到页面的名称空间中，在js内可以直接访问该名称空间，如果有同id的，多个对象都会获取，放在一个列表里 // console.log(d); // 2、getElement系列 // 根据id获取，如果有同id，会有阻隔机制，只会获取第一个 var d1 = document.getElementById('d'); console.log(d1); var d2 = document.getElementById('d2'); console.log(d2); // 根据类名获取，可以有相同类名，会全部获取放在列表里 var boxs = document.getElementsByClassName('box'); console.log(boxs[0]); // 不管结果是几个(0~n)，都用列表来存放查询的结果 let h3 = document

Vue项目pdf(base64)转图片

阅读更多关于 Vue项目pdf(base64)转图片

公司有个业务需求,要求后台传pdf的base64编码给前端,前端显示到界面上,后来在网上搜索了很多关于base64转pdf的文章,都写的不是非常的详细,在实现的过程中遇到很多坑,经过一天的研究终于实现了这个功能,分享一下我在这个功能中遇到的问题和解决方法要注明的是这里用到的核心插件是pdf.js,原理是动态生成canvas标签,然后通过pdf.js生成一个能渲染出pdf的对象,随后渲染每个canvas,并且生成的pdf是画面的形式,并没有pdf之类的控件引入插件这里很多博客都是使用JavaScript原生的方法引入pdf.js,例如使用script标签引入外部的js脚本,或者直接把pdf.js的源码复制到项目中,但是我尝试这些方法的时候都不是特别好用,而且引入后导致项目体积过于庞大, 随后我去github上寻找通过包管理器引入pdf.js的方法,在 pdf.js 的github上官方说明的是用gulp如何使用pdf.js,但是对于npm来说并没有详细说明,终于我在字里行间发现了这么一句话 To use PDF.js in a web application you can choose to use a pre-built version of the library or to build it from source. We supply pre-built

c# WPF——完成一个简单的百度贴吧爬虫客户端

阅读更多关于 c# WPF——完成一个简单的百度贴吧爬虫客户端

话不多说先上图爬取10页大概500个帖子大概10s,500页2w多个帖子大概2min,由此可见性能并不是特别好，但是也没有很差。好了话不多说，我们来一步一步实现这么个简易的客户端。 1.创建项目创建一个WPF空项目，导入需要的Devexpress的dll Devexpress可以到官网下载，基本16版本以上都可以。下载试用版的也可以，基本到期也不会限制你使用，只有开发的时候会弹出框，叉掉即可，比较良心。下载地址: https://www.devexpress.com/ 2.编辑界面基本就是xaml代码的编写，DevExpress的demo中心也有很多样例，直接上代码。 <dx:ThemedWindow x:Class="SearchAnyWay.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

JS

阅读更多关于 JS

创建元素 const newImage = document.createElement('img'); newImage.setAttribute('src', "images/picxxx.jpg".replace('xxx',i)); thumbBar.appendChild(newImage); 获取元素： const btn = document.querySelector('button'); //button,可以为p，h，等Css中的标签以及类、id，元素属性： name = btn.getAttribute('class'); btn.setAttribute('class', 'light'); btn.textContent = '变亮';// 显示在页面上的值添加监听器： timingBtn.addEventListener('click', Timing); resetBtn.onclick = reset; 对数字取整的方法有四种： 1、parseInt（）丢弃小数部分，只保留整数 2、Math.ceil() 向上取整 3、Math.round() 四舍五入取整 4、Math.floor() 向下取整数字与字符串互转： a = “12” b = Number(a)//转数字 c = b.toString() //转字符串字符串长度： a

【vue】纯前端导出表格数据（vue+element-ui）

阅读更多关于【vue】纯前端导出表格数据（vue+element-ui）

1.安装依赖安装依赖xlsx，file-saver npm install --save xlsx file-saver 2.在组件中引入 import FileSaver from 'file-saver' import XLSX from 'xlsx' 3.添加下载方法 #out-table为table节点的id outTab ( ) { /* 从表生成工作簿对象 */ var xlsxParam = { raw : true } // 导出的内容只做解析，不进行格式转换 var wb = XLSX . utils . table_to_book ( document . querySelector ( "#Console" ) , xlsxParam ) ; /* 获取二进制字符串作为输出 */ var wbout = XLSX . write ( wb , { bookType : "xlsx" , bookSST : true , type : "array" } ) ; var date = this . getTime ( ) ; try { FileSaver . saveAs ( //Blob 对象表示一个不可变、原始数据的类文件对象。 //Blob 表示的不一定是JavaScript原生格式的数据。 //File 接口基于Blob，继承了 blob

vue自定义事件---拖拽

阅读更多关于 vue自定义事件---拖拽

margin布局拖拽 Vue.directive('drag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('#top'); // const dragDom = el.querySelector('.alert_child'); dialogHeaderEl.style.cursor = 'move'; let dragBox = el; //获取当前元素 dialogHeaderEl.onmousedown = e => { //算出鼠标相对元素的位置 let disX = e.clientX - dragBox.offsetLeft; let disY = e.clientY - dragBox.offsetTop; document.onmousemove = e => { //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置 let left = e.clientX - disX; let top = e.clientY - disY; //移动当前元素 dragBox.style.marginLeft = left + "px"; dragBox.style.marginTop = top + "px"; }; document.onmouseup =

vue下个人实现拼图验证码

阅读更多关于 vue下个人实现拼图验证码

缘由：之前看哔哩哔哩官网登录的时候有一个拼图验证码，很好奇怎么去实现。然后就想着自己弄一个。先给大家看我的最终效果。后面再一点点拆解代码。为什么想着写这个功能呢，主要在于拼图验证码在前端这里会比较复杂并且深入。相比文字拼写，12306的图片验证码都没有拼图验证码对前端的要求来的复杂，和难。我总结下知识点： 1、弹窗功能 2、弹窗基于元素定位 3、元素拖动 4、canvas绘图 5、基础逻辑一、弹窗和弹窗组件抱歉，这里我偷懒了直接用了elementUI的el-popover组件，所以小伙伴不懂的直接看elementUI官网的说明。我个人也研究和编写了这块的组件功能（基于 popper .js）二、编写基础结构这块属于html的基础内容，也就标题党了三、canvas绘制图片 1、canvas绘制外部img图片代码： let mainDom = document.querySelector("#codeImg"); let bg = mainDom.getContext("2d"); let width = mainDom.width; let height = mainDom.height; let blockDom = document.querySelector("#sliderBlock"); let block = blockDom.getContext(

Shadow DOM系列4-样式（续）

阅读更多关于 Shadow DOM系列4-样式（续）

英文链接： Shadow DOM: Styles (cont.) , 29 AUGUST 2013 on Web Components, Shadow DOM 在昨天的博文里我们整体讨论了设置 Shadow DOM 样式的一些基本事项，但我们仅仅触及了一些皮毛。今天我们紧接着上文继续讨论怎样使用分布节点（distributed nodes）以及怎样将我们的组件打通使外部可以使用并自定义。在今天开始之前，我想要感谢 Eric Bidelman 的这篇介绍 Shadow DOM 样式添加的宏文（可以戳中文译版）。本文的大部分都是我对他这篇博文内容的实践。如果有机会的话你一定要去读一下 HTLM5 Rocks 关于 Web Components 的全部文章。技术支持我建议你使用 Chrome v33+ 来实验本文的例子，因为 33+ 的 Chrome 对我所描述的这些新特性都有浏览器的原生支持。分布节点通过阅读各种博客，我认识到了一点：在使用 shadow DOM 的时候应该确保内容和表现的分离。换句话说，如果你的一个按钮上想展示一些文本，那么这些文本应该来自页面而不是埋在 shadow DOM 的模板里。来自页面并通过 <content> 标签添加到 shadow DOM 的内容被称为分布节点。在最开始我困惑于如何给分布节点添加样式的时候，我这样写

订阅 queryselector