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. 数据结构(线段树)：BZOJ 1018: [SHOI2008]堵塞的交通traffic

    1018: [SHOI2008]堵塞的交通traffic Time Limit: 3 Sec  Memory Limit: 162 MBSubmit: 2638  Solved: 864 Descri ...

  2. Construct Binary Tree from Preorder and Inorder Traversal——LeetCode

    Given preorder and inorder traversal of a tree, construct the binary tree. 题目大意:给定一个二叉树的前序和中序序列,构建出这 ...

  3. HDOJ(HDU) 2504 又见GCD(利用最大公约数反推)

    Problem Description 有三个正整数a,b,c(0 import java.util.Scanner; public class Main{ public static void ma ...

  4. CodeForces 587A

    题目链接: http://codeforces.com/problemset/problem/587/A 题意: 输入n个数,在这n个数中,寻找有多少个数不能消除掉 消除方法:两个相同的数消除后,生成 ...

  5. lightoj 1004 dp:数字三角形

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1004 #include <cstdio> #include <cst ...

  6. 9个Java初始化和回收的面试题

    1.Java中是如何区分重载方法的? 通过重载方法的参数类型和顺序来进行区分的. 注意:若参数类型和顺序均相同时,不管参数名是否相同,编译器均会报错,提示方法已经被定义.且不能根据返回值类型来区分,如 ...

  7. IE JavaScript字符串转换成Date后出现NaN错误

    参考的博文:http://blog.csdn.net/zhu7478848/article/details/53388582 在IE浏览器下, JavaScript字符串转换成Date后会出现NaN错 ...

  8. 发起SSH攻击主机IP地址列表

    发起SSH攻击主机IP地址列表 东北大学 http://antivirus.neu.edu.cn/scan/ssh.php 以下IP地址对SSH服务进行攻击,严重增加主机成为肉鸡的可能性.强烈建议网管 ...

  9. 6th day

    时光荏苒,岁月如梭,2016年马上就要过去了,今天PHP的核心知识基本上已经讲完,后面就要开始学习数据库,做项目之类的,心情还真是有点小激动.总之,新年新气象,祝愿各位在新的一年里能够心想事成,好好学 ...

  10. MacBook Pro 下Bash Shell 利用Alias 简化命令

    编辑~/.bashrc或者~/.bash_profile alias go="xxxxx" 返回bash,执行 source ~/.bash_profile 即可. 我的常用别名 ...