javascript基础笔记
爱生活,爱编程
在以后的日子里,我会不断的写博客,争取拿下大前端
展开
-
jQuery 效果
显示隐藏 + 下拉对应的 css (display :none; display:block;)fadeIn 对应opacity 也对应 display: none; 这个要了解这个我要测试下!————————————————————————————————————————————这个要测试下这个结果:我要说的是,js 中判断参数的个数的方法 arguments ?—————————...原创 2020-11-25 09:09:39 · 245 阅读 · 0 评论 -
jQuery 复习-jQuery 选择器
有就返回true 不含有的话就返回false————————————————————————————————————jQery 选择器,说白了就是对querySelector 的封装——————————————————————标准选项卡的套路 <div class="wrapper"> <ul id="left"> <li><a href="#">女...原创 2020-11-25 08:47:20 · 169 阅读 · 0 评论 -
关于jQuery 两个插件网站
jQuery 插件常用的网站:1. jQuery 插件库 http://www.jq22.com/2. jQuery 之家 http://www.htmleaf.com/其实我们用插件的时候,就下载下来,看官方的案列,然后,复制html结构,css 样式和js 行为就行了——————————————————————$.extend() 方法,可以对应的深copy 和浅copy,说白了就是指针问题栈, 堆 空间,弄清楚一切就OK!这个估计用不到!...原创 2020-11-24 11:11:06 · 822 阅读 · 1 评论 -
手风琴的JQuery写法
这个是很简单的,但是刚开始的时候,容易出现问题,如果你没写过的话!布局:<div class="king"> <ul> <li class="current"> <a href="#"> <img src="images/m1.jpg" alt="" class="small"> <原创 2020-11-22 10:48:55 · 706 阅读 · 3 评论 -
移动端移动的代码逻辑
<!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>D.原创 2020-11-21 18:40:05 · 130 阅读 · 0 评论 -
点击回到顶部的缓冲动画
// 动画函数 function animate(obj, target, callback) { // console.log(callback); callback = function() {} 调用的时候 callback() // 先清除以前的定时器,只保留当前的一个定时器执行 clearInterval(obj.timer); obj.timer = setInter...原创 2020-11-21 18:20:07 · 192 阅读 · 0 评论 -
放大镜效果,关键是一个小算法
1, 布局右侧一个大图片的box2, 当左侧mousemove 的时候,让图片显示3, 计算坐标位置,有个比列关系! 左边 标记盒子的最大移动位置/ 右边大图的最大移动位置 = 左left/右left右left =左left * 右大最大移动位置/ 左标记盒子的最大移动位置代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...原创 2020-11-19 09:53:31 · 269 阅读 · 0 评论 -
放大镜效果实现1
1,如果一个大目标,看起来很吓人,只要拆解出小目标,然后实现小目标,大目标就自然而然搞定了a 让一个盒子背景色半透明 .mask { background: #FEDE4F; opacity: .5; }b 当鼠标悬浮的时候,显示move样式cursor:move;c , 当大盒子mouseenter 的时候,让mask 盒子显示出来 smallBox.addEventListener("mousee.原创 2020-11-19 08:22:01 · 225 阅读 · 1 评论 -
随着右侧滚动条滚动,右侧定位的元素样式发生变化
知识点回顾:1, 得到一个元素在页面文档中的距离顶部的距离var banner = document.querySelector(".banner")console.log(banner.offsetTop)2,监听浏览器滚动条的变化 document.addEventListener("scroll", function() { var root = document.documentElement || document.body; ...原创 2020-11-19 03:06:31 · 655 阅读 · 0 评论 -
js 常用代码
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言 一、pandas是什么? 二、使用步骤 1.引入库 2.读入数据 总结前言假如一个页面有滚动条,我们如何获取滚动的距离呢?提示:以下是本篇文章正文内容,下面案例可供参考一、为啥要得到滚动距离,因为有些时候我们需要根据滚动了多少从而执行一些特效?二、看下代码:<!DOCTYPE html><html lang="en"><...原创 2020-11-19 02:43:47 · 674 阅读 · 0 评论 -
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>D.原创 2020-11-18 11:30:30 · 201 阅读 · 3 评论 -
js 倒计时的思路
window.addEventListener("load", function() {// 在这里写倒计时的effect// 开始的时间var firstTime = new Date(2020, 11, 18, 10, 34, 0);// console.log(firstTime.getTime())// 截止到指定的日期的毫秒数var totalTimes = firstTime.getTime() + 24 * 60 * 60 * 1000;// console.log原创 2020-11-18 10:43:46 · 541 阅读 · 3 评论 -
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>D.原创 2020-11-16 09:17:03 · 105 阅读 · 0 评论 -
去除右键,去除选择
原创 2020-11-13 20:16:29 · 88 阅读 · 0 评论 -
dom 事件对象兼容写法
原创 2020-11-12 20:43:29 · 159 阅读 · 0 评论 -
dom 添加和删除事件的方式
原创 2020-11-12 20:41:12 · 197 阅读 · 0 评论 -
2020-11-12
<!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>D.原创 2020-11-12 20:36:24 · 77 阅读 · 0 评论 -
dom 之克隆节点
之所以贴图片就是为了让大家自己去敲着玩!原创 2020-11-12 20:16:31 · 149 阅读 · 0 评论 -
3d 盒子初步写法
<!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>D.原创 2020-11-02 09:58:46 · 265 阅读 · 0 评论 -
js 能力补充
我的js能力突然发现很弱,所有要补一下,这个算法能力也要补!js 操作样式this.style.WebkitTransform = this.style.transform = "rotateX(45deg)";原创 2020-11-02 09:22:43 · 151 阅读 · 0 评论 -
jQuery 复习01
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.staticfile.原创 2020-09-18 13:55:53 · 105 阅读 · 0 评论 -
jQuery 微博写法
在写这篇博客之前,我要去下载个gif 的录制工具,这样方便展示效果!我去,很厉害的样子,这很不错,我的博客又升级了!通过观察,我们的核心效果就是,点击按钮的时候,将textarea 中的内容 ,放到ul 中!好,我们把代码贴过来!<!DOCTYPE html><html><head lang="en"> <m...原创 2020-01-22 12:10:14 · 244 阅读 · 0 评论 -
下拉导航
<!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...原创 2020-01-19 11:39:48 · 184 阅读 · 1 评论 -
枚举思想
当我们去解决一个问题时,发现怎么都不好解决,那就用枚举,将所有的情况都列出来,然后去判断是否符合要求!这种思想就是枚举!这和我们处理事情的思考方式差不多!都设想一样,如果这样做,会咋样,如果那样做,会咋样!然后取出最优解思路!就像欧洲赔率中的最优解一样,两害相权取其轻!(这是更优解思路)—————————<!DOCTYPE html><html&g...原创 2020-01-12 15:15:19 · 409 阅读 · 0 评论 -
事件委派
本来不打算写这个篇,没办法,我学了那么久,这点还是没学会,通过这篇文章,估计冒泡就学会了!冒泡说白了,孩子不处理,交给父亲处理,这样,有俩好处1, 不需要给孩子添加事件,效率高些!2, 当添加一个孩子时,该孩子自带 事件!(这个功能) 很重要!不多少,我将代码拿过来!<!DOCTYPE html><html><head> <...原创 2020-01-12 14:48:03 · 211 阅读 · 0 评论 -
双击阻止默认选中文字
<!DOCTYPE html><html><head> <title>sdfsd</title> <style type="text/css"> #box{ width: 200px; height: 200px; background-color: pink; } </st...原创 2020-01-10 10:44:50 · 904 阅读 · 0 评论 -
面向对象写tab 切换
<!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...原创 2020-01-09 16:16:18 · 375 阅读 · 2 评论 -
拖拽跳不过去的东西
基本拖拽:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...原创 2020-01-06 10:49:27 · 146 阅读 · 0 评论 -
添加事件的兼容写法!
<!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-...原创 2020-01-06 10:33:05 · 127 阅读 · 1 评论 -
VQuery 版本选项卡!真心不错!
由于这个真心不错,所以我打算 将完整代码都贴出来!<!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d"><html xmlns="http://www.w3.org/1999/...原创 2020-01-03 16:00:50 · 166 阅读 · 0 评论 -
手把手写jQuery7 (继续坚持)
我们在学习的过程中,总是喜欢放弃,这是我个人的问题,一遇到点问题就退缩,真是不好行,我们继续吧!attr 方法!这个我暂时测试没任何问题!还有三个方法我们需要一一实现!eq 应该是从指定下标获取 具体元素(当然是VQuery 对象)eq 方法是很简单的!// eq 方法VQuery.prototype.eq = function(i...原创 2020-01-03 15:47:47 · 188 阅读 · 0 评论 -
手把手教你写JQuery6 ,toggle 方法
最近写的有点累了,主要是天气太热了, 暖气房子太热, 脑袋蒙蒙的!VQuery.prototype.toggle = function(){ var _arguments = arguments; var count = 0; var i =0; for(i=0;i<this.elements.length;i++){ /...原创 2020-01-03 14:43:28 · 222 阅读 · 0 评论 -
手把手教你写jQuery改正篇
可见concat 函数不会改变原数组,所以我们原来的VQuery.js 的源码有很大问题,都需要调整!可见写框架,一钉点的错误都不能有!原创 2020-01-03 14:07:22 · 125 阅读 · 0 评论 -
手把手教你写jQuery之点击计数(外篇2)
我们接着上一篇写,我们继续改进代码! <script > window.onload = function(){ var count = 0; var oInpus = document.getElementsByTagName('input'); var i = 0; ...原创 2020-01-02 14:11:14 · 369 阅读 · 1 评论 -
手把手教你写jQuery之点击计数(外篇1)
在这节我们将用闭包闭包的概念就是如果子函数有指针指向外部函数的局部变量,那么这个变量的内存不会被释放!上面说的,如果你没学过c ,你是无法理解的!行,先打住这个话题,我们先看最简单的! 一点点写!这个版本1 ,上面的代码很简单,相信大家可以看懂,但是操作的都是同一个count而我们 要让每一个按钮,操作不同的计数!所以我们要修改下!这个版本就可以很轻松...原创 2020-01-02 14:02:27 · 934 阅读 · 0 评论 -
手把手教你写JQuery之添加一些方法 5
我们要不停的写日记,为啥, 你要是写一万篇日记,你说你不会大前端,人家都不相信,就是这么简单!显示,隐藏我们测试页面写法!是不是有点jQuery的感觉哈,丫的不就一摸一样嘛,至少外表一样哈!苹果8 ,外壳一样,里面是我们盗版人家的! 哇哈哈!!哈哈!不逗比了,我们去测试下!测试到没有啥问题,就是写反了,我们修改下!行,这个小功能很...原创 2020-01-02 13:15:16 · 234 阅读 · 1 评论 -
手把手写自己的JQuery4
在上午呢,我们已经解决了id 选择器 和class 选择器,现在呢,我们继续完善我们的 标签(元素 ) 选择器!上面的逻辑,和简单,就是,选择好后,放到我们的数组中就行了!有啥不理解的,可以加我qq 1981389505 问我就行了下面是测试!行,测试没问题, 我们的选择器写好后,下面我就可以开始狂补 一些方法!慢着我想起来了,我们还得有...原创 2020-01-02 12:50:53 · 188 阅读 · 0 评论 -
手把手教你写jQuery3
id 选择器我们搞定了,我们继续搞定class 选择器,都要集成到我们VQuery 框架中!/ 这个方法真心不错,可以修改修改,作为我们的方法用function getByClass2(oParent,name){ //如果浏览器支持 会得到一个函数体 if(oParent.getElementsByClassName){ // 标准性,写法,我都写了5 遍...原创 2020-01-02 11:30:03 · 241 阅读 · 1 评论 -
手把手教你写jQuery2
上一篇我们写到了要用到事件兼容属性的写法,可见我们的Vquery 功能太弱,所以首先呢,我们给它添加几个功能, 1 事件监听的兼容写法, 2 ,获取css 属性的兼容写法! 3, 我们可爱的万能运动框架也给他集成进去!// 获取属性的兼容写法!VQuery.prototype.getStyle = function (obj, attr){ if(obj.cu...原创 2020-01-02 10:58:13 · 263 阅读 · 1 评论 -
手把手写自己的jQuery
首先我们看下JQuery的点击事件以上点击按钮的时候,会弹出 如下菜单我们要首先这个功能!要实现这个功能,先解决 window.onload 函数处理!我们自身的VQuery.js当传递进来的是函数的时候,我们就 作为window.onload 处理函数我修改了下!使用非常简单!下面我们就考虑 VQuery实现选择器的功能了!...原创 2020-01-02 10:31:34 · 385 阅读 · 1 评论