前端笔记
pengmingdong
这个作者很懒,什么都没留下…
展开
-
js笔记
["instudy_number":"1","share_number":"2"] 以上取出的是一维数组(键对值),数组中有多个单元,在js中循环出来。首先声明一个数组。 json=eval('('dtta')'); user_data = { 'instudy_number':[], 'share_number':[],}原创 2016-05-09 10:44:35 · 330 阅读 · 0 评论 -
html,div中多行文字垂直居中
css代码.name { height: 150px; width: 150px; vertical-align:middle; display:table-cell;}.shop { width: 100%; height: 150px; margin-top: 15px; border:1px solid #E0E0E0;原创 2017-05-23 15:42:46 · 4316 阅读 · 0 评论 -
在ie浏览器中,a标嵌套img标签,四周自带边距
给img标签设置如下属性即可解决。img{ border:0;}原创 2017-05-08 13:33:08 · 1377 阅读 · 0 评论 -
利用css实现背景半透明,文字不透明。
利用css3新增的rgba属性,在新增filter属性兼容ie6、7、8浏览器.div{ color:white; background-color:rgba(0,0,0,0.8);//最后一个参数值,代表透明度 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColor原创 2017-05-08 14:00:12 · 628 阅读 · 0 评论 -
解决overflow:hidden在ie7下无效的问题
当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidden属性就会失效。 解决方法: 我们在IE7内发现子元素会超出父元素设定的高度,即使父元素设置了overflow:hidden。 解决这个bug很简单,在父元素中使用position:relative;即可解决该bug,就是用到overflow的父节点中增加相对定位即可。原创 2017-05-08 14:03:06 · 948 阅读 · 0 评论 -
bootstrap3学习:响应式布局layout
1、像素宽度分类在bootstrap的v3版本中,已经将各种媒介分为4种像素宽度类型:xs:extra small 特别窄屏幕,默认指浏览器像素宽度小于768pxsm:small 窄屏幕,默认指浏览器像素宽度大于等于768pxmd:middle 中等宽度屏幕,默认值指浏览器像素宽度大于等于992pxlg:large 大屏幕,默认值指浏览器像素宽度大于等于1200px这四种屏幕宽度对应的尺寸缩写死转载 2017-05-09 15:42:50 · 1104 阅读 · 0 评论 -
利用jquery实现文字上下滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Ty转载 2017-06-02 11:50:44 · 9413 阅读 · 0 评论 -
table标签中设置td的边框线
//设置table标签的css为:border: 1px solid #ccc;//设置td标签的css属性为:border:solid #ccc 1px;原创 2017-06-02 14:54:42 · 27290 阅读 · 0 评论 -
css绝对定位后居中显示文字
直接上代码:<style> .main { width:300px; height:200px; text-align:center; } .title { position:absolute; width:300px; height:20px; backgroun原创 2017-06-30 14:13:24 · 5013 阅读 · 0 评论 -
jquery获得包含自身在内的html元素
$(”).html()是获得选中元素下的子节点的html,不能包含自身元素。<div class="test"><p>hello,你好!</p></div><script>$(".test").prop("outerHTML");</script>反之,我们要把更改包含选中自身的元素的html代码的时候,可像下面这样写<script>$(".test").prop("outerHTML",'原创 2017-05-08 10:08:53 · 8460 阅读 · 0 评论 -
利用css实现鼠标经过元素,下划线由中间向两边展开
利用css实现鼠标经过元素,下划线由中间向两边展开的效果原创 2017-06-09 09:08:24 · 9325 阅读 · 2 评论 -
jquery获取所有选中的checkbox,判断CheckBox是否选中
假设有如下html代码<input type="checkbox" value="1" name="goods"><input type="checkbox" value="2" name="goods">js代码如下var number = '';$(input:checkbox[name=goods]:checked).each(function(k){ if(k == 0){原创 2017-05-24 10:11:00 · 32828 阅读 · 0 评论 -
css3鼠标经过,图片旋转
<style> .navigation:hover .img { -webkit-transition:0.4s linear;transition:0.4s ease-in; -webkit-transform:rotate(180deg);transform:rotate(180deg); }</style><d原创 2017-08-15 13:08:05 · 2271 阅读 · 0 评论 -
ul列表解决最后一个li标签的margin问题
原文地址:http://www.qdfuns.com/notes/18692/4aaf900b84dcb4ab111ddfd93b87c8ee.html 方法一:运用css3的nth-child(3n),但是不兼容ie8及以下。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>demo</title> <转载 2017-08-15 14:17:36 · 3605 阅读 · 0 评论 -
div+css之让ul及li水平居中于div
<div class="footer-desc"> <ul> <li><a href="">网站地图</a></li> <li><a href="">隐私声明</a></li> <li><a href="">版权声明</a></li> <li><a href="">联系我们</a></li原创 2017-08-16 10:18:44 · 1231 阅读 · 0 评论 -
css中的em
em和px的区别: em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。国外使用比较多,现在移动智能终端设备越来越普及,em能适应更多的移动设备。 px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的,QQ截图也是使用PX作为长度宽度单位。em是这样算的:它是根据字体的大小来计算的用户翻译 2017-10-24 15:41:57 · 453 阅读 · 0 评论 -
移动端能用手指滑动的轮播图插件
下载链接:https://codeload.github.com/thebird/Swipe/zip/2.0.0,下载后解压,直接运行index.html文件,在浏览器的手机端访问模式,直接可以拖动轮播图片进行左右轮播重写swipe.js文件中的stop方法 function stop() { delay=options.auto > 0 ? options.auto : 0; cle翻译 2017-10-23 17:14:41 · 6190 阅读 · 0 评论 -
img相对于div垂直居中
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。参考地址:vertical-align比如某一行内容中有文字有图片,有单选框,想要文字和单选框相对图片垂直居中。这时候就可以用vertical-align属性解决原创 2017-06-16 13:45:04 · 963 阅读 · 0 评论 -
jquery获得select选择框的文本与值
获得选中值:$('.select').val()获得选中框的文本值:$('.select').find('option:selected').text()原创 2017-04-18 11:02:38 · 665 阅读 · 0 评论 -
使用meta标签兼容ie浏览器和360浏览器
<meta http-equiv="X-UA-Compatible" content="edge" /><meta http-equiv="X-UA-Compatible" content="IE=edge">以上两段meta出现在html的head头部中,如果在ie浏览器中,会让ie浏览器启用最高内核解析html代码360浏览器:<meta name=”renderer” content=”web原创 2017-03-08 15:48:12 · 8682 阅读 · 0 评论 -
webuploadder
webuploadder原创 2016-06-23 18:12:44 · 367 阅读 · 0 评论 -
jquery jsonp跨域请求
标题: 内容: $(function() { $("#form").submit(function() { var data = $(this).serialize(); //表单数据系列化 把表单数据转换成&a=1&b=2形式 alert(data)原创 2016-06-08 10:31:48 · 275 阅读 · 0 评论 -
判断checkbox选中状态
$('.check').bind('click',function(){ $(":checkbox").each(function(){ if ($(this).is(':checked')) { alert('选中')原创 2016-09-13 14:28:31 · 2619 阅读 · 0 评论 -
百度webupload的使用
百度上传工具webuploader,图片上传附加参数 项目中需要上传视频,图片等资源.最先做的是上传图片,开始在网上找了一款野鸡插件,可以实现图片上传预览(无需传到后台).但是最近这个插件出了莫名的问题,不易修复,一怒之下,还是决定找个大点的,靠谱的插件吧.加之上传视频就是用的webuploader,所以上传图片也理所当然选它了.插件初始化,js引用什么的,官方文档上都写的比较清楚,建议直接转载 2016-09-08 15:18:28 · 2690 阅读 · 0 评论 -
vue.js基础笔记
html中解析普通变量使用两个大括号,若是需要插入html内容则使用三个大括号 数据绑定语法var vm = new Vue({ el:'.app'//id名或者class名 data:{ name:'hello vue',//实例化vue对象,里面的data属性的值是一个对象 classobj:{ 'class-a': true,原创 2016-10-12 15:26:28 · 328 阅读 · 0 评论 -
ie浏览器兼容
ie低版本浏览器默认很多标签是自带样式的。ul默认室友padding-left 40pxli标签的默认样式是跟其他浏览器不一样的。默认情况下,Firefox中list-style-position值为outside,即列表项符号会在LI标签的外面显示。而IE6的默认值则相反(inside)。不过这还不是问题关键,IE6完全是属于占着茅坑不拉屎的那种,即使你不显示列表项符号,即把list原创 2016-09-25 20:52:08 · 337 阅读 · 0 评论 -
HTML5中用 jQuery + Ajax 上传文件
HTML5 中已经可以用 Ajax 上传文件了,而且代码非常简单,借助 FormData 类即可发送文件数据。<?phpif (isset($_POST['upload'])) { var_dump($_FILES); move_uploaded_file($_FILES['upfile']['tmp_name'], 'up_tmp/'.time().'.dat'); /原创 2016-11-18 10:36:51 · 1934 阅读 · 0 评论 -
获得jquery元素的位置
jQuery选择器是非常方便的,使用jQuery能够为我们选择元素带来很多的方便,但是我们经常会遇到这样的情况就是我们需要判断当前元素的属于相同类或者相同类型的子元素,或者我们也可能获取到相同类型元素中的第N个元素,那么对于jQuery来说又应该怎样操作呢?下面通过一个示例来说明。jQuery选择器、获取第N个元素、判断当前元素是第几个元素假设有下面这样一段HTML代码:<ul> <li>j翻译 2016-12-15 10:05:04 · 439 阅读 · 0 评论 -
css3鼠标经过,图片放大效果
css代码/*图片划过改变图片大小效果*/.list ul li { width: 228px; height: 270px; overflow: hidden; z-index: 1; position:relative;}.list ul li a {}.list ul li a img { width: 228px; height: 270px; position: relative;原创 2016-12-15 10:07:39 · 4412 阅读 · 0 评论 -
jquery笔记
$(‘.pagination li[class=active]’).children(‘a’).text() //获得pagination class属性下的 li 标签中class属性为active的子元素的a 标签内容$(this).parent(‘li’).siblings(‘li’).attr(‘class’,”) //获得当前元素的父元素的同级所有元素更好的绑定事件方法:$(do原创 2016-10-20 16:37:40 · 257 阅读 · 0 评论 -
ie浏览器兼容笔记
ie低版本浏览器默认很多标签是自带样式的。 ul默认室友padding-left 40px li标签的默认样式是跟其他浏览器不一样的。默认带有左边距16px左右,设置属性如下即可解决list-style-position:outside;position后记得在relative属性的元素设置浮层 z-index:0;初始化。避免不兼容多个并排div,设置margin等值无效: 这种情况可能是原创 2016-12-16 16:00:57 · 421 阅读 · 0 评论 -
css常用技巧
原文链接:https://zhuanlan.zhihu.com/p/25068655水平居中元素:通用方法,元素的宽高未知 方式一:CSS3 transform .parent { position: relative;}.child { position: absolute; left: 50%: transform: translateX(-50%);}方转载 2017-02-08 08:33:30 · 231 阅读 · 0 评论 -
获得select下拉选择框的值和文本
$(document).on('change','.optext',function(){ var value = $(this).val()//获得选中的值 var text = this.options[this.selectedIndex].text//获得选中的文本值 $('.showcheck').after('<span class="ch原创 2017-01-17 11:24:16 · 705 阅读 · 0 评论 -
子元素浮动后父元素自适应高度,ul->li标签设定宽高后overflow无效,li标签里面的内容多出内容会换行
子元素浮动后,父元素无法自适应高度。 这种情况只需要给父元素加一个属性:overflow:hidden 父元素就能自适应了原创 2016-10-21 09:31:46 · 3044 阅读 · 0 评论 -
jquery序列化表单并ajax提交
序列化表单数据原创 2017-02-14 11:58:05 · 514 阅读 · 0 评论 -
javascript中的变量
js变量,ajax异步赋值原创 2017-02-23 14:07:37 · 262 阅读 · 0 评论 -
ie 6、7双倍padding
以前经常遇到该bug,可是每次当时间记住最后最做项目是又给忘记了,为了表示下次鸭梨不大,今天发狠了,好好整理一下, 哈哈:谁说ie6有双倍margin值,我还有ie6 7 双倍padding值 产生条件:当父级元素没有定有高度,切定义了padding值,里面子元素有浮动时,padding值在ie6 7下会成双倍,解决方法: 1、定义父级元素的高度 2、给父级元素添加display:inlin原创 2017-03-08 14:48:26 · 304 阅读 · 0 评论 -
用图片定位html背景
background:url(../images/pub_goods.png) no-repeat;//引入图片路径,图片不重复显示background-size: auto 200px;//将背景图片压缩为200px,比如原图的图标尺寸一般会比较大,这时就需要用到background-size参数缩小图片background-position:0px -110px;//定位当前元素的背景图片,第一原创 2017-03-01 15:58:54 · 1035 阅读 · 0 评论