申明:本篇博客是学习舟炬教育课程:全网最详细jQuery讲解的课程笔记。
前言:在华为实习的两个月时间中,接触了jQuery,因为所做的前端工作是基于Angular框架的,本身有许多需求在实现的时候都会比较复杂,在这个过程中,如果遇到比较难实现的需求,就会使用jQuery。这时候的jQuery仿佛是个消防员一样的存在。所以在现在vue等框架盛行的情况下,觉得还是有学习了解jQuery的必要,毕竟它提供了许多实现需求的方式方法,所以可以作为储备来学习。
目录
一、jQuery基础
1、获取jQuery
方式一:官网下载
<script src="../jquery-3.3.1.min.js"></script>
方式二:npm下载安装
方式三:CDN引用(推荐),使用第三方服务器上的jQuery文件,加载速度快。
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
2、jQuery版本介绍
jQuery2.0以上的版本,不兼容IE8及以下版本。
3、jQuery的兼容性引用方式
<body>
<!-- chrome firefox Safari opera IE9+ -->
<!-- [if gt IE 8]> -->
<script src="../jquery-3.3.1.min.js"></script>
<!-- <![endif]-->
<!-- IE8以及以下-->
<!-- [if lte IE 8]>
<script src="../jquery-1.12.4.min.js"></script>
<![endif]-->
</body>
4、jQuery的使用
//jQuery入口
$(document).ready(function(){
//自己的代码
})
//jQuery入口简写
$(function(){
//自己的代码
})
$(document).ready(function(){})事件和window.οnlοad=function(){}的区别:
ready表示页面中DOM加载完毕后触发;
onload表示页面中所有一切加载完毕后触发,包括一些图片资源。所以实际应用中ready更合理实用一些。
5、jQuery的特点
便捷的DOM操作;强大的选择器;链式操作;可靠的事件机制;封装了简单易用的Ajax操作;兼容性处理;丰富的插件。
6、jQuery DOM对象
对于原生方法如:var box = document.querySelector("#app")取得的DOM对象,称为原生DOM对象;
对于jQuery方法如:var $box = $("#app")取得的DOM对象,称为jQuery DOM对象;
jQuery DOM本质上是由该选择器下的所有原生DOM组成的类数组集合(类数组是我自己加的,不知道准不准确)。所以可以通过索引值,将jQuery DOM转换成原生DOM。如:如果该选择器下只有一个原生DOM的话,$box[0]即可。($box是前面选择到的jQuery DOM对象)。
原生DOM对象转换为jQuery DOM对象:$(原生DOM对象),如$(box),用$方法,传入原生DOM对象,即可转换为jQuery DOM对象。
7、jQuery全局对象
引入jQuery之后,即存在了一个全局变量,这个变量的名字叫jQuery,别名是$.所以 $ === jQuery(!!!终于知道$到底是个啥了)
$的作用到底有哪些?根据参数形式不同,$可以实现不同的功能。
===>1、参数是字符串时充当选择器。 如:$("#app").width(100)等
2、参数是对象时,充当方法。将原生DOM对象转换为jQuery DOM对象。其实$(document)本身就是把原生DOM对象document转换成了jQuery DOM对象。
3、参数是字符串,里面是元素标签。可以创建一个DOM元素。如:$("<p>").html("xxx").appendTo("#app").
二、jQuery选择器
特性:js中的选择器与CSS选择器不同,没有优先级之分,谁写在后面,谁就显示;覆盖前面的相同属性。
1、基本选择器
id选择器#Idname、类选择器.className、标签选择器tagName、全局选择器、组合选择器
2、层级选择器
后代元素:selector selector
子元素:selector>selector
并列元素:selectorselector
相邻兄弟元素:selector+selector(后面紧邻的一个兄弟元素)
兄弟元素:selector~selector(后面所有的兄弟元素)
3、筛选选择器
在选择器后加冒号,之后选择第一个:first/最后一个:last/第奇数个:odd/第偶数个:even/第N个:eq(index)索引从零开始/大于某个数:gt/小于某个数:lt/排除:not(选择器)/指定语言:lang(语言)/过滤出锚点正在指向的元素:target/过滤出根元素:root/过滤获取焦点的元素:focus/所有的标题标签:header/:animated正在执行动画(jQuery动画)的元素
4、内容选择器
.contains(text)包含指定文本
.has(selector) 包含满足条件的后代元素的元素
.empty 没有内容也没有子元素
.parent 跟empty相反,有内容或者有子元素
5、可见性选择器
:hidden 不可见元素
:visible 可见元素 感觉还挺有用的,可以把页面里所有的元素圈出来,方便布局和debug
6、属性选择器
可以选择包含某些属性以及满足特定属性正则匹配条件的标签
如:$("img[src*='d'][alter]")表示包含src和alter属性,并且src属性名中包含'd'字符。
[attrName]表示包含该属性;
[attrName=value]等于/[attrName!=value]不等于/[attrName^=value]以。。。开头/[attrName$=value]以。。。结尾/[attrName*=value]包含。。。
7、子元素选择器
$("li:first-child")取所有的li元素的第一个子元素。:last-child和nth-child(index)与之类似。不过此时的index从1开始。此外还有nth-last-child(index),这里是从后往前索引。:only-child表示唯一的子元素。
此外,子元素选择器还有first-of-type/last-of-type/nth-of-type(index)/nth-last-of-type(index)/only-of-type,这一类型的选择器与-child不同的地方在于,-child选择的是所有子元素排序里的某一个,而-of-type选择的是所有子元素里相同元素的排序里的某一个。所以,-child有可能会存在满足排序顺序但是不是满足的元素类型,导致没有元素被选中的结果。而-of-type则不会。
8、表单选择器
:input 表示选择所有的表单控件。有:input/textarea/button/select/form/label/fieldset/legend/optgroup/option/datalist/keygen/output
:text/:password/:radio/:checkbox/:file/:reset 根据input的type值选择
:submit 所有有提交功能的按钮,包括button和input type="submit"
:button 表示选择button元素和input=button
9、表单对象选择器
:disabled/:enabled/:checked/:selected表示选择有相应属性的标签
10、混淆选择器
$.escapeSelector(selector) 当className或者idName有特殊符号时,用混淆选择器完成转义,之后进行字符串拼接,从而完成选择。
三、jQuery属性与样式操作
1、属性操作:两个方法:attr()和prop()
使用方法:$("img").attr("alt")、$("img").prop('alt')
两者的区别在于:attr获取的是所有的属性,包括内置属性和自定义属性,且得到的属性值与设置的属性值完全一致。而prop获取的只有HTML内置属性。如果获取的是一组jQuery对象,则获取的值是第一个对象的属性值。
原生js在操作DOM属性的时候,也有两种方法:对于内置属性,可以直接使用‘.’+属性名的方法,但是对于自定义属性,需要使用getAttribute或者setAttribute。
修改属性值:$("img").attr("title","你好") 可以修改内置属性和自定义属性。$("img").prop("title","我好") 只能修改内置属性。
添加属性值:同上,如果第一个参数不存在,就会添加属性值,同样的,attr可以添加内置属性和自定义属性,而prop只能添加内置属性。(如果使用prop添加自定义属性,则添加不到DOM对象去,但是如果查看该对象的这个属性却还是可以打印得出来。。。。。很神奇,不知道这个点存在的意义是什么。。。。而且removeProp也只能删除这一类由prop添加的自定义属性,并不能删除内置属性。。。。。很神奇)
删除属性值:上面说了removeProp。另外还有removeAttr,这个方法可以删除内置属性和自定义属性。比较靠谱,嗯。
2、CSS类操作
$(document).ready(function(){
//$(this)表示当前点击的元素
//判断该元素中有没有current class
if($(this).hasClass("current")){
//删除class值
$(this).removeClass("current");
} else {
//添加上class值
$(this).addClass("current");
}
//使用toggleClass方法可以切换current类的有无,代替上面判断和操作过程
$(this).toggleClass("current");
})
3、HTML代码/文本/值
获取元素内的内容(包含标签元素文本元素等):.html([html])方法,该方法相当于原生js里的innerHTML方法。该方法传入一个参数时是设置其内容。当添加的内容里有标签的时候,就会显示出该标签。
获取元素内的文本(文本元素):.text([text])方法,该方法相当于原生js里的innerText方法。该方法传入一个参数时是设置其文本内容。如果内容中含有标签,也不会显示标签,而是显示纯文本。
val([val])方法:设置或获取表单控件里的值
四、jQuery样式操作
1、CSS操作
css(attr[,value])获取的是css计算属性,当传入两个参数的时候,可以实现赋值。其参数还可以是一个对象,方便赋值多个属性。
2、位置
offset()方法,返回一个对象,有.left属性和.top属性,获取的是元素的坐标。可以用来设置位置,属性为left/top。
position()方法,返回一个对象,有.left属性和.top属性,获取的是相对于第一个定位的祖先元素的坐标。只能获取位置,不能改变位置。
3、尺寸
width/height:内容的尺寸
innerWidth/innerHeight:内容的尺寸+padding
outerWidth/outerHeight:盒子的尺寸。
五、jQuery中的筛选操作
1、过滤操作
first()/last()/eq()/not()/filter()选取,与not相反/slice()截取/has()包含某个子元素
以上方法的返回值,都是jQuery DOM对象。
2、查找
children([selector]) 获取子元素
find(selector) 获取后代元素
parent([selector]) 获取父元素
parents([selector]) 获取所有的祖先元素(满足条件)
parentsUntil([selector]) 获取祖先元素集合(从父元素到选择器指定的祖先元素(不包括祖先元素自身))
offsetParent() 获取第一个定位的祖先元素
next([selector]) 紧邻在后面的兄弟元素
nextALL([selector]) 后面所有的兄弟元素
nextUntil([selector])
prev([selector]) 紧邻在前面的兄弟元素
prevAll([selector]) 前面所有的兄弟元素
prevUntil([selector])
siblings([selector]) 所有的兄弟元素
closest(selector) 从所有的祖先元素和本身里面找出第一个满足条件
3、串联
add() 把选中的元素加入当前集合
addBack() 把调用该方法的元素加入当前的集合
end() 返回最后一次破坏性操作之前的DOM
contents() 返回所有子节点的集合(包括元素节点、文本节点、注释节点、属性节点)
4、jQuery DOM对象的方法
each() 遍历
map() 返回新的集合
length 不是方法,是属性,表示集合中的元素数量
index() 返回该元素在父元素中的索引位置
get([index]) 返回集合指定索引的dom 对象,还可以把jquery dom集合转为纯数组(不传入参数的时候)
is(selector) 判断该jqdom对象是否满足某个条件,返回的是布尔值。
六、jQuery DOM操作
1、创建元素
$("<tagName>")
2、内部插入
append()
appendTo()
prepend()
prepentTo()
3、外部插入
after()
insertAfter()
before()
insertBefore()
4、包裹
wrap()
wrapAll()
wrapInner()
unwrap()
5、替换
replaceWith() 传入的参数需要是jquery dom,所以需要用$转换。
replaceAll() 其余replaceWith的关系相当于append和appendTo的关系。主语和宾语相反。
6、删除
empty() 清空。
remove() 移除。使用该方法返回的jq dom对象再重新添加到原来的集合时,不具有之前的方法和属性。
detach() 移除。使用该方法返回的jq dom对象再重新添加到原来的集合时,仍然具有之前的方法和属性。
7、克隆
clone()
七、jQuery事件
1、事件绑定
on(event,fn) 标准的绑定方式;
one(event,fn) 只能绑定一次;
on({"event",fn}) 传入对象参数,可以绑定多个事件;
此外,可以将事件作为dom对象的方法连续绑定多个事件,连贯操作。dom.event(fn).event(fn)...
2、解除事件绑定
off()方法
3、事件委派
selector集合.on(event,selector,fn)
4、控制事件触发
selector.trigger("event") 触发selector的event事件。其中,event可以是单击双击等事件。
selector.triggerHandler("event")
trigger和triggerHandler的区别:
1、trigger返回的是jquery dom,可以进行连贯操作,而triggerHandler不行。
2、trigger可以触发元素自带的事件,比如输入框的focus事件,表单按钮的submit事件,而triggerHandler不行。
3、trigger会触发集合中所有元素的事件,而triggerHandler只触发集合中第一个元素的事件。
5、事件列表(新增)
blur([[data],fn]) 失去焦点
focus([[data],fn]) 获取焦点
ready(fn) 页面加载完毕
focusin([data],fn) 获取焦点,绑定给输入框的父元素
focusout([data],fn) 失去焦点,绑定给输入框的父元素
mouseenter([[data],fn]) 代替mouseover(鼠标经过其子元素的时候也会触发),鼠标在该元素里只触发一次,不会受子元素影响。
mouseleave([[data],fn]) 代替mouseout,同上。
hover 鼠标进入和离开时都会触发。mouseenter和mouseleave的集合。
6、事件对象(event对象)属性
event.pageX 鼠标箭头的x坐标(相对于文档,而不是窗口)
event.pageY 鼠标箭头的y坐标(相对于文档,而不是窗口)
target 当前触发事件的元素
which 键盘按键的ascII码
type 事件类型(事件名称,如:keypress click)
preventDefault() 阻止默认事件
stopPropagation() 阻止事件冒泡
在事件执行函数中,使用“return false”,可以同时阻止事件冒泡和默认事件。
八、jQuery动画
这里的jquery动画部分没有学习,主要是因为目前普遍使用CSS3动画。后期在需要的话再考虑学习。
九、jQuery ajax
1、快速请求方法
get() 发起get请求
$.get(url,callback[,dataType])
post() 发起post请求
$.post(url[,data],callback[,dataType])
服务器环境工具:xampp lite控制面板 apache 。。。这个好像是用来连接服务器用的。。。
打开html文件本身就是一次服务器请求
$("#btm00").ready(function(){
$.get("http://localhost/get-content.php?name=Lili&message=hello",function(data){
alert(data);
})
})
这里不需要创建XML Ajax对象,只需要调用jquery里的get()和post()函数。传递的第一个参数是地址,地址的后面用?连接的是传给服务器的参数,第二个参数是回调函数,data是回调函数返回的数据。
post()方法的第一个参数也是地址,第二个参数是传递给服务器的数据,格式是对象{name:"Jack",message:"nihao"}或者字符串"name=Bob&message=Hello World"或者从表单中读取的内容,如果不需要传递的话这个参数可以省略,第三个参数是回调函数。
发起post请求,传递参数
$.post("http://localhost/post-content.php",$("#myForm").serialize(),function(data){
alert(data);
})
2、ajax方法
ajax() 既可以发起get请求,又可以发起post请求。传参是一个对象,对象里面分别为各个关键参数和取值。async:true,表示异步。如果是发起post请求的话,就将type值改成post。data的格式可以是对象,也可以是字符串,所以可以是取自表单的元素。
$.ajax({
url://请求的地址,
type://请求的方式 GET/POST,
async://是否异步,
data://发送的数据,对象或字符串(序列化)
dataType://相应的内容格式,
success://相应成功的回调函数,
error://相应失败的回调函数
})
("#btn01").click(function(){
$.ajax({
url:"http://localhost/get-content.php",
type:"get",
data:{name:"Jim",message:"lala"},
async:true,
success:function(data){
alert(data);
}
})
})
这里的data是传递给服务器的内容,即自动拼接到url后面的内容。其格式可以是对象,也可以是字符串,data:"name=BOB&&message=I LOVE YOU" 或 data:$("#myForm").serialize()
3、表单方法
serialize() 便捷获取有name属性的表单元素的name属性拼接结果(序列化表单)。拼接结果是一个字符串。用来提交。
这样就不需要手动地在访问地址后面拼接传递的内容了。
$.get("http://localhost/get-content.php?"+$("#myForm").serialize(),function(data){
alert(data);
})
4、处理json数据
使用ajax方法,指定dataType值为"json"即可:
$.ajax({
url:"http://localhost/data.json",
type:"get",
async:true,
dataType:"json",
success:function(data){
console.log(data);//这里打印输出的是对象
processData(data);
},
error:function(err){
alert("请求失败");
}
});
function processData(data){
$.each(data,function(index,item){
...
})
}
使用get方法,只需要指定第三个参数"json",就可以。不需要做其他的处理。post方法类似。:
$.get("http://localhost/data.json",processData,"json");
function processData(data){
...
}
十、jQuery 工具方法
1、数组对象方法
$.each(Array,fn(index,item)) 用于遍历数组或类数组对象(如jquery对象、原生dom对象)
$.grep(Array,fn(item,index)) 过滤操作,该方法返回一个新的数组。
var list=[1,2,3,4,5,6,7,8];
//$.grep() 对数组进行过滤
var res=$.grep(list,function(item,index){
return item % 2 === 0;
});
console.log(res);//[2,4,6,8]
$.map(Array,fn(item,index)) 用于遍历数组或类数组对象,与each方法不同的是,map方法会返回一个新的数组,不改变原来的数组。
var res=$.map(list,function(item,index){
return item+4;
})
console.log(res);//[5,6,7,8,9,10,11,12]
$.makeArray(likeArray) 把类数组对象转换为一个纯数组,返回一个新的数组。
var newArr = $.makeArray($("#myList li"));
$.inArray(ele,Array) 返回一个元素在数组中的位置。如果该元素在数组中不存在,则返回-1.
$.merge(Array1,Array2[,Array3...]) 合并数组
没有加$.的方法都是jquery dom的方法
toArray(jquerydom) 把jquerydom转为纯数组,功能与makeArray类似,用法不同。
2、函数方法
$.proxy() 改变函数内的上下文环境(this指向)。类似于原生jquery中的bind方法。
3、类型判断
$.type() 返回参数的类型,如果是数组的话,不会像原生jquery那样返回对象,而是返回array数组。
$.isFunction() 判断参数是不是函数,是则返回true,不是则返回false。
$.isEmptyObject() 判断是不是空的对象。
$.isPlainObject() 判断是不是纯的对象(构造函数是object)。
$.isWindow() 判断是不是window对象。
$.isNumeric() 判断是不是数字,如果是小数也返回true。如果是NaN,返回false。
4、字符串
$.trim() 去除两边的空格。传入的参数是要去除两边空格的字符串。
$.param() 序列化成字符串。传入的参数是对象(包含jquery 对象),将对象序列化成字符串。
console.log($.param({name:"lili",age:100}));
//name:lili&age:100
5、版本
$.fn.jquery 返回当前使用的Jquery版本。
十一、jQuery插件
1、jQuery插件的网站
http://plugins.jquery.com/ 官网 这个是英文的,感觉不是很好用。
http://www.jq22.com/ jQuery插件库 这个是中文的,感觉不错
http://www.htmleaf.com/ jQuery之家 这个比较棒,中文
http://www.jq-school.com/ jQuery-school
2、经典jQuery插件
插件其实就是封装好的特效代码。如何选择插件:1、要有官方网站;2、要定期维护;3、使用数量多。
2.1 select2 下拉框搜索插件推荐
官网 http://select2.org/
github http://github.com/select2/select2
$(dom).select2()
$(dom).select2({
width:,
data:,
ajax:,
...
})
//插件的使用
<head>
<link rel="stylesheet" href="./select2/css/select2.min.css">
//这里引用插件中的css压缩文件
</head>
<body>
<select id="mySelect01">
<option value="1">北京市</option>
<option value="2">上海市</option>
//等等等选择
</select>
<select id="mySelect02"></select>
<select id="mySelect03"></select>
<script src="../jquery/jquery-3.3.1.min.js"></script>
<script src="./select2/js/select2.min.js"></script>
//这里引用插件中的js压缩文件
<script>
$(document).ready(function(){
$("#mySelect01").select2({
width:150
//这里可以配置函数的一些属性,具体有哪些配置,在插件介绍里有
});
//这里直接调用插件中编辑好的函数即可,非常方便
$("mySelect02").select2({
width:150,
data:[
{id:1,text:"小明"},
{id:2,text:"小红"},
//等等选择。这里通过配置插件属性中的data属性完成选项内容的填写。这里的id值就充当了选项的value值。具体开发中,还是需要读懂相关源代码。
]
});
$("mySelect03").select2({
width:150,
ajax:{
url:"http://localhost/address.php",
//这里会发起ajax请求
dataType:"json",
processResults:function(data){
//对响应内容进行处理
var resList=[];
$.each(data,function(index,item){
resList.push({id:item.id,text:item.name})
})
//返回结果
return{
results:resList
}
}
}
})
})
</script>
</body>
2.2 经典datetimepicker时间日期插件
github https://github.com/xdan/datetimepicker
文档 https://xdsoft.net/jqplugins/datetimepicker/
//设置语言
$.datetimepicker.setLocale('zh');
//调用插件
$(dom).datetimepicker({
datepicker:true/false,
timepicker:true/false,
format:"Y-m-d H:i",
value:默认值,
...
})
<h1>datetimepicker时间日期插件</h1>
<hr>
<input type="text" id="datetime">
<input type="text" id="dateInput">
<script src="../jquery/jquery-3.3.1.min.js"></script>
<script src="./datetimepicker/jquery.datetimepicker.full.min.js"></script>
<script>
$(document).ready(function(){
//设置插件的语言
$.datetimepicker.setLocale("zh");
//调用插件
$("#datetime").datetimepicker();
//调用插件,只要日期不要时间
$("datetime").datetimepicker({
timepicker:false,
format:"Y-m-d H:i"
//小写h代表12进制的小时,如果把时分的格式删掉的话,就只显示日期。没有时间
})
})
</script>
2.3 fullpage全屏滚动插件
官网 https://alvarotrigo.com/fullpage/zh/ 这个网页中使用了谷歌的插件,所以需要配置vpn才能正常访问
github https://github.com/alvarotrigo/fullpage.js/
自定义的导航,需要写在包裹fullpage的外面。
<head>
<link rel="stylesheet" href="./fullpage/jquery.fullpage.min.css">
<style>
#fullpage{
text-align:center;
color:#fff;
}
h1{
font-size:80px;
}
h2{
font-size:60px;
}
#nav{
position:fixed;
top:20px;
left:20px;
z-index:1000;
//置于顶层
}
#nav a{
color:#fff;
text-decoration:none;
padding:0 20px;
}
.page01{
background:url("../images/10.jpge") no-repeat center/cover;
//将第一页的背景换成一张图片
}
</style>
</head>
<body>
<div id="nav">
<a href="#firstPage">首页</a>
<a href="#secondPage">介绍</a>
<a href="#thirdPage">功能</a>
<a href="#forthPage">演示</a>
//这里的每一个类都与插件属性anchors中的每一个锚点对应,实现跳转
</div>
<div id="fullpage">
<div class="section page01">
//默认的幻灯片类名需要是section,不过也可以更改
<h1>欢迎使用fullpage</h1>
</div>
<div class="section page02">
<div class="slide"><h2>第二页 第一张</h2></div>
//默认的子幻灯片类名需要是slide,不过也可以更改
<div class="slide"><h2>第二页 第二张</h2></div>
<div class="slide"><h2>第二页 第三张</h2></div>
<div class="slide"><h2>第二页 最后 一张</h2></div>
</div>
<div class="section page03">
<h2>第三页</h2>
</div>
<div class="section page04">
<h2>最后一页</h2>
</div>
</div>
<script src="../jquery/jquery-3.3.1.min.js"></script>
<script src="./fullpage/jquery.fullpage.min.js"></script>
<script>
$(document).ready(function(){
//调用插件
$("#fullpage").fullpage({
navigation:true,
//侧边的导航栏显示
sectionsColor:["orange","skyblue","pink","#369"],
//设置四张幻灯片的背景颜色
navigationTooltips:['第一页','第二页','第三页','第四页'];
//导航栏提示
anchors:["firstPage","secondPage","thirdPage","forthPage"];
//设置锚点名称,将四张幻灯片与相应的a元素绑定
});
})
局限:风格不一定与自身开发的网页风格一致。有可能会导致代码冗余。
2.4 lazyload图片懒加载
图片懒加载:鼠标滚动到相应位置之前,不加载该位置的图片。当鼠标滚动到相应位置时,才加载图片。缓解服务器压力。
官网 https://appelsiini.net/projects/lazyload/
github https://github.com/tuupola/jquery lazyload/tree/2.x
<head>
body{
background-color:#ccc;
}
.container{
margin:0 auto;
width:920px;
}
.img-wrapper:
{
font-size:0;
}
.img-item{
display:inline-block;
margin-right:20px;
margin-bottom:20px;
width:400px;
padding:20px;
background-color:#fff;
}
.img-item img{
width:400px;
height:300px;
background:url("../images/loading.gif") no-repeat;
}
</head>
<body>
<div class="container">
<h1>图集</h1>
<hr>
<div class="img-wrapper">
<div class="img-item">
<img data-src="../images/1.jpeg">
</div>
<div class="img-item">
<img data-src="../images/2.jpeg">
</div>
<div class="img-item">
<img data-src="../images/3.jpeg">
</div>
<div class="img-item">
<img data-src="../images/4.jpeg">
</div>
<div class="img-item">
<img data-src="../images/5.jpeg">
</div>
<div class="img-item">
<img data-src="../images/6.jpeg">
</div>
...
</div>
<script src="../jquery/jquery-3.3.1.min.js"></script>
<script src="./lazyload/lazyload.min.js"></script>
<script>
$(document).ready(function(){
$(".img-wrapper img").lazyload();
})
</body>
2.5 layer弹窗
官网 http://layer.layui.com/?alone
github https://github.com/sentsin/layer
<body>
<button id="btn00">alert</button>
<button id="btn01">confirm</button>
<button id="btn02">msg提示</button>
<button id="btn03">tips</button>
<button id="btn04">load</button>
<button id="btn05">自定义弹框</button>
<button id="btn06">网页</button>
<script src="../jquery/jquery-3.3.1.min.js"></script>
<script src="./layer/layer.js"></script>
<script>
$(document).ready(function(){
$("#btn00").click(function(){
//调用插件
layer.alert("警告,失败");
});
$("#btn01").click(function(){
layer.confirm("你确定吗");
});
$("#btn02").click(function(){
layer.msg("提示");
});
$("#btn03").click(function(){
layer.tips("小贴士","#btn03");
});
$("#btn04").click(function(){
var loadEle = layer.load();
//等待两秒后关闭加载效果
setTimeout(function(){
layer.close(loadEle);
},2000)
});
$("#btn05").click(function(){
layer.open({
title:"个人信息",
area:["500px","400px"],
content:"<p>Hello</p>"
//这里的content还可以是jquery dom对象,该对象可以在上文先编辑好。这时属性type需要取除默认值以外的值,其默认值是0,取1时可以正常显示jquery dom对象。
//0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
})
});
$("#btn06").click(function(){
layer.open({
type:2,
title:"网页",
content:"http://www.itxdl.cn",
area:["600px","500px"],
//弹框最大最小化按钮是否显示
maxin:true,
})
})
})
</body>
2.6 nice valldator表单验证
官网 https://validator.niceue.com/
github https://github.com/niceue/nice-validator
<form action="1.php" method="post" id="loginForm">
<table>
<tr>
<td>邮箱:</td>
<td>
<input type="text" name="email">
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" name="pwd">
</td>
</tr>
<tr>
<td>确认密码:</td>
<td>
<input type="password" name="repwd">
</td>
</tr>
<tr>
<td></td>
<td>
<button>注册</button>
</td>
</tr>
</form>
<script>
$(function(){
$("#regForm").validator({
fields:{
//表单验证:验证输入的内容是否符合要求,required参数表示必须验证。另外不同的验证需求可以在官网上查询实现
email:{
rule:"required,email",
ok:"邮箱可用",
tip:"请输入邮箱"
},
pwd:{
rule:"length(6~18)",
msg:"密码必须6-18位",
ok:"密码可用",
tip:"请输入6-18位密码"
},
repwd:{
rule:"match(pwd)",
msg:"两次密码不一致",
ok:"密码确认成功",
tip:"请确认密码"
}
}
})
})
</script>
2.7 jQuery-easing
官网 http://gsgd.co.uk/sandbox/jquery/easing/
github https://github.com/gdsmith/jquery.easing
$(dom).hide(speed,easing,fn)
//hide表示某个jquery动画函数,easing表示的是插件中的某个效果
3、自定义jQuery插件
jQuery.fn.extend() 给 jqueryDom 对象扩展方法(大部分插件)
$.fn.extend({
方法名:function(){}
})
//或者
$.fn.方法名=function(){
}
jQuery.extend() 给jquery对象本身扩展方法
$.extend({
方法名:function(){
}
})
//封装自己的插件 消息滚动插件
<head>
<style>
.wrapper{
margin:100px auto;
padding:800px;
overflow:hidden;
}
.wrapper li{
margin-bottom:10px;
padding:20px;
background-color:#ccc;
}
</style>
</head>
<body>
<ul class="wrapper" id="wrapList">
<li>1 xxxxxxxx xxx xx x x x x x x x .</li>
<li>2 xxxxxxxx xxx xx x x x x x x x .</li>
<li>3 xxxxxxxx xxx xx x x x x x x x .</li>
<li>4 xxxxxxxx xxx xx x x x x x x x .</li>
<li>5 xxxxxxxx xxx xx x x x x x x x .</li>
<li>6 xxxxxxxx xxx xx x x x x x x x .</li>
<li>7 xxxxxxxx xxx xx x x x x x x x .</li>
<li>8 xxxxxxxx xxx xx x x x x x x x .</li>
<li>9 xxxxxxxx xxx xx x x x x x x x .</li>
<li>10 xxxxxxxx xxx xx x x x x x x x .</li>
<li>11 xxxxxxxx xxx xx x x x x x x x .</li>
<li>12 xxxxxxxx xxx xx x x x x x x x .</li>
</ul>
<script src="../jquery/jquery.3.3.1.min.js"></script>
<script>
//定义插件
$.fn.scrollList=function(options){
var obj=options?options:{};
var limit = obj.limit ? obj.limit :4;
//默认值 页面中显示几个项目
var speed = obj.speed ? obj.speed : 3000;
//默认值 滚动的速度
var type = obj.type ? obj.type : 0;
//滚动的形式 默认是0
//获取其中一个项目的元素对象
var itemEle = $(this).children().first();
//获取项目元素的高度
var itemHeight = itemEle.outerHeight()+parseFloat(itemEle.css("margin-top"))+parseFloat(itemEle.css("margin-bottom"));
//设置包裹元素的高度
$(this).height(itemHeight*limit);
//包裹的元素
var that = $(this);
//判断滚动的动画形式
switch(type){
case 1:
setInterval(function(){
that.children().last().fadeTo(0,0).hide().prependTo(that).slideDown(400).fadeTo(600,1);
},speed);
break;
case 2:
that.children().slice(limit).hide();
//隐藏后面
setInterval(function(){
that.children().eq(limit-1).fadeOut(600,function({
that.children().last().prependTo(that).delay(200).slideDown(400);
})
},speed);
break;
default:
//定时动起来
setInterval(function(){
that.children().last().hide().prependTo(that).slideDown(500);
},speed)
break;
}
}
//调用插件
$(document).ready(function(){
$("#wrapList").scrollList({
limit:4,
speed:3000,
type:0,//代表不同滚动形式
})
})
</body>
(function($){
//定义插件
$.fn.scrollList=function(options){
var obj=options?options:{};
var limit = obj.limit ? obj.limit :4;
//默认值 页面中显示几个项目
var speed = obj.speed ? obj.speed : 3000;
//默认值 滚动的速度
var type = obj.type ? obj.type : 0;
//滚动的形式 默认是0
//获取其中一个项目的元素对象
var itemEle = $(this).children().first();
//获取项目元素的高度
var itemHeight = itemEle.outerHeight()+parseFloat(itemEle.css("margin-top"))+parseFloat(itemEle.css("margin-bottom"));
//设置包裹元素的高度
$(this).height(itemHeight*limit);
//包裹的元素
var that = $(this);
//判断滚动的动画形式
switch(type){
case 1:
setInterval(function(){
that.children().last().fadeTo(0,0).hide().prependTo(that).slideDown(400).fadeTo(600,1);
},speed);
break;
case 2:
that.children().slice(limit).hide();
//隐藏后面
setInterval(function(){
that.children().eq(limit-1).fadeOut(600,function({
that.children().last().prependTo(that).delay(200).slideDown(400);
})
},speed);
break;
default:
//定时动起来
setInterval(function(){
that.children().last().hide().prependTo(that).slideDown(500);
},speed)
break;
}
}
})(jQuery)
4、jQuery UI
官网 https://jqueryui.com/ 版本很久没更新了,使用得越来越少。
5、jQuery Mobile
官网 https://jquerymobile.com 针对移动端 设计上有些过时,官网很久没有更新。
6、Sizzle
官网 https://sizzlejs.com
独立出来的jquery选择器
7、Zepto
官网 http://zeptojs.com
与jQuery区别:https://www.zhihu.com/question/25379207
由于不做兼容性处理(只针对IE9以上及其他主流浏览器)而且删除了jquery动画部分,所以相对于jquery来说体积很小。
使用时,可以直接在引用处代替jquery路径,使用方法与jquery基本一致。
注意:最好使用CSS3的选择器。