![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端学习
一只认学的程序猿
大家一起学习 共同进步 如果有错误的地方 欢迎各位大佬指出
展开
-
移动端触摸事件
触摸事件touch与pc端一样,移动端也有自己的事件,不同的就是将pc端的鼠标,变成了人手。触摸事件touch在pc端是无效的,在开发者工具的移动端模拟器时,鼠标的点击事件就会变为触摸事件,是有效的。触摸事件允许多点触控,事件触发的位置信息包含在touches属性中。如果再给body绑定一个点击事件,触摸事件和点击事件都是会触发的。基本触摸事件如下: var bodyDom = document.querySelector('body'); bodyDom.ont原创 2020-10-03 20:02:26 · 666 阅读 · 0 评论 -
ajax03-使用ajax动态渲染仿短视频界面
依然是主移动端,rem布局,先列出大概结构,方便写css代码,如下:<body><div class="videoList"> <div class="videoList"> <div class="videoItem"> <div class="videoTop"> <div class="img" style="background-image: url(原创 2020-10-02 20:15:49 · 210 阅读 · 0 评论 -
ajax02
封装ajax在我们需要发送get类型的ajax请求时,最简单的需要变化的就是我们请求的地址,还有请求成功后对于数据的操作。因此,可以把这两项作为参数传递到函数中,代码如下:function getAjax1(httpUrl, callBack) { // 1.创建Ajax对象 var xhr = new XMLHttpRequest(); //2.设置请求的方法和路径,相对路径与绝对路径都可 xhr.open('GET', httpUrl); // 3.发送数据原创 2020-10-01 17:56:07 · 118 阅读 · 0 评论 -
Ajax01
Ajax是什么按照比较官方的语言来说,Ajax就是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新,。这意味着可以在不重新加载整个网页的情况下,对部分网页进行更新。在此之前,再来看一下同步与异步。同步: 举个比较生动的例子。我们去饭店吃饭,服务员只为我们一个人服务,首先来点菜,点完菜去做菜,做完菜上菜,等我们吃完结账。在这期间,只与我们发生接触,不会去接触别的顾客,在我们离店后,才会接待下一位顾客,以此类推,这就是同步,显原创 2020-10-01 17:55:47 · 102 阅读 · 0 评论 -
本地存储与todolist-02
todolist代码如下,使用的是rem布局,按照375px的设计稿,锻炼一下rem布局的使用布局结构: <div class="main"> <div class="header"> <div class="logo">MyTodo</div> <input type="text" placeholder="请输入待办事项" id="myInput"> <原创 2020-09-30 19:35:12 · 153 阅读 · 0 评论 -
本地存储与todolist-01
本地存储本地存储,通俗的讲,就是将web页面中的数据存放到本地。本地存储分为两类:localStorage与sessionStoragelocalStorage: 可以永久存放到本地,但只要清除浏览器缓存,就可以被删除。sessionStorage: 本地存放的数据当次有效,只要将页面关闭,数据就会被清除。使用本地存储无非就是要做这几件事:存数据,取数据,清除数据。localStorage:最简单的测试方法,在页面1中:<body> <script>原创 2020-09-29 20:15:01 · 127 阅读 · 0 评论 -
rem布局
remr–代表root根,也就是指html。em–相对单位,也就是相对于html的字体大小单位。没有设定html大小的情况下,1rem=16px,因此下方的div为160px*160px<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s原创 2020-09-29 20:14:31 · 2206 阅读 · 0 评论 -
移动端与响应式02
媒体查询一般情况下,一个项目会划分为pc端的页面与移动端的页面。还有一种,只需要一页代码,就可以适应pc端与移动端,比如苹果的官方网站。这就需要用到媒体查询@media的操作。原创 2020-09-29 20:14:07 · 52 阅读 · 0 评论 -
移动端与响应式
移动端与响应式01meta标签的viewport配置:meta标签的viewport配置:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!-- viewport:代表视窗的设置 content=" width=device-width, //宽度等于设备的宽度,浏览器宽度分辨率等于系统分辨原创 2020-09-28 21:04:44 · 208 阅读 · 1 评论