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: 0;
  }  

  .ul li {
  font-size: 16px; 
  letter-spacing: normal;  
  word-spacing: normal;  
  display:inline-block;  
  *display: inline;
  zoom:1;  
  }  

当页面一定要用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:red9; /*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()