关键词：
Jquery选择器与CSS选择器非常相似，CSS选择器提供诸多功能，同时两者在解析上均采用从右向左解析，因为在建立Render Tree时，若采用自左向右解析，没词匹配不成功均需要退回再进行匹配，而反向解析利用排除法，逐步缩小元素候选集，优化了从子元素找父元素的过程，对于大量元素很有效（所以采用通配符很低效）
CSS的基础选择器：
群组选择器：selector1, selector2, selector3...
简单选择器：ID" #id "，标签" tag "，类" .class "，属性“ [att , att=val , att~=val , att|=val , att^=val , att*=val , att$=val] ”，通配符“ * ”
关系选择器：孩子“parent > child”，后代“ancestor descendant”，相邻“prev + next”，兄弟“prev ~sibling”
伪类选择器：动作伪类，目标伪类，语言伪类，状态伪类，结构伪类，取反伪类 (伪类采用筛选器，基本、内容、可见、子元素、表单筛选器)
普通接口兼容性：
关于属性attributes：IE8前必须使用getAttribute(‘className‘)，而其余为getAttribute(‘class‘)
关于getElementById：IE8之前不区分ID大小写，且无法识别重名的表单name和ID
关于getElementByTagName：IE6-8会将注释节点纳入通配符的选择范围，需要递归判断nidetype=1才可取
关于getElementByClassName：IE不支持此方法
//为通配符做兼容性处理
function byTagName(tag, context) {
var ele,
tmp=[],
index = 0,
resulrs = context.getElementByTagName(tag);
if(tag === "*") {
while((ele = result[index++])) {
if(ele.nodetype === 1) {
tmp.push(ele);
}
}
return tmp;
}
return results;
};
//getElementsByClassName
function getClassNames(tagName, classStr) {
var nodes = document.getElementsByTagName(tagName),
ret = [];
for (i = 0; i < nodes.length; i++) {
if (hasClass(nodes[i], classStr)) {
ret.push(nodes[i])
}
}
return ret;
}
function hasClass(tagStr, classStr) {
var arr = tagStr.className.split(/\s+/); //class可以有多个
for (var i = 0; i < arr.length; i++) {
if (arr[i] == classStr) {
return true;
}
}
return false;
}
高级接口querySelector：
querySelector返回一个集合，element.querySelectorAll返回集合（nodelist）其中包括element本身，这两个选择器无论之前调用的上下文element如何，总是在document范围内查找所有满足的元素，其次查找上句中得到的元素集合中符合子元素，返回这些元素，于是自然包括element元素，这也解释了为何element元素会被返回
高级接口兼容性：
前文提到querySelectorAll无视上下文，始终在document中查找，这导致返回element本身，针对这个问题，采用Andrew Dupont方法加以修复 - 利用临时添加的ID显示范围，并在使用后删除，如下
var context = document.querySelector(‘.aaron‘);
var old;
var nid = Math.random();
//是否有ID/‘|\\/g
if ((old = context.getAttribute("id"))) {
nid = old.replace(/‘|\\/g, "\\$&");
} else {
context.setAttribute("id", nid);
}
nid = "[id=‘" + nid + "‘] ";
var newSelector = nid + ‘.aaron span‘;
if (newSelector) {
try {
alert(context.querySelectorAll(newSelector).length)
} catch (qsaError) {} finally {
//如果是通过增加的范围，则要删除
if (!old) {
context.removeAttribute("id");
}
}
}
源代码分析系列：
~ing
参考 慕课网：https://www.imooc.com/learn/172
博客园：https://www.cnblogs.com/chuaWeb/p/jQuery-1-9-1-jQuery-selector1.html
jquery学习笔记-选择器-
选择器的简单使用<%--CreatedbyIntelliJIDEA.User:cxspaceDate:16-8-25Time:下午2:29TochangethistemplateuseFile|Settings|FileTemplates.--%><%@pagecontentType="text/html;charset=UTF-8"language="java"%>< 查看详情
锋利的jquery学习笔记之jquery选择器
在介绍jQuery选择器之前，先简单介绍一下CSS选择器--->一、CSS选择器常见的CSS选择器有以下几种：选择器语法描述示例标签选择器E{CSS规则}以文档元素为选择符td{font-size:10px;}a{tetx-decoration:none;}ID选择器#ID{CSS规则}以文档元素的唯... 查看详情
jquery学习笔记-选择器
Jquery选择器与CSS选择器非常相似，CSS选择器提供诸多功能，同时两者在解析上均采用从右向左解析，因为在建立RenderTree时，若采用自左向右解析，没词匹配不成功均需要退回再进行匹配，而反向解析利用排除法，逐步缩小... 查看详情
jquery层级选择器学习笔记
html文档中的所有节点构成的拓扑结构类似于家谱，节点与节点之间存在着类似于父子、兄弟、祖孙这样的关系，层级选择器就是用于处理html文档中节点与节点之间的关系。如下介绍四种层级选择器：1.子选择器$(‘parent>child‘... 查看详情
java程序猿的javascript学习笔记（12——jquery-扩展选择器）
计划按例如以下顺序完毕这篇笔记：Java程序猿的JavaScript学习笔记（1——理念）Java程序猿的JavaScript学习笔记（2——属性复制和继承）Java程序猿的JavaScript学习笔记（3——this/call/apply）Java程序猿的JavaScript学习笔记（4——this/闭... 查看详情
前端学习笔记之jquery选择器一
一.查找按选择器查找：过滤选择器1.基本过滤：位置过滤--------jquery独有，css没有 什么是：根据元素在查找结果集合中的下标位置选择元素 强调：1.将所有元素查找到集合中再按照下标过滤 2.下标从0开始 ... 查看详情
jquery笔记jquery选择器
一、前言编写任何javascript程序我们要首先获得对象,jQuery选择器能彻底改变我们平时获取对象的方式,可以获取几乎任何语意的对象,比如"拥有title属性并且值中包含test的<a>元素",完成这些工作只需要编写一个jQuery选择器字符... 查看详情
jquery选择器与事件学习笔记
层次选择器： $("divli")获取div下的所有li元素(后代、子、子的子......) $("div>li")获取div下的直接li子元素。 $(".menuitem+div")获取样式名为menuitem之后的第一个div元素（不常用）。 $(".menuitem~div")获取样式名为menuitem之... 查看详情
jquery学习笔记：this相关问题及选择器
jQuery中的this和$(this)有什么区别jQuery中的this和$(this)有什么区别$("div").each(function(index){alert($(this));//[objectObject]jQuery对象alert(this);//[objectHTMLDivElement]DOM对象});可以观察到，this指代的是DOM对象，$(this)指代的是包装当前DO 查看详情
jquery学习笔记：this相关问题及选择器
this的相关问题this指代的是什么这个应该是比较好理解的，this就是指代当前操作的DOM对象。在jQuery中，this可以用于单个对象，也可以用于多个对象。$(‘btn‘).click(function(){alert(this.innerHTML);//单个对象，this指代当前id为btn的DO... 查看详情
jquery学习笔记：this相关问题及选择器
上一节的遗留问题，关于this的相关问题，先来解决一下。this的相关问题this指代的是什么这个应该是比较好理解的，this就是指代当前操作的DOM对象。在jQuery中，this可以用于单个对象，也可以用于多个对象。$(‘btn‘).click(function(... 查看详情
jquery学习笔记：this相关问题及选择器
上一节的遗留问题，关于this的相关问题，先来解决一下。this的相关问题this指代的是什么这个应该是比较好理解的，this就是指代当前操作的DOM对象。在jQuery中，this可以用于单个对象，也可以用于多个对象。$(‘btn‘).click(function(... 查看详情
jquery学习笔记
1.基础语法：$(selector).action()2.基础选择器1)AllSeletor$("*")2)ClassSelector$(".class")3)ElementSelector$("element")4)IDSelector$("#id")5)MultipleSelector$("selector1,selector2,selectorN")ViewCode3.属性选择器1)Attr 查看详情
11月2日——jquery源码学习笔记
1、jQuery()函数，即$()。有四种不同的调用方式。（1）传递CSS选择器（字符串）给$()方法，返回当前文档中匹配该选择器的元素集。可选第二个参数，一个元素或jQuery对象，定义元素查询的起始点，称为上下文（context），这时返... 查看详情
jquery学习笔记
1：$=jQuery $()=jQuery()2：CSS选择符（多个选择器组合用”,"隔开） ①，属性选择符$(‘a[href^="mailto:"]‘)表示href以“mailto:”开头的a元素。同样$表示结尾，*表示通配符。属性可以写多个，如$(‘a[href$=".pdf"][href*="... 查看详情
二次学习jquery选择器&选择集过滤&转移(代码片段)
JQuery选择器jQuery选择器1.jQuery选择器的介绍2.jQuery选择器的种类3.小结4.笔记5.示例代码选择集过滤1.选择集过滤的介2.选择集过滤的操作3.小结4.笔记5.完整代码选择集转移1.选择集转移介绍2.选择集转移操作3.总结jQuery选择器1.jQuery... 查看详情
jquery学习笔记整理
一.子元素选择器.:nth-child:匹配父元素下的第N个子或者奇偶元素.注意：序号是从１开始的,而eq是从0开始计数的！它匹配的是前方选择器选择到的元素的父元素下面的第几个元素.例如:ulli:first-child:匹配的是<ul>下面的这个<li... 查看详情
jq框架封装学习笔记1-框架介绍与选择器框架
jq框架学习框架的选择器模块框架的结构DOM基本操作（元素的操作）事件处理属性操作样式操作简单动画简要分析jq框架jq是模块化的，是一个以代码集合和功能为中心的模块Sizzle选择器引擎，非常常用的选择器引擎jq的整体结构... 查看详情