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. Cash Machine（多重背包）

    Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 24067   Accepted: 8414 Description A Ba ...

  2. （转载）PHP去掉转义后字符串中的反斜杠\函数stripslashes

    (转载)http://www.beijibear.com/index.php?aid=182 addslashes()函数主要是在字符串中添加反斜杠对特殊字符进行转义,stripslashes()则是 ...

  3. kafka在zookeeper中的存储结构

    参考site:http://kafka.apache.org/documentation.html#impl_zookeeper 1.zookeeper客户端相关命令 在确保zookeeper服务启动 ...

  4. [工具] Numpy

    虽说功能强大,要什么基本都有,但感觉它提供的功能还不如Matlab好记呢...Anyway,首先import numpy as np 1. 操作基本单元,矩阵 np.array(list) / np. ...

  5. MyEclipse里项目部署到tomcat上之后，tomcat webpps文件夹里为什么找不到这个项目

         今天在MyEclipse中部署了一个java web项目,然后发现报404错误,跑到tomcat目录下的webapps文件夹里并发现没有这个项目,才发现MyEclipse没有写入webapp ...

  6. JEFF BANKS_百度百科

    JEFF BANKS_百度百科 JEFF BANKS

  7. Java IO流以及装饰器模式在其上的运用

    流概述 Java中,流是一种有序的字节序列,可以有任意的长度.从应用流向目的地称为输出流,从目的地流向应用称为输入流. Java的流族谱 Java的 java.io 包中囊括了整个流的家族,输出流和输 ...

  8. linux —— 学习笔记（环境变量的设置）

    目录 环境变量概要 与环境变量相关的文件 设置环境变量 注意以及相关 1.环境变量概要 环境变量,简单来说,是储存了环境信息的变量.它可以让你在不指明全部路径的情况下执行某脚本或某应用程序,比如在 l ...

  9. 使用easy_install安装numpy、pandas、matplotlib及各种第三方模块

    倒腾了一晚上最终把题目中的环境配好了.以下简要说明.留作资料.并共享. 1.安装python. 在cmd中能进入python环境,通过把python路径加入到系统路径中就可以实现. 2.安装easy- ...

  10. Java基础知识强化之集合框架笔记07：Collection集合的遍历之迭代器遍历

    1. Collection的迭代器: Iterator iterator():迭代器,集合的专用遍历方式 2. 代码示例: package cn.itcast_03; import java.util ...