《jQuery基础教程》读书笔记

[美]Jonathan Chaffer, Karl Swedberg著  jQuery基础教程亚马逊书店链接

前言：jQuery是功能强大却又简洁明快的轻量级JavaScript库，在DOM操作、事件处理、Ajax特性以及动画特效等方面表现出色。

一、选择符----取得你想要的一切

jQuery最强大的方面之一就是它能简化DOM遍历任务，$()函数实际上是jQuery对象的一个制造工厂，放在圆括号中的任何元素都将自动执行循环遍历（隐式迭代），并且会被保存到一个jQuery对象中（jQuery对象中会封装零个或多个DOM元素），jQuery利用CSS的优势，查找页面元素的机制构建于CSS选择符之上。

  • 标签名：$('p')会取得文档中所有的段落。
  • ID：$('#some-id')会取得文档中具有对应的some-id ID的一个元素。
  • 类：$('.some-class')会取得文档中带有some-class类的所有元素。
  • 以下列举一些CSS和XPath选择符，以及jQuery独有的自定义选择符：
    • $('#selected-plays > li')  查找ID为selected-plays的元素的子元素（不包括孙元素）中所有的列表项(li)。
    • $('#selected-plays li:not(.horizontal)')   查找ID为selected-plays的元素的后代元素中没有horizontal类的列表项(li)。
    • $('a[@title]')  选择所有带有title属性的链接
    • $('a[@href^="mailto:"]')  所有带有href属性且以mailto开头的锚元素(a)
    • $('a[@href$=".pdf"]')   所有带有href属性且以.pdf结尾的锚元素(a)
    • $('a[@href*="mysite.com"]')  所有带有href属性且属性值包含mysite.com的锚元素(a)
    • $('div[ol]')  包含ol元素的所有div元素
    • $('div.horizontal:eq(1)')  带有horizontal类的div集合中，选择第2项
    • $('li:nth-child(3n)')  第3、第6、第9、…、所有3的倍数的li
    • $('tr:odd')  表格中奇数行编号的tr（:nth-child(odd) 与(2n+1)结果一样）
    • $('td:contains("Henry")')  包含Henry的td
    • $('tr').parent() 取得父元素，.next()取得最接近下一个的同辈元素，.find()查找满足条件的元素，.end()回溯到上一次筛选结果的DOM元素。

二、事件----扣动扳机

$(document).ready(function() {
　　//这里是代码... ...（保证当前文档中DOM树加载完成后执行代码，以免无法定位DOM元素）
});

1.希望用户单击按钮时执行，引入.bind()方法

$(document).ready(function() {
    $('#some-id').bind('click', function() {
        $(this).addClass('selected'); //关键字this引用的就是#some-id
        alert("you have clicked some-id");
        $(this).removeClass('selected'); //去除class
　　});
});
  • 补充说明：
    • .removeClass()方法的参数是可选的，即当省略参数时，该方法会移除元素中所有的类。例如：$('body').removeClass()
    • .bind('click', function() {})的简写是.click()，.unbind()移除绑定。
    • 对于只需触发一次，随后要立即解除绑定的情况也有一种简写方法为.one()

2.显示和隐藏高级特性

  • .toggle()方法接受两个参数，而且这两个参数都是函数。第一次在元素上单击会调用第一个函数，第2次单击会触发第2个函数。
  • .hover()控制鼠标指针进入元素和离开元素时执行任意操作，IE浏览器对:hover伪类选择符支持不好，开发时要注意。
  • .trigger()方法可以完成模拟事件的操作，比如$('#some-id').trigger('click')

三、效果----为操作添加艺术性

  • 内联CSS
    • .css('property', 'value')  可以修改内联的CSS属性
    • var $speech = $('div.speech'); var currentSize = $speech.css('fontSize');  获取文字大小
    • .hide()和.show()方法控制隐藏与展示
    • .animate()该方法可以创建包含多重效果的自定义动画
      • .animate({param1: 'value1', param2: 'value2'},speed,function() {})

