queryselector | 易学教程

QQ空间删除日志

阅读更多关于 QQ空间删除日志

var delay = 2000; function del() { document.querySelector(".app_canvas_frame").contentDocument.querySelector('a[title=删除该日志]').click(); setTimeout("yes()", delay); } function yes() { document.querySelector("#delBlogFrame").contentDocument.querySelector('.bt_tip_hit').click(); setTimeout("del()", delay); } del(); 来源： https://www.cnblogs.com/miaosj/p/11695143.html

canvas(八)绘制图片和帧动画

阅读更多关于 canvas(八)绘制图片和帧动画

1.绘制图片绘制图片需要用的ctx.drawImage() 参数一：图片对象参数二，三：可选，图片裁剪的基点（原图左上角为原点）参数四，五：可选，图片裁剪区域的大小（基于原图大小）参数六，七：画布的绘制起点坐标参数八，九：可选，被裁剪图片显示出来的大小（缩放）注意：参数2-5都是可选的，用来剪切图片。不传的话就是显示整张图片注意：参数8-9表示被裁剪图片显示出来的大小，采用的是缩放形式，默认为原图大小注意：如果参数2-5以及传值，参数8-9就不能省略，不然会报错注意：图片的加载是异步的，所以绘制的图片的时候要在图加载完成后执行绘制完整的原图 <script> var canvas = document.querySelector("canvas") var ctx = canvas.getContext("2d") //创建图片对象 var image = new Image() //将图片加载到内存中 image.src = "xbx.jpeg" //监听图片加载是否完成 image.onload = function(){ //图片已完成加载 ctx.drawImage(image,100,100) } </script> 缩放原图（一半大小） ctx.drawImage(image,100,100,160,90) 剪切图片 //截去了左边的80px ctx

Jsonp的使用

阅读更多关于 Jsonp的使用

1.jsonp的理解浏览器发送ajax请求时会因为跨域而无法正常获取数据，而script标签请求数据时发送的是http请求，没有跨域问题。利用这个机制绕过跨域的限制来获取后端数据的技术就叫jspnp 实现原理：在客户端定义一个函数，这个函数通常把传入的参数（数据）渲染到页面中。在要请求数据时，新建一个script标签，设置src属性。src属性值中包含了客户端定义的函数名，以及要传递给服务器的数据服务器接收到script标签发送的请求，返回一个js文件。这个文件的内容就是客户端定义的函数的调用，并传入了实参，这样就变相的请求到了数据 2.原生js实现jsonp html页面的代码 <body> <h1>新闻标题</h1> <p>内容</p> <input type="button" value="更新信息" id="btn"> </body> <script> function updatePage(obj){ var h1 = document.querySelector("h1") var p = document.querySelector("p") h1.innerHTML = obj.title p.innerHTML = obj.content } //监听按钮点击 document.querySelector("#btn").onclick =

鼠标移入、移出事件、轮播图

阅读更多关于鼠标移入、移出事件、轮播图

1.鼠标移入事件 mouseover 2.鼠标移出事件 mouseout 3.排他思想解决Tab栏切换先将所有的样式全部移除，然后再将需要的样式添加上 4.轮播图 // 当前图片下标 var currentIndex = 0; // 序号按钮控制图片切换及自身样式改变 var orderBtns = document.querySelectorAll('i'); var li0 = document.querySelector('li'); var ul = document.querySelector('ul'); orderBtns.forEach(function (element, index) { element.onmousemove = function () { orderBtns.forEach(function (element, index) { element.classList.remove('current'); }); this.classList.add('current'); console.log(index * li0.offsetWidth); ul.style.left = - index * li0.offsetWidth + 'px'; }; }); // 左右按钮控制图片切换和按钮样式 var right = document

Js选择器总结

阅读更多关于 Js选择器总结

Js选择器总结一、原生JS选择器 # JS选择器常用的有getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()、querySelector()、querySelectorAll() A： getElementById(ID): 返回对指定ID的第一个对象的引用，如果在文档中查找一个特定的元素，最有效的方法是getElementById() B: getElementsByName(name): 返回文档中name属性为name值的元素，因为name属性值不是唯一的，所以查询到的结果有可能返回的是一个数组，而不是一个元素。 C: getElementsByTagName(tagname): 返回文档中指定标签的元素 D: getElementsByClassName():返回文档中所有指定类名的元素 E: querySelector():返回文档中匹配指定css选择器的第一个元素 F: querySelectorAll():返回文档中匹配指定css选择器的第一个元素二、jQuery选择器 # 内容基本选择器有ID选择器、类选择器、标签选择器、通用选择器，事件的添加方法如下： $(...).事件名(function() { }); 属性样式有： $(...).css(

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

原生javascript 弹出层

阅读更多关于原生javascript 弹出层

练习demo

阅读更多关于练习demo

表格练习demo 编辑器制作效果展示：代码展示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> td {border: 1px solid black;background-color: #eee;width: 50px;height: 50px} td:hover {border: 1px solid red;background-color: deepskyblue} </style> </head> <body> <input type="text" placeholder="行" class="i"> <input type="text" placeholder="列" class="i1"> <input type="button" value="创建" id="bt"> <span class="s"></span> <hr> <script> var x = "x"; var y = "y"; var oi = document.querySelector(".i"); var oi1 = document.querySelector(".i1"); var obt = document.querySelector("#bt");

分享一些前端开发中最常用的JS代码片段以及理解 JS闭包

阅读更多关于分享一些前端开发中最常用的JS代码片段以及理解 JS闭包

记得几年前刚工作那时，听到高大上的 JS闭包一词让我一头雾水，很多初学者也许和我当时一样困惑，其实闭包也并没那么高深莫测。今天我写了篇简单的学习笔记希望能帮助大家轻松理解 JS闭包。参考资料：1.《你所不知道的JavaScript-上卷》闭包和作用域章节、2. 阮一峰老师的《学习JavaScript闭包》 ( 大家学习时为了更好理解，最好跟着本文内容在IDE或浏览器控制台中，敲一遍所有的示例代码 ) 要彻底弄懂闭包，必须先理解 JS的变量作用域，变量分为: 全局变量和局部变量，JS的特殊之处在于：每个函数都会创建一个新的作用域，函数内部可以读取函数外部的变量，相反函数外部无法读取内部变量。 var a = 123 ; function foo ( ) { console .log(a); } foo(); // 123 function foo ( ) { var a = 123 ; } console .log(a); // error，查找不到变量a的引用为了更透彻的理解作用域，请思考以下代码： function foo ( a ) { var b = a * 2 ; function bar ( c ) { console .log( a, b, c ); } bar( b * 3 ); } foo( 2 ); // 2, 4, 12

原生JavaScript写出日历功能无引用Jq

阅读更多关于原生JavaScript写出日历功能无引用Jq

成品显示，可左右切换月份　　 html 代码 <!DOCTYPE html> <html> <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>移动端日历</title> <link rel="stylesheet" href="./css/calendar.css"> </head> <body> <div id="calendarElement"> <div class="header"> <div class="prev"> <i class="previ"></i> </div> <div class="date"></div> <div class="next"> <i class="nexti"></i> </div> </div> <div class="content"> <div class="week"> <div>日</div> <div>一</div> <div>二</div> <div>三</div> <div>四</div> <div>五</div> <div>六</div> <

订阅 queryselector