- 博客(12)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 基于swiper和vue实现：点击和滑动页面实现tab切换
点击和滑动页面实现tab切换components / tabItem下面有 swiper.vue nav.vue one.vue two.vue …router.jsimport Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'Vue.use(VueRouter)const routes = [ { path: '/', redirect: '/
2020-10-27 20:42:56
3491
1
原创 jQuery基础03：事件注册 + 拷贝对象 + toDolist案例（重点练习）
1.1. jQuery 事件注册jQuery 为我们提供了方便的事件注册机制，是开发人员抑郁操作优缺点如下：优点: 操作简单，且不用担心事件覆盖等问题。缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。语法element.事件(function() { })$(“div”).click(function() { 事件处理程序 })其他事件和原生基本一致。比如：mouseover、mouseout、blur、focus、change、keydown、keyup、r
2020-10-25 20:36:27
355
原创 jQuery基础02：属性操作 + 文本操作 + 元素操作 + 尺寸、位置操作
1.1. jQuery 属性操作jQuery 常用属性操作有三种：prop() / attr() / data() ;1.1.1 元素固有属性值 prop()所谓元素固有属性就是元素本身自带的属性比如 元素里面的 href ， 元素里面的 type。语法获取属性语法：prop(“属性”)设置属性语法：prop(“属性”，“属性值”)注意：prop()除了普通属性操作，更适合操作表单属性：disabled、checked、selected等。1.1.2 元素自定义属性值 att
2020-10-25 20:34:28
265
原创 jQuery基础01：选择器 + 样式操作 + 动画
1.1. jQuery 介绍1.1.3 jQuery的优点轻量级。核心文件才几十kb，不会影响页面加载速度。跨浏览器兼容，基本兼容了现在主流的浏览器。链式编程、隐式迭代。对事件、样式、动画支持，大大简化了DOM操作。支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。免费、开源。1.2. jQuery 的基本使用1.2.1 jQuery 的下载 jQuery的官网地址： https://jquery.com/，官网即可下载最新版本。各个版本的下载：ht
2020-10-25 20:32:11
411
转载 基于vue手动实现折叠面板（展开一项，其他项收起）
<template> <div class="report"> <ul class="years"> <li class="years_item" v-for="(item, index) in menuList" :key="item.name"> <div class="title" @click="showToggle(item, index)"> <span>{{ it
2020-10-22 20:08:21
4992
转载 基于jquery实现穿梭框效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="../css/
2020-10-20 13:25:26
984
原创 Web APIs-07：本地存储 + 移动端开发框架 + classList属性
1.1.3 移动端拖动元素touchstart、touchmove、touchend 可以实现拖动元素但是拖动元素需要当前手指的坐标值 我们可以使用 targetTouches[0] 里面的pageX 和 pageY移动端拖动的原理： 手指移动中，计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离手指移动的距离： 手指滑动中的位置 减去 手指刚开始触摸的位置拖动元素三步曲：（1） 触摸元素 touchstart： 获取手指初始坐标，同时获得盒子原来的位置（2） 移
2020-10-19 23:55:53
245
原创 WebAPIs-06：动画函数封装 + 触屏事件
1.1. 动画函数封装1.1.1 缓动效果原理缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来思路：让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。核心算法： (目标值 - 现在的位置) / 10 做为每次移动的距离步长停止的条件是： 让当前盒子位置等于目标位置就停止定时器注意步长值需要取整<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&
2020-10-19 23:50:55
293
原创 Web APIs-05：元素偏移量offset + 元素可视区client系列 + 元素滚动scroll系列 + 动画函数
1.1. 元素偏移量 offset 系列1.1.1 offset 概述offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。获得元素距离带有定位父元素的位置获得元素自身的大小（宽度高度）注意：返回的数值都不带单位<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta nam
2020-10-19 23:45:22
193
原创 WebAPIS-04：键盘事件+BOM+location+navigator+history
1.1. 常用的键盘事件1.1.1 键盘事件 <script> // 常用的键盘事件 //1. keyup 按键弹起的时候触发 document.addEventListener('keyup', function() { console.log('我弹起了'); }) //3. keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头啊
2020-10-19 22:15:05
145
原创 Web APIs - 03：节点增删改查和鼠标事件
1.1. 节点操作1.1.1 删除节点node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht
2020-10-19 08:05:32
230
原创 浏览器分屏效果
打开一个空白网页：按 ctrl + D 打开：修改书签窗口，选择更多名称：分屏网站：将下面代码复制粘贴存放位置：选择书签栏，使用方便javascript:document.write('<HTML><HEAD></HEAD><FRAMESET COLS=\'50%25,*\'><FRAME SRC=' + location.href + '><FRAME SRC=' + location.href + '></FR
2020-10-07 12:26:40
318
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人