《Jquery基础教程》读书笔记

前言

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

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

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的倍数的li
• $('tr:odd')  表格中奇数行编号的tr（:nth-child(odd) 与(2n+1)结果同样）
• $('td:contains("Henry")')  包含Henry的td
• $('tr').parent() 取得父元素，.next()取得最接近下一个的同辈元素，.find()查找知足条件的元素，.end()回溯到上一次筛选结果的DOM元素。

2、事件--扣动扳机

$(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')

3、效果--为操做添加艺术性

内联CSS：

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

4、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)只复制匹配的元素，不会复制其全部的后代元素。

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

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

6、表格操做

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

7、构建功能型表单

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

8、滑移和翻转效果

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

9、插件

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