jquery的选择器借鉴了css选择器，核心依然依靠JavaScript的getElementById()和getElementsByTagName()方法，但是他封装了2个方法，让jquery选择器变得简洁易用。

而且避免了易错问题。

jquery选择器返回的永远是一个数组对象，如果没有找到指定的元素，就会返回一个空的数组，

所以判断一个jquery对象是否存在时，不能用如下语句

if($("tr")){

　　//code

}

而应该用数组长度来判断，如下语句

if($("tr").length > 0){

  //code

}

而如果使用getElementById()和getElementsByTagName()方法时，就容易抛出异常，因为JavaScript没有内置类选择器方法，现在拓展一个类选择器方法，来说明抛出异常的原因

document.getElementsByClassName = function(className){

            var el = [];

            _el = document.getElementsByTagName('*');//获取所有元素

            for(var i = 0;i < _el.length; i++){//遍历元素集合

                if(_el[i].className == className){//获取相同类名的元素

                    el[el.length] = _el[i];

                }

            }

            return el;

        }

如果传入的类名没有被找到，那么el就是一个空值。返回的就是一个异常。

封装好了getElementsByClassName()方法之后，，就能把他当做内置的JavaScript选择器使用啦！（——假装是内置的！！）

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script type="text/javascript" src="jquery1.8.2.js"></script>

    <title>Document</title>

    <script type="text/javascript">

        document.getElementsByClassName = function(className){

            var el = [];

            _el = document.getElementsByTagName('*');//获取所有元素

            for(var i = 0;i < _el.length; i++){

                if(_el[i].className == className){

                    el[el.length] = _el[i];

                }

            }

            return el;

        }

        window.onload = function() {

            var red = document.getElementsByClassName("red");

            for(var i = 0;i< red.length;i++){

                red[i].style.color = "red";

            }

        }

    </script>

</head>

<body>

    <div class = 'red'>div1</div>

    <div>div2</div>

    <div class = 'red'>div3</div>

</body>

</html>

虽然这个自定义的方法和jquery选择器的效果是一样的，但从执行效率的角度考虑，使用自定义的getElementsByClassName()方法不如使用jquery选择器。因为作为jQuery技术框架，他的代码经过了优化处理，执行速度要比自定义方法的要快（执行效率是非常重要的）

小技巧！

从代码的执行效率和程序员的开发效率权衡，其实可以将JavaScript原生方法和jquery迭代操作相结合，也不会多写很多代码

<script type="text/javascript" src="jquery1.8.2.js"></script>

<script type="text/javascript">

    $(function() {

         var all = document.getElementsByTagName("*");//JavaScript原生写法，获取元素集合

         $(all).css("color","red");//jquery写法字体颜色

    })

</script>

参考自《jquery完全开发技术宝典》

jQuery 选择器和JavaScript 选择器的技巧与异常原因的更多相关文章

  1. jQuery的61种选择器

    The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签< ...

  2. 深入理解javascript选择器API系列第三篇——h5新增的3种selector方法

    × 目录 [1]方法 [2]非实时 [3]缺陷 前面的话 尽管DOM作为API已经非常完善了,但是为了实现更多的功能,DOM仍然进行了扩展,其中一个重要的扩展就是对选择器API的扩展.人们对jQuer ...

  3. jQuery入门（1）jQuery中万能的选择器

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  4. 从零开始学习jQuery (二) 万能的选择器

    本系列文章导航 从零开始学习jQuery (二) 万能的选择器 一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...

  5. JQuery学习笔记——层级选择器

    JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...

  6. Jquery第二篇【选择器、DOM相关API、事件API】

    前言 前面已经介绍过了Jquery这门语言,其实就是一个javaScript的库-能够简化我们书写的代码-.本博文主要讲解使用Jquery定位HTML控件[定位控件就是获取HTML的标签],使用Jqu ...

  7. （jQuery知识点整理-含有选择器）

                                       第一单元                                       jQuery介绍:   javaScript ...

  8. jQuery入门基础（选择器）

    一.jQuery简介 jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. jQuery 库位于一个 JavaScript 文件中,其中包含了所有 ...

  9. Python全栈开发之路 【第十五篇】：jQuery的介绍和选择器

    本节内容 什么是jQuery? write less,do more. jQuery是一个快速,小巧,功能丰富的JavaScript库. 它通过易于使用的API在大量浏览器中运行,使得HTML文档遍历 ...

随机推荐

  1. 洛谷2344 奶牛抗议（DP+BIT+离散化）

    洛谷2344 奶牛抗议 本题地址:http://www.luogu.org/problem/show?pid=2344 题目背景 Generic Cow Protests, 2011 Feb 题目描述 ...

  2. [Git] MAC上Git初探

    1.基本设置,包括用户名.邮箱.编辑工具.查看设置.帮助等 $ git config --global user.name "John Doe" $ git config --gl ...

  3. 深入理解java垃圾回收算法

    Java虚拟机的内存区域中,程序计数器.虚拟机栈和本地方法栈三个区域是线程私有的,随线程生而生,随线程灭而灭:栈中的栈帧随着方法的进入和退出而进行入栈和出栈操作,每个栈帧中分配多少内存基本上是在类结构 ...

  4. 设计模式21---设计模式之享元模式（Flyweight）（结构型）

    1.讲解享元模式(结构型) 1.1享元模式定义 运用共享技术有效地支持大量细粒度对象. 享元:把内部状态共享出来 1.2享元模式要点 重点在于分离变与不变. 把一个对象的状态分为内部状态和外部状态,内 ...

  5. Directx 3D编程实例：多个3D球的综合Directx实例

    最近朋友建议我写一些关于微软云技术的博客留给学校下一届的学生们看,怕下一届的MSTC断档.于是我也觉的有这个必要.写了几篇博客之后,我觉得也有必要把这一年的学习内容放在博客做个纪念,就这样写了本篇博客 ...

  6. CentOS 6.4的安装--史上最全-CRPER木木

    安装工具及软件: VmwareWorkstation9 CentOS-6.4-x86_64-LiveCD Vmware初始设置:           刚装好的VMWARE启动后,虽说默认已经设置好基础 ...

  7. Android应用打包安装过程具体解释

    Android应用打包安装过程(Run as Android Application ): 1,过程:Android Project --> Compilation and Packaging ...

  8. ActiveNotifications

    The NotificationManager can tell you how many notifications your application is currently showing. T ...

  9. Android（java）学习笔记224：横竖屏切换时Activity的生命周期

    1.横竖屏切换的生命周期     默认情况下横竖屏切换,先销毁再创建 2.有的时候,默认情况下的横竖屏切换(先销毁再创建),对应用户体验是不好的,比如是手机游戏横竖屏切换对游戏体验非常不好,下面两种方 ...

  10. PHPMailer中文说明

    PHPMailer中文说明 A开头: $AltBody --属性出自:PHPMailer ::$AltBody文件:class.phpmailer .php说明:该属性的设置是在邮件正文不支持HTML ...