选择器模块

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基本选择器模块的更多相关文章

  1. jQuery基本选择器模块(二)

    选择器模块 1.push方法的兼容性(了解) 问题:IE8不支持aplly方法中的第二个参数是 伪数组 目标:实现 push 方法的浏览器兼容性问题 var push = [].push; try { ...

  2. JavaScript框架设计(四) 字符串选择器(选择器模块结束)

    JavaScript框架设计(四) 字符串选择器(选择器模块结束) 经过前面JavaScript框架设计(三) push兼容性和选择器上下文的铺垫,实现了在某一元素下寻找,现在终于进入了字符串选择器 ...

  3. jQuery源代码学习之八——jQuery属性操作模块

    一.jQuery属性模块整体介绍 jQuery的属性操作模块分四个部分:html属性操作,dom属性操作,类样式操作,和值操作. html属性操作(setAttribute/getAttribute) ...

  4. python 全栈开发,Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)

    js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...

  5. jQuery 的选择器常用的元素查找方法

    jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...

  6. HTML 学习笔记 JQuery(选择器)

    学习前端也有一段时间了,今天终于进入到JQuery阶段了,对于新手来讲,JQuery的选择器类型之多 功能之强大实在不是一天两天能够记得完的.现在,就采用边学边记录的方式.以后要是忘了的话,也有一个地 ...

  7. jQuery的选择器中的通配符总结

    1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...

  8. JQuery实现的模块交换动画效果

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  9. JQuery 层次选择器

    <!DOCTYPE HTML> <html> <head> <title> 使用jQuery层次选择器 </title> <scrip ...

随机推荐

  1. Having子句用法

    Having基础用法 集合结果指定条件 注:HAVING子句中能够使用三种要素:常数,聚合函数,GROUP BY子句中指定的列名(聚合建) HAVING子句: 用having就一定要和group by ...

  2. freemarker使用map替换字符串中的值demo2

    package demo01; import java.io.IOException;import java.io.OutputStreamWriter;import java.io.StringWr ...

  3. PAT_A1147#Heaps

    Source: PAT A1147 Heaps (30 分) Description: In computer science, a heap is a specialized tree-based ...

  4. 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 ...

  5. php第四节课

    对象 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...

  6. 26.bulk批量操作

    主要知识点 1.bulk语法 2.bulk使用时的注意事项 3.bulk size 对es性能的影响     一.bulk语法 每一个操作要两个json串(delete操作除外),每个json串占一行 ...

  7. 2、Linux的关机方式

    shutdown 关机指令,你可以man shutdown 来看一下帮助文档.例如你可以运行如下命令关机: shutdown –h 10 ‘This server will shutdown afte ...

  8. 邓_ SVN·最新使用教程总结

    SVN简介: 为什么要使用SVN? 程序员在编写程序的过程中,每个程序员都会生成很多不同的版本,这就需要程序员有效的管理代码,在需要的时候可以迅速,准确取出相应的版本. Subversion是什么? ...

  9. hdu 3352 求边双联通分量模板题(容器)

    /*这道题是没有重边的,求加几条边构成双联通,求边联通分量,先求出桥然后缩点,成一个棵树 找叶子节点的个数*/ #include<stdio.h> #include<string.h ...

  10. 继续过Hard题目

    接上一篇:http://www.cnblogs.com/charlesblc/p/6283064.html 继续过Hard模式的题目吧.   # Title Editorial Acceptance ...