博客园_开水房

net start 服务名

2011-12-15T02:34:00Z

net start 服务名

net stop 服务名

本文链接

css absolute relative 定位

2011-10-28T06:01:00Z

转自： http://apps.hi.baidu.com/share/detail/11121011

例如如下A-B的嵌套结构

当A的position为relative时，B的position为absolute才有效。这时候left:0、top:0就不再针对窗口文档，而是针对id为A的这个div了。

实例演示div+css的绝对定位和相对定位布局

说明：
占位空间：元素在文档流中所占据的空间。
物理空间：元素本身所占据的空间。

下面分3种情况分别对相对定位和绝对定位进行讨论：
1.只使用css第一组属性布局定位元素的情况
2.只使用css第二组属性布局定位元素的情况
3.混合使用第一组和第二组属性的情况

图1为未定位时的初始效果，
层级关系为：
<div
   <div box1
   <div box2
   <div box3
效果图：

图1

一、用相对定位布局块级元素
元素设置position值： position:relative
此属性值的设置，元素没有脱离文档流，还是普通流定位模型的一部分，会对文档流中其它元素布局产生影响。（说明：蓝色代表占位空间，红色代表元素）

1.仅使用left、right、top和bottom属性布局相对定位元素的情况
元素原本所占的占位空间仍保留，物理空间偏移。

图2中，设置元素的left和top的值，对box2进行布局，可以发现除了box2偏移之外，其他块级元素的位置没有被影响，可见box2的占位空间还是存在的。
层级关系为：
<div
   <div box1
   <div box2 ——– position:relative ; top:-60px; left:80px;
   <div box3
效果图：

图2

2.仅使用margin属性布局相对定位元素的情况
用margin-bottom属性和margin-top属性设置负值可以改变文档流中所占空间的高度，会影响文档流中的其它元素位置。例如：margin-top:负值; margin-bottom:负值

图3中，box1和box2都设置了元素margin-bottom的值，值等于它们高度的负值。box1和box2物理空间没有改变，占位空间高度为0。box3的margin-bottom值设置为0，物理空间没有改变，占位空间高度不变。再通过margin-left对box2和box3设置左偏移值。
层级关系为：
<div
   <div box1 ——– position:relative ; margin-bottom:-102px;
   <div box2 ——– position:relative ; margin-bottom:-102px; margin-left:110px;
   <div box3 ——– position:relative ; margin-bottom:0px; margin-left:220px;
效果图：

图3

3.混合使用left、right、top和bottom属性与margin属性布局相对定位元素的情况
此情况，它们的值会产生累加的效果。在CSS2.1中所有的浏览器都使用外边距边界来完成偏移计算。本文从数学的角度理解为偏移属性值和外边距属性值累加。

图4中，box2是在图3的基础上增加设置left的值产生的效果，可见margin-left的值和left的值产生了累加。(偏移量:80px = 110px - 30px)
层级关系为：
<div
   <div box1 ——- position:relative ; margin-bottom:-102px;
   <div box2 ——- position:relative ; margin-bottom:-102px;margin-left:110px; flet:-30px;
   <div box3 ——- position:relative ; margin-bottom:0px; margin-left:220px;
效果图：

图4

二、用绝对定位布局块级元素
设置position值：position:absolute;
此属性值的设置，元素从文档流完全删除。

1.仅使用left、right、top和bottom属性布局绝对定位元素的情况
绝对定位的元素的偏移位置以最近的定位(包括相对定位和绝对定位)祖先元素作参照物。如果元素没有已定位(包括相对定位和绝对定位)的祖先元素，那么它的参照物为最顶级元素（由于浏览器的默认参照物不同，物可能是BODY或 HTML 元素）。
注意：IE下参照物需设置宽度或高度bottom和right属性才可以正确的定位。

设置元素为绝对定位元素后，元素的Left、 Right、Top和Bottom属性默认值不是0，只是将元素脱离文档流。以下例子说明这个问题。
在图5中，将橘黄色的祖先元素设置为定位元素（即参照物），box2设为绝对定位，文档流由box1-box2-box3变为box1-box3，可box2却没有移动到距离参照物0值的位置上，可见box2的Left、 Right、Top和Bottom属性默认值不等于0，它只是脱离了文档流而已。
层级关系为：
<div ———————————position:relative 参照物
   <div—————————-没有设置为定位元素，不是参照物
     <div———————-没有设置为定位元素，不是参照物
       <div box1
       <div box2 ——–absolute
       <div box3
