queryselector | 易学教程

net core体系-网络数据采集（AngleSharp）-1初探

阅读更多关于 net core体系-网络数据采集（AngleSharp）-1初探

有这么一本Python的书: <<Python 网络数据采集>> 我准备用.NET Core及第三方库实现里面所有的例子. 这是第一部分, 主要使用的是AngleSharp: https://anglesharp.github.io/ (文章的章节书与该书是对应的) 发送Http请求在python里面这样发送http请求, 它使用的是python的标准库urllib: 在.NET Core里面, 你可以使用 HttpClient , 相应的C#代码如下: var client = new HttpClient(); HttpResponseMessage response = await client.GetAsync("http://pythonscraping.com/pages/page1.html"); response.EnsureSuccessStatusCode(); var responseBody = await response.Content.ReadAsStringAsync(); Console.WriteLine(responseBody); return responseBody; 或者可以简写为: var client = new HttpClient(); var responseBody = await client

.NET Core 网络数据采集 -- 使用AngleSharp做html解析

阅读更多关于 .NET Core 网络数据采集 -- 使用AngleSharp做html解析

有这么一本Python的书: <<Python 网络数据采集>> 我准备用.NET Core及第三方库实现里面所有的例子. 这是第一部分, 主要使用的是AngleSharp: https://anglesharp.github.io/ (文章的章节书与该书是对应的) 第1章初见网络爬虫发送Http请求在python里面这样发送http请求, 它使用的是python的标准库urllib: 在.NET Core里面, 你可以使用 HttpClient , 相应的C#代码如下: var client = new HttpClient(); HttpResponseMessage response = await client.GetAsync("http://pythonscraping.com/pages/page1.html"); response.EnsureSuccessStatusCode(); var responseBody = await response.Content.ReadAsStringAsync(); Console.WriteLine(responseBody); return responseBody; 或者可以简写为: var client = new HttpClient(); var responseBody = await client

js元素创建

阅读更多关于 js元素创建

