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文档遍历 ...
随机推荐
- COJ 2124 Day8-例1
Day8-例1 难度级别:B: 运行时间限制:1000ms: 运行空间限制:256000KB: 代码长度限制:2000000B 试题描述 给定n.m的值,求
- -_-#【Node】Express 400 Error: ENOENT, open
Express 400 Error: ENOENT, open cd alleatisland, node app来启动
- 【转】轻量级文本编辑器，Notepad最佳替代品：Notepad++--不错
原文网址:http://www.crifan.com/files/doc/docbook/rec_soft_npp/release/htmls/npp_function_column_mode.htm ...
- 【转】Java 字符串常用操作（String类）
原文网址:http://www.cnblogs.com/freeabyss/archive/2013/05/15/3187057.html 字符串查找 String提供了两种查找字符串的方法,即ind ...
- 字符串[未AC]（后缀自动机）：HEOI 2016 str
超级恶心,先后用set维护right,再用主席树维护,全部超时,本地测是AC的.放心,BZOJ上还是1S限制,貌似只有常数优化到一定境界的人才能AC吧. 总之我是精神胜利了哦耶QAQ #include ...
- NOI题库192 生日蛋糕
192:生日蛋糕 总时间限制: 5000ms 内存限制: 65536kB 描述 7月17日是Mr.W的生日,ACM-THU为此要制作一个体积为Nπ的M层生日蛋糕,每层都是一个圆柱体. 设从下往上数第i ...
- SRM 506(2-1000pt)
DIV2 1000pt 题意:一个由n*m的网格组成的棋盘,有四种点,'.'表示空点,'#'表示是墙不能走,'$'表示起点(同样是空点),'1'~'9'表示该点有复活时间为t的怪兽.每次,可以从一个点 ...
- 【最长上升子序列】HDU 1087——Super Jumping! Jumping! Jumping!
来源:点击打开链接 最长上升子序列的考察,是一个简单的DP问题.我们每一次求出从第一个数到当前这个数的最长上升子序列,直至遍历到最后一个数字为止,然后再取dp数组里最大的那个即为整个序列的最长上升子序 ...
- Mac内建Apache开机启动
取消: sudo launchctl unload -w /System/Library/LaunchDaemons/org.apache.httpd.plist 添加: sudo launchctl ...
- Android 图片选择器
图片选择器,遍历系统所有图片并显示,点击查看大图,长按选中,并将结果返回 字体颜色res/color建立text_selecor.xml <selector xmlns:android=&quo ...