queryselector | 易学教程

0180 定时器之 setInterval() ：开启定时器，京东倒计时案例，停止定时器，发送短信倒计时案例

阅读更多关于 0180 定时器之 setInterval() ：开启定时器，京东倒计时案例，停止定时器，发送短信倒计时案例

1、开启定时器 timeout：暂停; 超时。 interval： (时间上的) 间隔，间隙，间歇。 <script> // 1. setInterval setInterval(function() { console.log('继续输出'); }, 1000); </script> 2、案例：京东倒计时 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { margin: 200px; } span { display: inline-block; width: 40px; height: 40px; background-color: #333; font-size: 20px; color: #fff; text-align: center; line-height: 40px; } </style> </head> <body> <div> <span class="hour">1

移动端事件简介

阅读更多关于移动端事件简介

pc端事件在移动端的问题移动设备主要特点是不配备鼠标，键盘也只是在需要输入的地方才会激活虚拟键盘。所以以前的pc端事件在移动端使用起来就没有以前那么爽了，虽然部分仍然可以使用。 click事件的300ms延迟问题。 2007年第一代iphone发布，由于那个年代所有的网页都是针对大屏的pc端设计的，iphone的Safari浏览器为了让用户浏览网页的时候可以浏览到整个网页，把viewport设置为960px(参考前面的文章)，好是好，但是由于缩放了整个页面，导致内容变得非常小，视力6.0的都不一定看得清楚。所以Safari浏览器自带了一个当时看起来相当酷的一个功能：双击缩放。你双击页面的时候，浏览器会智能的缩放当前页面到原始大小。双击缩放的原理就是，当你click一次之后，会经过300ms之后检测是否再有一次click，如果有的话，就会缩放页面。否则的话就是一个click事件。所以，当你想执行click操作的时候，就感觉到了”卡顿”。如果点击之后100ms之后没有反应，基本就有卡顿的感觉。 dblclick事件失效由于双击缩放的存在，pc端的dblclick事件也失效了。 2.2移动端web新增touch事件随着触屏设备的普及，w3c为移动端web新增了touch事件。最基本的touch事件包括4个事件： touchstart 当在屏幕上按下手指时触发

JavaScript DOM

阅读更多关于 JavaScript DOM

获取元素根据 ID 获取元素语法: document.getElementById(id) <div id='time'>2020-01-09</div> <script> var timer = document.getElementById('time'); console.log(timer); // 根据 ID 获取 // 查看里面的属性和方法 console.dir(timer) </script> 根据标签名获取元素语法: document.getElementsByTagName('标签名') <ul> <li>u1</li> </ul> <ol id="ol"> <li>ol</li> </ol> <script> // 根据元素名获取 var lis = document.getElementsByTagName('li'); console.log(lis); // HTMLCollection(2) [li, li] 返回所有的 ol和ul 的 li 元素是复数 // 可以通过ele 继续获取元素名 var ol_ele = document.getElementById('ol'); var ol_lis = ol_ele.getElementsByTagName('li'); console.log(ol_lis); // ol 下所有的li <

ES6基础与解构赋值（高颜值弹框小案例！）

阅读更多关于 ES6基础与解构赋值（高颜值弹框小案例！）

let只作用在当前块级作用域内使用let或者const声明的变量，不能再被重新声明 let不存在`变量提升` console.log(dad); var dad = '我是爸爸!';//预定义undefined console.log(dad); let dad = '我是爸爸!';//报错生成十个按钮每个按点击的时候弹出1 - 10 var 方法： var i = 0; for (i = 1; i <= 10; i ++) { (function(i) { var btn = document.createElement('button'); btn.innerText = i; btn.onclick = function() { alert(i) }; document.body.appendChild(btn); })(i); } let方法： for (let i = 1; i <= 10; i ++) { var btn = document.createElement('button'); btn.innerText = i; btn.onclick = function() { alert(i) }; document.body.appendChild(btn); } ES6之前的作用域：全局作用域、函数作用域、eval作用域、ES6块级作用域

粘贴复制

阅读更多关于粘贴复制

js实现粘贴到剪贴板的功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>copy example</title> </head> <body> <input type="text" placeholder="请输入文字" id="selector"> <button id="copy">点击复制</button> </body> <script> var copy = document.querySelector('#copy') copy.addEventListener('click',()=>{ var val = document.querySelector("#selector"); val.select() document.execCommand('Copy') },false) </script> </html> 第二个 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>copy example</title> </head> <body> <a id="selector">我是老大</a> <button id="copy">点击复制</button> </body>

Javascript事件系统

阅读更多关于 Javascript事件系统

