您的位置:首页> 日志> 前端技术 正文

  你已经玩jQuery一段时间了,你开始掌握使用它的窍门了,并且,你真的很喜欢它。那么你是否准备着把你的jQuery知识提高一个档次?现在,我将会展示二十个你可能从没见过的函数和特性。
  • 分类:jQuery
  • 难度:适中

  原文地址:20 Helpful jQuery Methods you Should be Using

1, after()/before()

  有时候,你想往DOM中插入一些东西,但你却找不到好的方法去实现。append()或者prepend()不会有什么作用,并且你不想增加额外的容器和ID。那么,这两个函数可能正是你需要的。它们使你可以把新元素插入到DOM的另一个元素的前面或者后面;也就是说,新元素和旧元素是相邻的。

  如果你想把一个正在在处理的元素插入,也可以使用这两个函数:

2, change()

  change()方法是一个事件处理器,就好像click()或者hover()那样。这个change事件是专为文本框(textarea)、文本输入(input)和选择组合框(select)而设的;当目标元素的值改变时即会触发。要注意的是,这个方法和focusOut()、blur()方法不同。当元素失去焦点时,focusOut()和blur()方法都会触发,无论元素的值是否已被改变。

  change()方法在客户端的验证处理中相当好用,远比blur()好用。因为如果用户并没有改变表单的值的话,你是不想再次验证它的。

3, Context

  在jQuery中,Context既是一个参数,又是一个属性。当查找元素时,你可以传递第二个参数到jQuery函数中,以约束所返回的匹配你的选择器的元素为context元素的子元素。这或许会有点混乱。那么看看这些例子吧:

  译者注:以下是在调试工具中的输出。

  那么这个属性有什么妙用呢?比如在事件处理函数中就很有用。如果你在事件处理函数中引用一个子元素,那么你可以像这样来作为context来传值:

4, data() / removeData()

  你有没有曾经打算把一些数据存储在一个元素中呢?用data()方法你可以轻易地实现这一想法。你可以传递两个参数(参数名和参数值)或者一个参数(译者:json对象)。

  要取回你的数值,只需使用这个方法来调用对应的参数名。

要取得一个元素相关的所有数据,可以调用不带参数的data();你将会得到一个json对象。

  如果你添加数据到一个元素后,又打算删除这组数据,只需调用removeData()方法,传递正确的参数名称给它。