九依-CSDN博客

原创 Bootstrap class快捷笔记

添加h标签字体样式h1h2h3h4h5h标签的副标签更大的标题display-1display-2display-3display-4引言lead 突出显示返回顶部em 倾斜文本strong 加粗文本缩写相当于提示文本initialism 字体小一点返回顶部无特效列表list-unstyled 无特效列表list-inline 让里面的li变为inline-blocklist-inline-item 需要给li加上才行 3.x版本不需要在li上面加list-i

2022-09-07 08:53:11 501 1

原创利用monment库做一个日历表

布局没啥好说的基本上就是简单的结构布局，里面的内容都是通过js生成的然后是css样式表都是用css2来做的，这个布局可以用css3弹性盒子来做，目前还没掌握css3所以就用的传统布局不过样式布局都好说主要是里面的js代码的实现过程......

2022-08-17 05:41:20 522

原创用自己的fullpage模拟出字节校招的fullpage

首先看一下它的布局整块区域用的背景图，然后一个左边固定的容器，右边固定锚点导航，由于自己写的fullpage插件并没有鼠标点击事件，于是又临时加了一个点击事件进去，但是可能扩展不怎么好下面是我写的布局未解决的问题：背景图片无法做到自适应，当浏览器窗口发生变化时，需要再次刷新网页，不然就会出现高度不够的情况，下面写写是怎么实现的吧。...

2022-08-07 06:29:32 171

原创封装自己的jq myFullPage插件

将自己要生成的classbox类名加工进方法里pageEngine . init(".box" , [ "red" , "yellow" , "green" ]) . addSection("oneSection1") //生成第一个section //第一个页面的样式，这里就不复制粘贴了基本上每一个样式都是一样的 . addComponent({...

2022-08-06 01:39:24 248

原创封装我的jquery工具库，学习笔记

