jqueryajax:使用jQuery简化Ajax开发—Ajax开发入门[2]来源: 发布时间:星期日, 2008年12月21日 浏览:162次 评论:0
="t18">4. 让你
 html动起来你可以使用jQuery做  些基本动画和效果 动画效果核心就是 animate , 它可以随时改变指定css样式. 举例来说, 你可以改变高度, 宽度, 透明度或者位置. 你还可以指定动画速度, 改变速度时候你可以使用毫秒(milliseconds),或者你也可以使用预定速度值: 慢速, 正常或者快速(slow, normal, or fast).下面是个同时改变元素宽和高 动画举例. 注意, 没有 值,只有最终值. 值可以直接从现有元素取到. 同时, 我还添加了个回调:$('#grow').animate({ height: 500, width: 500 }, "slow", function {alert('The element is done growing!');});使用jQuery 这些内建, 使动画效果做起来也相当容易了. 你可以使用show 以及hide 来显示和隐藏元素, 可以设定立即执行或者指定速度. 你还可以使用fadeIn和fadeOut或者slideDown和slideUp来显示或者隐藏个元素, 这要看你想要哪种效果了. 下面是个简单例子, 展示导航条幻灯片效果(slide down):$('#nav').slideDown('slow');5. DOM脚本以及事件处理jQuery最擅长 可能就是操作DOM以及进行事件处理了. 遍历以及操作DOM其实很容易, 绑定移除以及 事件用起来也很自然顺手,并且和手动写这些代码相比,可以大大减少 .事实上, jQuery简化了DOM各种操作. 你可以创建个元素并且使用append把它链接到其他元素上, 可以使用clone复制元素, 可以使用html设置内容,可以使用empty删除内容,使用remove删除元素以及内容, 甚至,可以使用wrap来使用另个元素包装此元素.有些,可以靠遍历DOM来改变jQuery对象本身内容. 又可以得到个元素siblings,parents, 或者children.你还可以使用next和prev来寻找兄弟元素. find也许是这些中最强大个了. 它允许你使用个jQuery选择符来在你jQuery对象以及其子孙节点中进行搜索.如果配合end,这些将变得更加强大. end就像执行撤销样, 会让你jQuery对象回退到你find或者parents或者其他任个遍历的前状态.如果使用上面我们讲到思路方法链接,那就可以让很复杂功能以介绍代码来实现. Listing7展示了个例子,你将找到个登录表单,并对其上元素进行 些操作.Listing 7. Traversing and manipulating the DOM with ease$('form#login')// hide all the labels inside the form with the 'optional'  .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{ confirm('Are you sure you want to submit?');});信不信由你,这个例子其实只有单个链接起来行代码,中间加了些空格而已. 首先,我选中了登录表单. 然后,我找到里边可选label,隐藏他们,然后end回到表单. 我找到密码输入框, 把边框变成红色,然后再次end返回到表单. 最后,我给这个表单增加了个提交时间处理. 特别有趣是,除了代码格外简洁以外, jQuery还自己优化了所有操作,以保证当切都很好链接起来时候,你不需要两次寻找个元素.处理般事件也很简单,就像click,submit,或者mouseover,然后传给个事件监听样. 另外,你还可以使用bind('eventname', function{})来指定事件处理, 你可以使用unbind('eventname')解除绑定某事件,或者使用unbind解除所有事件. 更多有关这系列信息以及使用思路方法,请查阅jQuery应用 接口文档(API).6. 揭秘jQuery选择符威力通常, 你使用ID选择元素, 比如#myid; 或者使用类名来选择,比如div.my . 然而,jQuery有套相当复杂而且完备选择符语法,可以让你使用单选择符就可以找到任意组合元素.jQuery 选择符语法很大程度上基于CSS3以及XPath. 你对CSS3以及XPath 了解越多, 你越能更好使用jQuery. 有关jQuery 选择符详细心意, 包括CSS3和XPath, 可以参考文后资源链接.CSS3 包含 些并不是所有浏览器都支持语法, 所以你有可能不如何会经常见到它. 但是, 你仍然在jQuery里可以使用它来选择元素,  , jQuery有他自己定制选择符解析引擎. 举例来说, 要给表格中每空列增加个短横线, 则可以使用:empty 伪操作符:$('td:empty').html('-');如何找到每个不包含特定类名 元素呢? CSS3有个针对这种情况特定语法,使用:not伪操作符. 下面代码将隐藏所有不含有required类名文本输入框元素.$('input:not(.required)').hide;你还可以使用逗号把多个选择符连到起,就像在css里处理样. 下面代码将同时隐藏页面上各种区别类型列表元素.$('ul, ol, dl').hide;XPath是在个文档中找元素强大工具. 他和CSS有些区别,可以让你找到使用CSS无法找到许多东西. 比如,想要给所有复选框父元素增加个边框,可以这样做:$("input:checkbox/..").css('border', '1px solid #777');jQuery 也有些css和XPath里都没有额外选择符, 比如,为了增加个表格可读性, 你可能需要设定奇数行和偶数行使用区别类名, 这就是斑马条. 使用jQuery做这个就是小菜碟,这多亏了:odd为选择符. 下面代码演示使用striped类改变表格中奇数行背景色:$('table.striped > tr:odd').css('background', '#999999');看到了吧,jQuery强大选择符能够简化你代码. 无论你想要影响什么元素,也无论它多么清晰或者模糊,你总可以找到个思路方法使用个简单jQuery选择符定位到它.7. 使用插件扩展jQuey不像其他软件Software那样, 给jQuery写插件绝不是对着堆复杂API个痛苦煎熬. 事实上,给jQuery写插件是如此简单,以至于你等下都有可能想写个插件来使你代码更加简练.下面就是你要写插件最基本部分:$.fn.donothing = function{ this;};尽管十分简单, 但是还需要稍微解释下. 首先,要为每个jQuery对象增加个,你必须把它指定到$.fn上, 其次, 这个必须返回this(jQuery对象)来保证不会破坏上面提到思路方法链接规则.你可以很容易在上面代码基础上扩展. 要写个改变背景色插件来代替使用css('background'),你可以这样:$.fn.background = function(bg){ this.css('background', bg);};注意我可以直接返回css结果,它本身已经是个jQuey对象了,因此,思路方法链接可以很好工作.我建议当你发现你在不断重复代码时候使用jQuery插件. 比如, 当你使用each来遍又遍处理某个相同事情时候,你可以考虑使用插件[译注:不是很明白.].由于jQuery插件十分容易开发,因此已经有成千上万个插件可以供你使用. jQuery 有针对表格,圆角,幻灯效果,提示,日期选择以及任何你能想到应用方面插件.你可以在文后资源列表中找到完整插件列表.最复杂并且使用最广泛插件是Interface, 个处理排序,拖动效果,各种复杂特效以及其他有趣复杂用户界面效果动画插件. Interface对jQuery就像Scriptaculous对Prototype来说样.同样流行并且有用插件是Form插件,允许你简单使用ajax在后台提交个表单. 这个插件用在这种情况下:当你需要劫持表单提交事件,然后找到所有区别文本输出字段,并使用他们来构建ajax.8. jQuery的后我只是讲述了有关jQuery些皮毛罢了. jQuery用起来很有意思, 你学这些新特性新思路方法看起来都十分自然十分顺理成章. 你旦使用jQuery,就会体会到它可以简化你Javascript以及Ajax开发, 你每学点东西, 就会使代码变得更简单点.学习jQuery的后, 我在Javascript编程里找到了许多乐趣, 所有无聊 东西都被很好处理, 所以我只需要关注最核心部分. 使用jQuery的后, 我几乎记不得我上次使用for 循环是什么时候. 我甚至害怕使用其他Javascript库. jQuery彻底改变了我对Javascript编程看法.0
相关文章
读者评论发表评论 |
 |
专注于互联网--专注于架构 |
最新标签 网站地图 文章索引 Rss订阅 |
