之前的笔记整理

2013年10月21日星期一

在chrome5.0+版本中对非针对服务端的AJAX调用做了严格的限制,Chrome下使用load()函数读取页面有个先决条件，就是要有个服务器环境

2013年10月23日星期三

l 在IE6 / IE7 / IE8兼容模式中，父元素设置text-align且绝对定位元素只设置top,bottom位置，不设置left,right位置时会发生位置错误

<!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>
<title>IE7下当position:relative遇到text-align:center</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
body{padding:0;margin:0;}
#wrap{text-align:center;}
#toolbar{100%;height:125px;background:#000;position:absolute;bottom:0;}
a{color:#fff;}
</style>
</head>
<body>
　　<div id="wrap">
　　<div id="toolbar">我就是来漂移的</div>
　　</div>
</body>
</html>

解决办法:

1.position:absolute对应元素的"外层容器"中的text-align:center去掉，或改成text-align:left即可

2.使用position:absolute时，同时将bottom与right定位写全，遗漏了right 。

l IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素（不仅仅是图片）它都会运算一次，增加了内存开支，因此它的问题是多方面的。

完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替，这种格式能在IE中很好地工作。如果确实需要使用AlphaImageLoader，请使用下划线_filter又使之对IE7以上版本的用户无效

2013年11月11日星期一

l offset() 方法返回或设置匹配元素相对于文档的偏移（位置）

$(selector).offset() 返回

$(selector).offset(value) 设置为value

$(selector).offset(function(index,oldoffset))

规定返回被选元素新偏移坐标的函数。

index - 可选。接受选择器的 index 位置

oldvalue - 可选。接受选择器的当前坐标。

/* 点击button设置p的偏移位置*/
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").offset(function(n,c){
        newPos=new Object();
        newPos.left=c.left+100;
        newPos.top=c.top+100;
        return newPos;
    });
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>设置 p 元素的 offset 坐标</button>
</body>
</html>

View Code

l insertAfter() 方法在被选元素之后插入 HTML 标记或已有的元素。如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之后。

$(content).insertAfter(selector)

参数

描述

content

必需。规定要插入的内容。可能的值：

选择器表达式

HTML 标记

selector

必需。规定在何处插入被选元素。

$("button").click(function(){

$("<span>Hello world!</span>").insertAfter("p");

});

delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

$(selector).delegate(childSelector,event,data,function)

参数	描述
childSelector	必需。规定要附加事件处理程序的一个或多个子元素。
event	必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
data	可选。规定传递到函数的额外数据。
function	必需。规定当事件发生时运行的函数。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("div").delegate("p","click",function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("<p>这是一个新段落。</p>").insertAfter("button");
  });
});
</script>
</head>
<body>
<div style="background-color:yellow">
<p>这是一个段落。</p>
<p>请点击任意一个 p 元素，它会消失。包括本段落。</p>
<button>在本按钮后面插入一个新的 p 元素</button>
</div>
<p><b>注释：</b>通过使用 delegate() 方法，而不是 live()，只有 div 元素中的 p 元素会受到影响。</p>
</body>
</html>

View Code

live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。

$(selector).live(event,data,function)

参数	描述
event	必需。规定附加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
data	可选。规定传递到该函数的额外数据。
function	必需。规定当事件发生时运行的函数。

$("button").live("click",function(){

$("p").slideToggle();

});

selectedIndex 属性可设置或返回下拉列表中被选选项的索引号。

selectObject.selectedIndex=number