queryselector | 易学教程

时间插件

阅读更多关于时间插件

　　 window.LCalendar = (function() { var MobileCalendar = function() { this.gearDate; this.minY = 1900; this.minM = 1; this.minD = 1; this.maxY = 2099; this.maxM = 12; this.maxD = 31; } MobileCalendar.prototype = { init: function(params) { this.type = params.type; this.trigger = document.querySelector(params.trigger); this.fixedDate = params.fixedDate; if (this.trigger.getAttribute("data-lcalendar") != null) { var arr = this.trigger.getAttribute("data-lcalendar").split(','); var minArr = arr[0].split('-'); this.minY = ~~minArr[0]; this.minM = ~~minArr[1]; this.minD = ~~minArr[2]; var maxArr =

使用canvas在前端添加水印

阅读更多关于使用canvas在前端添加水印

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <style> * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } body, html { position: relative; width: 100%; height: 100vh; margin: 0; padding: 0; font: 12px/1.5 Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif; } input[type='text'] { width: 100%; height: 24px; /*-webkit-box-shadow: 0

一文带你了解BOM基本知识

阅读更多关于一文带你了解BOM基本知识

1.1. BOＭ和ＤOM的区别 DOM就是一套操作HTML标签的API(接口/方法/属性) BOM就是一套操作浏览器的API(接口/方法/属性) 1.2. BOM中常见的对象 window: 代表整个浏览器窗口注意: window是BOM中的一个对象, 并且是一个顶级的对象(全局),下面的对象都能通过它找到 Navigator: 代表当前浏览器的信息, 通过Navigator我们就能判断用户当前是什么浏览器 Location: 代表浏览器地址栏的信息, 通过Location我们就能设置或者获取当前地址信息 History: 代表浏览器的历史信息, 通过History来实现刷新/上一步/下一步注意点: 出于隐私考虑, 我们并不能拿到用户所有的历史记录, 只能拿本次使用时的历史记录 Screen: 代表用户的屏幕信息 1.3. history history应该是属于最常用的BOM对象之一了，我把它写在最前面最重要的方法：window.history.go(x); x>0 前进x个当前标签页的历史记录 x<0 后退x个当前标签页的历史记录 x=0 刷新 <body> <h1>我是第一个界面</h1> <button id="btn1">前进</button> <button id="btn2">刷新</button> <a href="52-JavaScript-History2

js事件对象

阅读更多关于 js事件对象

Evernote Export js事件对象在DOM元素触发事件时，事件处理函数中会产生的一个事件对象event。事件对象获取方法所有浏览器都支持event对象，只是支持的方式不一样 FireFox、Chrome等浏览器要获取到event对象，需要从函数中传入，参数名随意而IE在浏览器中event作为window对象的一个属性存在，可以直接使用 event 或 window.event 获取到 //事件对象获取方法 document .onkeydown = function ( ev ) { //onkeydown 事件会在用户按下个键盘按键时发生 var e = ev || event ; //兼容各个浏览器 console .log(e); } 事件对象中与鼠标/键盘相关属性 clientX/clientY属性：返回当事件被触发时，鼠标指针的坐标(到浏览器窗口的坐标) offsetX/offsetY属性：返回当事件被触发时，鼠标指针的坐标(在事件源元素中的坐标) pageX/pageY属性：返回当事件被触发时，鼠标指针的坐标(整个页面中的坐标) button属性：返回触发事件的鼠标按键 which属性：返回触发事件的按键码(针对键盘和鼠标事件) IE678不支持 keyCode属性：返回键盘按键的按键码组合键：ctrlKey、altKey、shiftKey

H5基于iScroll实现下拉刷新，上拉加载更多

阅读更多关于 H5基于iScroll实现下拉刷新，上拉加载更多

使用技巧 1、引用iScroll.js，在初始化时添加两个事件监听：touchMove、DOMContentLoaded。 2、实现iScroll插件的onScrollEnd事件，也就是在这个事件里调用你自己的ajax方法实现数据的刷新和追加。 3、上拉加载更多请求后台时就相当于分页请求数据，这时候需要在ajax请求时发送pageIndex参数，而初始化加载时需要从后台返回一个pageCount以便前台判断。 4、最关键的就是实现下拉刷新方法(pullDownAction)和上拉加载更多(pullUpAction)方法。效果图实现方法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 var myScroll,

H5基于iScroll实现下拉刷新，上拉加载更多

阅读更多关于 H5基于iScroll实现下拉刷新，上拉加载更多

前言前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果，脑海里第一反映就是微博那种效果，刚开始的理解有些偏差，以为下拉也是追加数据，上拉也是追加数据，后请教同事后发现其实下拉只是刷新最新数据而已，上拉是追加数据。使用技巧： 1、引用iScroll.js，在初始化时添加两个事件监听：touchMove、DOMContentLoaded。 2、实现iScroll插件的onScrollEnd事件，也就是在这个事件里调用你自己的ajax方法实现数据的刷新和追加。 3、上拉加载更多请求后台时就相当于分页请求数据，这时候需要在ajax请求时发送pageIndex参数，而初始化加载时需要从后台返回一个pageCount以便前台判断。 4、最关键的就是实现下拉刷新方法(pullDownAction)和上拉加载更多(pullUpAction)方法。效果图实现方法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74

javascript 拖拽移动

阅读更多关于 javascript 拖拽移动

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { position: absolute; top: 100px; left: 50%; transform: translateX(-50%); width: 300px; height: 300px; background-color: rgba(0, 0, 0, .3); display: none; } h1 { position: relative; text-align: center; margin-bottom: 50px; margin-top: 0; color: white; cursor: move; } h1 a { position: absolute; top: 2px; right: 2px; font-size: 12px; } input { width: 200px; height: 30px; border: 0; outline: none; font-size: 14px; } span { cursor: pointer; } </style> </head> <body> <span>点击登陆</span> <div> <h1>登陆中心

querySelector和querySelectorAll以及getElement系列方法

阅读更多关于 querySelector和querySelectorAll以及getElement系列方法

1.引言刚开始接触这个是在百度的前端学院，当时的要求如下：我想，这样的要求就是为了让我们在学习会用这些API的时候同时体会他们之间的区别。这一章的任务标题叫做“找到那个DOM”，顾名思义，这些API的作用就是在网页中找到相应的DOM节点。 2.DOM树 DOM节点分为三大类：元素节点、属性节点、文本节点；父节点，子节点以及兄弟节点百度可以查到。在操作时，需要先找到元素节点，再找属性/文本节点。如何找节点？前面说到了，我们要“找到那个DOM”，于是我们就需要使用给到的方法了。首先是基本的getElement系列方法常用的getElement系列方法如下：要注意的是： 1.getElementById:通过id取到唯一节点。如果id重名，只能取到第一个。 2.getElementByTagName和getElementByClassName获得的是数组。然后是querySelector和querySelectorAll方法参考于：https://blog.csdn.net/i10630226/article/details/51531469 1、querySelector只返回匹配的第一个元素，如果没有匹配项，返回null。 2、querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。 3、返回的结果是静态的

Tampermonkey还你一个干净整洁的上网体验

阅读更多关于 Tampermonkey还你一个干净整洁的上网体验

作为一个前端开发，平时难免要经常浏览一些博客、技术网站，学习新的技术或者寻找解决方案，可能更多是ctrl+c和ctrl+v（^_^|||），但是目前很多网站的布局以及广告对于我们阅读文章造成了很多的障碍，很是烦躁啊。于是才有了这篇文章，我们借助chrome的Tampermonkey插件来改造自己感兴趣的网址，让浏览内容更纯粹。在我之前的随笔中已经对Tampermonkey 做了介绍，它是一个chrome插件，是一款免费的浏览器扩展和最为流行的用户脚本管理器。简单来说就是可以指定进入某些页面的时候调用指定的JS代码，这样我们就可以将页面中的某些元素删除，或者更改样式。 Tampermonkey的安装需要翻墙，网址是 https://tampermonkey.net/ 。下面是我常用的几个网站的处理代码： CSDN // ==UserScript== // @name CSDN // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @match https://blog.csdn.net/*/article/details/* // @grant none // ==/UserScript==

JS DOM中getElement系列和querySelector系列获取节点

阅读更多关于 JS DOM中getElement系列和querySelector系列获取节点

节点查找方法 document.getElementById() 前面必须是document document.getElementsByName() 前面必须是document ele.getElementsByTagName() 前面元素不限 ele.getElementsByClassName() 前面元素不限 querySelector() querySelectorAll() .tagName 元素名称在低版本IE中，document.getElementById() 存在bug 用来获取id或者name为指定值的元素如果某个元素的name属性值和另一个元素的id属性值相同会根据顺序选取排在前面的元素识别IE浏览器：在IE浏览器中，\V会解析成V；其他浏览器中，\V为垂直制表符（相当于空格） !+"\v1" 在IE中：!+"\v1"=!+"v1"=!NaN=true；其他浏览器中：!+"\v1"=!+" 1"=!1=false document.all是页面内所有元素的集合 document.all(0) 获取第一个元素 document.all[0] 获取第一个元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body

订阅 queryselector