CDN=Content Delivery Networks DOM=Document Object ModelW3C=World Wide Web Consortium总是面向集合> 当指示jQuery“找到带collapsible类的全部元素,然后隐藏它们”时,不需循环遍历每个返回的元素。.hide()被设计成自动操作对象集合,而非单独的对象。利用这种称作隐式迭代(implicit iteration)的技术,就可抛弃那些臃肿的循环结构,从而大幅地减少代码量将多重操作集于一行> 为避免过度使用临时变量/不必要的代码重复,jQuery在其多数方法中采用连缀(chaining)的编程模式。这种模式意味着基于一个对象进行的多数操作的结果,都会返回该对象自身,以便为该对象应用下一次操作始终包含该库最新的稳定版本
随着jQuery的日益流行,很多公司都通过自己的CDN 托 管 其 库 文 件 , 让 开 发 人 员 能 更 方 便 地 使 用。 最 典 型 的 就 是 和和,jQuery库文件被放在了强劲、低延时的服务器上,这些服务器遍布全球,无论用户在哪儿,都能以快速下载到jQuery。虽然托管在CDN上的文件由于分布式和缓存原因有速度优势,但在实际开发中还是使用本地副本更方便jQuery从2.0开始不再支持IE6、IE7和IE8如果项目中有针对jQuery 1.9之前的版本编写的代码,可使用实现兼容引用jQuery库文件的<script>标签,必须放在引用自定义脚本文件的<script>前。否则,引用不到jQuery框架浏览器中一般内置开发工具。例如:,,,,jQuery最强大的特性之一就是它能简化在DOM中选择元素的任务。DOM充当了JavaScript与网页间的接口;它以对象网络而非纯文本形式来表现HTML源代码jQuery支持CSS规范1到3中几乎所有选择符,具体内容参考负 责 任 的 jQuery开 发 者 应 在 编 写 自 己 程 序 时 , 始 终 坚 持 渐 进 增 强(progressive enhancement)和平稳退化(graceful degradation)理念,做到在JavaScript禁用时,页面仍能与启用JavaScript时一样准确地呈现,即使没有那么美观。属性选择符使用一种从正则表达式中借鉴来的通配符语法自定义选择符的语法与CSS伪类选择符语法相同,即以:开头。例如,从带有horizontal类的<div>集合中选择第2项:$('div.horizontal:eq(1)')。注意,JavaScript数组采用从0开始的编号方式,所以eq(1)取得第2个元素。而CSS从1开始,因此CSS选择符$('div:nth-child(1)')取得的是作为其父元素第1个子元素的所有 div元素。如果记不清哪个从0开始,哪个从1开始,可以参考(:nth-child()是jQuery中唯一从1开始计数的选择符)表单选择符: :input 输入字段、文本区、选择列表和按钮元素 :button 按钮元素或type属性值为button的输入元素 :enabled 启用的表单元素 :disabled 禁用的表单元素 :checked 勾选的单选按钮或复选框 :selected 选择的选项元素$('tr:even').addClass('alt');,可通过.filter()重写成$('tr').filter(':even').addClass('alt');.filter()十分强大,因为它可以接受函数参数。通过传入的函数,可执行复杂的测试,以决定相应元素是否应该保留在匹配的集合中。例如,假设我们要为所有外部链接添加一个类。 a.external { background: #fff url(images/external.png) no-repeat 100% 2px; padding-right: 16px; } jQuery中没有针对这种需求的选择符。如果没有筛选函数,就必须显式地遍历每个元素,对它们单独进行测试。但有了下面 的筛选函数,就仍可利用jQuery的隐式迭代能力,保持代码的简洁: $('a').filter(function() { return this.hostname && this.hostname != location.hostname; }).addClass('external'); 第2行代码可以筛选出符合下面两个条件的<a>元素: 必须包含1个带域名(this.hostname)的href属性。这个测试可以排除mailto及类似链接。 链接指向的域名(还是 this.hostname )必须 != 页面当前所在域的名称(location.hostname) 更准确地说,.filter()会迭代所有匹配的元素,对每个元素都调用传入的函数并测试函数的返回值。如果函数返回false,则从匹配集合中删除相应元素;true,保留。
突出显示Henry所在单元格后面的全部单元格: $(document).ready(function() { $('td:contains(Henry)').nextAll().addClass('highlight'); }); .next() 和 .nextAll() 分别有一对应方法,即 .prev()和.prevAll()。此外,.siblings()能选择处于相同DOM层的所有其他元素,无论这些元素处于当前元素之前还是之后.要在这些单元格中再包含原单元格可添加.addBack(): $(document).ready(function() { $('td:contains(Henry)').nextAll().addBack().addClass('highlight'); }); 要选择同一组元素,可采用的选择符和遍历方法的组合很多。例如: $(document).ready(function() { $('td:contains(Henry)').parent().children().addClass('highlight'); }); $('td:contains(Henry)') // Find every cell containing "Henry" .parent() // Select its parent .find('td:eq(1)') // Find the 2nd descendant cell .addClass('highlight') // Add the "highlight" class .end() // Return to the parent of the cell containing "Henry" .find('td:eq(2)') // Find the 3rd descendant cell .addClass('highlight'); // Add the "highlight" class想知道带有id="my-element"属性的元素的标签名: var myTag = $('#my-element').get(0).tagName; 为进一步简化,jQuery为 .get() 提供了一种简写方式。比如,可将$('#my-element').get(0)简写为: var myTag = $('#my-element')[0].tagName;对象字面量:一般,数字值不需加引号而字符串值需加引号。由于属性名是字符串,所以属性通常需加引号。但如果对象字面量中的属性名是有效的JavaScript标识符,比如使用驼峰大小写形式的DOM表示法时,则可省略引号。parseFloat()会在一个字符串中从左到右地查找一个浮点(十进制)数。例如,它会将字符串'12'转换成数字12。另外,它还会去掉末尾的非数字字符,因此'12px'就变成了12。如果字符串本身以一个非数字开头,返回NaN带厂商前缀的样式属性:浏览器厂商在引入试验性的样式属性时,通常会在实现达到CSS规范要求前,在属性名前添加一个前缀。等到实现和规范都稳定后,这些属性的前缀就会被去掉。但在jQuery中可直接使用标准的属性名,比如:.css('propertyName', 'value')。如果样式对象中不存在这个属性,jQuery就会依次检测所有带前缀(Webkit、O、Moz、ms),然后使用第1个找到的那个属性。.hide()会将匹配的元素集合的内联style属性设为display:none。并记住原先的display值,通常是block、inline或inline-block。恰好相反,.show()将匹配的元素集合的display属性恢复为应用display: none之前的可见属性