WEB前端笔记
HTML+CSS部分
IE6使用PNG的透明问题
解决关键字 DD_belatedPNG_0.0.8a.js Google或百度一下,下载之
<!--[if lte IE 6]>
<script type="text/javascript" src="DD_belatedPNG_0.0.8a.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('div, ul, img, li, input, a');
</script>
<![endif]-->
说明:fix方法的参数是你需要进行透明化的标签,或者类都可以
关于处理浮动的定义:
clear:both——清除浮动
overflow:hidden——闭合浮动
inline-block元素的空白间距问题(会出现在 IE8-9、Firefox、Safari 这几个浏览器上【间距4px】,Chrome上也会出现【间距8px】)
解决方式是先设置父元素的font-size为0,然后在inline-block元素中重置需要的字体大小
.ul {
letter-spacing: -4px; /*用来兼容safari,根据不同字体字号或许需要做一定的调整*/
word-spacing: -4px; /*用来兼容safari,根据不同字体字号或许需要做一定的调整*/
font-size:;
} .ul li {
font-size: 16px;
letter-spacing: normal;
word-spacing: normal;
display:inline-block;
*display: inline;
zoom:;
}
当页面一定要用A标签,又不想做跳转,href属性又不能去掉,可以用####,这样页面就不会跳转了
IE6的浮动使用问题
当运用浮动,并且各个浮动子元素的宽度之和大于父元素的宽度,这时子元素会自动换行排列(常用的信息显示布局)。
但在IE6之下,本来刚刚好的宽度却怎么也对不上号,导致出现布局异常。
要解决这个问题,只要给子元素的CSS都加上background属性则可。
通常浮动的子元素本来就有用到background这个CSS属性的话,是不会出现这个问题的。所以当遇到这个问题,解决方法是给子元素的CSS都加上background:none
同样是IE6浮动布局,在IE6环境下,当使用DIV浮动布局时,父级容器无法根据浮动的子容器的高度进行高度自适应,这是可在父级容器使用样式(zoom:1),这样就能解决问题了
Google浏览器下,字体小于12px时会无效,解决方法是加上下面样式
html,body{
-webkit-text-size-adjust:none;
}
Google浏览器HACK
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* 在这里面写的样式(.test)只针对Google Chrome、Safari 3.0、Opera 9 的CSS样式 */ .test{color:#f00;}
}
IE浏览器HACK
.ie6_7_8{
color:blue; /*所有浏览器*/
color:red\9; /*IE9以及以下版本浏览器*/
*color:green; /*IE7及其以下版本浏览器*/
_color:purple; /*IE6浏览器*/
}
在IE6环境下,如果遇到一个模块层里的任何元素只有一执行JS代码改变其CSS,就导致整个模块消失的情况,而在其他浏览器下都正常。
那么可以看看是不是大布局框架用了table搭建,而内部其他布局却用了DIV,如果是的话,也许这就是导致IE6出现那种情况的原因
IE6就是这么一个无解的东西,要兼容它不容易呐
要让弹出层显示在flash之上,可以在<object>标签内添加如下代码:
<param name="wmode" value="opaque" />
frameset 元素可定义一个框架集,用来组织多个窗口(框架),在frameset内部定义几个frame,就表示有几个窗口。
可以简单理解为多个iframe的集合(当然,注意frameset的搭配元素是frame)。
它通过 cols 或 rows 属性来决定布局结构,例如:
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
就是左中右结构,1:2:1比例的3列布局
Jquery部分
常常遇到需要Jquery和一些原始JS属性混用的情况,这时候
$("#ID名").get(0).属性
$("#ID名").[0].属性
这样就可以很好的解决这个问题了
IE浏览器识别代码:
var agent = navigator.userAgent.toLowerCase();
if(agent.indexOf("msie") != -1){
alert("this is IE");
}
使用Jquery的$方法时,尽可能用ID做索引。如非必要,不要用class做索引,因为其运行速度是最慢的,特别在IE6之下极为明显(IE6的JS运行速度只有Chrome的十分之一)
获取浏览器显示区域的高度 : $(window).height();
获取浏览器显示区域的宽度 :$(window).width();
获取页面的文档高度 :$(document).height();
获取页面的文档宽度 :$(document).width();
获取滚动条到顶部的垂直高度 :$(document).scrollTop();
获取滚动条到左边的垂直宽度 :$(document).scrollLeft();
获取某元素的位置 :$(xx).offset().left , $(xx).offset().top
Jquery获取父级页面元素的写法是:
$(window.parent.document).find("#ID名")
而传统JS获取父级页面元素的写法是:
window.parent.document.getElementById("ID名")
Jquery获取iframe页面内元素的写法是:
$(window.frames["myFrame"].document).find(selector)
JS预加载图片
$(document).ready(function(){
var img1 = new Image();
img1.src="图片路径";
});
上面的代码,可以实现在浏览器加载完页面后,预先加载图片。
对于有些会改变背景图的特效而言,把要切换图片预先加载,就可以让特效效果更圆滑
JS解析JSON
知道键名的前提下, 获取JSON对象中某个键对应的值的写法
JsonObj.key
JsonObj[key]
JS组合选择器
$("selectorA selectorB")
介绍 :返回selectorA元素里包含的所有的子孙元素selectorB
$("selectorA>selectorB")
介绍 :返回selectorA元素里包含的所有的直接子元素selectorB (不包括孙元素)
$("selectorA+selectorB")
介绍 :返回跟在selectorA元素后面的第一个同级元素selectorB
$("selectorA~selectorB")
介绍 :返回跟在selectorA元素后面的所有同级元素selectorB
注:满足selectorA元素可以不止一个,如:$("div span"),就是所有div里包含的span子元素
阻止事件默认行为(e是事件对象)
e.preventDefault()
阻止事件冒泡(e是事件对象)
e.stopPropagation()
最新文章
- Docker实践:运行Python应用
- [moka同学转载]Yii2 中国省市区三级联动
- Android——通讯录
- php 内置支持的标签和属性
- Linux 下安装mysql 链接库
- .net微信公众号开发——基础接口
- 报错解决:No Hibernate Session bound to thread, and configuration does not allow creation of non-transactional one here
- Apache加载PHP.ini顺序
- android中实现Parcelable序列化步骤
- JsRender系列demo-10
- 01.Nodejs入门之Helloworld
- .Net程序员学用Oracle系列(30):零碎补充、最后总结(The End)
- java字符串,包,数组及空心正方形,菱形的实例
- 201521123052《Java程序设计》第6周学习总结
- Carbondata源码系列(二)文件格式详解
- JAVAEE——BOS物流项目08:配置代理对象远程调用crm服务、查看定区中包含的分区、查看定区关联的客户
- IIS6.0+win2003部署MVC网站的一些问题
- Oracle记录-开启与关闭数据库
- 【leetcode】21-MergeTwoSortedLists
- iuplua test failure