Html
关注
分享
扫一扫
a_Joker_Ling
这个作者很懒，什么都没留下…
展开
-
jquery元素节点操作、todolist
jquery元素节点操作创建节点var $div = $('<div>');var $div2 = $('<div>这是一个div元素</div>');插入节点1、append()和appendTo()：在现存元素的内部，从后面插入元素var $span = $('<span>这是一个span元素</span>');$('...原创 2020-04-15 16:44:03 · 203 阅读 · 0 评论 -
事件冒泡、事件委托
事件冒泡什么是事件冒泡在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。事件冒泡的作用事件冒...原创 2020-04-15 15:35:28 · 223 阅读 · 0 评论 -
jquery事件--焦点、移入移出、resize、绑定
jquery事件事件函数列表：blur() 元素失去焦点focus() 元素获得焦点click() 鼠标单击mouseover() 鼠标进入（进入子元素也触发）mouseout() 鼠标离开（离开子元素也触发）mouseenter() 鼠标进入（进入子元素不触发）mouseleave() 鼠标离开（离开子元素不触发）hover() 同时为mouseenter和mouseleave...原创 2020-04-15 15:29:15 · 1640 阅读 · 0 评论 -
jquery循环each
jquery循环对jquery选择的对象集合分别进行操作，需要用到jquery循环操作，此时可以用对象上的each方法：$(function(){ $('.list li').each(function(i){ $(this).html(i); })})......<ul class="list"> <li></li&...原创 2020-04-15 11:10:39 · 756 阅读 · 0 评论 -
jquery属性操作.html(),, .prop()
jquery属性操作1、html() 取出或设置html内容// 取出html内容var $htm = $('#div1').html();// 设置html内容$('#div1').html('<span>添加文字</span>');2、prop() 取出或设置某个属性的值// 取出图片的地址var $src = $('#img1').prop(...原创 2020-04-15 11:04:42 · 424 阅读 · 0 评论 -
尺寸相关、滚动事件
尺寸相关、滚动事件1、获取和设置元素的尺寸width()、height() 获取元素width和height innerWidth()、innerHeight() 包括padding的width和height outerWidth()、outerHeight() 包括padding和border的width和height outerWidth(true)、outerHei...原创 2020-04-15 10:26:45 · 141 阅读 · 0 评论 -
jquery动画
jquery动画通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。$('#div1').animate({ width:300, height:300},1000,'swing',function(){ alert('done!');});参数可以写成数字表达式：$('#div1').animate({...原创 2020-04-14 22:09:17 · 131 阅读 · 0 评论 -
jQuery绑定click事件，特殊效果，链式调用
绑定click事件给元素绑定click事件，可以用如下方法：$('#btn1').click(function(){// 内部的this指的是原生对象// 使用jquery对象用 $(this)})<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <t...原创 2020-04-14 21:22:35 · 514 阅读 · 0 评论 -
jquery加载，选择器过滤、选择，样式操作
jquery加载将获取元素的语句写到页面头部，会因为元素还没有加载而出错，jquery提供了ready方法解决这个问题，它的速度比原生的 window.onload 更快。<script type="text/javascript">$(document).ready(function(){ ......});</script>可以简写为：<...原创 2020-04-14 20:22:43 · 317 阅读 · 0 评论 -
JavaScript封闭函数
封闭函数封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。一般定义的函数和执行函数：function myalert(){ alert('hello!');};myalert();封闭函数：(function myalert(){ alert('hello!');})();还可以在函数定义前加上 “~”或 “!” ...原创 2020-04-14 13:22:32 · 422 阅读 · 1 评论 -
JavaScript定时器倒计时
定时器定时器在javascript中的作用1、制作动画2、异步操作3、函数缓冲与节流定时器类型及语法/*定时器：setTimeout 只执行一次的定时器 clearTimeout 关闭只执行一次的定时器setInterval 反复执行的定时器clearInterval 关闭反复执行的定时器*/var time1 = setTimeout(myalert,2000)...原创 2020-04-14 13:03:27 · 418 阅读 · 0 评论 -
JavaScript字符串处理方法
字符串处理方法1、字符串合并操作：“ + ”var iNum01 = 12;var iNum02 = 24;var sNum03 = '12';var sTr = 'abc';alert(iNum01+iNum02); //弹出36alert(iNum01+sNum03); //弹出1212 数字和字符串相加等同于字符串相加alert(sNum03+sTr); // 弹...原创 2020-04-14 09:07:25 · 191 阅读 · 0 评论 -
CSS3新增选择器nth-child等
CSS3新增选择器1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素<style type="text/css"> .list div:nth-child(2){ background-color:red; }</style>......<div class="list">...原创 2020-04-14 08:35:48 · 2218 阅读 · 0 评论 -
js条件语句
条件语句通过条件来控制程序的走向，就需要用到条件语句。运算符1、算术运算符： +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)2、赋值运算符：=、 +=、 -=、 *=、 /=、 %=3、条件运算符：==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)注：===是为了解决==的bug例：<script t...原创 2020-04-13 21:57:40 · 329 阅读 · 0 评论 -
JavaScript函数
函数函数就是重复执行的代码片。函数定义与执行<script type="text/javascript"> // 函数定义 function fnAlert(){ alert('hello!'); } // 函数执行 fnAlert();</script>变量与函数预解析JavaScript解析过程分为两...原创 2020-04-13 20:10:28 · 125 阅读 · 0 评论 -
变量，获取元素以及操作元素
变量JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。 定义变量需要用关键字 ‘var’var iNum = 123;var sTr = 'asd'; //同时定义多个变量可以用","隔开，公用一个‘var’关键字 var iNum = 45,sTr='qwe',sCount='68';变量类型5种基本数据类型：1、number 数字类型2...原创 2020-04-13 15:19:00 · 463 阅读 · 0 评论 -
常用css列表
常用css列表color 设置文字的颜色，如： color:red;font-size 设置文字的大小，如：font-size:12px;font-family 设置文字的字体，如：font-family:‘微软雅黑’;font-style 设置字体是否倾斜，如：font-style:‘normal’; 设置不倾斜，font-style:‘italic’;设置文字倾斜...原创 2020-04-13 13:40:47 · 150 阅读 · 0 评论 -
流体布局，响应式布局
适配布局类型PC及移动端页面适配方法设备屏幕有多种不同的分辨率，页面适配方案有如下几种：1、全适配：响应式布局+流体布局2、移动端适配：流体布局+少量响应式基于rem的布局流体布局流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，流体布局中，元素的边线无法用百分比，可以使用样式中的计算函数 calc() 来设置宽度，或者使用 box-sizing 属性将盒...原创 2020-04-13 09:02:27 · 586 阅读 · 0 评论 -
Autoprefixer在Sublime text中的设置
Autoprefixer在Sublime text中的设置：1、preferences/key Bindings-User{ "keys": ["ctrl+alt+x"], "command": "autoprefixer" }2、Preferences>package setting>AutoPrefixer>Setting-User{ "browsers":...原创 2020-04-12 22:23:50 · 181 阅读 · 0 评论 -
CSS3 浏览器前缀，H5新增标签
浏CSS3 浏览器前缀览器样式前缀为了让CSS3样式兼容，需要将某些样式加上浏览器前缀：-ms- 兼容IE浏览器-moz- 兼容firefox-o- 兼容opera-webkit- 兼容chrome 和 safari比如：div{ -ms-transform: rotate(30deg); -webkit-transform: rotate...原创 2020-04-12 22:21:44 · 312 阅读 · 0 评论 -
CSS3 transform变换，案例
CSS3 transform变换1、translate(x,y) 设置盒子位移2、scale(x,y) 设置盒子缩放3、rotate(deg) 设置盒子旋转4、skew(x-angle,y-angle) 设置盒子斜切5、perspective 设置透视距离6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示7、translateX、tr...原创 2020-04-12 20:16:00 · 378 阅读 · 0 评论 -
CSS3 animation动画，风车旋转、loading、人物走路动画案例
CSS3 animation动画1、@keyframes 定义关键帧动画2、animation-name 动画名称3、animation-duration 动画时间4、animation-timing-function 动画曲线 linear(匀速) | ease(缓冲) | steps(步数)5、animation-delay 动画延迟6、animation-iteration-co...原创 2020-04-12 19:44:40 · 1517 阅读 · 0 评论 -
CSS3 transition动画、案例
CSS3 transition动画1、transition-property 设置过渡的属性，比如：width height background-color2、transition-duration 设置过渡的时间，比如：1s 、500ms3、transition-timing-function 设置过渡的运动方式，常用有 linear(匀速) | ease(缓冲运动)4、transit...原创 2020-04-12 17:09:54 · 487 阅读 · 0 评论 -
CSS3圆角、rgba显示
CSS3圆角、rgbaCSS3圆角设置某一个角的圆角，比如设置左上角的圆角：border-top-left-radius:30px 60px; 此时为椭圆角border-top-left-radius:30px; 此时为正圆角同时分别设置四个角： border-radius:30px 60px 120px 150px; 此时为正圆角。设置四个圆角相同：border-radius:...原创 2020-04-12 13:41:36 · 232 阅读 · 0 评论 -
CSS权重
CSS权重CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。权重的等级可以把样式的应用方式分为几个等级，按照等级来计算权重1、!important，加在样式属性值后，权重值为 100002、内联样式，如：style=””，权重值为10003、ID选择器，如：#content，权重值为1004、类，伪类...原创 2020-04-12 12:56:40 · 97 阅读 · 0 评论 -
重置样式reset.css
重置样式reset.css/* 将标签默认的间距设为0 */body,p,h1,h2,h3,h4,h5,h6,ul,dl,dt,form,input{ margin:0; padding:0;}/* 去掉默认的小圆点 */ul{ list-style:none;}/* 去掉默认的下划线 */a{ text-decoration:none;}/* 设置不...原创 2020-04-11 22:46:46 · 421 阅读 · 0 评论 -
解决img标签图片下几像素空白的bug
解决图片下3像素空白的bug，为出现问题的img标签添加样式：.div img{ display:block;}原创 2020-04-11 21:28:25 · 409 阅读 · 0 评论 -
CSS-定位
定位文档流文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。关于定位我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：relative 生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。a...原创 2020-04-11 19:34:01 · 179 阅读 · 1 评论 -
CSS浮动，清除浮动
浮动浮动特性1、浮动元素有左浮动(float:left)和右浮动(float:right)两种2、浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来3、相邻浮动的块元素可以并在一行，超出父级宽度就换行4、浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题)5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字...原创 2020-04-11 19:18:03 · 132 阅读 · 0 评论 -
块元素、内联元素、内联块元素
块元素、内联元素、内联块元素元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。块元素块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素，它在布局中的行为：支持全部的样式如果没有设置宽度，默认的宽度为父级宽度100%盒子占据一行、即使设置了宽度内联元素内联...原创 2020-04-11 19:08:58 · 157 阅读 · 0 评论 -
css元素溢出
css元素溢出当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。overflow的设置项：1、visible 默认值。内容不会被修剪，会呈现在元素框之外。2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。3、scroll 内容会被修剪，但是浏览器会显示滚动条以便...原创 2020-04-11 18:58:15 · 199 阅读 · 0 评论 -
盒模型使用技巧及相关问题
margin相关技巧1、设置元素水平居中： margin:x auto;2、margin负值让元素位移及边框合并外边距合并外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下：1、使用这种特性2、设置一边的外边距，一般设置margin-top3、将元素浮动或者定位margin-top 塌陷在两个...原创 2020-04-10 20:36:58 · 150 阅读 · 0 评论 -
Html网页制作图片选择
在网页制作中，如何选择合适的图片格式呢？1、使用大幅面图片时，如果要使用不透明背景的图片，就使用jpg图片；如果要使用透明或者半透明背景的图片，就使用png图片；2、使用小幅面图片或者图标图片时，如果图片含多种颜色，可以使用gif或png图片；如果图片是单色，而且要求有很好的显示效果，可以使用svg；如果是图片时动画的，可以使用gif。常用图片格式图片是网页制作中很重要的素材，图片有不同的...原创 2020-04-10 20:32:42 · 2073 阅读 · 0 评论