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

最新推荐文章于 2024-08-18 10:54:05 发布

weixin_34040079

最新推荐文章于 2024-08-18 10:54:05 发布

阅读量92

点赞数

文章标签： javascript python 开发工具 ViewUI

原文链接：https://my.oschina.net/u/1866954/blog/332777

版权

2019独角兽企业重金招聘Python工程师标准>>>

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开始不再支持IE6、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之前的可见属性