queryselector | 易学教程

你不需要jQuery(四)

阅读更多关于你不需要jQuery(四)

jQuery是个好东西。它诞生于IE6在互联网称霸的那个时代。jQuery的存在让我们的代码能很好的兼容各种平台。然而，到如今，浏览器技术已经取得了巨大的进步。我们可以自由的使用所有最新众多ES5/ES6提供的原生API，配合革命性的HTML5 API，我们对DOM的操作变得从未如此的容易。WEB开发人员突然发现，没有jQuery其实也能轻松高效的完成项目开发。不要误会，jQuery仍然是一个强大的工具包，大多时候我们还是要优先选择它。然而，对于一些简单的任务，一些小项目，一个简单的页面，或者移动版网站上，我们使用简单的纯js也许更有效率。下面的10个技巧希望能给大家一些启发。 1. 监听页面加载完成事件写jQuery代码时，我们通常首先做的是把代码包裹在 $(document).ready() 里，这样，当DOM加载完成，可以操作时，包裹的代码才会去执行。除了使用jQuery，我们还可以使用 DOMContentLoaded 事件代替，下面是用例： / Add an event listener of DOMContentLoaded to the whole document and call an anonymous function. // You can then wrap your code in that function's brackets // and

04webApis

阅读更多关于 04webApis

学习目标：能够说出常用的3-5个键盘事件能够知道如何获取当前键盘按下的是哪个键能够知道浏览器的顶级对象window 能够使用window.onload事件能够使用window.onresize事件能够说出两种定时器的区别能够使用location对象的href属性完成页面之间的跳转能够使用location对象获取url中的参数部分能够使用history提供的方法实现页面刷新 1.1. 常用的键盘事件 1.1.1 键盘事件 <script> // 常用的键盘事件 //1. keyup 按键弹起的时候触发 document.addEventListener('keyup', function() { console.log('我弹起了'); }) //3. keypress 按键按下的时候触发不能识别功能键比如 ctrl shift 左右箭头啊 document.addEventListener('keypress', function() { console.log('我按下了press'); }) //2. keydown 按键按下的时候触发能识别功能键比如 ctrl shift 左右箭头啊 document.addEventListener('keydown', function() { console.log('我按下了down'); }) // 4.

事件委托

阅读更多关于事件委托

事件委托：把原本需要绑在子元素上的响应事件委托给父元素，让父元素担当事件监听的职务，其原理是DOM元素的事件冒泡。事件冒泡：一个事件触发后，会在子元素和父元素之间传播，分为三个阶段：捕获阶段、目标阶段、冒泡阶段图解：事件委托的实例（添加li元素）： <!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> <ul> <li></li> <li class="box"></li> <li></li> <li class="box"></li> <li id="li1"></li> </ul> <button>添加li</button> <script> var oUl = document.querySelector("ul"); var aLi = document.getElementsByTagName("li"); var oBtn = document.querySelector

html5

阅读更多关于 html5

什么是html5 1. H5 不是新语言 , 是第五次修改的版本 2. 支持所有主流浏览器 ( IE9 以上支持 H5 , ie8一下不支持 ) 3. 改变了用户与文档交互方式 : 多媒体 video audio canvas 4. 增加其它的新特性 : 语义特性 , 本地存储特性 , 网页多媒体 , 二维三维 , 特效 ( 过度 , 动画 ) 5. 相对于h4 : 1 : 进步 : 抛弃了不常用的标记 2. 新增 : 新增标记和属性 3. 结构简洁 html : xt + tab html5 是一套规范 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - width : 100 % 流失布局 || 百分布局解决ie8兼容性问题 : 引进 JS 文件或者更改属性电话 tel 弹出数字键盘 form : myForm 指定表单 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - 码云上传 git clone url地址 git add * 将代码上传到本地仓库 git commit - m '必须写的注释' git push 1. 在码云上创建项目 2. 复制项目地址 3. 四步走 https : / / gitee . com / tuziling84 /

原生js 浏览器滚动条滚动到底部加载数据

阅读更多关于原生js 浏览器滚动条滚动到底部加载数据

<!DOCTYPE html> < html lang = " en " > < head > < meta charset = " UTF-8 " > < title > Document </ title > < style > <style> * { margin : 0 ; padding : 0 ; } #app { height : 500px ; overflow-y : scroll ; } ul { list-style : none ; } li { background-color : yellowgreen ; margin-top : 2px ; } li:hover { background-color : deeppink ; } .blank { height : 1px ; } .lazy { text-align : center ; display : none ; background-color : deepskyblue ; } </ style > </ style > </ head > < body > < div id = " app " > < ul > < li > 1 </ li > < li > 2 </ li > < li > 3 </ li > < li > 4 </ li > < li > 5 </ li > <

