jquery《从入门到精通》学习笔记
一个轻量级的前端框架
当前使用版本为1到3，所以很多新版本的api不会过多介绍
jquery的下载链接##https://jquery.com
项目链接##https://jquery.org
| 目录 |
| 1.jquery 入门 |
| 2.jquery选择器 |
jquery库无需安装只需引用下载的包即可
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery/jquery-3.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
//测试jquery
<body>
<script>
$(function(){
alert("hallo,world")
//这段代码想必大家都很熟悉哈
})
</script>
</body>
</html>
1.在jquery代码中，$()是jquery的别名,$()等效于jquery的入口,jquery()函数是jquery库文件的接口函数,所有jquery操作都必须从该接口函数中切入.同时也是页面的初始化函数,当页面加载完毕时会先执行jquery()包含的函数 |
2.如果使用jquery操作DOM文档,则必须确保在DOM载入完毕后开始执行,应该使用ready事件作为处理html文档的开始…以下的代码语义是匹配文档中的document节点,然后为该节点绑定ready事件处理函数,它类似于javascript的window.onload事件处理函数,不过jquery的ready事件要早于onload事件被激活 |
$(document).ready(function(){});
但是为了开发方便,jquery框架进一步简化了$(document).ready()方法的写法 直接使用$()方法来表示 |
$(function(){})
jquery是在javascript基础上封装的,因此jquery代码本质上也是javascript代码,自然也支持jquery于javascript的代码混合使用 |
jquery对象和DOM对象是可以互相转换的,因为他们所操作的对象都是DOM元素,只不过jquery对象包含多个DOM元素,而DOM对象本身就是一个DOM元素,简单地说,Jquery对象就是DOM的集合,也称为伪数组,而DOM对象就是一个DOM元素 |
jquery对象不能直接使用DOM对象的方法,如果需要把Jquery对象转换成DOM对象可以通过(1)借助数组下标来读取jquery对象集合中的某个DOM元素对象 |
$(function(){
let $li = $("li");
let li = $li[0];
alert(li.innerHTML)
})
(2)借助jquery对象方法，如get()方法，为get()方法传递一个下标值，即可从jquery对象中取出一个DOM对象元素 |
$(function(){
let $li = $("li");
let li = $li.get(0);
alert(li.innerHTML)
把DOM对象转换成jquery对象：对于DOM对象来说，直接把他传递给$()$函数即可，jquery会自动把他包装为jquery对象，然后就可以自由调用jquery定义的方法 |
$(function(){
const li = document.getElementByTagName("li");
let $li = $(li[0])
/*
同时也可以把所有的li元素封装在jquery对象中
let $li = $(li);
/*
alert($li.html());
})
`**2.jquery选择器**`
选择器是Jquery的根基，在jquery中，遍历DOM，事件处理，css控制，动画设计和ajax操作都依赖于选择器，如果熟练使用选择器，不仅能简化代码，而且可以达到事半功倍的效果，本篇很长哦~~ |
JQquery选择器采用css和Xpath选择器语法规范，能够满足用户在DOM中快速匹配元素或者元素集合，Jquery选择器解决了两个难题(1),支持css不同版本的所有选择器，而很多早期的浏览器并没有完全的支持css版本的选择器 (2),支持不同的主流浏览器，因此使用jquery选择文档对象时，就不用考虑浏览器的兼容性问题 |
| jquery选择器 |
| 1基本选择器 |
| 2结构选择器 |
| 3过滤选择器 |
| 4属性选择器 |
| 5表单选择器 |
基本选择器分有5种类型:id选择器,类型选择器,类选择器,通配选择器,分组选择器与css一直 |
| 选择器 |
说明 |
返回值 |
| #id(ID选择器) |
根据给定的ID匹配一个元素,如果选择器中包含有特殊字符,可以用两个斜杠转义 |
包含单个元素的jquery对象 |
| element(类型选择器) |
根据指定的元素类型名称选择该类型的所有元素 |
包括同类型的jquery对象 |
| .class(类选择器) |
根据指定的类名选择所有同类元素 |
包括同类的jquery对象 |
| *(通配选择器) |
在限定范围内选择所有元素 |
包括所有元素的jquery对象 |
| selector1,selector2,selectorN(分组选择器) |
分别选择选择器组中每一个选择器匹配的元素,然后合并返回所有元素 |
包含多组匹配元素的jquery对象 |
$(document).ready(function(){
console.log( $('#box')) id选择器
console.log( $('ul')) 标签名选择器
console.log($('.item')); 类名选择器
console.log($('*')); 通配符选择器
console.log($('.item1,.item2')); //并列选择器
console.log($(".\\[item1\\]")) //如有特殊字符，需用\\
})
$(document).ready(function(){
$("li").css("color","red");
})
上面的获取方式是否觉得简单多了,但是从性能上来讲,这可很不友好,从本质上来分析,javascript与jquery在选择DOM元素时是异曲同工的,jquery只不过是包装了原生的getElementByTagName()方法.但是,从执行效率上分析,两者的差距还是很大的.由于jquery需要对参数字符串进行解析,并匹配出所有的参数值是ID值,然后再调用getElementByTagName()方法获取该DOM元素,所以花费的时间一定会成倍地增长,因此,在不是很必须的前提下,可以考虑直接使用原生document对象中的getElementByTagName()方法获取该DOM元素,这就是两者结合的好处 |
$(function(){
document.getElementById("Id").style.color="red"
})
然后这个又是什么呢:
console.log($(".\\[item1\\]")) //如有特殊字符，需用\\
不管是vue,react,还是jquery,都是用正则匹配参数值,并判断当前参数是否是要匹配的DOM元素 |
ID:/
正则表达式对于特殊字符是敏感的,要避免正则表示式被误解,就考虑进行字符转义,在正则表达式字符串中一般都通过双斜杠来转义特殊字符,如果直接使用javascript的原生方法则不用考虑这个问题 |
欣赏实例内容:
原生写法
window.onload = function(){ //页面初始化函数
const divs = document.getElementsByTagName("div"); //返回div元素集合
for(let i=0;i<divs.length;i++){ //遍历div元素集合
divs[i].style.backgroundColor = "red" //设置doiv元素的背景颜色
}
}
原生结合jquery
window.onload = function(){ //javascript页面初始化函数
const divs =$("div"); //用jquery获取元素集合
for(let i=0;i<divs.length;i++){ //遍历div元素集合
divs[i].style.backgroundColor = "red" //设置doiv元素的背景颜色
}
}
如果想要兼容早期的浏览器可以这样写:
// //兼容早期浏览器代码
// document.getElementsByClassName = (className)=>{
// //定义数组
// let el = [],
// //获取所有元素
// _el = document.getElementsByTagName("*");
// //遍历元素
// for(let i=0;i<_el.length;i++){
// if(_el[i].className==className){
// el[el.length]=_el[i]
// }
// }
// return el;
// }
// //获取元素
// window.onload = ()=>{
// let Box = document.getElementsByClassName("item1")
// for(let i=0;i<Box.length;i++){
// Box[i].style.color = "red";
// }
// }
分组选择器的jquery正则如下：
var chunker = /((3:\((?:\([^()]+\)I[^()]+)+\)|\[(?:\[[^[\]]*\]|['"][^"]|*['"]I[^[\]'"]+)+\]|\\.|[^ >+~，(\[\\]+)+|[>+~]) (\s*, \s*)?/g，
分组选择器的，实现思想是这样的： 首先Sizzle（）构造器函数中，获取选择器字符串，并通过上面正则表达式模式进行匹配，然后把该正则表达式的下标位置恢复到初始化的位置。根据选择器字符串的逗号作为分隔符，把选择器字符串劈开，然后分别推入到parts数组中。最后，通过条件判断语句分别判断parts数组的长度，如果长度大于1，则重复调用sizzle()函数，并分析第一个逗号后面的选择器字符串，依次推类 |
| 结构选择器就是根据HTML文档结构中节点之间的包含或并列关系决定匹配元素的一种方法。jQuery模仿CSS的关系过滤模式定义了4个关系选择器，同时还根据包含关系，自定义了4个子元素选择器 |
2.1层级选择器：能够根据元素之间的结构关系进行匹配操作，含有：包含选择器，子选择器，相邻选择器和兄弟选择器 |
| 选择器 |
说明 |
| ancestor descendant(包含选择器) |
在给定的祖先元素下匹配所有的后代元素，ancestor 表示任何有效的选择器，descendant 表示用以匹配元素的选择器，并且它是第一个选择器的后代元素。例如，$(“form input”)可以匹配表单下所有的input元素 |
| parent > child(子选择器) |
在给定的父元素下匹配所有的子元素。parent 表示任何有效的选择器，child 表示用以匹配元素的选择器，并且它是第一个选择器的子元素。例如，S(“form > input”)可以匹配表单下所有的子级input元素 |
| prev + next(相邻选择器) |
匹配所有紧接在prev元素后的next元素。prev 表示任何有效的选择器，next 表示一一个有效选择器并且紧接着第一个选择器。例如，$("label + input’"可以匹配所有跟在label后面的input元素 |
| prev ~ siblings(兄弟选择器) |
匹配prev元素之后的所有sibigs元素。prev 表示任何有效的选择器，siblings 表示一个选择器，并且它作为第一个选择器的同辈。例如，S(form ~ input"可以匹配到所有与表单同辈的input元素 |
$(document).ready(function(){
//console.log($('body .item1')); //包含选择器
//console.log($('ul>.item1')); //子代选择器
//console.log($('div+ul')); //相邻兄弟选择器
console.log($('div~ul')); //普通兄弟选择器
})
在层级选择器中，左右两个子选择器可以为任何形式的选择器，可以是基本选择器，也可以是复合选择器，甚至是层级选择器。例如，$(“div div div”)中可以有两种理解: "div div"表示子包含选择器，位于左侧，作为父包含选择器的包含对象，而第三个"div"表示被包含的对象，它是一一个基本选择器;或者"div"表示基本选择器，位于左侧，作为父包含选择器的包含对象，而"div div"表示被包含的对象，它是一个子包含选择器。再如，$(“div:eq(1)~ p”)中的("div:eq(1)"是-一个伪类选择器，它属于复合选择器，在这里表示兄弟选择器中相邻的前一个选择器 |
顺便在这里扩展一下知识点跟源码：
| jQuery在Expr. relative 对象中定义了4个层级选择器函数，然后在Sizle0接口函数中直接调用这些函数来匹配对应的选择器类型，并根据这些选择器表达式调用Sizle flter0过滤函数，筛选指定关系的元素，并把这些匹配元素封装到jQuery对象中返回。 |
var Expr = Sizzle. selectors ={
relative :
//匹配prev + next 选择器
"+":function (checkSet, part, isXML) {
},
//匹配parent > child 选择器
">":function (checkSet, part, isXML) {
},
//匹配ancestor descendant选择器
"": function (checkSet, part, isXML) {
},
//匹配prevsiblings选择器
"~”: function (checkSet, part, isXML) {
}
| 选择器 |
说明 |
| :nth-child |
匹配其父元素下的第N个子或奇偶元素 |
| :first-child |
匹配第一个子元素:first 选择器只匹配一个元素， 而frst-child 选择符将为每个父元素匹配一个子无素 |
| :last-child |
匹配最后一个子元素::last只匹配一个元素， 而:last-child选择符将为每个父元素匹配一 个子元素 |
| :only-child |
如果某个元素是父元素中唯一的子元素， 那将会被匹配，如果父元素中含有其他元素，那将不会被匹 |
$(document).ready(function(){
//选到到第n个子元素
//console.log($('ul :nth-child(6)'));
//console.log($('ul :nth-child(3n+2)))
//选到第一个li
// console.log($('li:first-child'));
//选到同样标签类型的第一个
//console.log($('ul :first-of-type'));
//选到同样标签类型的最后一个
//console.log($('ul :last-of-type'));
})
同样的在这里扩展一下知识点跟源码
jquery在Expr.match对象中定义了CHILD正则表达式匹配模式/:(only|nth|last|first)-child(?:\((even|odd|[\dn+-]*)\))?/ |
var Expr Sizzle.selectors ={
order: ["ID", "NAME", "TAG"],
match:{
ID: /
CLASS: /\.((?:[\w\uOOcO-\uFFFF_-]|\\.)+)/,
NANE: /\[name=['"]*((?:[\w\uOOcO-\uFFFF_-]|\\.)+)['"]*\]/,
ATTR: /\[\s*((?:[\w\uOOcO-\uFFF_-]|\\.)+)\s*(?:(\s?=)\s*(['"]*)(.*?)\3|)\s*\]/,
TAG: /^((?:[\w\uOOcO-\uFFFF\*_-]|\\.)+)/,
CHILD: /: (only|nth|last|first)-child(?:\((even|odd|[\dn+-)*)\))?/,
POS: /: (nth|eq|gt|lt|first|last|even|odd) (?:\((\d*)\))?(?=[^-]|$)/,
PSEUDO: /:((?:[\w\uOOcO-\uFFFF_-]|\\.)+)(?:\((['"]*)((?:\([^\)]+\)|[^\2\(\)]+)\2\))?/
}
}
| 在Sizzle.filter()过滤器函数中调用该正则表达式匹配到子元素选择器特征字符，并调用Expr.preFilter对象中包含的CHILD方法，最后把处理所得的匹配元素封装到jquery对象中返回 |
if ( Expr.preFilter[ type ] ) {
match = Expr .preFilter[ type ] {
match, curLoop, inplace, result, not, isXMLFilter;
if ( !match ){
anyFound = found = true;
}else if(match === true){
continue;
}
}
CHILD()方法位于Expr.preFilter对象中
var Expr = Sizzle.selectors = {
preFilter:{
CHILD:function(match){
},
}
}
过滤选择器主要通过特定的过滤表达式来筛选特殊需求的DOM元素，过滤选择器的语法形式与CSS的伪类选择器的语法格式相同，即以冒号作为前缀标识符。根据需求的不同，过滤选择器又可以分为定位过滤器、内容过滤器和可见过滤器。 |
定位过滤器:定位过滤器主要是根据编号和排位筛选特定位置上的元素，或者过滤掉特定元素 |
| 选择器 |
说明 |
| :first |
匹配找到的第一个元素。例如，$(“tr:first”)表示匹配表格的第 一行 |
| :last |
匹配找到的最后一个元素。例如，$“tr:ast”)表示匹配表格的最后 一行 |
| :not |
去除所有与给定选择器匹配的元素。注意，在jQuery 1.3中，已经支持复杂选择器了，如:not(div a)和:not(div,a)。例如，$(“input:not(:checked)”)可以匹配所有未选中的input元素 |
| :even |
匹配所有索引值为偶数的元素，从0开始计数。例如，$("tr:even"可以匹配表格的1、3、5行(即索引值为0、2、4、…) |
| :odd |
匹配所有索引值为奇数的元素，从0开始计数。例如，$(“tr:odd”)可以匹配表格的2、4、6行(即索引值1，3，5，) |
| :eq |
匹配一个给定索引值的元素，从0开始计数。例如，$("tr:eq(0)"可以匹配第 1行表格行 |
| :gt |
匹配所有大于给定索引值的元素，从0开始计数。例如，$(tr:g(0"可以匹配第2行及其后面行 |
| :lt |
匹配所有小于给定索引值的元素。例如，$tr:1(1)")可以匹配第 1行 |
| :header |
匹配如h1、h2、 h3 之类的标题元素 |
| :animated |
匹配所有正在执行动画效果的元素 |
$(document).ready(function(){
//console.log($('li').first());
//console.log($('li').last());
// console.log($('li').eq(2));
//console.log($('li').qt(2));
console.log($("li").lt(2))
//截取指定返回的li元素
console.log($('li').slice(2, 4));
})
也可以这样写
$(document).ready(function(){
$("li:first").css("color","red");
$("li:odd").css("color","red");
$("li:even").css("color","red");
$("li:qt(2)").css("color","red");
})
内容过滤器：内容过滤器主要根据匹配元素所包含的子元素或者文本内容进行过滤 |
| 选择器 |
说明 |
| :contains |
匹配包含给定文本的元素。例如，$(“div:contains(图 片)”)匹配所有包含“图片”的div |
| :empty |
元素匹配所有不包含子元素或者文本的空元素 |
| :has |
匹配含有选择器所匹配的元素的元素。例如，$(“div:has§”)匹配所有包含 P元素的div |
| :parent |
元素匹配含有子元素或者文本的元素 |
$(document).ready(function(){
//选到包含指定文本内容的元素
//console.log($('li:contains("1")'));
//选到没有任何内容的元素
//console.log($('li:empty'));
//选到有文本内容的元素
// console.log($('li:parent'));
//选择到含有指定选择器
//console.log($('li:has(".item1")'));
})
同样的扩展一下知识点跟源码
| jQuery在Expr. fiters对象中收集了各种内容过滤器的表达式算法 |
var Expr = Sizzle.selectors={
filters:{
parent:function(elem){
return !!elem.firstChild;
},
empty:function(elem){
return !elem.firstChild;
},
has:function(elem,i,match){
return !!Sizzle(match[3],elem).length;
}
}
}
其中当!elem.firstChild (即elem 元素)不包含子节点或者文本元素时，empty 返回真;!!elem.firstChild(即elem 素元)包含子节点或者文本元素时，parent返回真:在has选择器中，match[3]为has紧跟在后面含有的元素，如$(“div:has§”)中的p,!!Sizzle(match[3],elem).length获得match[3]元素中包含在elem元素中的个数,如果大于1.则has返回真. |
| 然后在Expr.filter对象的PESUDO()函数调用该对象集合,根据所设置的定位过滤表达式,调用filter()函数匹配对应的元素,并返回jquery对象 |
var Expr = Sizzle.seletors={
filter:{
PSEUDO:function(elem,match,i,array){
var name = match[1],filter = Expr.filters[name];
if(filter){
//匹配:parent,:empty和:has选择器
}else if(name==="contains"){
//匹配:contains选择器
}else if(name==="not"){
}
}}
可见选择器:可见过滤器就是根据元素的可见或者隐藏来进行匹配的 |
| 选择器 |
说明 |
| :hidden |
匹配所有不可见元素,或者type为hidden的元素 |
| :visble |
匹配所有可见元素 |
$(function(){
$("p:odd").hide();
$("p:odd").css("color","red")
$("p:visible").css("color","blue")
$("p:hidden").show();
})
| 属性选择器主要根据元素的属性及其属性值作为过滤的条件，来匹配对应的DOM元素。属性选择器都是以中括号作为起止分界符，如attribute]， 与伪类选择器特征都比较明显。jQuery定义了7类属性选择器，如下表所示 |
| 选择器 |
说明 |
| [attribute] |
匹配包含给定属性的元素,注意，在jQuery 1.3 版本中，前导的@符号已经被废除，如果想要兼容最新版本，只需要简单去掉@符号即可。例如，$(“div[id]”)表示查找所有 含有id属性的div元素 |
| [attribute=value] |
匹配属性等于特定值的元素。属性值的引号在大多数情况下是可选的，如果属性值中包含“[]”时,需要加引号以避免冲突,例如，$(“input[name='text]”).表 示查找所有name属性值是’text的input元素 |
| [attribute!=value] |
匹配所有不含有指定的属性，或者属性不等于特定值的元素。该选择器等价于:not([atr=value]),要匹配含有特定属性但不等于特定值的元素，可以使用[attr]:not([attr= value]),例如，$(“input[name!='text]”) 表示查找所有name属性值不是’text’的input元素 |
| [attribute^=value] |
匹配给定的属性是以某些值开始的元素,例如，$(“input[name^=‘text’]”) 表示所有name属性值是以’text"开始的input元素 |
| [attribute$=value] |
匹配给定的属性是以某些值结尾的元素,例如，S('input[name$=“text”]")表示所有name属性值是以text结束的input元素 |
| [attribute*=value] |
匹配给定的属性是包含某些值的元素,例如，S(input[name*=“text’’]”)表示所有name属性值是包含text’字符串的input元素 |
| [selector1][selector2][selector3] |
复合属性选择器，需要同时满足多个条件时使用 |
$(function(){
const al = $("a[href$=".pdf"]");
al.html(function(){
return "
"/>"+this.attr("href");
})
})
| 表单是页面中使用率较高的元素之一,为了方便可以灵活操作表单,jquery专门定义了表单选择器,使用表单选择器可以方便地获得表单中某类表单域的对象 |
| 选择器 |
说明 |
| :input |
匹配所有input,tecxtarea,select和button |
| :text |
匹配单行文本框 |
| :password |
匹配密码框 |
| :radio |
匹配所有单选按钮 |
| :checkbox |
匹配你所有复选框 |
| :submit |
匹配所有提交按钮 |
| :image |
匹配所有图像域 |
| :reset |
匹配所有重置按钮 |
| :button |
匹配所有按钮 |
| :file |
匹配所有文件域 |
| :hidden |
匹配所有不可见元素,或者type为hidden的元素 |
$(function(){
$("#test:text").val("修改后的内容");
})
| 5.2高级表单选择器 |
| jquery根据表单域特有的特性定义了4个表单属性选择器,这些选择器与基本表单选择器不同,它们可以选择任何类型的表单域,因为它主要根据表单属性来进行选择 |
| 选择器 |
说明 |
| :enabled |
匹配所有可用元素 |
| :disabled |
匹配所有不可见的元素 |
| :checked |
匹配所有被选中的元素(复选框,单选按钮等,不包括select中的option) |
| :selected |
匹配所有选中的option元素 |
使用方法同上,就不做多介绍
| jquery选择器的优化 |
| 正确使用选择器引擎对于页面性能起了至关重要的作用。使用合适的选择器表达式可以提高性能、增强语，义并简化逻辑。在传统用法中，最常用的简单选择器包括ID选择器、类(Class) 选择器和类型选择器，其中速度最快的是ID选择器，这主要是因为JavaScript内置函数getElementByld(。其次是类型选择器，因为使用JavaScript内置函数getElementsByTag),速度最慢的是Class选择器，其需要通过解析HTML文档树，并且需要在浏览器内核外递归，这种递归遍历是无法被优化的。 |
| 就需求分析，CSS 的选择器是为了通过语义来渲染样式，而jQuery 的选择器只是为了选出一类DOMElement,执行逻辑操作。但是，在实际开发中，Class 选择器是使用频率较高的类型之一 |
| class选择器在文档中使用频率靠前，这无疑会增加系统的负担，因为每一次使用Class选择器，整个文档就会被解析一遍,并遍历每个节点。因此，建议读者在使用jQuery选择器时，应该注意几个问题。 |
| 第一,多使用id选择器 |
| 第二.少直接使用class选择器 |
| 第三,多用父子关系,少用嵌套关系 |
| 第四,缓存jquery对象 |
| 使用原生选择器 |
| Selectors API是由W3C发起制定的一个标准，致力于让浏览器原生支持Css查询。DOM API模块的核心是两个方法: querySelector() 和querySelectorAll0, 这两个方法能够根据CSS 选择器规范，便捷定位文档中指定元素。其支持的浏览器包括IE8+、Firefox、 Chrome、 Safari 和Operao |
| Document、DocumentFragment、 Element 都实现了NodeSelector 接口，即这三种类型的节点都拥有querySelector(O和querySelectorAll0方法。 |
| querySelector()和querySelectorAlI() 方法的参数必须是符合CSS 选择器规范的字符串，不同的是querySelector(方法返回的是一个元素对象，querySelectorAll0 方法返回的是一个元素集合。 |
| 当然,如果不使用querySelectAll()方法,那么要获得元素集合,需要做更多的工作,一个方法是选择所有的指定元素,然后通过迭代操作过滤出那些不需要的列表元素 |
// function queryseletorAll(){
// let result = [];
// const list = document.getElementsByTagName("li");
// let classname="";
// for(let i=0,len = list.length;i<len;i++){
// classname = list[i].classname;
// //console.log(classname)
// if(classname=="item1"||classname=="item2"){
// result.push(list[i]);
// }
// return result;
// console.log(result)
// }
// }
| 今天的分享就到这里了,下一篇:使用过滤器及操作DOM元素,我们下章再见–2020-5-9 |
