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文档遍历 ...
随机推荐
- 数学计数原理(Pólya):POJ 1286 Necklace of Beads
Necklace of Beads Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 7763 Accepted: 3247 ...
- C#程序注销、重启、关机和锁定电脑
一:截图 二:源代码 using System; using System.Collections.Generic; using System.Linq; using System.Text; usi ...
- Delphi TdxComponentPrinter页头页脚的设定
TdxComponentPrinter页头页脚的设定 抄一段备忘.用程序控制也一样.如果是这样,那么 双击TdxComponentPrinter控件,在出现的窗口中,点击ADD,建立一个与TcxGri ...
- 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 ...
- PowerDesigner自定义Word导出格式
本文主要讲解如何将PDM的表结构导出成word以及如何自定义导出格式和显示效果,希望对大家有所帮助...(以下步骤以PowerDesigner 15版本为例) 一.新建导出报表,进入报表设计界面: 1 ...
- bzoj 3876 [Ahoi2014]支线剧情(有上下界的最小费用流)
3876: [Ahoi2014]支线剧情 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 484 Solved: 296[Submit][Status ...
- 转:VS2010解决方案转换到VS2008
原文链接地址:http://www.codeproject.com/Tips/80953/Converting-VS2010-Solution-to-VS2008 如果你使用VS2010的任何版本写代 ...
- F - Prime Path
题目大意: 素数路径 估计看数据就明白这道题什么意思了......给两个素数,都是四位数的素数,并且没有前导0,现在需要经过一种变换把一个素数转换成另一个,当然这种转换是有规则的,规则就是每次只能改变 ...
- XP的定时关机命令?
Windows XP的关机是由Shutdown.exe程序来控制的,位于Windows/System32文件夹中.如 果想让Windows 2000也实现相同的效果,能够把Shutdown.exe拷贝 ...
- [Flux] Stores
Store, in Flux which manager the state of the application. You can use EventEmiiter to listen to the ...