queryselector | 易学教程

基于nightmare的美团美食商家爬虫实践

阅读更多关于基于nightmare的美团美食商家爬虫实践

前言美团商家页分析需要爬取的数据有（这里没有按人数爬）爬虫工具选取 pysipder scrapy nightmare 同步任务 js动态加载中断继续爬坑总结示例代码前言上学的时候自己写过一些爬虫代码，比较简陋，基于HttpRequest请求获取地址返回的信息，再根据正则表达式抓取想要的内容。那时候爬的网站大多都是静态的，直接获取直接爬即可，而且也没有什么限制。但是现在网站的安全越来越完善，各种机器识别，打码，爬虫也要越来越只能才行了。前段时间有需求要简单爬取美团商家的数据，做了一些分析，实践，在这里总结分享。美团商家页分析 1、城市大全可以很容易的在这个页面爬出来 http://www.meituan.com/index/changecity/initiative 2、每个城市一个地址，例如深圳： http://sz.meituan.com/category/meishi 3、可以按照分类、区域、人数来分类 4、商家列表是动态JS加载的，并且会有很多页数 5、根据商家列表再进入商家详情获取数据这样爬取流程即为 1、进去城市美食页 2、抓取分类，循环选择分类 3、抓取区域，循环选择区域 4、抓取人数，循环选择人数 5、判断是否有下一页按钮，循环进入下一页 6、进入详情页抓取，提交之后continue 需要爬取的数据有（这里没有按人数爬） CREATE

Iframe简单探索以及Iframe跨域处理

阅读更多关于 Iframe简单探索以及Iframe跨域处理

探索Iframe 本文目的： Iframe简单使用 Iframe跨域 Iframe常见问题一.Iframe基本Dom以及常用属性和常用事件 1.DOM: <iframe class="iframe" style="height: 100%;width: 100%;border: 0;" id="Yiframe" name="Yiframe" src='http://localhost:2255/67iframe-2.html' ></iframe> 2.常用属性：和平时使用的DOM标签类似，样式之类的还是建议用class吧，统一起来方便管理。更多属性看： http://www.runoob.com/tags/ta... 3.常用事件： <iframe> 标签支持 HTML 的事件属性。一般用这个就够了 onload：当文档加载时运行脚本 document.querySelector('#Yiframe').onload = function(event){ console.log('onload',event); } 二.JS动态新增并插入Iframe 和平时新增DOM标签一样即可。 var iframe = document.createElement('iframe'); iframe.src = url; iframe.id = "Yiframe"; iframe

小demo原生js同步翻译，可以玩玩儿

阅读更多关于小demo原生js同步翻译，可以玩玩儿

1. 背景：平时不知道用js写什么练手，这里就写了一个类似百度翻译的小demo。大家可以平时没事儿了看看书，写写像这种类型的小demo,调用以下公开的api即可。对于学生党，能进入学校实验室做项目更好。进不去的，平时写写小demo练练也不差。(我为什么没在实验室) 2. demo前准备工作：页面布局了解百度翻译API，所需配置参数准备 MD5.js 加密算法函数（百度自己搜）写js代码 3. 步骤： 1. 页面布局：布局就不说了，直接贴图上代码：可进行语言切换 html代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div id="main"> <div class="left"> <div class="title"> 要翻译为： <span class="lang">英文</span> <ul class="ul1"> <li data-lang="en">英语</li> <li data-lang="zh">中文</li> <li data-lang="jp">日语</li> <li data-lang="kor

放大镜

阅读更多关于放大镜

放大镜 1.理解什么是放大镜？当鼠标移动到图片上时，会把该区域图片放大，让用户更清晰看见。 2.思路设置一个大的div模块zoom，里面包含两个小div模块（用来放两张图片，一个是原始图，一个是鼠标移动所放大的局部图）。先对主体body进行搭建 html代码： css部分样式代码：浏览器运行效果如下：补充：对上述css代码进行补充，去掉我所注释代码，把big（div）模块多余隐藏。效果如下: 接下来我们需要写一个原生JS代码，需满足的功能有 1.当鼠标移动到small块时，红色的遮挡层出现，同时big块出现。 2.当鼠标移除small块时，红色的遮挡层消失，同时big块消失。 3.当鼠标移动时，红色遮挡层跟随鼠标移动，同时big块里大图跟随移动。敲重点！！！！这里需注意几个思想 a）小图/大图=遮挡层/大图显示区（big块）遮挡层=大显示区*（小图/大图） b)遮挡层的移动范围=small（div块）的宽/高-遮挡层的宽/高大图的移动范围=大图的宽/高-big（块的宽高）上图代码如下，0.5是因为鼠标在遮挡层的中间 //获取鼠标位置（赋值给遮罩层的） var x=event.clientX-small.offsetLeft-span.offsetWidth*0.5; var y=event.clientY-small.offsetTop-span

基于HTML+JS实现线上点单平台

阅读更多关于基于HTML+JS实现线上点单平台