效果图：

图5

以最近的祖先定位元素为参照物的情况
图6中，Box2设置成绝对定位元素，脱离了文档流，文档流由box1-box2-box3变为box1-box3，box2以最近的定位祖先（蓝色框）为参照物。
层级关系为：
<div ——————————— position:relative; 不是最近的祖先定位元素，不是参照物
   <div—————————-没有设置为定位元素，不是参照物
     <div———————- position:relative 参照物
       <div box1
       <div box2 ——–position:absolute; top:50px; left:120px;
       <div box3
效果图：

图6

图7中，为改变参照物（橘色框）后的效果
层级关系为：
<div ——————————— position:relative;最近的祖先定位元素，参照物
   <div—————————-没有设置为定位元素，不是参照物
     <div———————-没有设置为定位元素，不是参照物
       <div box1
       <div box2 ——–position:absolute; top:50px; left:120px;
       <div box3
效果图：

图7

图8中，参照物为最顶级的元素情况。
层级关系为：
<div ———————————没有设置为定位元素，不是参照物
   <div—————————-没有设置为定位元素，不是参照物
     <div———————-没有设置为定位元素，不是参照物
       <div box1
       <div box2 ——–position:absolute; top:50px; left:120px;
       <div box3
效果图：

图8

2.仅使用margin属性布局绝对定位元素的情况
此情况，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。

图9中，使用margin属性布局相对定位元素。
层级关系为：
<div ——————————— position:relative; 不是参照物
   <div—————————-没有设置为定位元素，不是参照物
     <div———————-没有设置为定位元素，不是参照物
       <div box1
       <div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
       <div box3
效果图：

图9

IE6的情况下，box2前面没有兄弟节点，则margin-left的值会出现双倍边距，见图10。
层级关系为：
<div ——————————— position:relative; 不是参照物
   <div—————————-没有设置为定位元素，不是参照物
     <div———————-没有设置为定位元素，不是参照物
       <div box1
       <div box2 ——–position:absolute; margin-top:50px; margin-left:60px;
       <div box3
效果图：

图10

3.混合使用left、right、top和bottom属性与margin属性布局相对定位元素的情况
a.margin属性和top、bottom、left、right属性同时使用，如果同一方向偏移，它们的值会产生累加的效果，见图11。
例如：margin-left:120px; left:-20px; 那么box2的偏移值为120px-20px=100px;
层级关系为：
<div ———————————-不是参照物
   <div—————————–不是参照物
     <div———————–position:relative; 参照物
       <div box1
       <div box2 ———position:absolute; margin-left:120px; left:-20px; top:50px;
       <div box3
效果图：

图11

b.绝对定位和相对定位的累加加效果不同，如果top、bottom、left、right属性和margin属性偏移的方向相反，top、bottom、left、right属性值有效，反方向的margin属性值无效，见图12。
层级关系为：
<div ———————————-不是参照物
   <div—————————–不是参照物
     <div———————–position:relative; 参照物
       <div box1
       <div box2 ———position:absolute; margin-left:120px; right:10px; top:50px;
       <div box3
效果图：

图12

总结：

相对定位的元素不会脱离文档流，占用文档流的空间，Left; Right; Top和Bottom属性与margin属性混合使用会产生累加效果。
绝对定位的元素脱离文档流，偏移不影响文档流中的其它元素，Left; Right; Top和Bottom属性与margin属性混合使用，偏移方向相同值累加，方向相反，margin属性值无效。
绝对定位的元素以最近的定位祖先元素为参照物。

本文链接

转： css 针对IE6，IE7，firefox显示不同效果星号 !important 下划线

2011-10-28T01:35:00Z

CSS hack：针对IE6，IE7，firefox显示不同效果

做网站时经常会用到，衡量一个DIV+CSS架构师的水平时，这个也很重要。

区别不同浏览器的CSS hack写法：

区别IE6与FF：
        background:orange;*background:blue;

区别IE6与IE7：
        background:green !important;background:blue;

区别IE7与FF：
        background:orange; *background:green;

区别FF，IE7，IE6：
        background:orange;*background:green !important;*background:blue;

注：IE都能识别*;标准浏览器(如FF)不能识别*；

IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;

        IE6 IE7 FF
