queryselector | 易学教程

Web前端——JavaScript练习

阅读更多关于 Web前端——JavaScript练习

Js练习显示和隐藏，改变display属性(点击查看图片) 关键代码：复制e.style.display = "block"; e.style.display = "none"; 源码：复制<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>显示和隐藏</title> <script type="text/javascript"> function showPicture(){ //普通方式获得控件实例 var e = document.getElementById("myimg"); e.style.display = "block"; } function hidePicture(){ //querySelector是html5增加的 //id前面得写#,class前面得写 document.querySelector("#myimg").style.display = "none"; //标签直接写即可,获取到第一个img标签 //document.querySelector("img").style.display = "none"; } </script> </head> <body> <a href="javascript:void(0);"onclick="showPicture()">查看图片

简单登录注册界面

阅读更多关于简单登录注册界面

今天分享下一简单的登录注册界面。 <div class="wrapper mark" style="display: block;"> <div class="main"> <form action="index.html" name="myForm"> <div class="top"> <div class="login1 "> 登录 </div> <div class="registe"> 注册 </div> <span class="close">×</span> </div> <div class="body"> <div class="body_login" style="display: block;"> <div class="userName clear"> <label>账号：</label><input type="text" id="userName" placeholder="用户名"> </div> <div class="password"> <label>密码：</label><input type="password" id="pwd" placeholder="密码"> </div> <div class="btn2"> <input type="button" value="登录"/> <input type="reset" value="重置

js实现图片局部等比放大

阅读更多关于 js实现图片局部等比放大

我们在浏览例如淘宝等网站的时候，经常能见到这样的效果左边是一张完整的图片，当你的鼠标光标放置在图片上的时候，左边图片会在光标的对应位置产生一个半透明的矩形，在右边会产生一个和左边图片等大的局部放大图。模拟实现放大镜的效果，今天，我就来说说如何使用js实现这样的效果。 <!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> <style> .s_box,.b_box{width:400px;height:300px;position: absolute;top:100px;} .s_box{left:50px;} .s_box img{width: 400px;height: 300px;} .s_box span{position: absolute;left:0;top:0;background: rgba(200,200,200,0.5);display: none} .b_box{left:500px

原生JS实现 ‘Tab栏切换’，‘手风琴’，‘轮播图’效果

阅读更多关于原生JS实现 ‘Tab栏切换’，‘手风琴’，‘轮播图’效果

1.小天使跟随鼠标效果 <!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> <style> body { margin: 0; padding: 0; height: 5000px; background-image: linear-gradient(0deg, purple, yellowgreen); } #box { position: fixed; left: 0; top: 0; } </style> </head> <body> <img src="./images/angel.gif" alt="小天使" id="box"> <script> // 获取小天使，因为他要移动 var box = document.querySelector("#box"); // 获取 body 因为要绑定事件 var body = document.querySelector("body"); body

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

抛弃jQuery：DOM API之选择元素

阅读更多关于抛弃jQuery：DOM API之选择元素

原文链接： http://blog.garstasio.com/you-dont-need-jquery/selectors/ 我的Blog： http://cabbit.me/you-dont-need-jquery/selector/ 上一篇文章抛弃jQuery：Why? 引起了很多朋友的讨论，在这里我想强调，这一系列文章从来不希望开发人员不分情况的丢弃jQuery ，也绝对不会抵制使用JavaScript库，手工处理兼容性问题，这篇及后面的专题都提供了一些能够替代jQuery的库。如果我说“抛弃jQuery吧”，就有人觉得等于“抛弃所有的库，用C和汇编来写代码”，那我想我们更应该思考一下，我们是不是真的把jQuery当成了JavaScript的全部？ jQuery的选择符模块无比优雅，以至于我见过很多Web框架和应用中引用了庞大的jQuery，只是因为它提供了方便的DOM元素选择函数。我已经数不清自己写过多少次 $(#myElement) 或者 $('.myElement') 了，以至于在没有jQuery时经常束手无策。事实上使用DOM API选择元素并没有那么难，它或许没有jQuery的那么简短，不过用起来也足够简单了。 ID CSS Classes HTML标签名 HTML属性伪类子元素后代元素排除元素多重选择仿造jQuery的“$”

简单版商品查询效果

阅读更多关于简单版商品查询效果

<!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> <style> table { width: 400px; border: 1px solid #000; border-collapse: collapse; margin: 0 auto; } td, th { border: 1px solid #000; text-align: center; } th { background-color:#fff; color:#000 } input { width: 50px; } .search { width: 600px; margin: 20px auto; } table tr:nth-child(even){ background-color:skyblue; color:#000 } table tr:nth-child(odd){ color:#c00; background-color:

常用的web api总结

阅读更多关于常用的web api总结

1、querySelector 获取指定元素中匹配 css 选择器的元素。 // 作用在document document.querySelector("#nav"); // 获取文档中id="nav"的元素 document.querySelector(".nav"); // 获取文档中class="nav"的元素 document.querySelector("#nav li:first-child"); // 获取文档中id="nav"下面的第一个li元素 // 也可以作用在其他元素 let nav = document.querySelector("#nav"); nav.querySelector("li"); // 如果有多个li的话，返回第一个li 2、querySelectorAll 获取指定元素中匹配 css 选择器的所有元素： let list = document.querySelectorAll("li"); // NodeList(2) [li, li] 这里假设返回2个注意：返回的值是一个类数组，可以使用 forEach （有些浏览器无法使用，建议还是转一下），但是无法使用 filter 、 map 等，需要转换一下： Array.from(list).map(); 3、dataset 获取标签上以" data- "为前缀的属性集合： <p data

高德地图——切换路线的不同实现（驾车、公交、骑行）

阅读更多关于高德地图——切换路线的不同实现（驾车、公交、骑行）

根据效果图做一个小工具栏 , 分别有驾车 ,公交和骑行三个路线类型的切换按钮。地点输入框包括起点和终点 ,最下面要有一个可以搜索线路规划的按钮。思路： 1.使用new AMap.Map创建一个地图。 2.在<script>标签中引入驾车 ,公交和骑行的线路规划插件 ,插件如下 AMap.Driving,AMap.Transfer,AMap.Riding 3.为搜索按钮绑定点击事件 ,点击时先清除地图所有覆盖物 .判断搜索按钮文字。如果是“开车去”，那么就是使用AMap.Driving()方法规划驾车路线 ,并显示在地图上。 4.判断搜索按钮文字如果是”坐公交 ”,就使用AMap.Transfer()方法规划公交路线 ,并显示在地图上。 5.搜索文字按钮如果是“骑车去” ,使用AMap.Riding()方法规划骑行路线 ,并显示在地图上。 6.在点击图标按钮时，当前按钮变为白色，其他两个可以设置一个透明度效果任务提示： 1.清除地图覆盖物的方法： map.clearMap(); 2.路线类型按钮可以使用font-awesome实现，如下为font-awesome地址： https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css 使用的图标样式：驾车：<i class=

.NET轻松写博客园爬虫

阅读更多关于 .NET轻松写博客园爬虫

爬虫，是一种按照一定的规则，自动地抓取网站的程序或者脚本。 .NET 写爬虫非常简单，并能轻松优化性能。今天我将分享一段简短的代码，爬出博客园前200页精华内容，然后通过微小的改动，将代码升级为多线程爬虫，让爬虫速度提升数倍；最后将对爬到了内容进行一些有趣的分析。本文演示的代码，可以从这里下载： https://github.com/sdcb/blog-data/tree/master/2019/20190826-cnblogs-crawler-home 我的演示代码通过 LINQPad 运行，可以在这里找到最新的 LINQPad 下载链接： https://www.linqpad.net/Download.aspx 这些代码同样可以运行在 Visual Studio 中。其中 .Dump() 方法可以在 Visual Studio 中搜索并安装 NuGet 包即可兼容： Install-Package LINQPad 爬虫的三要素经过我“多年”的爬虫骚操作的经验，我认为爬虫无非就是：下载网站数据；解析/保存网站数据；分析数据与下个页面之间的关系，以便继续下载下个页面数据；下面我将通过代码演示这三点。下载网站数据换作以前，有 WebRequest / WebClient / RestSharp 之类的选择，但如今已经都被 HttpClient 取代了，

订阅 queryselector