教学笔录
文章平均质量分 57
骆小胖
这个作者很懒,什么都没留下…
展开
-
JS字符串多行换行
原创 2019-03-25 17:43:10 · 32484 阅读 · 0 评论 -
浅谈HTML空标签
原创 2019-01-16 14:07:46 · 246 阅读 · 0 评论 -
浅谈空标签对伪元素的支持
OM元素,伪元素都是在容器内进行渲染的。input无法容纳其他元素,因此它不支持伪元素。 规范:Authors specify the style and location ofgenerated content with the :before and :after pseudo-elements. As theirnames indicate, the :before and :after pseudo-elements specify thelocation of cont原创 2019-01-16 11:53:00 · 232 阅读 · 0 评论 -
CSS优化单选多选按钮样式(2)
css特殊字符表。 这两天学生做项目,将项目里遇到的特效简单讲解下。这里做下备注,课程大纲适当调整。 【主体】 因为特殊字符表在某些低版本浏览器展示容易出现问题,所以这里再介绍一种方案--->伪元素+画长方形+旋转 <!DOCTYPE html><html><head> <meta charset="utf-8"&a原创 2019-01-16 11:35:30 · 795 阅读 · 0 评论 -
浅谈获取html元素宽高的两种方式-offsetWidth和width的区别
原创 2019-01-16 10:53:05 · 1171 阅读 · 0 评论 -
浅谈原生JS实现二级导航(优缺点与局限性)
gt; <style type="text/css"> *{ margin: 0; padding: 0; } li{ list-style: none; } a{ text-decoration: none; } .nav{ width: 80%; height: 40px; line-height: 40px; margin: auto; }原创 2019-01-15 11:59:42 · 735 阅读 · 0 评论 -
浅谈jQuery实现二级导航(优缺点与局限性)
seover:当鼠标指针位于元素上方时,会发生 mouseover 事件。 mouseenter:当鼠标指针穿过元素时,会发生 mouseenter 事件。 从这里的一个小插曲上,我们应该可以看出,mouseenter是穿过,所以只能触发一次改事件,而mouseover是位于上方,可以想下,如果给div设定了一个mouseover事件,其子孙后代都可以响应改事件,so...一旦鼠标从父级进入自己也会触发这个效果,当从子集回到父级也会触发这种效果。所以,你可以这么理解:mouseenter事件只作用于目原创 2019-01-15 09:50:36 · 377 阅读 · 0 评论 -
浅谈纯CSS实现二级导航(优缺点与局限性)
ck一样,无法实现过渡。 注意(局限性):高度变化若想出现过渡效果,必须由0变到指定高度,如0-200px等才可以。 【主体(1)height由0变为auto<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS</title&原创 2019-01-15 09:26:57 · 543 阅读 · 1 评论 -
纯CSS实现半圆、1/4圆
<div class="area"></div>.area{ width: 100px; height: 50px; background: red; border-radius: 0px 0px 100px 100px;} 2、上半圆 3、左半圆 4、右半圆 (2)1/4圆 实现原理:border四个方向的值的设定---上右下左原创 2019-01-12 15:49:15 · 7948 阅读 · 0 评论 -
HTML CSS 特殊字符表
原创 2019-01-11 15:52:02 · 103 阅读 · 0 评论 -
CSS优化单选多选按钮样式(1)
原创 2019-01-11 15:30:03 · 882 阅读 · 0 评论 -
JS定义变量的3种方式var,let,const
原创 2019-01-08 11:48:23 · 173 阅读 · 0 评论 -
原生JS实现瀑布流效果
原创 2018-12-23 14:28:39 · 185 阅读 · 0 评论 -
原生JS之lastChild和lastElementChild、childNodes和children区别
(1)原生JS遍历时操作如下childNodes获取所有子节点(包括包括文本节点、注释节点即回车、换行、空格、文本等等)firstChild获取第一个子节点(可以为注释节点)lastChild获取最后一个子节点(与firstChild类似)parentNode返回给定节点的父级节点nextSibling返回给定节点的下一个节点previousSibling返回给定节点的上一个节点注意:上面写法是IE8之前旧版本写法,也可以在I原创 2018-12-22 14:55:19 · 6157 阅读 · 0 评论 -
jquery插件——仿新浪微博限制输入字数的textarea
-8" /><title>jquery插件——仿新浪微博限制输入字数的textarea</title><script src="http://apps.bdimg.com/libs/jquery/1.10.1/jquery.min.js"></script><style> *{padding: 0;mar原创 2018-12-19 13:44:40 · 138 阅读 · 0 评论 -
浅谈css3长度单位rem,以及移动端布局技巧
点,也就是html。例:(下面例子中的根节点是html ,它的字体大小是100px,所以根节点下面的元素所设置的rem,都是1rem=100px。)rem的初始值是16px,也就是说在没有设置根节点的font-size的时候,1rem=16px<html> <head> <style> html,body{ font-size: 100px; }原创 2018-12-10 15:40:37 · 142 阅读 · 0 评论 -
浅谈JS事件绑定
原创 2018-12-09 19:26:52 · 130 阅读 · 0 评论 -
input表单控件及属性补充
</title> <style type="text/css"> *{ margin: 0; padding: 0; } .area{ width: 600px; height: 40px; border: 1px solid red; } .area span{ color: red; display: none; } .area原创 2019-01-18 11:57:53 · 706 阅读 · 0 评论 -
纯JS实现点击区域外隐藏元素
PE html><html><head> <meta charset="utf-8"> <title>demo</title> <style type="text/css"> *{ margin: 0; padding: 0; } .a原创 2019-01-23 15:30:11 · 468 阅读 · 0 评论 -
jquery的animate无法支持transform属性的解决方案
原创 2019-03-25 16:41:25 · 2864 阅读 · 0 评论 -
浅谈页面布局定位
。那为什么在开发过程里,经常给父元素设置相对定位,然后给子元素设置绝对定位呢? 【主体】 针对这个问题,也是前端里经常出现的一个问题。有的入门不久的经常按照编程习惯记成“子绝父相”,即子元素绝对定位,那么父元素一定要设置相对定位。 这个只是编码习惯造成的错误理解。。。 之所在开发里经常给父元素加相对后再给子元素加绝对定位,是因为父元素加相对定位后才不会摆脱流式布局,其他定位属性会让其摆脱流式布局的文档流,造成页面布局混乱。 .原创 2019-03-25 14:57:55 · 219 阅读 · 0 评论 -
JS浮点数表示法
精确地表示分数,比如1/2,1/8,1/1024。遗憾的是,我们常用的分数都是十进制分数1/10,1/100等,二进制浮点数表示法并不能精确的表示类似0.1这样的简单的数字。所以js浮点数运算会不精准。 例如:js加法:9.3+0.3;//结果为9.600000000000001js加法:9.3-0.7;//结果为8.600000000000001js乘法:7*0.8;//结果为5.6000000000000005js除法:9.3/0.3;//结果为31.0000000000000原创 2019-03-04 09:55:41 · 2372 阅读 · 1 评论 -
冒泡排序
原创 2019-03-04 10:01:10 · 116 阅读 · 0 评论 -
for循环读取i值
原创 2019-03-02 16:06:30 · 2500 阅读 · 0 评论 -
浅谈JS块级作用域
原创 2019-03-02 15:37:24 · 359 阅读 · 1 评论 -
let面试题
原创 2019-03-02 15:31:47 · 509 阅读 · 0 评论 -
浅谈锚点跳转优先级
(1)name值 a 标签 name 属性值为 top(可变)<!-- 定义一个名称为top的锚点链接 --><a name="top"></a><!--主体代码--><!--返回页面顶部top锚点的链接--><a href="#top">返回顶部<原创 2019-03-02 15:08:06 · 596 阅读 · 0 评论 -
返回顶部的几种方案
原创 2019-03-02 14:28:23 · 801 阅读 · 0 评论 -
attachEvent兼容各浏览器事件(DOM2级事件的兼容处理)
on> <script type="text/javascript"> window.onload = function(){ // DOM2事件兼容 function addEvent(obj,ev,fn){ //obj为要绑定事件的元素,ev为要绑定的事件,fn为绑定事件的函数 if(document.addEventListener){ obj.addEventListener(ev原创 2019-02-18 11:40:39 · 515 阅读 · 0 评论 -
JS字符串比较大小
原创 2019-02-16 11:30:05 · 9980 阅读 · 2 评论 -
浅谈ASCII码
示(因为计算机用高电平和低电平分别表示1和0),例如,像a、b、c、d这样的52个字母(包括大写)以及0、1等数字还有一些常用的符号(例如*、#、@等)在计算机中存储时也要使用二进制数来表示,而具体用哪些二进制数字表示哪个符号,当然每个人都可以约定自己的一套(这就叫编码),而大家如果要想互相通信而不造成混乱,那么大家就必须使用相同的编码规则,于是美国有关的标准化组织就出台了ASCII编码,统一规定了上述常用符号用哪些二进制数来表示。 (2)概论 ASCII原创 2019-02-16 11:19:01 · 421 阅读 · 0 评论 -
if条件后加大括号{}和不加大括号{}的区别
原创 2019-02-12 15:22:54 · 37042 阅读 · 5 评论 -
正则验证案例(1)
harset="utf-8"> <title>demo</title> <style type="text/css"> *{ margin: 0; padding: 0; } /*属性选择器*/ input[name="phone"]{ color: red; } </st原创 2019-01-25 09:33:26 · 162 阅读 · 0 评论 -
弹性盒模型(2)------Flex容器元素
原创 2019-01-24 17:25:01 · 221 阅读 · 0 评论 -
弹性盒模型(1)------Flex布局对子元素影响
原创 2019-01-24 16:40:52 · 2485 阅读 · 0 评论 -
JS中的事件委托 / 代理详解
原创 2018-12-09 19:24:36 · 110 阅读 · 0 评论 -
indexOf 和 lastIndexOf的区别
indexOf 和 lastIndexOf 都是索引文件 indexOf 是查某个指定的字符串在字符串首次出现的位置(索引值) (也就是从前往后查) eg: lastIndexOf 是从右向左查某个指定的字符串在字符串中最后一次出现的位置(也就是从后往前查)eg:注意: 那么问题来了 两个不是一前一后相反方向还是查么?怎么他们两个返回的索引值相同呢? because:lastIndexOf()方法虽然是从后往前搜索,但返回的位置是从前开始数数和计算原创 2018-12-09 15:51:14 · 93 阅读 · 0 评论 -
原生JS实现简单放大镜效果
et="utf-8"> <title>放大镜</title> <style type="text/css"> /*代码初始化*/ *{ margin: 0; padding: 0; } /*代码主体*/ .small_box{ width: 300px; height: 300px; borde原创 2018-12-06 23:12:48 · 167 阅读 · 0 评论 -
css修改滚动条默认样式
【主体】 简单的demo,可以尝试下: /*滚动条样式*/ .innerbox::-webkit-scrollbar {/*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px; } .innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ b原创 2018-08-29 17:46:30 · 189 阅读 · 0 评论 -
jquery 调用live()方法无效?
原创 2018-08-29 16:49:11 · 3895 阅读 · 0 评论