jQuery 选择器和JavaScript 选择器的技巧与异常原因
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 选择器的技巧与异常原因的更多相关文章
- jQuery的61种选择器
The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签< ...
- 深入理解javascript选择器API系列第三篇——h5新增的3种selector方法
× 目录 [1]方法 [2]非实时 [3]缺陷 前面的话 尽管DOM作为API已经非常完善了,但是为了实现更多的功能,DOM仍然进行了扩展,其中一个重要的扩展就是对选择器API的扩展.人们对jQuer ...
- jQuery入门（1）jQuery中万能的选择器
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- 从零开始学习jQuery (二) 万能的选择器
本系列文章导航 从零开始学习jQuery (二) 万能的选择器 一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...
- JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
- Jquery第二篇【选择器、DOM相关API、事件API】
前言 前面已经介绍过了Jquery这门语言,其实就是一个javaScript的库-能够简化我们书写的代码-.本博文主要讲解使用Jquery定位HTML控件[定位控件就是获取HTML的标签],使用Jqu ...
- （jQuery知识点整理-含有选择器）
第一单元 jQuery介绍: javaScript ...
- jQuery入门基础（选择器）
一.jQuery简介 jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. jQuery 库位于一个 JavaScript 文件中,其中包含了所有 ...
- Python全栈开发之路 【第十五篇】：jQuery的介绍和选择器
本节内容 什么是jQuery? write less,do more. jQuery是一个快速,小巧,功能丰富的JavaScript库. 它通过易于使用的API在大量浏览器中运行,使得HTML文档遍历 ...
随机推荐
- BZOJ 1053 [HAOI2007]反素数ant
1053: [HAOI2007]反素数ant Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 1948 Solved: 1094[Submit][St ...
- Linux Kernel 'dispatch_discard_io()'安全绕过漏洞
漏洞版本: Linux Kernel 漏洞描述: Bugtraq ID:60414 CVE ID:CVE-2013-2140 Linux是一款开源的操作系统. 由于不充分的检查BLKIF_OP_DIS ...
- ♫【HTML5 敏捷实践】第1章 使用语义化的方式实现
<!DOCTYPE html> 向后兼容的HTML5<doctype>标签.HTML5规范规定<doctype>对大小写不敏感:然而,之前版本的HTML需要< ...
- Linux Shell编程（9）——特殊变量类型
局部变量局部变量只在代码块或一个函数里有效 (参考函数里的局部变量)环境变量这种变量会影响Shell的行为和用户接口 在大多数情况下,每个进程都会有一个"环境表", 它由一组由进程 ...
- 【转】【已解决】Android中ActionBar中不显示overflow（就是三个点的那个按钮）--不错
原文网址:http://www.crifan.com/android_actionbar_three_dot_overflow_not_show/ [问题] 折腾: [记录]继续尝试给Android程 ...
- （转载）PHP strtotime函数详解
(转载)http://www.jb51.net/article/21495.htm strtotime函数是一个很好的函数,灵活的运用它,会给你的工作带来不少方便.但PHP的手册中却对此函数的参数没作 ...
- HDOJ(HDU) 2201 熊猫阿波的故事(概率问题)
Problem Description 凡看过功夫熊猫这部电影的人都会对影片中那只憨憨的熊猫阿波留下相当深的印象,胖胖的熊猫阿波自从打败了凶狠强悍的雪豹泰龙以后,在和平谷的地位是越来越高,成为谷中第一 ...
- ubuntu编译openwrt前端web界面
openwrt是由Cisco放出源代码的开放无线路由平台.由于是基于linux内核,所以可以将很多linux平台下的软件移植到此平台下,然后让无线路由拥有很多意想不到的功能,例如拿来做BT下载器,音乐 ...
- [转载]10 Best Tools For Websites And Apps Development Ever
转载自: http://www.websurfmedia.com/10-best-tools-for-websites-and-apps-development-ever/ The world i ...
- 区别assign VS weak，__block VS __weak
在objective-c中,类中的全局变量经常使用如下的方式申明. @property(nonatomic(1),strong(2))UIImageView *imageView; 其中的1,2处是对 ...