CSS与jQuery补漏

1、position属性

　　这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

　　同时注意，该值没有继承性（注意区分所有继承和非继承属性）

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

2、想为一个span绑定一个超大按钮，实现只点击span有点击效果，则可以设置span的overflow为hidden，超过span的按钮被隐藏，实现效果。（多用于隐藏input type=file的上传按钮，以实现点击任意按钮调出上传框的功能）

3、如果给定表示 DOM 元素集合的 jQuery 对象，.children() 方法允许我们检索 DOM 树中的这些元素，并用匹配元素构造新的 jQuery 对象。.find() 和 .children() 方法类似，不过后者只沿着 DOM 树向下遍历单一层级。

请注意，与大多数 jQuery 方法一样，.children() 不返回文本节点；如果需要获得包含文本和注释节点在内的所有子节点，请使用 .contents()。

4、取子和取父的方法较少，且有区别，注意区别：

取父：

closest() 方法返回被选元素的第一个祖先元素。

祖先是父、祖父、曾祖父，依此类推。

DOM 树：该方法从当前元素向上遍历，直至文档根元素的所有路径（<html>），来查找 DOM 元素的第一个祖先元素。

该方法与 parents() 类似，都是向上遍历 DOM 树，不同点是：

closest()

从当前元素开始
沿 DOM 树向上遍历，并返回匹配所传递的表达式的第一个单一祖先
返回包含零个或一个元素的 jQuery 对象

parents()

从父元素开始
沿 DOM 树向上遍历，并返回匹配所传递的表达式的所有祖先
返回包含零个、一个或多个元素的 jQuery 对象

parent() - 返回被选元素的直接父元素
parentsUntil() - 返回两个给定参数之间的所有祖先元素

offsetParent() 方法返回第一个被定位的父元素。

元素可通过 jQuery 或 CSS 的 position 属性（relative、absolute 或 fixed）来定位。

取子

children() 方法返回被选元素的所有直接子元素。

DOM 树：该方法只沿着 DOM 树向下遍历单一层级。如需向下遍历多个层级（返回子孙节点或其他后代），请使用 find() 方法。

提示：如需沿着 DOM 树向上遍历单一层级，或向上遍历直至文档根元素的所有路径（返回父节点或其他祖先），请使用 parent() 或parents() 方法。

注意：该方法不会返回文本节点。如需返回包含文本节点的所有子节点，请使用 contents() 方法。

find()获取所有后代并筛选。

contents() 包含文本节点的所有子节点

剩下的遍历方法还有筛选本集合中元素和选取同级元素。

bind delegate on live等的区别

1、live与die

live() 方法

为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。

live() 方法在 jQuery 版本 1.7 中被废弃，在版本 1.9 中被移除。请使用 on() 方法代替。

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

参数

描述

event

必需。规定添加到元素的一个或多个事件。

由空格分隔多个事件值。必须是有效的事件。

data

可选。规定传递到该函数的额外数据。

function

必需。规定当事件发生时运行的函数。

提示：如需移除事件处理程序，请使用 die() 方法。

die()

die() 方法在 jQuery 版本 1.7 中被废弃，在版本 1.9 中被移除。请使用 off() 方法代替。

die() 方法移除通过 live() 方法向被选元素添加的一个或多个事件处理程序。

$(selector).die(event,function)

参数	描述
event	必需。规定要移除的一个或多个事件处理程序。由空格分隔多个事件值。必须是有效的事件。
function	可选。规定要移除的特定函数。

参数

描述

event

必需。规定要移除的一个或多个事件处理程序。

由空格分隔多个事件值。必须是有效的事件。

function

可选。规定要移除的特定函数。

2、delegate与undelegate

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

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

自 jQuery 版本 1.7 起，on() 方法是向被选元素添加事件处理程序的首选方法。

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

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

undelegate() 方法移除一个或多个由 delegate() 方法添加的事件处理程序。

自 jQuery 版本 1.7 起，on() 和 off() 方法是添加和移除元素上的事件处理程序的首选方法。

$(selector).undelegate(selector,event,function)

参数	描述
selector	可选。规定需要删除事件处理程序的选择器。
event	可选。规定需要删除处理函数的一个或多个事件类型。
function	可选。规定要删除的具体事件处理函数。

3、bind与unbind

bind() 方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。

自 jQuery 版本 1.7 起，on() 方法是向被选元素添加事件处理程序的首选方法。并不能为未来的元素绑定时间。

$(selector).bind(event,data,function,map)

参数	描述
event	必需。规定添加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
data	可选。规定传递到函数的额外数据。
function	必需。规定当事件发生时运行的函数。
map	规定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

unbind() 方法移除被选元素的事件处理程序。

该方法能够移除所有的或被选的事件处理程序，或者当事件发生时终止指定函数的运行。

该方法也可以通过 event 对象取消绑定的事件处理程序。该方法也用于对自身内部的事件取消绑定（比如当事件已被触发一定次数之后，删除事件处理程序）。

注意：如果未规定参数，则 unbind() 方法会删除指定元素的所有事件处理程序。