四、DOM操作----基于命令改变页面

  • 要在每个匹配的元素中插入新元素，使用：
    • .append()
    • .appendTo()
    • .prepend()
    • .prependTo()
  • 要在每个匹配的元素响铃的位置上插入新元素，使用：
    • .after()
    • .insertAfter()
    • .before()
    • .insertBefore()
  • 要在每个匹配的元素外部插入新元素，使用：
    • .wrap()   比如：$(this).wrap('<li></li>')，效果是<li>$this</li>
  • 要用新元素或文本替换每个匹配的元素，使用：
    • .html()   比如：.html('&hellip;')  p.s.这里是省略号
    • .text()
  • 要移除每个匹配的元素中的元素，使用：
    • .empty()
  • 要从文档中移除每个匹配的元素及后代元素，但不实际删除它们，使用：
    • .remove()
  • 复制元素：
    • .clone()，.clone(false)只复制匹配的元素，不会复制其所有的后代元素。

五、AJAX----让网站与时俱进

  • AJAX用XMLHttpRequest对象，通过这个对象可以在不中断其他浏览器任务的情况下向服务器发送请求。
  • 对于服务器的提供的文件格式，主要有JSON和XML两种选择，在性能和文件大小方面具有优势的JSON通常是不错的选择。而当远程应用程序未知时，XML则能够为良好的互操作性提供最可靠的保证。
  • GET或者POST，决定使用哪种办法的唯一理由就是遵照服务器端的代码的约定，或者是要传输大量的数据---GET方法对传输的数据量有更严格的限制。从视觉上来看，它们之间一个最大的区别就是GET请求把参数放在作为URL一部分的查询字符串中，而POST请求则不是。

六、表格操作

  • 主要介绍用js在客户端完成表格内的排序，分页，交替行显示，扩展和折叠表格

七、构建功能型表单

  • 主要介绍表单的验证，客户端验证不能取代服务端的验证，不能依赖用户启用了JavaScript
  • 电子邮件的正则表达式验证：!/.+@+\.[a-zA-Z]{2,4}$/.test(this.value)
  • $.unique()方法可以去掉数组中重复的字符串
  • javaScript的本地函数join把数组转换成字符串
  • 字段的占位符文本，（推荐仔细看）比如在搜索框中默认写"search the site"，相当于给用户提示。.focus()捕捉鼠标焦点，.blur()失去焦点时，执行响应操作。
  • 自动完成与实时搜索，（推荐仔细看）这边是基于一个常用词的搜索词典，用js实现实时搜索
  • 一个订单网页的编写，应用了渐进增强原则：首先确保页面在没有JavaScript的情况下可以正常运行，然后使用jQuery在可能的情况下更优雅地完成相同的任务。

八、滑移和翻转效果

  • 标题与图片的一些效果，有插件可以直接实现，等需要时候可以再看这部分内容。
  • jCarousel插件实现了循环滚动一组图像的机制
  • Thickbox插件提供了在页面上显示叠放信息的方式

九、插件

  • 有一个可用的插件列表，持续更新中http://plugins.jquery.com/
  • 编写方法时，方法应该返回jQuery对象以保持连缀能力，如果匹配的对象集合被修改，那么应该通过调用.pushStack()创建一个新的jQuery对象，而且应该返回这个新对象。比如：return this.pushStack(some-var)
  • aString.constructor == Number可以做类型检查

附录：JavaScript闭包

闭包带来的问题：即使在离开函数作用域的情况下，仍然能够通过引用调用内部函数的事实，意味着只要存在调用这些内部函数的可能，Javascript就需要保留被引用的函数。而且，Javascript运行时程序需要跟踪引用这个内部函数的所有变量，直至最后一个变量废弃，Javascript的垃圾收集器才能出面释放响应的内存空间。

萌萌的IT人,IT人的乐园

posted @ 2012-10-25 15:05  yanghuahui  阅读(2032)  评论(0)  编辑  收藏  举报