*         √ √ ×
!important × √ √

------------------------------------------------------
另外再补充一个，下划线"_",
IE6支持下划线，IE7和firefox均不支持下划线。

          IE6 IE7 FF
*          √ √ ×
!important × √ √
_          √ × ×

于是大家还可以这样来区分IE6，IE7，firefox
: background:orange;*background:green;_background:blue;

注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。

CSS HACK

以下两种方法几乎能解决现今所有HACK.

1, !important

随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)
<stylegt;
#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</stylegt;

2, IE6/IE77对FireFox

*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.
<style>
#wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */
}
</style>

注意:
*+html 对IE7的HACK 必须保证HTML顶部有如下声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd">

二、万能 float 闭合(非常重要!)

关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]
将以下代码加入Global CSS 中,给需要闭合的div加上 ><style>
/* Clear Fix */

.clearfix:after
{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
</style>

关于闭合浮动元素（clearing float）的方法现在已经很多了，个人认为简单实用的方法就是使用:after伪类动态的嵌入一个用于清除浮动的元素，可惜代码量太大了，看上去不够简洁。

现在看到有个方法超级简单。介绍一下这个方法。原文在：http://annevankesteren.nl/2005/03/clearing-floats

这一方面的原理是，外围元素之所以不能很好的延伸，问题出在了overflow上，因为overflow不可见（见W3C的解释）。现在只要将给外围元素添加一个“overflow:auto”，就可以解决问题，结果是除了IE，真的可以解决。下来就要解决ID的问题了，再加上“_height:1%”，这个问题就完全解决了。

下面的例子作为比较
1、没有闭合浮动元素；2、非IE下闭合浮动元素；3、完全闭合元素。相关代码如下：

XHTML代码：
Example Source Code [ww
w.52css.com]
<div id="wrap">
<div >
   <h1>Float left</h1>
</div>
<div >
   <h1>Float right</h1>
</div>
</div>

CSS样式：
Example Source Code [ww
w.52css.com]
#wrap{ border:6px #ccc solid; overflow:auto; _height:1%;}
   .column_left{ float:left; width:20%; padding:10px;}
   .column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;}

三、其他兼容技巧(再次啰嗦)

1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)
2, 居中问题.
1).垂直居中.将 line-height 设置为当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)
2).水平居中. margin: 0 auto;(当然不是万能)
3, 若需给 a 标签内内容加上样式, 需要设置 display: block;(常见于导航标签)
4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.
5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)
6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.
7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.

1 针对firefox ie6 ie7的css样式
现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，
但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针
对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。
现在写一个CSS可以这样：

#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。

2 css布局中的居中问题
主要的样式定义如下：

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明：
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，
只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

3 盒模型不同解释.

#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}

4 浮动ie产生的双倍距离

#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素);

#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;

5 IE与宽度和高度的问题

IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，
正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

6 页面的最小宽度

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，
而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类：
然后CSS这样设计：
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

7 清除浮动

.hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ clear:both;}
或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，
所以并不影响到IE/WIN浏览器。这种的最麻烦的......#box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}

8 DIV浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键}
HTML代码<div id="box"> <div id="left"></div> <div id="right"></div></div>

9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)

p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

10 IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。
解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

11 高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用
margin 或paddign 时。
例：
<div id="box">
p对象中的内容
</div>
CSS：#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。

本文链接

js arguments 用法

2011-10-20T07:31:00Z

function a()

{

alert(arguments[0]);

}

a("bb");

</script>

本文链接

学习jQuery必须知道的几种常用方法转

2011-10-20T07:11:00Z

jQuery事件处理

ready(fn)

代码：

$(document).ready(function(){
  // Your code here...
})；

作用：它可以极大地提高web应用程序的响应速度。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。

bind(type,[data],fn)

代码：

$("p").bind("click", function(){
  alert( $(this).text() );
});

作用：为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数。起到事件监听的作用。

toggle(fn,fn)

代码：

$("td").toggle(
  function () {
    $(this).addClass("selected");
  },
  function () {
    $(this).removeClass("selected");
  }
);

作用：每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。挺有趣的一个函数，在动态实现某些功能的时候可能会用到。(像click(),focus(),keydown()这样的事件这里就不提了，那些都是开发中比较常用到的。)

jQuery外观效果

addClass(class)和removeClass(class)

代码：