HTML5实现头像的上传

阅读更多关于 HTML5实现头像的上传

HTML5实现头像的上传这是利用form-data给后台传输数据，来实现头像的上传加载！ html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div class="container"> <input enctype="multipart/form-data" type="file"> <input id="Susername" type="text" placeholder="用户名"> <input id="Ssex" type="number" placeholder="年龄"> <input id="Sage" type="text" placeholder="专业"> <input id="Smajor" type="text" placeholder="学校"> <input id="Sschool" type="text" placeholder="QQ"> <input id=

轮播图

阅读更多关于轮播图

效果图：完整代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> <style> * { margin:0; padding:0; } a{ text-decoration: none; } .container { position: relative; width: 600px; height: 400px; margin:100px auto 0 auto; box-shadow: 0 0 5px green; overflow: hidden; } .container .wrap { position: absolute; width: 4200px; height: 400px; z-index: 1; } .container .wrap img { float: left; width: 600px; height: 400px; } .container .buttons { position: absolute; right: 5px; bottom:40px; width: 150px; height: 10px; z-index: 2; } .container .buttons span { margin-left: 5px; display: inline

shit layui & bugs

阅读更多关于 shit layui & bugs

shit layui & bugs use is not useful at all! http://www.layui.com/demo/form.html layui.use(["form", "layer"], function() { let form = layui.form, layer = layui.layer; }); layui.use([], function() { let form = layui.form, layer = layui.layer; }); layui.use("form", function() { let form = layui.form, layer = layui.layer; }); layui.use("", function() { let form = layui.form, layer = layui.layer; }); async & delay bug const editProject = () => { let reset = document.querySelector(`button[type="reset"]`); layui.use("form", function() { let form = layui.form, layer = layui.layer; // init select

web前端入门到实战：HTML5 VideoAPI，打造自己的Web视频播放器

阅读更多关于 web前端入门到实战：HTML5 VideoAPI，打造自己的Web视频播放器

本文将使用HTML5提供的VideoAPI做一个自定义的视频播放器，需要用到HTML5提供的video标签、以及HTML5提供的对JavascriptAPI的扩展。一、基础知识 1.用法 <video src="./video/mv.mp4"></video> 注意：audio和video元素必须同时包含开始和结束标签，不能使用 2.重要HTML属性 controls ：ontrol：如果出现该属性，则向用户显示控件，比如播放按钮。每个浏览器中的播放控件都不太一样，但用途都一样，都可以控制开始和结束，跳到新位置和调节音量 autoplay ：autoplay：如果出现该属性，则视频在就绪后马上播放。如果不设置autoplay属性，必须是用户单击播放按钮才会播放音频文件。 loop ：loop：(循环播放)告诉浏览器在音频到达末尾时，再从头开始重新播放 preload ：auto、mete、none：告诉浏览器如何下载音频 auto：让浏览器下载整个文件，以便用户单击播放按钮时就能播放。当然，下载过程是后台进行的，网页访客不必等待下载完成，而且仍然可以随意查看网页。 meta：告诉浏览器先获取音频文件开头的数据块，从而足以确定一些基本信息（比如音频的总时长） none：**告诉浏览器不必预先下载。恰当地利用这些值，可以节省带宽。如果没有设置preload属性

web api DOM_02

阅读更多关于 web api DOM_02

创建元素的三种方式 document.write() 缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉 document.write('新设置的内容<p>标签也可以生成</p>'); innerHTML var box = document.getElementById('box'); box.innerHTML = '新内容<p>新标签</p>'; document.createElement() var div = document.createElement('div'); document.body.appendChild(div); 性能问题 innerHTML方法由于会对字符串进行解析，需要避免在循环内多次使用。可以借助字符串或数组的方式进行替换，再设置给innerHTML 优化后与document.createElement性能相近 - 动态创建列表，高亮显示 - 根据数据动态创建表格模拟百度搜索文本框元素相关得方法: 只创建一个元素节点操作、* 节点的属性:(可以使用标签–元素.出来,可以使用属性节点.出来,文本节点.点出来) nodeType:节点的类型:1----标签,2—属性,3—文本 nodeName:节点的名字:标签节点—大写的标签名字,属性节点—小写的属性名字,文本节点----#text

订阅 queryselector