HTML部分： <!doctype html> <html lang="zh"> <head> <title>喜茶</title>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> </head> <body>  <div class="container-fluid px-0">  <div class="jumbotron px-0 py-2 bg-success"> <h1 class="display-3 text-white ml-5">喜茶<

选择器 document.querySelector()

阅读更多关于选择器 document.querySelector()

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。 querySelectorAll() 方法返回文档中所有匹配指定 CSS 选择器的元素，语法跟jQuery类似，返回值是一个NodeList列表。我们先来回顾一下获取页面中元素的几种方法：获取 body 元素获取 html 元素通过 id 名通过标签名通过 class 名通过 name 的值匹配指定 CSS 选择器对应的方法为： document.body ，获取 body 元素。 //获取body var body = document . body ; document.documentElement ，获取 html 元素。 //获取html var html = document . documentElement ; document.getElementById("") ，根据id获取元素，只能获取唯一一个，只能使用document获取。 document . getElementById ( "" ) ; //根据id获取元素，只能获取唯一一个 //只能使用document获取 document.getElementsByTagName("") ，根据标签名获取元素列表，是一个列表，这个列表类型是HTMLCollection HTML标签列表

JavaScript-API

阅读更多关于 JavaScript-API

Web API APT API是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组程序的能力，而又无需访问源码，或理解内部工作机制的细节。简单理解：API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。 Web API Web API是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM) Web API 一般都有输入和输出(函数的传参和返回值)，Web API很多都是方法(函数)。 DOM 文档对象模型，是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。 DOM树文档：一个页面就是一个文档，DOM中使用document表示元素：页面中所有标签都是元素，DOM中使用element表示节点：网页中的所有内容都是节点(标签、属性、文本、注释等)，DOM中使用node表示获取元素如何获取页面元素根据 ID 获取根据标签名获取通过 HTML5 新增的方法获取特殊元素获取根据 ID 获取 getElementById()方法可以获取带有 ID 的元素对象。 <div id="time">2019-9-9</div> <script> // 1. 因为我们文档页面从上往下加载，所以先得有标签所以我们script写到标签的下面 // 2. get 获得 element 元素 by 通过驼峰命名法

CSS3简单写个圆形进度条动画

阅读更多关于 CSS3简单写个圆形进度条动画

圆圈转动完整代码 html <div id="wrap"> <div class="box-left"> <div class="circle-left"></div> </div> <div class="box-right"> <div class="circle-right"></div> </div> </div> css #wrap{ width: 200px; height: 200px; margin: 200px auto; position: relative; border-radius: 50%; } /*底部圆圈*/ #wrap::before{ content: ""; position: absolute; width: 100%; height: 100%; box-sizing: border-box; left: 0; top: 0; border: 10px solid rgba(255,255,255,0.5); border-radius: 50%; } /*左右两个盒子里面各放着一个半圆圈，主要overflow*/ .box-left, .box-right{ width: 50%; height: 100%; box-sizing: border-box; position: absolute; top: 0; overflow:

canvas使用

阅读更多关于 canvas使用

基本步骤类似于步骤1准备画布准备画布 <canvas></canvas>标签就是画布 canvas画布有默认大小默认350X150 设置canvas画布大小通常canvas是一个标签，可以在style canvas{width:xxxpx; height:xxpx} 但是不建议这样写不建议在样式设置尺寸我们可以在元素本身来设置 <canvas width="600" height="400"></canvas> 解释：不在样式表中设置canvas画布大小的原因在css中设置canvas尺寸 canvas{ border:1px solid black; width: 600px; height: 400px; } 同样类似下面在(100,100)的位置绘制一条直线此时可以发现原来300X150的框拉伸到600X400，同样原来100X100的点距离左边和上边同比例放大了。就好比于拉伸了图片，点的相对比例没变，而实际位置改变。所以在css样式中我们设置canvas的样式，而不是canvas的大小步骤2准备绘制工具，利用工具绘图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,

0188 案例：模态框拖拽

阅读更多关于 0188 案例：模态框拖拽

弹出框，我们也称为模态框。 1.点击弹出层，会弹出模态框，并且显示灰色半透明的遮挡层。 2.点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层。 3.鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动。 4.鼠标松开，可以停止拖动模态框移动 1.1.5 模态框拖拽案例分析点击弹出层，模态框和遮挡层就会显示出来 display:block; 点击关闭按钮，模态框和遮挡层就会隐藏起来 display:none; 在页面中拖拽的原理：鼠标按下并且移动，之后松开鼠标触发事件是鼠标按下mousedown，鼠标移动mousemove 鼠标松开 mouseup 拖拽过程: 鼠标移动过程中，获得最新的值赋值给模态框的left和top值，这样模态框可以跟着鼠标走了鼠标按下触发的事件源是最上面一行，就是 id 为 title 鼠标的坐标减去鼠标在盒子内的坐标，才是模态框真正的位置。鼠标按下，我们要得到鼠标在盒子的坐标。鼠标移动，就让模态框的坐标设置为：鼠标坐标减去盒子坐标即可，注意移动事件写到按下事件里面。鼠标松开，就停止拖拽，就是可以让鼠标移动事件解除 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .login

订阅 queryselector