jQuery learn - 1 - 选择元素 && CSS

CDN=Content Delivery Networks
DOM=Document Object Model
W3C=World Wide Web Consortium
CSS home page
老是面向集合> 当指示jQuery“找到带collapsible类的所有元素,而后隐藏它们”时,不需循环遍历每一个返回的元素。.hide()被设计成自动操做对象集合,而非单独的对象。利用这种称做隐式迭代(implicit iteration)的技术,就可抛弃那些臃肿的循环结构,从而大幅地减小代码量
将多重操做集于一行> 为避免过分使用临时变量/没必要要的代码重复,jQuery在其多数方法中采用连缀(chaining)的编程模式。这种模式意味着基于一个对象进行的多数操做的结果,都会返回该对象自身,以便为该对象应用下一次操做
jQuery官方网站始终包含该库最新的稳定版本

随着jQuery的日益流行,不少公司都经过本身的CDN 托 管 其 库 文 件 , 让 开 发 人 员 能 更 方 便 地 使 用。 最 典 型 的 就 是 谷 歌和微软和jQuery项目本身,jQuery库文件被放在了强劲、低延时的服务器上,这些服务器遍及全球,不管用户在哪儿,都能以快速下载到jQuery。虽然托管在CDN上的文件因为分布式和缓存缘由有速度优点,但在实际开发中仍是使用本地副本更方便
jQuery从2.0开始再也不支持IE六、IE7和IE8
若是项目中有针对jQuery 1.9以前的版本编写的代码,可以使用jQuery迁移插件实现兼容
引用jQuery库文件的<script>标签,必须放在引用自定义脚本文件的<script>前。不然,引用不到jQuery框架
浏览器中通常内置开发工具。例如:Internet Explorer Developer Tools,Safari Web Inspector,Chrome Developer Tools,Firefox插件Firebug,Opera Dragonfly
jQuery最强大的特性之一就是它能简化在DOM中选择元素的任务。DOM充当了JavaScript与网页间的接口;它以对象网络而非纯文本形式来表现HTML源代码
jQuery支持CSS规范1到3中几乎全部选择符,具体内容参考W3C
负 责 任 的 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开始,能够参考jQuery API文档(: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以前的可见属性