WEB开发网
开发学院网页设计JavaScript 使用 jQuery 简化 Ajax 开发:看看 Ajax 和 DOM 脚... 阅读

使用 jQuery 简化 Ajax 开发:看看 Ajax 和 DOM 脚本编程究竟有多简单

 2010-03-09 00:00:00 来源:WEB开发网   
核心提示: 清单 7. 轻松地遍历和处理 DOM$('form#login')//hideallthelabelsinsidetheformwiththe'optional'class.find('label.optional').hide().end()//

清单 7. 轻松地遍历和处理 DOM

$('form#login') 
  // hide all the labels inside the form with the 'optional' class 
  .find('label.optional').hide().end() 
 
  // add a red border to any password fields in the form 
  .find('input:password').css('border', '1px solid red').end() 
 
  // add a submit handler to the form 
  .submit(function(){ 
    return confirm('Are you sure you want to submit?'); 
  }); 

不管您是否相信,这个示例只是一行满是空白的被链接的代码。首先,选择登录表单。然后,发现其中含有可选标签,隐藏它们,并调用 end() 返回表单。然后,我创建了密码字段,将其边界变为红色,再次调用 end() 返回表单。最后,我在表单中添加了一个提交事件处理程序。其中尤为有趣的就是(除了其简洁性以外),jQuery 完全优化了所有的查询操作,确保将所有内容很好地链接在一起后,不需要对一个元素执行两次查询。

处理常见事件就像调用函数(比方说 click()、submit() 或 mouseover())和为其传递事件处理函数一样简单。此外,还可以使用 bind('eventname', function(){}) 指定自定义的事件处理程序。可以使用 unbind('eventname') 删除某些事件或者使用 unbind() 删除所有的事件。

释放 jQuery 选择器的强大能量

我们经常会使用 ID 来选择元素,比如 #myid,或者通过类名,比如 div.myclass 来选择元素。然而,jQuery 提供了更为复杂和完整的选择器语法,允许我们在单个选择器中选择几乎所有的元素组合。

上一页  2 3 4 5 6 7 8 9  下一页

Tags:使用 jQuery 简化

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接