queryselector

画布、拖放事件、音视频

こ雲淡風輕ζ 提交于 2019-12-04 17:32:09
一、拖放事件 1.1 设置拖拽 给标签设置一个draggable设置为true, 标签就可以拖拽了 1.2 拖拽事件 1.2.1拖拽元素事件 (事件对象为被拖拽元素) ondragstart 拖拽前触发 ondragend 拖拽结束触发 ondrag 拖拽前、拖拽结束之间,连续触发 看实例: <div draggable="true"><img src="images/225.jpg" alt="" style="width:100px;height: 100px;" ></div> <script> var box = document.querySelector("div"); box.ondragstart = function(){ console.log("我被拖拽了!"); } box.ondrag = function(){ console.log("我在被拖拽的过程中"); } box.ondragend = function(){ console.log("拖拽结束了!"); } </script> 1.2.2 目标元素事件 (俗解:意思就是拖拽的元素放在哪里) ondragenter 进入目标元素触发,相当于mouserover ondragover 进入目标,离开目标之间,连续触发 ondragleave 离开目标元素触发,相当于mouseout ondrop

案例:使用xml存储数据

ぃ、小莉子 提交于 2019-12-04 16:22:25
HTML: <!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> </head> <body> <button>获取ajax信息</button> <h3></h3> <script> document.querySelector("button").onclick = function() { // 创建异步对象 var xhr = new XMLHttpRequest(); // 设置请求行 xhr.open("get", "./person.php"); // 设置请求头(get请求可以省略) // 注册状态改变事件 xhr.onreadystatechange = function() { // 判断状态&&请求是否成功并使用数据 if (xhr.readyState == 4 && xhr.status == 200) { // 返回的是xml 通过 responseText只能够获取到 字符串

ES6面向对象 动态添加标签页

半城伤御伤魂 提交于 2019-12-04 02:32:07
HTML <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>ES6</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <main> <h4> ES6面向对象 动态添加标签页 </h4> <div class="tabsbox" id="tab"> <nav class="firstnav"> <ul> <li class="liactive"><span>标签1</span><span class="iconfont"><img src="https://mychalk.oss-cn-hangzhou.aliyuncs.com/images/cc.png" /></span></li> <li><span>标签2</span><span class="iconfont"><img src="https://mychalk.oss-cn-hangzhou.aliyuncs.com/images/cc.png" /></span></li> <li><span>标签3</span><span class=

图片上传预览转压缩并转base64详解(dShowImg64.js)

泄露秘密 提交于 2019-12-04 02:13:34
hello,大家好,游戏开始了,欢迎大家收看这一期的讲解。本次的内容是图片的上传预览。最后发源码链接。 废话不多说,先上图。 待上传图像 点击蓝色框内,pc可以选择文件,移动端选择拍照或选择图片进行上传。 HTML部分 <div class="img-box"> <div class="card-box"> <div class="default-box" > <img class="default-img" src="./cardFactory.png" alt=""> <div class="default-title">请点击</div> <img class="add-img" src="./add.png" alt=""> </div> <div class="up-img" id="upImg"></div> <input type="file" id="addImg" class="upImg-btn"> </div> </div> .default-box这层就是加号图像 up-img是转码后显示图像的地方。 下面input是选择图像的地方。 css .img-box { display: flex; justify-content: center; align-items: center; } .card-box { width: 7.5rem; height:

利用puppeteer破解极验的滑动验证

人盡茶涼 提交于 2019-12-03 07:51:42
本文转载于: 猿2048 网站➣ https://www.mk2048.com/blog/blog.php?id=hcaih2i0ab 上一篇文章 写了一个puppeteer的简单入门,出于好奇想了一个问题,puppeteer能破解验证码吗???于是,正好就拿前端网来试试 (纯粹出于学习) 基本的流程 : 1. 打开前端网,点击登录。 2. 填写账号,密码。 3. 点解验证按钮,通过滑动验证,最后成功登陆。 代码实现 : github 上可以checkout。 run.js const puppeteer = require('puppeteer'); const devices = require('puppeteer/DeviceDescriptors'); const iPhone = devices['iPhone 6 Plus']; let timeout = function (delay) { return new Promise((resolve, reject) => { setTimeout(() => { try { resolve(1) } catch (e) { reject(0) } }, delay); }) } let page = null let btn_position = null let times = 0 // 执行重新滑动的次数

How to get element in shadow root with JavaScript?

匿名 (未验证) 提交于 2019-12-03 07:50:05
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试): 问题: I need get elements from Shadow DOM and change it. How i can do it? 回答1: Here is an example: var container = document.querySelector('#example'); //Create shadow root ! var root = container.createShadowRoot(); root.innerHTML = ' Root Element in shadow '; //Access the element inside the shadow ! //"container.shadowRoot" represents the youngest shadow root that is hosted on the element ! console.log(container.shadowRoot.querySelector(".test").innerHTML); Demo: var container = document.querySelector('#example'); //Create shadow root ! var root =

正则判断密码难度

微笑、不失礼 提交于 2019-12-03 06:48:44
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> span{ display: none; } </style> </head> <body> <input type="password" class="mm"> <span class="r">弱</span> <span class="z">中</span> <span class="q">强</span> <script> var mm=document.querySelector(".mm"); var sp=document.querySelectorAll("span") mm.onblur=function () { var flag=0; if(/[0-9]/.test(this.value)){ flag++;

Javascript querySelector vs. getElementById [closed]

匿名 (未验证) 提交于 2019-12-03 02:52:02
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试): 问题: I have heard that querySelector & querySelectorAll are new methods to select DOM elements. How do they compare to the older methods, getElementById & getElementsByClassName in terms of performance and browser support? How does the performance compare to using jQuery's query selector? Is there a best practice recommendation for which native set to use? 回答1: "Better" is subjective. querySelector is the newer feature. getElementById is better supported than querySelector . querySelector is better supported than getElementsByClassName .

Web前端学习笔记——HTML5与CSS3之H5-DOM扩展、H5新增API

人走茶凉 提交于 2019-12-03 02:44:45
H5-dom扩展 获取元素 document . getElementsByClassName ( 'class' ) ; //通过类名获取元素,以伪数组形式存在。 document . querySelector ( 'selector' ) ; //通过CSS选择器获取元素,符合匹配条件的第1个元素。 document . querySelectorAll ( 'selector' ) ; //通过CSS选择器获取元素,以伪数组形式存在。 类名操作 Node . classList . add ( 'class' ) ; //添加class Node . classList . remove ( 'class' ) ; //移除class Node . classList . toggle ( 'class' ) ; //切换class,有则移除,无则添加 Node . classList . contains ( 'class' ) ; //检测是否存在class <!DOCTYPE html> < html lang = " en " > < head > < meta charset = " UTF-8 " > < title > Title </ title > < style > ul { list-style : none ; } li { width :

JS confirm box in android webview not working

匿名 (未验证) 提交于 2019-12-03 01:10:02
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试): 由 翻译 强力驱动 问题: Using this code to load url.Url is working fine in android & desktop browser. I have write Android code to show Confirm boxes in android. It's working fine in Nexus and Samsung device but no Confirm boxes shown in Huawei device by giving error in console "Uncaught TypeError: Cannot call method 'querySelector' of null", source: http://abc/build/js/frontend-abc.js (16683) private class WebViewChromeClient extends WebChromeClient { @Override public boolean onJsAlert ( WebView view , String url , String message , final android . webkit