$(".stripe tr").mouseover(function(){  
               $(this).addClass("over");}).mouseout(function(){ 
               $(this).removeClass("over");})
});

也可以写成：

$(".stripe tr").mouseover(function() { $(this).addClass("over") });
$(".stripe tr").mouseout(function() { $(this).removeClass("over") });

作用：为指定的元素添加或移除样式，从而实现动态的样式效果，上面的实例中实现鼠标移动双色表格的代码

css(name,value)

代码：

$("p").css("color","red");

作用：很简单，就是在匹配的元素中，设置一个样式属性的值。这个个人感觉和上面的addClass(class)有点类似。

slide(),hide(),fadeIn(), fadeout(), slideUp() ,slideDown()

代码：

$("#btnShow").bind("click",function(event){ $("#divMsg").show() });
$("#btnHide").bind("click",function(evnet){ $("#divMsg").hide() });

作用：jQuery中提供的比较常用的几个动态效果的函数。还可以添加参数：show(speed,[callback])以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。

animate(params[,duration[,easing[,callback]]])

作用：制作动画效果用到的函数，功能非常的强大，可以连续使用此函数。

查找筛选

map(callback)

HTML 代码:

Values:  < INPUT value=John name=name>
  < INPUT value=password name=password>
< INPUT value="< A href=" name=url ? %22 ejohn.org http:>http://ejohn.org/%22/< /A> < FORM>

jQuery 代码:

< /FORM>

$("p").append( $("input").map(function(){
  return $(this).val();
}).get().join(", ") );

结果:

