html/jquery最实用功能与注意点

获取某元素的父元素

通常用在根据被click的td获取tbody时。

parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合。
parents则是取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
可以看出parent取的很明确，就是当前元素的直接父元素（一般不应使用，否则会限制死结构，不够语义化）；parents则是当前元素的祖先元素。下面列出例子说明：
<div id='div1'>
　　<div id='div2'><p></p></div>
　　<div id='div3' class='a'><p></p></div>
　　<div id='div4'><p></p></div>
</div>

$('p').parent()取到的是div2,div3,div4
$('p').parent('.a')取到的是div3
$('p').parent().parent()取到的是div1，这点比较奇特；不过Jquery对象本身的特点决定了这是可行的。
$('p').parents()取到的是div1,div2,div3,div4
$('p').parents('.a')取到的是div3

获取某元素的子孙元素

通常用于获取tr或者tbody下的某个元素比如checkbox。

children(selector) 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈）。参数可选，添加参数表示通过选择器进行过滤，对元素进行筛选。

.find(selector)方法是返回匹配元素集合中每个元素的后代。参数是必选的，可以为选择器、jquery对象可元素来对元素进行筛选。

jquery attr和prop的差异

常用于设置readonly,checked,selected等这些属性时会遇到。

比如，对于jquery操作复选框的情况

$("#CheckedAll").click(function () {
                if ($(this).is(":checked")) {
                    $("[name=items]:checkbox").attr("checked", true);
                } else {
                    $("[name=items]:checkbox").attr("checked", false);
                }
            });
我测试下来是每次都不生效，但是确实执行了。
下面换成prop：

$("#CheckedAll").click(function () {
                if ($(this).is(":checked")) {
                    $("[name=items]:checkbox").prop("checked", true);
                } else {
                    $("[name=items]:checkbox").prop("checked", false);
                }
            });
就没有问题了。
具体两者的差别可详细参考http://blog.jquery.com/2011/05/12/jquery-1-6-1-released/，这里其实说的非常详细了，其实跟jquery没什么关系，主要是dom和js自身理解到位的问题。

display样式
对于布局来说，这应该算是最重要的属性之一了。

display:block

1. block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
2. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
3. block元素可以设置margin和padding属性。

display:inline

1. inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
2. inline元素设置width,height属性无效。
3. inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

display:inline-block

1. 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

一般我们会用display:block，display:inline或者display:inline-block来调整元素的布局级别，其实display的参数远远不止这三种，仅仅是比较常用而已。

元素本身居中

有些时候，我们希望元素本身居中显示，比如显示标题或者分页栏，这个特性貌似css本身没有支持，要利用html自身的align属性（这设计还是比较奇葩），如下所示：

position样式

大部分的定位和布局都可以使用margin/padding完成了，但有些时候使用margin/padding总是不够自然或者不合适。所以position样式虽然使用的绝对频率不怎么高，但很多时候仍然是必须的。

position的四个属性值：

1.relative
2.absolute
3.fixed
4.static
下面分别讲述这四个属性。

<div id="parent">
     <div id="sub1">sub1</id>
     <div id="sub2">sub2</id>
</div>

1. relative

relative属性相对比较简单，我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。在上面的代码中，sub1和sub2是同级关系，如果设定sub1一个relative属性，比如设置如下CSS代码：

#sub1
{
    position: relative;
    padding: 5px;
    top: 5px;
    left: 5px;
}

我们可以这样理解，如果不设置relative属性，sub1的位置按照正常的文档流，它应该处于某个位置。但当设置sub1为的position为relative后，将根据top，right，bottom，left的值按照它理应所在的位置进行偏移，relative的“相对的”意思也正体现于此。

对于此，您只需要记住，sub1如果不设置relative时它应该在哪里，一旦设置后就按照它理应在的位置进行偏移。

随后的问题是，sub2的位置又在哪里呢？答案是它原来在哪里，现在就在哪里，它的位置不会因为sub1增加了position的属性而发生改变。

如果此时把sub2的position也设置为relative，会发生什么现象？此时依然和sub1一样，按照它原来应有的位置进行偏移。

注意relative的偏移是基于对象的margin的左上侧的。

2. absolute

这个属性总是有人给出误导。说当position属性设为absolute后，总是按照浏览器窗口来进行定位的，这其实是错误的。实际上，这是fixed属性的特点。

当sub1的position设置为absolute后，其到底以谁为对象进行偏移呢？这里分为两种情况：

（1）当sub1的父对象(或曾祖父，只要是父级对象)parent也设置了position属性，且position的属性值为absolute或者relative时，也就是说，不是默认值的情况，此时sub1按照这个parent来进行定位。

注意，对象虽然确定好了，但有些细节需要您的注意，那就是我们到底以parent的哪个定位点来进行定位呢？如果parent设定了margin，border，padding等属性，那么这个定位点将忽略padding，将会从padding开始的地方(即只从padding的左上角开始)进行定位，也就是忽略padding，当然并不会忽略margin和border。

接下来的问题是，sub2的位置到哪里去了呢？由于当position设置为absolute后，会导致sub1溢出正常的文档流，就像它不属于 parent一样，它漂浮了起来，在DreamWeaver中把它称为“层”，其实意思是一样的。此时sub2将获得sub1的位置，它的文档流不再基于 sub1，而是直接从parent开始。

（2）如果sub1不存在一个有着position属性的父对象，那么那就会以body为定位对象，按照浏览器的窗口进行定位，这个比较容易理解。

3. fixed

fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位,即使拖动滚动条，他的位置也是不会改变的。与background-attachment:fixed相似
当然在Dreamweaver下似乎没有支持

4. static

position的默认值，一般不设置position属性时，会按照正常的文档流进行排列。

div+iframe布局

现在很多的布局都是用div+iframe的风格，如下：

content部分一般需要自适应，所以就需要每次onload的时候重新计算大小，如下：

<iframe src="#" id="content" scrolling="no" onload="changeFrameHeight()" frameborder="0"></iframe>

function changeFrameHeight(){
    var ifm= document.getElementById("content");
    ifm.height=document.documentElement.clientHeight;

}

window.onresize=function(){
   changeFrameHeight();

}

还需要注意的一点是，使用这种布局之后，通常我们会希望将一些全局信息比如字典、配置参数等放在nav所在的主页面，这样就不需要每一次加载具体页面到content时重复加载，这个时候就涉及到子页面访问父页面中的方法或者熟悉，默认情况下，这是两个独立的html页面，是不能直接互相访问的。如果需要访问，可使用如下方式：

子页面调用父页面方法：parent.window.parentMethod();

子页面调用父页面属性：parent.window.obj;

父页面调用子页面方法：FrameName.window.childMethod();

父页面调用子页面属性：FrameName.window.obj;

一般来说，不应该直接访问对方页面的DOM对象，而是通过方法进行访问。如果一定要访问，可获取到页面的window.document对象后，访问DOM元素。

使用ajax请求的返回值直接替换当前HTML页面

有些时候，由于现成系统或者其他约束，我们需要将ajax请求返回的html页面替换当前页面，此时可以用$(document).find("html").html(data);。需要注意的是，此时浏览器的地址栏不会发生变化。