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. 数学计数原理(Pólya):POJ 1286 Necklace of Beads

    Necklace of Beads Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 7763   Accepted: 3247 ...

  2. C#程序注销、重启、关机和锁定电脑

    一:截图 二:源代码 using System; using System.Collections.Generic; using System.Linq; using System.Text; usi ...

  3. Delphi TdxComponentPrinter页头页脚的设定

    TdxComponentPrinter页头页脚的设定 抄一段备忘.用程序控制也一样.如果是这样,那么 双击TdxComponentPrinter控件,在出现的窗口中,点击ADD,建立一个与TcxGri ...

  4. HDOJ(HDU) 2138 How many prime numbers(素数-快速筛选没用上、)

    Problem Description Give you a lot of positive integers, just to find out how many prime numbers the ...

  5. PowerDesigner自定义Word导出格式

    本文主要讲解如何将PDM的表结构导出成word以及如何自定义导出格式和显示效果,希望对大家有所帮助...(以下步骤以PowerDesigner 15版本为例) 一.新建导出报表,进入报表设计界面: 1 ...

  6. bzoj 3876 [Ahoi2014]支线剧情(有上下界的最小费用流)

    3876: [Ahoi2014]支线剧情 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 484  Solved: 296[Submit][Status ...

  7. 转:VS2010解决方案转换到VS2008

    原文链接地址:http://www.codeproject.com/Tips/80953/Converting-VS2010-Solution-to-VS2008 如果你使用VS2010的任何版本写代 ...

  8. F - Prime Path

    题目大意: 素数路径 估计看数据就明白这道题什么意思了......给两个素数,都是四位数的素数,并且没有前导0,现在需要经过一种变换把一个素数转换成另一个,当然这种转换是有规则的,规则就是每次只能改变 ...

  9. XP的定时关机命令?

    Windows XP的关机是由Shutdown.exe程序来控制的,位于Windows/System32文件夹中.如 果想让Windows 2000也实现相同的效果,能够把Shutdown.exe拷贝 ...

  10. [Flux] Stores

    Store, in Flux which manager the state of the application. You can use EventEmiiter to listen to the ...