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. bzoj3275

    容易想到是最小割(最大权独立集)然后每个数拆成两个点,不能同时选的之间连边跑最小割,最后答案=总数-mincut/2 因为这样建图将流量变成了原来的两倍 当然这道题更好的建图方法是分成奇数和偶数两个集 ...

  2. 数据结构(块状链表)：COGS 1689. [HNOI2010]Bounce 弹飞绵羊

    时间限制:1 s   内存限制:259 MB [题目描述] 某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆,他邀请小绵羊一起玩个游戏.游戏一开始,Lostmonkey在地 ...

  3. 线段树(倒序操作)：POJ 2828 Buy Tickets

    Buy Tickets   Description Railway tickets were difficult to buy around the Lunar New Year in China, ...

  4. IIS6.0部署asp.net网站步骤图解

    IIS 发布步骤 1, 程序->运行->输入inetmgr,打开IIS管理器; 2, 展开左侧树形目录->右击“网站”->新建->网站,打开网站创建向导; 3, 点击“下 ...

  5. QDomDocument Access violation writing location

    今天犯了一个非常2的错误! 为了将面板参数保存起来,选择用QDomDocument构造Dom树,然后用doc.toString()方法返回符合xml格式的QString.如: QString CutF ...

  6. kafka主要配置

    Kafka为broker,producer和consumer提供了很多的配置参数. 了解并理解这些配置参数对于我们使用kafka是非常重要的. 官网配置地址: Configuration 每个kafk ...

  7. C++排序

    浅谈C++之冒泡排序.希尔排序.快速排序.插入排序.堆排序.基数排序性能对比分析(好戏在后面,有图有真相) 最近一段时间去武汉参加了N多笔试,在几次试题中都出现了排序.偏偏出现了我没怎么看的插入排序, ...

  8. Interesting Punch-Bowl（优先队列）

    /** http://acm.nyist.net/JudgeOnline/problem.php?pid=547 题意: 有一个正方形的区域 区域上面有高度不同的1*1的立方体自然有凸有凹 凹的地方可 ...

  9. 西安Uber优步司机奖励政策（1月18日~1月24日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  10. vue-cli 中 使用vue-resource 输出后台数据

    阅读此文前,请了解vue-cli 组件如何使用  http://www.cnblogs.com/pearl07/p/6252116.html 1,mock(模拟)后台数据(新建data.Json文件) ...