选择器模块

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. Idea中修改servlet模板

    1.点击左上角的File: Setting --> Editor --> File and Code Templates --> Other --> web -->Ser ...

  2. 在vue中写一个跟着鼠标跑的div,div里面动态显示数据

    1.div应该放在body里面,这是我放在body中的一个div里面的div <!-- 信息查看层 --> <div class="floatDiv" :styl ...

  3. SQL中IS NOT NULL与!=NULL的区别

    平时经常会遇到这两种写法:IS NOT NULL与!=NULL.也经常会遇到数据库有符合条件!=NULL的数据,但是返回为空集合.实际上,是由于对二者使用区别理解不透彻. 默认情况下,推荐使用 IS ...

  4. linux 中,mysql数据库备份操作

    1.新建一个sh脚本(可以先建一个txt文本,然后改为sh文件). 代码如下: #!/bin/bash #设置mysql备份目录 folder=/**/** cd $folder day=`date ...

  5. 2019-04-12 SQL 主键约束

    create table dbo.AssetPool( ID bigint not null, poolname nvarchar(50)not null, constraint pk_AssetPo ...

  6. 4.Spring注解+SpringMVC注解+MyBatis注解(动态sql)

    1.创建如图所示项目结构 2.在项目的

  7. (22)Spring Boot 拦截器HandlerInterceptor【从零开始学Spring Boot】

    上一篇对过滤器的定义做了说明,也比较简单.过滤器属于Servlet范畴的API,与Spring 没什么关系.     Web开发中,我们除了使用 Filter 来过滤请web求外,还可以使用Sprin ...

  8. 善用性能工具进行SQL整体优化

    SQL优化是一个复杂的工程,首先要讲究从整体到局部.今天我们首先学习关于数据库整体优化都有哪些性能工具,接着分析这些工具的特点,并结合案例进行探索,最后再进行总结和思考. 总体学习思路如下图所示: 都 ...

  9. Spring Boot项目@RestController使用重定向redirect

    Spring MVC项目中页面重定向一般使用return "redirect:/other/controller/";即可.而Spring Boot使用了@RestControll ...

  10. Map 遍历取值及jstl的取值

    Map 遍历取值及jstl的取值 学习了:http://blog.csdn.net/yanjiaye520/article/details/17354239 1.Java map的便利取值 Java代 ...