jquery常用函数与方法汇总

本文将带领大家了解jQuery中常用的函数与方法，希望对有需要的朋友有所帮助。

一、delay()函数

delay()函数是jQuery 1.4新增的一个方法，用于设置延时来推迟执行队列中之后的项目。它既可以推迟动画队列的执行，也可以用于自定义队列。函数的参数包括延时时间（单位：毫秒）和队列名称（默认是Fx，即动画队列）。

例如，我们可以使用delay()函数来实现头部和底部延迟加载动画效果：

```javascript

$(document).ready(function() {

$('header').css({ /初始化样式/ }).delay(1000).animate(/动画效果/, 800);

$('footer').css({ /初始化样式/ }).delay(1000).animate(/动画效果/, 800);

});

```

二、live()函数

live()函数是jQuery 1.3中新增的方法，用于给所有当前以及将来会匹配的元素绑定一个事件处理函数，例如click事件。目前支持的事件类型包括click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、keydown、keypress和keyup。与bind()不同的是，live()一次只能绑定一个事件。

live()函数的特点在于，它采用委派的方式绑定事件，给所有当前以及将来在页面上的元素都绑定事件。这意味着，如果在页面动态增加了一个元素，并为这个新元素绑定了click事件，那么对于这个新元素来说，其click事件依然可用，无需重新绑定。

live()函数也有一些限制。它只支持部分事件类型，不支持blur、focus、mouseenter、mouseleave、change和submit等事件。它只能绑定事件处理函数，不支持“无事件”样式的回调函数。由于事件是委派而不是直接绑定在元素上的，因此也没有“setup”和“cleanup”的过程。

若要移除用live绑定的事件，可以使用die()方法。例如，移除class为myDiv的元素上的click事件：

```javascript

$(“.myDiv”).die("click");

```

使用live()函数有利也有弊。好处是元素更新时不用反复去定义事件；但坏处是把事件绑定在document上，可能会在性能上有所影响，而且它不支持某些事件类型。在使用live()函数时需要根据实际情况进行权衡和选择。

希望本文能帮助大家更好地理解和掌握jQuery中常用的函数与方法。深入理解jQuery中的位置坐标与属性操作

在网页开发中，获取和操作元素的准确位置及其属性，是开发交互性网页的关键。通过jQuery的offset()和position()方法，我们可以轻松获取元素的绝对和相对位置。我们还可以利用jQuery获取鼠标的位置，判断元素是否含有某个class或属性，以及如何移除某些属性。接下来，我将详细介绍这些功能的使用方法和注意事项。

一、获取元素的位置信息

要获取页面某一元素的绝对X、Y坐标，可以使用jQuery的offset()方法。例如，要获取ID为“DivID”的元素的坐标，可以这样写：

```javascript

var X = $('DivID').offset().left;

var Y = $('DivID').offset().top;

```

这里的`left`和`top`属性分别表示元素相对于文档（或视口）的左侧和顶部的距离。

对于获取相对（父元素）位置，可以使用position()方法：

```javascript

var relativeX = $('DivID').position().left;

var relativeY = $('DivID').position().top;

```

这将返回元素相对于其最近的带有定位属性的父元素的偏移量。如果没有定位的父元素，则相对于文档。

二、获取鼠标位置

使用jQuery可以轻松获取鼠标在页面上的位置。示例如下：

```javascript

$(function () {

$(document).mousemove(function (e) {

$("p").text("X坐标：" + e.pageX + "，Y坐标：" + e.pageY);

});

});

```

这里，`e.pageX`和`e.pageY`分别表示鼠标相对于文档（或视口）的X和Y坐标。

三、判断元素属性与移除属性

要判断元素是否含有某个class或属性，可以使用hasClass()和attr()方法。例如：

```javascript

if ($("aid").hasClass("new")) {

// 元素含有class="new"

}

if (typeof($("aid").attr("rel")) != "undefined") {

// 元素含有属性rel

}

```

若需移除元素的某个属性，可以使用removeAttr()方法。例如：

```javascript

$(".main").removeAttr("style"); // 移除元素的style属性

```

四、jQuery中的动画队列与s()方法

在jQuery中，如果不进行动画队列的清理，可能会出现动画积累的问题。s()方法用于停止动画队列中的动画。当参数sAll为true时，停止队列中的所有动画；当参数gotoEnd为true时，立即跳到当前动画的末尾。例如：

```javascript

$("element").stop(true, true); // 停止所有动画并立即跳到末尾

``` 清除动画队列中的重复动画是避免动画积累的有效方法。在实际项目中，如做下拉二级导航效果时，应使用此方法避免动画积累带来的问题。 理解并熟练运用jQuery的这些方法，可以大大提高网页开发的效率和交互性。在实际项目中灵活运用这些方法，将为您的网页开发带来无限可能。在这个例子中，我们看到了一些关于jQuery的代码。让我们深入并重新解释这段代码的内容。

想象一下，我们有一个导航菜单，其中的项目（li）拥有 `.has_list` 类。当用户的鼠标悬停在这些项目上时，我们希望展示更多的子菜单或内容。这正是这段jQuery代码实现的功能。

当用户将鼠标悬停在拥有 `.has_list` 类的导航列表项上时：

1. 该列表项内的链接（a标签）会获得一个名为 `curr` 的类，这可能是为了改变其样式或行为。

2. 所有带有 `.has_list` 类的导航列表项的子级div元素（可能是隐藏的）会被显示出来。这个过程通过 `slideDown` 方法在毫秒内平滑过渡完成。由于使用了 `end()` 方法，它会返回到上一个jQuery对象状态，也就是 `.nav li.has_list` 选择器选中的元素。

而当用户鼠标离开时：

1. 链接中的 `curr` 类会被移除，恢复其原始样式或行为。

2. 所有带有 `.has_list` 类的导航列表项的子级div元素会被隐藏回去。这个过程也是通过 `slideUp` 方法在毫秒内完成的。再次使用 `end()` 方法返回到上一个状态。

这段代码展示了如何使用jQuery的 `hover` 方法来创建动态的子菜单交互效果。通过简单的鼠标悬停动作，用户可以查看或隐藏子菜单。这种交互方式在现代网站和应用程序中非常常见，为用户提供了便捷的信息获取方式。

`cambrian.render('body')` 这行代码可能是某种框架或库中的特定方法调用，用于渲染或处理页面的主体部分。由于我们没有更多关于 `cambrian` 的上下文信息，所以只能猜测其功能和用途。但无论如何，它都强调了我们如何利用jQuery和其他工具来增强网页的交互性和用户体验。