[ John, password, < A href="http://ejohn.org/%3C/p">http://ejohn.org/%3C/p< /A>> ]

作用：将一组元素转换成其他数组（不论是否是元素数组）你可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。这都可以用'$.map()'来方便的建立。

find(expr)

HTML 代码:

< SPAN>Hello< /SPAN>, how are you?
jQuery 代码:  
$("p").find("span") 
结果:
[ < SPAN>Hello< /SPAN> ]

作用：搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

文档处理

attr(key,value)

HTML 代码:

< IMG>< IMG>

jQuery 代码:

$("img").attr("src","test.jpg");

作用：取得或设置匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined 。在控制HTML标记上是必备的工具。

html()/html(val)

HTML 代码:

< DIV> Hello
< /DIV>

jQuery 代码:

$("div").html();

结果:

Hello

作用：取得或设置匹配元素的html内容，同类型的方法还有text()和val()。前者是取得所有匹配元素的内容。，后者是获得匹配元素的当前值。三者有相似的地方常用在内容的操作上。

wrap(html)
HTML 代码:
Test Paragraph.
jQuery 代码:
$("p").wrap("  < DIV class=wrap>< /DIV>");
结果: < DIV class=wrap>
Test Paragraph.

作用：把所有匹配的元素用其他元素的结构化标记包裹起来。这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。可以灵活的修改我们的DOM。

empty()

HTML 代码:

Hello, Person < A href="http://new.51cto.com/wuyou/news_edit.php?artID=127754#">and person< /A>

jQuery 代码:

$("p").empty();

结果:

作用：删除匹配的元素集合中所有的子节点。

Ajax处理

load(url,[data],[callback])

url (String) : 待装入 HTML 网页网址。

data (Map) : (可选) 发送至服务器的 key/value 数据。

callback (Callback) : (可选) 载入成功时回调函数。

代码：

$("#feeds").load("feeds.aspx", {limit: 25}, function(){
   alert("The last 25 entries in the feed have been loaded");
 });

作用：载入远程 HTML 文件代码并插入至 DOM 中。这也是Jquery操作Ajax最常用最有效的方法。

serialize()

HTML 代码:

Results:

< FORM>
  < SELECT name=single>    < OPTION selected>Single< /OPTION>

< OPTION>Single2< /OPTION> < /SELECT>
  < SELECT multiple name=multiple>    < OPTION selected>Multiple< /OPTION>

< OPTION>Multiple2< /OPTION>    < OPTION selected>Multiple3< /OPTION> < /SELECT>

  < INPUT value=check1 type=checkbox name=check> check1
  < INPUT value=check2 type=checkbox name=check 
checked="checked"/> check2
  < INPUT value=radio1 type=radio name=radio 
checked="checked"/> radio1
  < INPUT value=radio2 type=radio name=radio> radio2
< /FORM>

jQuery 代码:

$("#results").append( "< TT>" + $("form").serialize() + "< /TT>" );

作用：序列化表格内容为字符串。用于 Ajax 请求。

工具

jQuery.each(obj,callback)

代码：

$.each( [0,1,2], function(i, n){
  alert( "Item #" + i + ": " + n );
});//遍历数组
$.each( { name: "John", lang: "JS" }, function(i, n){
  alert( "Name: " + i + ", Value: " + n );//遍历对象
});

作用：通用例遍方法，可用于例遍对象和数组。

jQuery.makeArray(obj)

HTML 代码:

First
< DIV>Second< /DIV> Third< /DIV> < DIV>Fourth
< /DIV>

jQuery 代码:

var arr = jQuery.makeArray(document.getElementsByTagName("div"));

结果:

Fourth

Third

Second

First

作用：将类数组对象转换为数组对象。使我们可以在数组和对象之间灵活的转换。

jQuery.trim(str)

作用：这个大家应该很熟悉，就是去掉字符串起始和结尾的空格。

小结：在实际的开发中我们可能会用到其他的方法和属性，以上只是个人认为新手初学jQuery时，必须掌握的一些方法。仅供大家学习的参考。有什么不对的高手指教。

本文链接

jQuery选择器

2011-10-20T07:07:00Z

jQuery 选择器

选择器	实例	选取
*	$("*")	所有元素
#id	$("#lastname")	id="lastname" 的元素
.class	$(".intro")	所有的元素
element	$("p")	所有 <p> 元素
.class.class	$(".intro.demo")	所有且的元素

:first	$("p:first")	第一个 <p> 元素
:last	$("p:last")	最后一个 <p> 元素
:even	$("tr:even")	所有偶数 <tr> 元素
:odd	$("tr:odd")	所有奇数 <tr> 元素

:eq(index)	$("ul li:eq(3)")	列表中的第四个元素（index 从 0 开始）
:gt(no)	$("ul li:gt(3)")	列出 index 大于 3 的元素
:lt(no)	$("ul li:lt(3)")	列出 index 小于 3 的元素
:not(selector)	$("input:not(:empty)")	所有不为空的 input 元素

:header	$(":header")	所有标题元素 <h1> - <h6>
:animated		所有动画元素

:contains(text)	$(":contains('W3School')")	包含指定字符串的所有元素
:empty	$(":empty")	无子（元素）节点的所有元素
:hidden	$("p:hidden")	所有隐藏的 <p> 元素
:visible	$("table:visible")	所有可见的表格

s1,s2,s3	$("th,td,.intro")	所有带有匹配选择的元素

[attribute]	$("[href]")	所有带有 href 属性的元素
[attribute=value]	$("[href='#']")	所有 href 属性的值等于 "#" 的元素
[attribute!=value]	$("[href!='#']")	所有 href 属性的值不等于 "#" 的元素
[attribute$=value]	$("[href$='.jpg']")	所有 href 属性的值包含以 ".jpg" 结尾的元素

:input	$(":input")	所有 <input> 元素
:text	$(":text")	所有 type="text" 的 <input> 元素
:password	$(":password")	所有 type="password" 的 <input> 元素
:radio	$(":radio")	所有 type="radio" 的 <input> 元素
:checkbox	$(":checkbox")	所有 type="checkbox" 的 <input> 元素
:submit	$(":submit")	所有 type="submit" 的 <input> 元素
:reset	$(":reset")	所有 type="reset" 的 <input> 元素
:button	$(":button")	所有 type="button" 的 <input> 元素
:image	$(":image")	所有 type="image" 的 <input> 元素
:file	$(":file")	所有 type="file" 的 <input> 元素

:enabled	$(":enabled")	所有激活的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有被选取的 input 元素
:checked	$(":checked")	所有被选中的 input 元素

本文链接

浅析jQuery框架与构造对象转

2011-10-20T06:24:00Z

文章针对jQuery 1.3.2版本，面向的读者应具备以下要求：

1.非常熟悉HTML

2.非常熟悉javascript语法知识

3.熟悉javascript面向对象方面的知识

4.熟练使用jQuery框架

jQuery对象的初始化是写在匿名函数里的，就像这样：

(function(){alert("jQuery框架分析")})();

第一个括号是声明了一个函数，第二个括号是执行这个函数。也就是说，jQuery框架在页面载入的时候已经做了一些事情（这个个匿名函数已经被执行了）。做的这些事情使我们可以通过$("#yourId")或$(".yourClass")等方式获取页面元素，并把获取到的元素包装成jQuery对象。

匿名函数是怎么实现这些功能的呢？

首先框架定义了两个核心对象

jQuery = window.jQuery = window.$ = function( selector, context ) {}

一个是jQuery

一个是$

这两个对象都指向一个函数

这个函数是我们使用$()或jQuery()方法时的入口，这个方法返回一个jQuery.fn.init( selector, context );的实例，其实这个实例是一个jQuery对象。

jQuery对象是一个什么样的对象呢？

jQuery对象其实是一个javascript的数组

这个数组对象包含125个方法和4个属性

4个属性分别是

jQuery 当前的jQuery框架版本号

length 指示该数组对象的元素个数

context 一般情况下都是指向HtmlDocument对象

selector 传递进来的选择器内容如：#yourId或.yourClass等

如果你通过$("#yourId")方法获取jQuery对象，并且你的页面中只有一个id为yourId的元素那么$("#yourId")[0]就是HtmlElement元素与document.getElementById("yourId")获取的元素是一样的

jQuery对象是怎么构造出来的呢？

这个对象就是刚才我们提到的

jQuery = window.jQuery = window.$ = function( selector, context ) {}

框架不只为此对象定义了一个方法，还定义了它的原型(prototype)

jQueryjQuery.fn = jQuery.prototype = {//此处为json对象}

原型的定义是通过json对象定义的

如

{  
init: function( selector, context ) {//方法体},  
jQuery: "1.3.2",//属性  
size: function() {//方法体},  
//......  
}

前面提到的125个方法4个属性有一部分在这个json对象中完成定义的这个json对象中第一个方法就是init方法也就是入口方法中的jQuery.fn.init( selector, context );此方法与一个正则表达式对象配合来构造jQuery对象

这个正则表达式为：

quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/

下面我们说一下init方法的实现逻辑

此方法有两个参数

一个是selector（选择器）

一个是context（上下文）

selector就是我们用$("#yourId")或jQuery(".yourClass")传递进来的变量

这个参数不一定是字符串，也可能是其他形式的变量

等会儿我们就会介绍到

context参数我们在使用jQuery的时候很少用到,暂且不表

注意这两个参数都在返回的jQuery对象中体现出来了（以两个同名的属性展示）

下面看一下这个方法体内部的实现逻辑

//如果没有选择器或者选择器为空的话，就把document对象赋值给他  
selector = selector || document;   
//如果selector参数是dom元素，直接返回jQuery对象  
//也就是说你可以$(document.getElementById("allen"))把你的元素封装成jQuery对象  
if ( selector.nodeType ) {  
this[0] = selector;  
this.length = 1;  
this.context = selector;  
return this;  
}   
//typeof 取对象的类型，用三个等号效率较高， 不需要类型转换，两个等号默认有类型转换  
if ( typeof selector === "string" ) {   
//这里用到了我们前面提到的正则表达式quickExpr  
//match其实是一个数组  
//第0个元素是与正则表达式相匹配的文本  
//第1个元素是与正则表达式的第1个子表达式相匹配的文本（如果有的话）  
//第2个元素是第2个子表达式相匹配的文本（如果有的话）  
//第3个元素是第3个子表达式相匹配的文本（如果有的话）这里就是元素的ID，不包含#  
var match = quickExpr.exec( selector );   
//正则表达式匹配到了内容   并且 match[1]不为空 或者 context为空  
//match[1]不为空的时候selector是HTML字符串，也就是你可以用$("   
xland  
")把对象包装成jQuery对象  
//context为空的时候selector是页面元素ID   
if ( match && (match[1] || !context) ) {   
 //选择器为html字符串  此情况暂且不表  
if ( match[1] ){  
selector = jQuery.clean( [ match[1] ], context );}   
//选择器为ID  
else {  
//得到元素  
var elem = document.getElementById( match[3] );   
 //如果得到了这个元素但是元素的ID属性不是match[3]，跳入分支。分支里面的东西做了什么工作，暂且不表  
if ( elem && elem.id != match[3] ){  
return jQuery().find( selector );}   
//把得到的页面元素封装成jQuery对象  
//如果elem为空，就传入一个空数组，框架怎么处理此空数组，暂且不表  
//如果不为空就跳入我们前面说的if ( selector.nodeType )分支，构造出jQuery对象来  
var ret = jQuery( elem || [] );   
 //设置jQuery对象的context属性  
ret.context = document;   
 //设置jQuery对象的selector属性  
ret.selector = selector;   
 //返回这个对象给调用者  
return ret;  
}

至此

var obj = $(“#yourId”);

构造jQuery对象的初步工作就做完了

本文链接

jQuery获取页面元素

2011-10-20T06:02:00Z

$("#yourId")或$(".yourClass")等方式获取页面元素，并把获取到的元素包装成jQuery对象。

本文链接

javascript 基础转

2011-10-20T02:44:00Z

最近面试过一些人, 发现即使经验丰富的开发人员, 对于一些基础的理论和细节也常常会模糊. 写本文是因为就我自己而言第一次学习下面的内容时发现自己确实有所收获和感悟. 其实我们容易忽视的javascript的细节还有更多, 本文仅是冰山一角. 希望大家都能通过本文有所斩获.

一. Javascript面向对象

Javascript是一门面向对象的语言, 虽然很多书上都有讲解,但还是有很多初级开发者不了解.

创建对象

ps: 以前写过一篇详细的创建对象的文章(原型方法, 工厂方法等)但是找不到了, 回头如果还能找到我再添加进来.下面仅仅简单介绍.

在C#里我们使用new关键字创建对象, 在javascript中也可以使用new关键字:

var objectA = new Object();

但是实际上"new"可以省略:

var objectA = Object();

但是我建议为了保持语法一直, 总是带着new关键字声明一个对象.

创建属性并赋值

在javascript中属性不需要声明, 在赋值时即自动创建:

objectA.name = "my name";

访问属性

一般我们使用"."来分层次的访问对象的属性:

alert(objectA.name);

嵌套属性

对象的属性同样可以是任何javascript对象:

var objectB = objectA;  
objectB.other = objectA;  
//此时下面三个值相当, 并且改变其中任何一个值其余两个值都改变  
objectA.name;  
objectB.name;  
objectB.other.name;

使用索引

如果objectA上有一个属性名称为"school.college", 那么我们没法通过"."访问,因为"objectA.school.college"语句是指寻找objectA的school属性对象的college属性.

这种情况我们需要通过索引设置和访问属性:

objectA["school.college"] = "BITI";  
alert(objectA["school.college"]);

下面几个语句是等效的:

objectA["school.college"] = "BITI";  
 var key = "school.college" 
alert(objectA["school.college"]);  
alert(objectA["school" + "." + "college"]);          
alert(objectA[key]);

JSON 格式语法

JSON是指Javascript Object Notation, 即Javascript对象表示法.

我们可以用下面的语句声明一个对象,同时创建属性:

//JSON  
        var objectA = {  
            name: "myName",  
            age: 19,  
            school:  
            {  
                college: "大学",  
                "high school": "高中"   
            },  
            like:["睡觉","C#","还是睡觉"]  
        }

JSON的语法格式是使用"{"和"}"表示一个对象, 使用"属性名称:值"的格式来创建属性, 多个属性用","隔开.

上例中school属性又是一个对象. like属性是一个数组. 使用JSON格式的字符串创建完对象后, 就可以用"."或者索引的形式访问属性:

objectA.school["high school"];  
objectA.like[1];

静态方法与实例方法

静态方法是指不需要声明类的实例就可以使用的方法.

实例方法是指必须要先使用"new"关键字声明一个类的实例, 然后才可以通过此实例访问的方法.

function staticClass() { }; //声明一个类  
   staticClass.staticMethod = function() { alert("static method") }; //创建一个静态方法  
   staticClass.prototype.instanceMethod = function() { "instance method" }; //创建一个实例方法

上面首先声明了一个类staticClass, 接着为其添加了一个静态方法staticMethod 和一个动态方法instanceMethod. 区别就在于添加动态方法要使用prototype原型属性.

对于静态方法可以直接调用:

staticClass.staticMethod();

但是动态方法不能直接调用:

staticClass.instanceMethod(); //语句错误, 无法运行.

需要首先实例化后才能调用:

var instance = new staticClass();//首先实例化  
instance.instanceMethod(); //在实例上可以调用实例方法

二. 全局对象是window属性

通常我们在

然而我们还应该知道, 实际上全局变量objectA是创建在window对象上, 可以通过window对象访问到:

window.objectA

三. 函数究竟是什么

我们都知道如何创建一个全局函数以及如何调用:

function myMethod()  
{  
alert("Hello!");  
}   
myMethod();

其实同全局对象一样, 使用function关键字创建的方法(也可以创建类)的名称, 实际上是为window对象创建了myMethod属性, 并且值是一个匿名方法, 上面的语句等同于:

window.myMethod = function()  
{  
alert("Hello!");  
}

无论使用哪种方式声明, 实际保存时都是使用函数名创建window对象的属性. 并且值只有函数体没有函数名称.

所以,下面三种声明方式是等效的:

function myMethod()  
{  
alert("Hello!");  
}  
window.myMethod = function()  
{  
alert("Hello!");  
}  
myMethod = function()  
{  
alert("Hello!");  
}

四. "this"究竟是什么

在C#中,this变量通常指类的当前实例. 在javascript则不同, javascript中的"this"是函数上下文,不是由声明决定,而是由如何调用决定.因为全局函数其实就是window的属性, 所以在顶层调用全局函数时的this是指window对象.

下面的例子可以很好的说明这一切:

var o1 = { name: "o1 name" };  
        window.name = "window name";  
 
        function showName()  
        {  
            alert(this.name);  
        }          
          
        o1.show = showName;  
        window.show = showName;  
 
        showName();  
        o1.show();  
        window.show();

结果

window name

o1 name

window name

结果证明在顶层调用函数和使用window对象调用函数时, this都指向window对象. 而在对象中调用函数时this指向当前对象.

五. javascript中的闭包

闭包的概念比较难以理解, 先看闭包的定义:

闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数)，因而这些变量也是该表达式的一部分。

简单表达:

闭包就是function实例以及执行function实例时来自环境的变量.

先看下面的例子:

<!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></title>  
</head>  
<body>  
    <div id="divResult"></div>  
    <script type="text/javascript">  
        function start()  
        {  
            var count = 0;  
            window.setInterval(function()  
            {  
                document.getElementById("divResult").innerHTML += count + "<br/>";  
                count++;  
            }, 3000);  
        };  
        start();  
    </script>  
</body>  
</html>

count是start函数体内的变量, 通常我们理解count的作用于是在start()函数内, 在调用start()函数结束后应该也会消失.但是此示例的结果是count变量会一直存在,并且每次被加1:

因为count变量是setInterval中创建的匿名函数(就是包含count++的函数)的闭包的一部分!

再通俗的讲, 闭包首先就是函数本身, 比如上面这个匿名函数本身, 同时加上在这个函数运行时需要用到的count变量.

javascript中的闭包是隐式的创建的, 而不像其他支持闭包的语言那样需要显式创建. 我们在C#语言中很少碰到是因为C#中无法在方法中再次声明方法. 而在一个方法中调用另一个方法通常使用参数传递数据.

本文链接

JSON

2011-10-20T01:38:00Z

JSON 格式语法

JSON是指Javascript Object Notation, 即Javascript对象表示法.

我们可以用下面的语句声明一个对象,同时创建属性:

//JSON  
        var objectA = {  
            name: "myName",  
            age: 19,  
            school:  
            {  
                college: "大学",  
                "high school": "高中"   
            },  
            like:["睡觉","C#","还是睡觉"]  
        }

JSON的语法格式是使用"{"和"}"表示一个对象, 使用"属性名称:值"的格式来创建属性, 多个属性用","隔开.

上例中school属性又是一个对象. like属性是一个数组. 使用JSON格式的字符串创建完对象后, 就可以用"."或者索引的形式访问属性:

objectA.school["high school"];  
objectA.like[1];

本文链接

博客园_开水房

net start 服务名

css absolute relative 定位

转： css 针对IE6，IE7，firefox显示不同效果 星号 !important 下划线

js arguments 用法

学习jQuery必须知道的几种常用方法 转

jQuery选择器

浅析jQuery框架与构造对象 转

jQuery获取页面元素

javascript 基础 转

JSON

转： css 针对IE6，IE7，firefox显示不同效果星号 !important 下划线

学习jQuery必须知道的几种常用方法转

浅析jQuery框架与构造对象转

javascript 基础转