06 2018 档案
摘要:前端开发框架,移动优先,响应式布局开发。 网址:www.bootcss.com js有一个特性是阻塞加载,也就是说js文件如果没有加载完,不会进行后面的加载,所以例子中会把js文件写在body的最后一句,但是实际开发不会这样。 容器: 1.container:固定宽度 尺寸:1170、970、750
阅读全文
摘要:一款用于PC端和移动端的滑动效果插件。 中文网站:http://www.swiper.com.cn/# 点击中文教程、使用方法 1. initialSlide:初始索引值,从0开始 2.paginationClickable:true:分页原点点击切换 3.loop:true:首尾连接 如何改自定义
阅读全文
摘要:1. touchstart : 手指放到屏幕上时触发 2. touchmove : 手指在屏幕上滑动时触发 3. touched : 手指离开屏幕时触发 4. touchcancel : 系统取消touch事件时触发,比较少用 移动端一般有三种操作:点击、滑动、拖动,这三种操作一般是组合使用上面4个
阅读全文
摘要:1. cookie 容量小:4k,在同源的http请求时携带传输,占用带宽,有日期限制 2. localStorage 容量更大:5M,不会再请求时携带传递,在所有同源窗口中共享,数据一直有效,除非人为删除,可作为长期数据。 3. sessionStorage 容量>=5M,不会在请求时携带传递,在
阅读全文
摘要:正则表达式: 1.test demo: 结果: 给之前天天生鲜的登陆页面增加正则表达式的验证,添加一个js文件如下:
阅读全文
摘要:json: data.json: 导入json数据: json是JavaScript Object Nation 的首字母缩写,单词的意思是javascript对象表示法,这里说的json指的是类似于javascript对象的一种数据格式,目前这种数据格式比较流行,逐渐替换掉了传统的xml数据格式。
阅读全文
摘要:制作天天生鲜的幻灯片部分 贴了全部代码: main.html: main.css: reset.css: slide.js:
阅读全文
摘要:从这里下载了滚轮事件插件:https://github.com/jquery/jquery-mousewheel 函数节流:js中有些事件的触发频率非常高,在短时间内多次触发执行绑定函数,比如mousemove()然而这并不是我们想要的效果,解决方法就是通过使用定时器来减少触发的次数,实现函数节流。
阅读全文
摘要:插入节点: 1.append()和appendTo():在现存元素的内部,从后面插入元素 2. prepend()和prependTo():在现存元素的内部从前面插入元素 3. after()和insertAfter():在现存元素的外部,从后面插入元素 4. before()和insertBefo
阅读全文
摘要:一个事件冒泡的例子: 事件冒泡有时候是不需要的,需要阻止掉,通过event.stopPropagation()来阻止 阻止默认行为:(阻止右键菜单) 合并阻止操作: 实际开发中一般把阻止冒泡和阻止默认行为合并起来写 return false; eg:(弹框--阻止冒泡) 事件委托:利用事件冒泡原理把
阅读全文
摘要:使用mouseover()、mouseout()时会出现这样一种情况,鼠标快速多次移入移出后这个盒子会在鼠标不动后继续运动 代码如下: 此时会有这种bug: 解决方法:在mouseover()和mouseout()前面加上stop()就好啦!
阅读全文
摘要:1. 获取和设置元素的尺寸 2. 获取元素相对页面的绝对位置:offset() 这种方式增加的盒子不会对之前的结构产生影响 demo: 3. $(window).height(): 获取可视区的高度(桌面显示的一个窗口的大小) 4. $(document).height(): 获取页面高度 5. $
阅读全文
摘要:1.通过animate方法可以设置元素某属性值上的动画 回调函数很强大哦,可以做很多事~ 2.each 相当于for循环,这个each()中的第一个参数是索引值
阅读全文
摘要:1. attr()、prop() 取出或者设置某个属性的值 2. text() 取出或设置text内容,去除其中的标签;而html()取出标签中的内容,会包含子标签。 特殊效果:
阅读全文
摘要:绑定事件的其他方法 以及 取消绑定 事件:: 自定义事件:除了系统事件外,可以通过bind方法自定义事件,然后用tiggle方法触发这些事件 1.click事件 2.mouseover():鼠标进入;mouseout():鼠标离开;(进入/离开子元素也触发) moseenter() : 鼠标进入;m
阅读全文
摘要:思想:同一个函数完成取值和赋值 addClass、removeClass、
阅读全文
摘要:jquery的选择器还是很多的,一下子记不住,截取了下面这个网址的一部分内容,方便用的时候查找。 http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp 选择集转移: $('.list li') : 不能回到父级 $('.list').c
阅读全文
摘要:jQuery是目前使用最广泛的javascript函数库。 怎样安装? 这是下载地址:https://code.jquery.com/ minified是压缩版的 新建一个网页打开上面这个网址,ctrl+s将内容保存到本地即可。 检验是否能够使用这个库:(src为文件所在目录) 结果显示: 说明已经
阅读全文
摘要:1. document.querySlector() 2.document.querySlectorAll()
阅读全文
摘要:创建对象的方式: 1)单体 2)工厂模式:通过一个函数来创建对象(开料、装配、出厂) 3)构造函数(方法重复,缺点是占用内存) 4)原型模式(创建类) 继承:
阅读全文
摘要:封闭函数:时javascript中匿名函数的另一种写法,创建一个一开始就执行而不用命名的函数 示例: 1) 2) 3) 注:在封闭函数前面加;可以避免一些不必要的问题~ 闭包:函数嵌套函数,内部函数可以引用外部函数的参数和变量,参数和变量不会被垃圾回收机制收回。 由于闭包内存不能释放,所以过多的使用
阅读全文
摘要:定时器在JS中的作用: 1)制作动画、时钟、倒计时 2)异步操作 3)函数缓冲与节流 定时器类型: 1)setTimeout 只执行一次的定时器 2)clearTimeout 关闭只执行一次的定时器 3)setInterval 反复执行的定时器 4)clearInterval 关闭反复执行的定时器
阅读全文
摘要:通过标签获取元素: 选中部分li操作: for循环: while循环:用的比较少,性能不高。 aLi是一个类似数组的选择集,但不是数组,没有数组通用的一些方法 数组去重:
阅读全文
摘要:创建数组的方式: 1) 2)(这种实际中用的多,效率高) 操作: 1)获取数组的成员数量: 2)弹出数组内容(脚标从0开始) 3)连接字符串:join() 4)从数组的 后面 增加删除成员:push() 、pop() 5)从数组的 前面 增加删除成员:unshift()、shift() 6)将数组反
阅读全文
摘要:JS解析过程分为两个阶段:编译阶段、执行阶段。在编译阶段会将函数function的声明和定义都提前,而将变量var的声明提前,并将var定义的变量赋值为undefined。 匿名函数: 这就是一个匿名函数,没有名字的~ 函数传参(和python差不多~): 函数传参: return关键字作用: 1)
阅读全文
摘要:这种函数是用到的时候调用: 为了更好的解耦,通常可以提取行间事件,这样input标签中的函数调用就被写到js文件中了:
阅读全文
摘要:属性的操作包括:读和写 方法: 1)”.“操作 2)”[ ]“操作 eg: var oDiv = document.getElementById('div1'); var attr = 'color'; //这里的attr是变量,使用时要用[attr],而不是.attr oDiv.style[att
阅读全文
摘要:变量声明: JavaScript是一种弱类型语言,它的变量类型由它的值来决定,var是变量声明。 变量类型: 基本类型:number、string、boolean(布尔类型:var a=true/false;)、undefined(未定义类型: var a;)、null(空对象类型var ) 复合类
阅读全文
摘要:一 行间事件 二 页面script标签嵌入 三 外部引入
阅读全文
摘要:弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 这东西很方便呀,要分清容量属性和条目属性,想用条目属性之前要在父元素中添加:display:flex。
阅读全文
摘要:相对定位: 当元素被设置相对定位或是绝对定位后,将自动产生层叠,他们的层叠级别自然的高于文本流,除非设置其z-index值为负值。 并且我们发现当相对定位元素进行位移后,表面来看已经脱离了文本流,但是实际上在本文流中还为原来的相对对定位留下了原有的总宽与总高。 绝对定位: 相对定位只可以在文本流中进
阅读全文
摘要:响应布局就是不同宽度应用不同的样式块,每个样式块对应的是该宽度下的布局方式,从而使页面适应不同宽度。
阅读全文
摘要:流体布局:使用百分比来设置元素的宽度,元素的高度按照实际值。 但是流体布局中存在一个边框的问题,元素的边线无法计入百分比。 两种解决办法: 1)width:calc(20% - 4px) 2)width:20%; box-sizing:border-box box-sizing这个属性能够改变盒子尺
阅读全文
摘要:今天做了好多小东西,还挺开心的~ 成品展示: 是不是还萌萌哒~
阅读全文
摘要:一个很简单的小动画,但是还挺有意思的,就是找这种图片很麻烦,我这里把我找的一张图片贴上来,这张图片是我在网上找的,又改了背景色和大小。 效果展示:(感觉效果不是特别好,动作的连贯性还不够好,需要改改图片,偷个懒不改啦~)
阅读全文
摘要:觉得还挺有意思的嘻嘻~ 这里有一个问题要注意一下,图片反转过程中可能会遇到一种如下所示的跳变bug: 这玩意一出来吓我一大跳,显然这种用户体验是很不好的,解决方法: 在.pic, .info{...}这个样式中添加 transform:perspective(800px) rotateY(0deg)
阅读全文
摘要:下了一个软件:ScreenToGif用来截取动态图片,终于可以展示我的小动图啦,嘻嘻,敲开心! main.html
阅读全文
摘要:这个登陆页面主要是有一个form表单,其他的和首页差不多的。 login.html: main.html:(里面有登录页的样式,所以有点长) reset.css:和登录页的是一样的,我就不粘了。 有些图片没去找,直接随便找一张改了尺寸和背景色,最后效果图是这样的:
阅读全文
摘要:终于做好了! index.html: main.css: reset.css: 网页截屏:
阅读全文
摘要:总结: 1)html有很多默认样式,然而实际应用中并不需要,因此要在制作样式之前清除掉默认样式。 2)注意清除margin-top塌陷 3)使用float:left后要使用clear:both清除其影响 4)注意要兼容IE 效果图:
阅读全文
摘要:目的:为了把样式和内容分开,并且使网页元素更加丰富,引入了CSS CSS页面引入有三种方式: 1)内联式:比较不常用,因为内容和样式仍然在一起,不方便。示例: 2)嵌入式:由于这种方式速度快,一般用于首页加载。示例: 3)外联式:样式单独保存在main.css文件中,样式与内容完全分离,用于大多数网
阅读全文
摘要:传统布局:使用table来做整体页面的布局 总结:这种方式来制作页面现在也不是很多了,感觉并不是很高效。 需要先用photoshop量出页面布局具体的尺寸位置,再将其划分为表格,对每个格子进行编辑。 每个格子可以嵌套表格,这样有时候写着写着还有点迷糊,要重新找到编辑位置属于哪一个表格的哪个位置,通常
阅读全文
摘要:环境:python3 win10 安装这个心好累啊!网上找了很多办法都安装不成功,后来换了几个安装包,最后4.4.1版本的包终于能用了! https://blog.csdn.net/www520507/article/details/78073497 上面这个教程讲的很详细,我就是用这个教程安装了几
阅读全文
摘要:工具:python3 核心知识点: 1)lxml包不能用pip下载,因为里面有其他语言编写的文件 2)urlopen返回的请求是html文件,要使用 content = etree.HTML(html)来将其转换为xml 3)使用content.xpath()返回一个匹配成功的列表集合 4)构造新的
阅读全文

浙公网安备 33010602011771号