封装我的jQuery工具库(function(){ function jQuery(selector){ return new jQuery.prototype.init(selector); } jQuery.prototype.init = function (selector){ // 选出dom并且包装成jQuery对象返回 //id class this.length = 0; //null

2020-09-20 22:03:46 92

原创我的jQuery第十一天 jQuery工具方法

jQeury工具方法$.extend() $.fn.extend() $.ajax()扩展方法$.extend() 插件扩展（工具方法）// $.extend() // $.fn.extend() //1.扩展方法 *** api 没有 //2.浅层克隆 //3.深层克隆 $.extend({ definedMandom : function (start, final) { // [0, 1] *

2020-07-17 23:50:38 115

原创我的jQuery第十天 jQuery工具方法

jQuery工具方法$.type()判断数据类型 isArray isFuntion isWindow…$.trim()消除空格$.proxy()改变this指向$.noConflict()防止冲突$.each()循环 map…$.parseJSON()严格json字符串转换成对象-原生JSON.parse()$.makeArray()类数组转换成数组type会判断参数里面的是什么类型 console.log($.type(123)); //numb

2020-07-16 23:50:11 125

原创我的jQuery第九天，实例方法，位置图形

我的jQuery第九天-实例方法，位置图形位置坐标图形大小的相关方法offset()position()scrollTop scrollLeft()width() height()innerWidth() outerWidth() innerHeight() outerWidth()offset会返回对象，分别记录了left 和 top距文档的距离<style> *{ margin: 0; padding:

2020-07-15 23:35:32 111

原创我的jQuery第八天 animate作中的queue队列

我的jQuery第八天jQuery中的animate作中的queue队列queue and dequeue and clearQueue <style> .demo{ width: 100px; height: 100px; background-color: aquamarine; } </style></head><body>

2020-07-14 21:52:19 205

原创我的jQuery第七天动画及其一些实现原理

jQuery - 动画jQ动画插件插件名称 jQuery Easing Plugin目的：用于扩展jQuery动画过渡效果链接地址https://cdnjs.cloudflace.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js动画相关方法hide() show() toggle()消失展示参数： null或(duration,easing,callblack)fadeln() fadeout() fade

2020-07-13 22:59:26 242

原创我的jQuery第六天 trigger的一些原理 and hover

jQuery方法 trigger()主动的去触发一些事件,可以去触发系统的一些事件自定义事件<div class="demo"> </div> <script src="./js/jquery-1.8.3.min.js"></script> <script> $('.demo').on('click', function(e , a, b, c, d){ console.log

2020-07-12 23:43:40 329

原创我的jQuery第五天clone,data()and事件方法

jQuery实例方法-DOM操作事件方法on()one()off()clone()克隆，克隆元素，包括类名和行间属性，自定义属性，可以传布尔参数，ture就会克隆事件使用场景：用户去操作DOM复制，拖拽排序 <div class="demo"></div> <script src="./js/jquery-1.8.3.min.js"></script> <script> $('.demo').

2020-07-11 18:24:26 164 1

原创 jQuery实例方法 - DOM操作2

jQuery实例方法 - DOM操作取赋值相关方法:val()可以传函数<body> <form action="./" method="GET"> <h3>选择你喜欢的企业</h3> <select name="star" id=""> <option value="s">神马搜索</option> <option v

2020-07-11 00:32:57 129

原创我的jQuery第三天 jQuery实例方法-DOM操作

jQuery实例方法-DOM操作取赋值相关方法.html().text().size().addClass().removeClass().hasClass().css().attr().prop()注意尽量避免直接添加行间样式，因为其权重过高，这样不利于响应式设计，破坏了css3+html5优雅的解决方案attr和prop的区别：jQuery认为attribute和checked selecked disabled就是表示该属性初始状态的值，property

2020-07-10 00:26:01 119

原创 jQuery

封装我的jQuery(function(){ function jQuery(selector){ return new jQuery.prototype.init(selector); } jQuery.prototype.init = function (selector){ // 选出dom并且包装成jQuery对象返回 //id class this.length = 0; //null un

2020-07-08 23:29:40 136 1

原创我的jQuery第二天 -- DOM操作

jQuery实例方法-DOM操作进一步选择元素相关方法：.get().eq().find().filter.not().has().is().add().end()get()该方法可以获取元素，里面可以传参数，传的是几就对应哪个元素，如果不写就返回一个数组。返回的都是原生元素<div class="dome">1</div> <div class="dome">2</div> <div class="

2020-07-07 23:52:08 119

原创我的jQuery第一天

什么是jQueryjQuery其实就是就是一堆js函数（js库），也是普通的js。为什么要用jQueryjQuery面向用户良好的设计使得在使用过程中彻底解放了你的记忆原生操作DOM的接口。jQuery中大量可复用的函数和发展过程中常年累计下来的插件库，可以极大简化javascript开发jQuery在半数以上并没有复杂交互的网站中得以大面积使用，因为他们需要的仅仅是一些兼容极低浏览器而又呈现炫酷效果动画的页面（jQuery出到3，但大公司PC端依然使用1.x版本、移动端2.x版本）jQu

2020-07-06 23:25:52 183

原创轮播图方法，原型链上编程？？

自动生成轮播图相当于在数组的对象里面增加一个地址就会多一张图片（我是小白，写的差请多多包涵，运用了之前的一些框架然后组成了一个自动的框架）html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l

2020-07-06 00:16:38 301

原创 js执行机制

JS执行机制JS引擎线程（解释执行JS代码、用户是输入、网络请求）GUI线程（绘制用户界面、与JS主线程是互斥的）http网络请求线程（处理用户的get、post等请求，等返回结果后将回调函数推入任务队列）定时触发器线程（setTimeout、setlnterval等待时间结束后把执行函数推入任务队列中）浏览器事件处理线程（将cilick、mouse等交互事件发生后将这些事件放入事件队列中）JS引擎线程和GUI线程-互斥JS可以操作DOM元素，进而会影响到GUI的渲染结果，因此JS引擎线

2020-07-03 23:07:32 122

原创一个简单的轮播图代码

#轮播图dome<!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=

2020-07-01 22:40:05 2623 1

原创 js运动

加速运动var timer = null; var oDiv = document.getElementsByTagName('div')[0]; oDiv.onclick = function (){ setaMove(this) } function setaMove (dom){ clearInterval(timer); var a = -1;

2020-06-28 00:30:27 79

原创 js运动

js运动匀速运动function stratMove(dom, target){ var timer = null; clearInterval(timer); var iSpeed = target - dom.offsetLeft > 0 ? 7 : -7; dom.timer = setInterval(function(){ if(Math.abs(target - dom.offsetLeft) < Math.abs(iSpeed))

2020-06-26 00:28:50 146

原创深入数组方法与应用,筛选条件

算是一个dome功能，实现之后的样式是这样的类似于选项卡，当点击all展示所有的卡片当点击Female的时候会展示所有男性的卡片反之点击女性也是一样的并且还有条件筛选，当点击输入九的时候会展示所有字符当中含有九的男性该dome运动的一些方法有：forEach，数组遍历方法Filter,数组筛选方法for in 循环，遍历对象方法indexOf,判断当前值是包含有里面的值getAttribute 读取元素属性的值JS设计模式思想（人懵的）以下是初级代码实现该功能<!DOCT

2020-06-25 02:13:38 329

原创 JS节流，防抖

JS节流函数节流就是预定一个函数只有在大于等于执行周期时才会执行，周期内不调用不执行，好像水滴攒到一定重量才会落下一样。场景窗口调整(resize)页面滚动(scroll)疯狂点击(mousedown)疯狂点击<div id = 'd'>0</div><button id = 'bnt'>click</button><script> var oDiv = document.getElementById('d');

2020-06-22 20:27:59 140

原创深入数组方法并应用

深入数组方法并应用方法列举//举例var arr = [{ {name : '张三',src : "./scr/1.img", des: "长得帅", age :20}, {name : '李四',src : "./scr/2.img", des: "太高了", age :28}, {name : '张三',src : "./scr/3.img", des: "年龄大", age :30}, {name : '张三',src : "./scr/4.img", des:

2020-06-21 17:43:52 111

原创封装一个getElemeltnByClassName兼容方法

Math.random()生成一个0-1左右开区间数封装一个getElemeltnByClassName兼容方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document

2020-06-19 23:09:05 149

原创 JS小dome之懒加载

JS小dome之懒加载<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{

2020-06-18 22:27:46 261

原创 BOM

BOM的一些方法浏览器对象模型BOM与DOM的关系javacsript 是通过访问 BOM 对象来访问、控制、修改浏览器BOM 的 window 包含了 document，因此通过 window 对象的 document 属性就可以访问、检索、修改文档内容与结构。document 对象又是 DOM 模型的根节点。因此，BOM 包含了 DOM，浏览器提供出来给予访问的是 BOM 对象，从 BOM 对象再访问到 DOM 对象，从而 js 可以操作浏览器以及浏览器读取到的文档BOM 对

2020-06-18 19:04:06 188

原创事件

事件事件就是交互事件，用户点击实现回馈，是交互体验的核心功能。绑定事件处理函数ele.onxxxx = function(event){}兼容性很好，但是一个元素的同一事件上只能绑定一个基本等同于写在HTML行间上obj.addEventListener(type,fn,false)IE9一下不兼容，可以为一个事件绑定多个处理程序obj.attachEvent(‘on’ + type, fn);IE独有，一个事件同样可以绑定多个处理程序事件处理程序的运行环境ele.onxxx =

2020-06-17 22:37:19 293

原创正则表达式

正则表达式正则表达式的作用：匹配特殊字符或有特殊搭配原则的字符的最佳选择转义字符"\"var str = "aaa\"bbb"//用反斜杠将字符串符号转化为文本形式输出元字符\r(行结束)\n(换行)\t(制表符)\w(代表0-9A-z和_)\W(代表^\w)\d(代表0-9)\D(代表^\d)\s(可以表示空白字符 \t \n \r \v \f和空格)\S(表示^\s)\f(换页符)\v(垂直制表符)\b(表示单词边界)\B(表示非单词边界)n+(表示n可以出现

2020-06-15 23:32:28 157

原创 json,异步加载,时间线

JSONjson是一种传输格式（以对象为样板，本质上就是对象，但用途有区别，对象就是本地用的，json是用来传输的）方法JSON.parse() string ----json//将字符串解析为对象JSON.stringify() json ---- string//将对象变成为字符串的形式异步加载JSjs加载的缺点：加载工具方法没必要阻塞文档，过度JS加载会影响整个页面效率，一旦网速不好，那么整个网站将等待js加载而不进行后续渲染等工作。有些工具方法需要按需加载，用到在加载，不用就

2020-06-14 15:37:58 173

原创 DOM选择器

dom选择器类型document代表整个文档ID选择器document.getElementByid() 方法//选择当前的ID名//在ie8一下的浏览器，不区分id的大小写getElementByTagName() 方法//页面里面的所有标签名拿出来getElementByClassName() 方法//选中当前的class标签//ie8一下和ie8一下的e版本没有该方法getElementByName() 方法//只有部分标签name可以生效（表单，Img，iframe）qu

2020-06-03 21:54:00 144

原创计算机网络应用教程(第一章)

第一章归纳计算机发展的阶段有：分组交换，网络互连和专用网络，网络的高速发展，网络商业化与万维网网络传输技术有：广播式网络，点到点式网络网络覆盖的分类：个域网（PAN），局域网（LAN），城域网（MAN），广域网（WAN），互联网络（Internetwork）网络的拓扑结构的布局概念：物理拓扑结构，逻辑拓扑结构常见的计算机网络拓扑结构：总线型拓扑结构，环型拓扑结...

2020-03-01 20:27:45 580 1

原创计算机网络应用教程

第一章计算机网络的四个阶段第一阶段分组交换 1961~1972，当时电话是主要通信网络，采用电路交换。电路数据传输经历电路建立数据传输电路拆除电路交换在传输间，发送端和接收端要建立和维持一条专用物理连接路线直到结束。分组交换是电路交换的代替技术，有三个团队。美国麻省理工学院（MIT）的Leonard Kleinrock。兰德公司（Rand）的Paul Baran。...

2020-03-01 20:14:33 669

原创类数组

类数组类数组不是数组，但是长得像数组，他没有数组的那些方法函数的argumets就是一个类数组类数组的产生:var obj = { '1' : 'a', '2' : 'b', '3' : 'c', 'length' : 3, 'push' : Array.prototype.push}// Array.prototype.push = funct...

2020-02-24 12:27:43 180

原创数组

数组数组和对象都是引用值，数组比较稀松，不容易报错，除非是数组上面没有的方法。数组的表达形式字面量var arr = [1,2,3,4,5,6]//直接采用中括号的形式，将值放入中括号中，然后用,隔开。new Arrayvar arr = new Array(1,2,3,4,5,6,7,8)//采用new Array的形式，将值放入括号中//和字面量唯一的区别就是，当A...

2020-02-24 12:27:21 131

原创三目运算符

三目运算符三目运算符就是一个(问号前面放条件判断) ？(如果返回的是正确的就返回冒号左边的数):(如果是错误就返回冒号后面的数)还需要拿一个变量来接收该值例:var num = 4-3 ? 7 : 8;//4-3为1 结果是true ,然后num的值就为7...

2020-02-24 12:26:40 130

原创对象枚举

对象枚举数组可以用length方法来对数组中的每一个数进行遍历对象也有一个方法for in 循环例:var obj = { name : 'aaa', age : 19, sex : 'male', haha : 'aad'}//遍历对象，使用for in 循环for(var prop in obj){ console.log(obj[pro...

2020-02-23 11:23:07 150

原创 call,apply

call和apply他们的效果都是一样的，改变this的指向，区别就是传参列表不同。callfunction Classb(name,dd,age){ this.name = name; this.dd = dd; this.age = age;}function Classa(name,dd,age,male,ban){ this.male = m...

2020-02-22 15:33:41 78

原创原型

原型每一个对象都有原型(prototype)，原型可以当做是共有属性，意思就是由这个对象构造出来的其他对象都可以继承该原型的共有属性。Obj.prototype.name = 'XiCan';function Obj(){ }var obj = new Obj()//创建出来的obj对象在构造函数Obj里面没有name属性，就会上Obj的原型上面找name属性//找到之后结果就是...

2020-02-22 15:33:08 124

空空如也

空空如也