事件基础注意：本文不会深入探究Javascript的事件循环。提到事件，相信每位Javascript开发者都不会陌生，由于Javascript是先有实现，后有规范，因此，对于大部分人来说，事件模块可以说是比较模糊的，本文将从不同角度帮助你理清楚事件模块。事件的本质可以说是一个回调函数，当事件触发时会调用你的监听函数。事件是一定会触发的，如果没有对应的监听函数，就不会执行回调。比如下面就是用户点击指定元素打印日志的例子： document.querySelector('#button').onclick = function() { console.log('clicked'); }; 事件基础相信大家都没什么问题，重点在后面的内容。事件监听方式由于历史原因，Javascript目前存在三种事件监听方式： HTML代码中监听 DOM0级监听 DOM2级监听 Q: 为啥从DOM0级开始？ 1998年，W3C综合各浏览器厂商的现有API，指定了DOM1标准。在DOM1标准出现之前浏览器已有的事件监听方式叫做DOM0级。 Q：DOM1级监听到哪里去了？由于DOM1标准只是对DOM0标准的整理+规范化，并没有增加新的内容，因此DOM0级可以看做DOM1级。 HTML代码监听 <button onclick="alert('Hello World!')">点我</button>

HTML5中类jQuery选择器querySelector的使用

阅读更多关于 HTML5中类jQuery选择器querySelector的使用

简介 HTML5向Web API新引入了 document.querySelector 以及 document.querySelectorAll 两个方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器。这使得在编写原生JavaScript代码时方便了许多。用法两个方法使用差不多的语法，都是接收一个字符串参数，这个参数需要是合法的CSS选择语法。 element = document.querySelector('selectors'); elementList = document.querySelectorAll('selectors'); 其中参数selectors 可以包含多个CSS选择器，用逗号隔开。 element = document.querySelector('selector1,selector2,...'); elementList = document.querySelectorAll('selector1,selector2,...'); 使用这两个方法无法查找带伪类状态的元素，比如 querySelector(':hover') 不会得到预期结果。 querySelector 该方法返回满足条件的单个元素。按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找，返回第一个满足条件的元素。 element =

document.querySelector和querySelectorAll方法

阅读更多关于 document.querySelector和querySelectorAll方法

querySelector和querySelectorAll是W3C提供的新的查询接口，其主要特点如下： 1、querySelector只返回匹配的第一个元素，如果没有匹配项，返回null。 2、querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。 3、返回的结果是静态的，之后对document结构的改变不会影响到之前取到的结果。这两个方法都可以接受三种类型的参数：id(#)，class(.)，标签，很像jquery的选择器。 var obj = document.querySelector("#id"); var obj = document.querySelector(".classname");var obj = document.querySelector("div"); var el = document.body.querySelector("style[type='text/css'], style:not([type])"); var elements = document.querySelectorAll("#score>tbody>tr>td:nth-of-type(2)");var elements = document.querySelectorAll("#id1, #id2, .class1,

document.querySelector()和document.querySelectorAll()

阅读更多关于 document.querySelector()和document.querySelectorAll()

HTML5向Web API新引入了 document.querySelector()和document.querySelectorAll()两个方法，都可以接收三种类型的参数：id(#)，class(,)，标签，就像jquery选择器，参数需要是合法的CSS选择语法。用起来更方便的从DOM中选取元素，功能类似于jquery的选择器，这样在写原生js代码的时候就方便了许多。 document.querySelector() 返回文档中匹配指定的选择器组的第一个元素(使用深度优先先序遍历文档的节点 | 并且通过文档标记中的第一个元素，并按照子节点数量的顺序迭代顺序节点)。语法： element = document.querySelector(selectors); 其中： 1，element是一个element对象（DOM元素）。 2. selectors是一个字符串，包含一个或多个CSS选择器，多个则以逗号分割。例子：这个例子中，会返回当前文档中第一个类名为‘myclass’的元素： var el = document.querySelector(".myclass"); Document.querySelectorAll() 返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。语法： elementList

js动画

阅读更多关于 js动画

1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js动画</title> 6 <style type="text/css"> 7 .box { 8 width: 200px; 9 height: 200px; 10 background-color: red; 11 transition: .3s; 12 } 13 .box.r { 14 border-radius: 50%; 15 } 16 .box.h { 17 height: 400px; 18 } 19 </style> 20 </head> 21 <body> 22 <button class="btn1">变长</button> 23 <button class="btn2">切换宽度</button> 24 <button class="btn3">切换边界圆角</button> 25 <button class="btn4">切换高度</button> 26 <button class="btn5">变短</button> 27 <div class="box"></div> 28 </body> 29 <script type="text/javascript"> 30 var box =

订阅 queryselector