创建节点 document.createElement 创建节点创建的节点此时还未在浏览器上需要用过appendChild（）或者其他方法添加到浏览器上经常与appendChild（）方法连用 appendChild（）: 在子节点末尾添加新的节点用法： parent.appendChild（）代码示例： window . onload = function ( ) { document . querySelector ( ".btn" ) . onclick = function ( ) { //每点击一次创建一个div let div1 = document . createElement ( "div" ) ; //创建元素节点 let oDiv = document . querySelector ( ".box" ) ; //获取父元素 oDiv . appendChild ( div1 ) //在父元素下添加div 此时div没有内容 } } 结果如果要给div添加文字必须通过createTextNode docuemnt.createTextNode() 创建文本节点通过appendChild（）方法添加到div节点下这样创建的div元素就包含元素 window.οnlοad=function () { document.querySelector(

Web APIs---4. DOM(3)

阅读更多关于 Web APIs---4. DOM(3)

5 节点操作 5.1 为什么学习节点操作 5.2 节点概述一般情况下，节点至少拥有节点类型(nodeType)、节点名称(nodeName)、节点值(nodeValue)这三个基本属性 <body>  <div>我是div</div> <span>我是span</span> <ul> <li>我是li</li> <li>我是li</li> <li>我是li</li> <li>我是li</li> </ul> <div class="box"> <span class="erweima">x</span> </div> <script> var box = document.querySelector('.box'); console.dir(box); //可以通过这个方式查看节点的属性 </script> </body> 查看部分属性：元素节点的nodeType为1（常用）属性节点的nodeType为2 文本节点的nodeType为3（包含文字空格换行等） 5.3 节点层级父级节点 node.parentNode <body>  <div>我是div</div> <span>我是span</span> <ul> <li>我是li</li> <li>我是li</li> <li>我是li</li> <li>我是li</li

文档碎片的应用

阅读更多关于文档碎片的应用

文档碎片对浏览器性能的提升每次对dom的操作都会触发”重排”（重新渲染界面，发生重绘或回流），这严重影响到能耗，一般通常采取的做法是尽可能的减少 dom操作来减少”重排” 一、向body中插入一百个元素这里我们用网上众所周知的插入100个元素的例子第一种方法： for ( var i = 0 ; i < 100 ; i ++ ) { let div = document . createElement ( 'div' ) document . querySelector ( 'body' ) . appendChild ( div ) } //这里for循环了100次进行了一百次的dom操作第二种方法： let div = '' for ( var i = 0 ; i < 100 ; i ++ ) { div += '<div></div>' } document . querySelector ( 'body' ) . innerHTML = div //这里的方法相比于第一种性能提升不止一点半点不失为一种好办法第二种方法： let Frag = document . createDocumentFragment ( ) for ( var i = 0 ; i < 100 ; i ++ ) { let div = document . createElement (

canvas图像处理汇总

阅读更多关于 canvas图像处理汇总

一、canvas的情况 canvas自从出来了之后，在前端的图像处理上面提供了各种各样的遍历，虽然很多的操作其实都是要应用到算法的，但是这个也给前端提供了很多的可能性，其中最终要的一个canvas函数（至少我认为）就是getImageData,这个函数可以提取图像每个像素的RGBA值。因为有这个函数所有才有丰富多彩的canvas图像处理。二、预备知识 2.1 获取一个canvas对象 <canvas id="test"></canvas> <script> var test = document.querySelector("#test");// 方法一 var test_1=document.getElementById("test");// 方法二 console.log(test); console.log(test_1); </script> 2.2 创建一个画布的空间类型（2D，3D）创建一个2D的画布 var ctx = test.getContext("2d"); 2.3 getImageData对象 getImageData对象可以获取画布中的图片对应的所有像素的RGBA值，这个有利于我们对图片进行重新的计算。在使用这个属性的时候，需要配置好HTTP的访问环境。 2.4 Uint8ClampedArray 这个代表的是一个无类型8位的字符串

ajax交互案例

阅读更多关于 ajax交互案例

数据交互是前端很重要的一部分，静态页是基础，而交互才是网页的精髓。交互又分为人机交互和前后端数据交互，现阶段的互联网下，大部分的网站都要进行前后端数据交互，如何交互呢？交互的流程大概就是前端发送数据给后端，后端接送数据，进行处理，将处理后的结果发送给前端，前端接受数据。前端和后端的收和发通过什么呢？前端通过表单和ajax发送数据，接受只能通过ajax；后端(php)通过$_GET[]、$_POST[]、$_REQUEST[]接收，打印语句来发送：echo、print、print_r()、die() ajax是前后端交互的重要手段，ajax的全称是asynchronous JavaScript and XML（异步JavaScript和XML）；这么说可能也感受不出什么，案例来感受下吧！首先我们要准备下页面布局，布局用到了bootstrap的模态框，可以自己百度看下哈！ 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8

251 正则表达式

阅读更多关于 251 正则表达式

1.正则表达式概述 1.1 什么是正则表达式正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文(匹配)。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等。其他语言也会使用正则表达式，本阶段我们主要是利用JavaScript 正则表达式完成表单验证。 1.2 正则表达式的特点灵活性、逻辑性和功能性非常的强。可以迅速地用极简单的方式达到字符串的复杂控制。对于刚接触的人来说，比较晦涩难懂。比如：^\w+([-+.]\w+) @\w+([-.]\w+) .\w+([-.]\w+)*$ 实际开发,一般都是直接复制写好的正则表达式. 但是要求会使用正则表达式并且根据实际情况修改正则表达式. 比如用户名: /^[a-z0-9_-]{3,16}$/ 2.正则表达式在js中的使用 2.1 正则表达式的创建在 JavaScript 中，可以通过两种方式创建一个正则表达式。方式一：通过调用RegExp对象的构造函数创建 var regexp = new RegExp(/123/); console.log

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("border",

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("border"

订阅 queryselector