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. 如何在svn系统中使用git

    如果正在使用svn,打算换到git,又暂时不想放弃已有的svn代码库,可以选择git-svn.说一说我自己从svn到git的经验吧. 开始 安装最新版本的git,从git 1.5.3以后支持git-s ...

  2. 图论（网络流）：[CTSC2001]终极情报网

    [CTSC2001]终极情报网 [题目描述] 在最后的诺曼底登陆战开始之前,盟军与德军的情报部门围绕着最终的登陆地点展开了一场规模空前的情报战. 这场情报战中,盟军的战术是利用那些潜伏在敌军内部的双重 ...

  3. Sublime Text 3安装与使用 Package Control 插件安装

    原文地址:http://www.cnblogs.com/zhcncn/p/4113589.html 本文是Sublime Text 全程指引 by Lucida (http://www.cnblogs ...

  4. 《University Calculus》-chaper8-无穷序列和无穷级数-等比级数

    前言:其实无穷序列和无穷级数和数列{an}以及我们接触微积分就给出的极限概念lim有着紧密的联系,它对于我们在具体的问题当中进行建模和数据分析有着非常重要的作用. 无穷序列: 最简单的一种说法,就是一 ...

  5. 从SG函数浅谈解决博弈问题的通法

    基于笔者之前对于几种二元零和博弈游戏的介绍,这里将其思想进行简单的提炼,并引出解决这类二元零和博弈游戏的强大工具——SG函数. 其实对于博弈游戏如Bash.Nim等基本类型,异或一些比较高级的棋类游戏 ...

  6. HTTP协议之状态码详解

    转自:http://www.cnblogs.com/TankXiao/ 什么是HTTP状态码 HTTP状态码的作用是:Web服务器用来告诉客户端,发生了什么事. 状态码位于HTTP Response ...

  7. Java 获取今天之前的七天 的日期

    package test; import java.text.SimpleDateFormat;import java.util.Calendar;import java.util.Date; pub ...

  8. IOS中内存管理机制浅解

    我们知道在程序运行过程中要创建大量的对象,和其他高级语言类似,在ObjC中对象时存储在堆中的,系统并不会自动释放堆中的内存(注意基本类型是 由系统自己管理的,放在栈上).如果一个对象创建并使用后没有得 ...

  9. Android 省市县 三级联动（android-wheel的使用）[转]

    转载:http://blog.csdn.net/lmj623565791/article/details/23382805 今天没事跟群里面侃大山,有个哥们说道Android Wheel这个控件,以为 ...

  10. strus2与spring3 mvc的差别

    比较了一下strus2与spring3 mvc的差别: spring3 mvc是方法级别的拦截,拦截到方法后根据参数上的注解,把request数据注入进去,在spring3mvc中,一个方法对应一个r ...