注意：unbind() 方法适用于任意由 jQuery 添加的事件处理程序。

自 jQuery 版本 1.7 起，on() 和 off() 方法是在元素上添加和移除事件处理程序的首选方法。

$(selector).unbind(event,function,eventObj)

参数	描述
event	可选。规定一个或多个要从元素上移除的事件。由空格分隔多个事件值。如果只规定了该参数，则会删除绑定到指定事件的所有函数。
function	可选。规定从元素上指定事件取消绑定的函数名称。
eventObj	可选。规定要使用的移除的 event 对象。这个 eventObj 参数来自事件绑定函数。（指定event参数）

4、on与off

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

提示：如需移除事件处理程序，请使用 off() 方法。

提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。

$(selector).on(event,childSelector,data,function,map)

参数	描述
event	必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。
childSelector	可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
data	可选。规定传递到函数的额外数据。
function	可选。规定当事件发生时运行的函数。
map	规定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

off() 方法通常用于移除通过 on() 方法添加的事件处理程序。

自 jQuery 版本 1.7 起，off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

注意：如需移除指定的事件处理程序，当事件处理程序被添加时，选择器字符串必须匹配 on() 方法传递的参数。

提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。

$(selector).off(event,selector,function(eventObj),map)

参数	描述
event	必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。
selector	可选。规定添加事件处理程序时最初传递给 on() 方法的选择器。
function(eventObj)	可选。规定当事件发生时运行的函数。
map	规定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

5、这几种的区别http://www.jb51.net/article/27309.htm

1）、bind

