jQuery基本选择器模块
选择器模块
1、获取元素的基本操作
- 案例:给页面中的div和p设置边框样式
1.1 传统方式 -获取元素并设置样式
实现思路
- 1 通过 标签名 获取元素
- 2 遍历循环 设置样式
var dvs = document.getElementsByTagName("div"),
ps = document.getElementsByTagName("p"),
i = 0, j = 0,
dvLen = dvs.length,
pLen = ps.length; for(; i < dvLen; i++) {
dvs[i].style.border = "1px solid red";
}
for(; j < pLen; j++) {
ps[j].style.border = "1px solid red";
}
- 小结:传统方式存在的不足
1 代码冗余
2 没有实现复用
3 错误率高
4 效率低
5 性能不好
1.2 使用函数 -获取元素并设置样式
- 优势:函数的复用
- 注意:函数命名,达到 “顾名思义” 的效果
var getElmsByTag = function(tagName) {
return document.getElementsByTagName(tagName);
}; var dvs = getElmsByTag("div");
var ps = getElmsByTag("p"); // for 循环遍历两次来设置样式
1.3 封装 each 函数
- 目标:只要是能用循环完成的操作 each 函数都能完成
1.3.1 使用 each 函数简化设置样式
// 1 将 for 循环封装成 each 函数
var each = function(arr) {
for(var i = 0; i < arr.length; i++) {
arr[i].style.border = "1px solid red";
}
}; // 2 修改 each 函数的功能 实现修改任何样式
var each = function(arr, style, value) {
for(var i = 0; i < arr.length; i++) {
arr[i].style[ style ] = value;
}
};
- 不足:只能修改样式
var arr = [1, 3, 5, 7, 10, 9, 8];
例如:求和、求最大值、查找某值的索引号 等等
写出以上练习,并找出其中相同点(抽象的能力)
1.3.2 重新封装each函数 -1(添加回调函数)
- 目标:在回调函数中能访问到数组中每一项和索引号(使用参数)
var each = function(arr, fn) {
var i = 0,
len = arr.length;
for(;i < len; i++) {
fn(i, arr[i]);
}
};
1.3.3 重新封装each函数 -2(添加跳出循环)
- 目标:让循环的终止可控
var each = function(arr, fn) {
var i = 0,
len = arr.length;
for(; i < len; i++) {
if(fn(i, arr[i]) === false) {
break;
}
}
};
1.3.4 重新封装each函数 -3(添加this支持)
- 目标:在函数内部使用 this 表示当前元素
var each = function(arr, fn) {
var i = 0,
len = arr.length;
for(;i < len; i++) {
if(fn.call(arr[i], i, arr[i]) === false) {
break;
}
}
};
- 练习:使用封装好的each遍历元素设置样式
1.4 封装 getElmsByTag 函数(使用容器存储结果)
- 目标:调用方法获得任意个结果(心想事成)
1.4.1 重新封装 getElmsByTag 函数
var getElmsByTag = function(tagName, results) {
results = results || []; // 设置默认值 results.push.apply(results, document.getElementsByTagName(tagName));
return results;
};
- 验证优化之后的 get 函数:
each(getElmsByTag("div", getElmsByTag("p")), function() {
this.style.background = "green";
});
2、封装通用 get 函数 -通过基本选择器获取元素
- 思路:实现get函数的两种方式
1 在原来的函数中直接修改
2 写一个新的函数,如果要通过标签名获取,则直接调用 getElmsByTag 推荐使用第二种方式
原因:获取元素的函数可能有多个,例如:通过id获取的函数/通过标签名获取/通过类名获取
2.1 封装 id/className 函数
- 目标:封装函数实现通过 id 或者 类名 来获取元素
2.1.1 封装getElmById函数 -通过id获取元素
var getElmById = function(id, results) {
results = results || [];
results.push( document.getElementById(id) ); return results;
};
2.1.2 封装getElmsByClsName函数 - 通过类名获取元素
var getElmsByClsName = function(clsName, results) {
results = results || [];
results.push.apply(results, document.getElementsByClassName(clsName)); return results;
};
2.2 封装get函数
- 目标:通用函数能通过 id/类名/标签名 获取元素
var get = function(selector, results) {
results = results || []; var rquickExpr = /^(?:#([\w-]+)|\.([\w-]+)|([\w-]+)|(\*))$/,
m = rquickExpr.exec(selector); if(m) {
if(m[1]) {
results = getElmById(m[1], results);
} else if(m[2]) {
results = getElmsByClsName(m[2], results);
} else {
results = getElmsByTag(m[3] || m[4], results);
}
} return results;
};
3、实现兼容 getElementsByClassName 函数
- 目标:封装 className 函数兼容所有浏览器
- 问题:
1 方法存在兼容性,IE8 及以下的浏览器不支持此方法
2 如何判断浏览器不支持该方法
3 如何实现该方法
3.1 浏览器能力检测
- 注意:
1 能力只需要检测一次即可
2 能力检测当心函数重写问题
- 思路:
1 提供一个:support 对象
2 对象中提供与被检测方法同名的属性,其值为布尔值
3 在js被加载的时候,就进行能力判断且只判断一次,并将判断的结果进行存储
4 凡是要用到能力检测的地方直接使用该对象
var support = {};
support.getElementsByClassName = !!document.getElementsByClassName;
3.2 检测 getElementsByClassName(了解,不做要求)
- 目标:不仅判断有没有这个方法,还要判断能力是否符合要求
var support = {}; support.getElementsByClassName = function() {
var isExist = false,
tempDiv = null, tempClsName;
isExist = !!document.getElementsByClassName; if(!isExist || typeof document.getElementsByTagName !== "funtion") {
return false;
} tempDiv = document.createElement("div");
tempClsName = "itcast_" + Math.random();
tempDiv.className = tempClsName; document.body.appendChild(tempDiv) isExist = document.getElementsByClassName(tempClsName)[0] === tempDiv; document.body.removeChild(tempDiv); return isExist;
}();
3.2.1 jQuery中的实现
support.getElementsByClassName = function() {
// function getElementsByClassName() { [native code] }
var rnative = /^[^{]+\{\s*\[native \w/;
return rnative.test(document.getElementsByClassName);
}();
3.3 实现兼容 getElementsByClassName 函数
- 思路:
1 通过 标签名 获取到所有元素
2 遍历集合,通过判断元素的 className 属性,看下是否符合要求
3 符合要求的添加到 数组 中
4 将数组返回
- 技巧:类名两端加空格,然后使用indexOf判断代替for循环
var getElmsByClsName = function (className, results) {
results = results || []; var allNodes, i, len, cNode; if(document.getElementsByClassName) {
results.push.apply(results,
document.getElementsByClassName(className));
} else {
allNodes = document.getElementsByTagName("*"); for(i = 0, len = allNodes.length; i < len; i++) {
cNode = allNodes[i];
if((" " + cNode.className + " ")
.indexOf(" " + className + " ") > -1) {
results.push(cNode);
}
}
} return results;
};
jQuery基本选择器模块的更多相关文章
- jQuery基本选择器模块(二)
选择器模块 1.push方法的兼容性(了解) 问题:IE8不支持aplly方法中的第二个参数是 伪数组 目标:实现 push 方法的浏览器兼容性问题 var push = [].push; try { ...
- JavaScript框架设计(四) 字符串选择器(选择器模块结束)
JavaScript框架设计(四) 字符串选择器(选择器模块结束) 经过前面JavaScript框架设计(三) push兼容性和选择器上下文的铺垫,实现了在某一元素下寻找,现在终于进入了字符串选择器 ...
- jQuery源代码学习之八——jQuery属性操作模块
一.jQuery属性模块整体介绍 jQuery的属性操作模块分四个部分:html属性操作,dom属性操作,类样式操作,和值操作. html属性操作(setAttribute/getAttribute) ...
- python 全栈开发,Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)
js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...
- jQuery 的选择器常用的元素查找方法
jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...
- HTML 学习笔记 JQuery(选择器)
学习前端也有一段时间了,今天终于进入到JQuery阶段了,对于新手来讲,JQuery的选择器类型之多 功能之强大实在不是一天两天能够记得完的.现在,就采用边学边记录的方式.以后要是忘了的话,也有一个地 ...
- jQuery的选择器中的通配符总结
1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...
- JQuery实现的模块交换动画效果
<!doctype html> <html> <head> <meta http-equiv="content-type" content ...
- JQuery 层次选择器
<!DOCTYPE HTML> <html> <head> <title> 使用jQuery层次选择器 </title> <scrip ...
随机推荐
- Having子句用法
Having基础用法 集合结果指定条件 注:HAVING子句中能够使用三种要素:常数,聚合函数,GROUP BY子句中指定的列名(聚合建) HAVING子句: 用having就一定要和group by ...
- freemarker使用map替换字符串中的值demo2
package demo01; import java.io.IOException;import java.io.OutputStreamWriter;import java.io.StringWr ...
- PAT_A1147#Heaps
Source: PAT A1147 Heaps (30 分) Description: In computer science, a heap is a specialized tree-based ...
- win10环境下配置django+Apache2.4.38+python3.6项目
1.)Apache-2.4.38-win64-vc15下载地址: https://www.apachelounge.com/download/VC14/ 解压httpd-2.4.38-win64-VC ...
- php第四节课
对象 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...
- 26.bulk批量操作
主要知识点 1.bulk语法 2.bulk使用时的注意事项 3.bulk size 对es性能的影响 一.bulk语法 每一个操作要两个json串(delete操作除外),每个json串占一行 ...
- 2、Linux的关机方式
shutdown 关机指令,你可以man shutdown 来看一下帮助文档.例如你可以运行如下命令关机: shutdown –h 10 ‘This server will shutdown afte ...
- 邓_ SVN·最新使用教程总结
SVN简介: 为什么要使用SVN? 程序员在编写程序的过程中,每个程序员都会生成很多不同的版本,这就需要程序员有效的管理代码,在需要的时候可以迅速,准确取出相应的版本. Subversion是什么? ...
- hdu 3352 求边双联通分量模板题(容器)
/*这道题是没有重边的,求加几条边构成双联通,求边联通分量,先求出桥然后缩点,成一个棵树 找叶子节点的个数*/ #include<stdio.h> #include<string.h ...
- 继续过Hard题目
接上一篇:http://www.cnblogs.com/charlesblc/p/6283064.html 继续过Hard模式的题目吧. # Title Editorial Acceptance ...