这是最简单的绑定方法了。JQuery扫描文档找出所有的$(‘a')元素，并把alert函数绑定到每个元素的click事件上。

2）、live

JQuery把事件函数绑定到$(document)元素上，并使用'click'和'a'作为参数。任何时候只要有事件冒泡到document节点上，它就查看该事件是否是一个click事件，以及该事件的目标元素与'a'这一CSS选择器是否匹配，如果都是的话，则执行函数。

live方法还可以被绑定到具体的元素(或“context”)而不是document上，像这样：

$('a',$('#container')[0]).live('click',function(){alert('That tickles!')})

PS：$(param1,param2)方法，第一个为普通的css选择器参数，第二个则为dom对象，返回第一个选择器选出来的元素，第二个则是作为参数使用的。

3）、delegate

与2）类似，在某个容器下为以后可能出现的元素绑定事件：

$('#container').delegate('a','click',function(){alert('That tickles!')})

JQuery扫描文档查找$('#container')，并使用click事件和'a'这一CSS选择器作为参数把alert函数绑定到$('#container')上。任何时候只要有事件冒泡到$('#container')上，它就查看该事件是否是click事件，以及该事件的目标元素是否与CSS选择器相匹配。如果两种检查的结果都为真的话，它就执行函数。
可以注意到，这一过程与.live()类似，但是其把处理程序绑定到具体的元素而非document这一根上。精明的JS'er们可能会做出这样的结论，即$('a').live() == $(document).delegate('a')，是这样吗?嗯，不，不完全是。
为什么.delegate()要比.live()好用
基于几个原因，人们通常更愿意选用jQuery的delegate方法而不是live方法。考虑下面的例子：

$('a').live('click', function() { blah() });或者$(document).delegate('a', 'click', function() { blah() });

后者实际上要快过前者，因为前者首先要扫描整个的文档查找所有的$(‘a')元素，把它们存成jQuery对象。尽管live函数仅需要把'a'作为串参数传递以用做之后的判断，但是$()函数并未“知道”被链接的方法将会是.live()（因为要先使用$(选择器)选出要使用live绑定事件的元素，所以扫描花费了时间，且扫描是无意义的，因为使用选择器比较即可，而不必一一为选出来的元素使用live绑定事件）。

而另一方面，delegate方法仅需要查找并存储$(document)元素。
一种寻求避开这一问题的方法是调用在$(document).ready()之外绑定的live，这样它就会立即执行。在这种方式下，其会在DOM获得填充之前运行，因此就不会查找元素或是创建jQuery对象了。

灵活性和链能力

live函数也挺令人费解的。想想看，它被链到$(‘a')对象集上，但其实际上是在$(document)对象上发生作用。由于这个原因，它能够试图以一种吓死人的方式来把方法链到自身上。实际上，我想说的是，以$.live(‘a',…)这一形式作为一种全局性的jQuery方法，live方法会更具意义一些。

仅支持CSS选择器

最后一点，live方法有一个非常大的缺点，那就是它仅能针对直接的CSS选择器做操作，这使得它变得非常的不灵活。

欲了解更多关于CSS选择器的缺点，请参阅Exploring jQuery .live() and .die()一文。

更新：感谢Hacker News上的pedalpete和后面评论中的Ellsass提醒我加入接下来的这一节内容。

为什么选择.live()或.delegate()而不是.bind()

毕竟，bind看起来似乎更加的明确和直接，难道不是吗?嗯，有两个原因让我们更愿意选择delegate或live而不是bind：

为了把处理程序附加到可能还未存在于DOM中的DOM元素之上。因为bind是直接把处理程序绑定到各个元素上，它不能把处理程序绑定到还未存在于页面中的元素之上。

如果你运行了$('a').bind(…)，而后新的链接经由AJAX加入到了页面中，则你的bind处理程序对于这些新加入的链接来说是无效的。而另一方面live和delegate则是被绑定到另一个祖先节点上，因此其对于任何目前或是将来存在于该祖先元素之内的元素都是有效的。

或者为了把处理程序附加到单个元素上或是一小组元素之上，监听后代元素上的事件而不是循环遍历并把同一个函数逐个附加到DOM中的100个元素上。把处理程序附加到一个(或是一小组)祖先元素上而不是直接把处理程序附加到页面中的所有元素上，这种做法带来了性能上的好处。

最后说明终止事件的方法

$('a').bind('click',function(e){
e.preventDefault()
e.stopPropagation()}
)

如果是用live或者delegate绑定终止事件，则会无效，因为当执行到他们时，早已执行了bind绑定的事件，因为他们是冒泡到上级dom再去做出一定的判断，再执行事件的。

6、触发事件的方法（可触发使用on定义的自定义事件）

trigger() 方法触发被选元素上指定的事件以及事件的默认行为（比如表单提交）。

该方法与 triggerHandler() 方法类似，不同的是 triggerHandler() 不触发事件的默认行为。

$(selector).trigger(event,eventObj,param1,param2,...)

参数	描述
event	必需。规定指定元素上要触发的事件。可以是自定义事件，或者任何标准事件。
param1,param2,...	可选。传递到事件处理程序的额外参数。额外的参数对自定义事件特别有用。

$(selector).triggerHandler(event,param1,param2,...)

参数	描述
event	必需。规定指定元素上要触发的事件。
param1,param2,...	可选。传递到事件处理程序的额外参数。额外参数对自定义事件特别有用。

7、event对象参数中的属性：

event.currentTarget	在事件冒泡阶段内的当前 DOM 元素
event.data	包含当前执行的处理程序被绑定时传递到事件方法的可选数据
event.delegateTarget	返回当前调用的 jQuery 事件处理程序所添加的元素
event.isDefaultPrevented()	返回指定的 event 对象上是否调用了 event.preventDefault()
event.isImmediatePropagationStopped()	返回指定的 event 对象上是否调用了 event.stopImmediatePropagation()
event.isPropagationStopped()	返回指定的 event 对象上是否调用了 event.stopPropagation()
event.namespace	返回当事件被触发时指定的命名空间
event.pageX	返回相对于文档左边缘的鼠标位置
event.pageY	返回相对于文档上边缘的鼠标位置
event.preventDefault()	阻止事件的默认行为
event.relatedTarget	返回当鼠标移动时哪个元素进入或退出
event.result	包含由被指定事件触发的事件处理程序返回的最后一个值
event.stopImmediatePropagation()	阻止其他事件处理程序被调用，阻止该元素的次优先级程序及所有冒泡事件
event.stopPropagation()	阻止事件向上冒泡到 DOM 树，阻止任何父处理程序被事件通知
event.target	返回哪个 DOM 元素触发事件
event.timeStamp	返回从 1970 年 1 月 1 日到事件被触发时的毫秒数
event.type	返回哪种事件类型被触发
event.which	返回指定事件上哪个键盘键或鼠标按钮被按下

8、jQuery $.proxy() 方法

$.proxy 方法接受一个已有的函数，并返回一个带特定上下文的新的函数。

该方法通常用于向上下文指向不同对象的元素添加事件。

提示：如果您绑定从 $.proxy 返回的函数，jQuery 仍然可以通过传递的原先的函数取消绑定正确的函数。

语法 1

$(selector).proxy(function,context)

语法 2

$(selector).proxy(context,name)

参数	描述
function	要被调用的已有的函数。
context	函数所在的对象的名称。
name	已有的函数，其上下文将被改变（应该是 context 对象的属性）。

第一种示例

<!DOCTYPE html>

<html>

<head>

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

test=function()

{

this.txt="This is an object property";

$("div").click($.proxy(this.myClick,this));

};

test.prototype.myClick = function(event)

{

alert(this.txt);

alert(event.currentTarget.nodeName);

};

var x = new test();

});

</script>

</head>

<body>

<div>This is a div element.</div>

</body>

</html>

第二种示例：

<!DOCTYPE html>

<html>

<head>

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  var objPerson = {

    name: "John Doe",

    age: 32,

    test: function(){

      $("p").after("Name: " + this.name + "<br> Age: " + this.age);

    }

  };

  $("button").click($.proxy(objPerson,"test"));

});

</script>

</head>

<body>

<button>Run test function</button>

<p></p>

</body>

</html>

toggleClass("class",boolean)

boolean规定是否添加，这样就可以使用布尔值来控制添加与否了

9、remove与detach的区别：

detach移除的元素，返回值的对象会保留原时间，而remove只保留内容，而不保留事件。