jQuery基本概念
学习目标:学会如何使用jQuery,掌握jQuery的常用api,能够使用jQuery实现常见的效果。
为什么要学习jQuery?
【01-让div显示与设置内容.html】
使用javascript开发过程中,有许多的缺点:
1. 查找元素的方法太少,麻烦。
2. 遍历伪数组很麻烦,通常要嵌套一大堆的for循环。
3. 有兼容性问题。
4. 想要实现简单的动画效果,也很麻烦
5. 代码冗余。
jQuery初体验
【02-让div显示与设置内容.html】
$(document).ready(function () {
$("#btn1").click(function () {
//隐式迭代:偷偷的遍历,在jQuery中,不需要手动写for循环了,会自动进行遍历。
$("div").show(200);
});
$("#btn2").click(function () {
$("div").text("我是内容");
});
});
优点总结:
1. 查找元素的方法多种多样,非常灵活
2. 拥有隐式迭代特性,因此不再需要手写for循环了。
3. 完全没有兼容性问题。
4. 实现动画非常简单,而且功能更加的强大。
5. 代码简单、粗暴。
没有对比,就没有伤害,有了对比,处处戳中要害。
什么是jQuery?
jQuery的官网 http://jquery.com/
jQuery就是一个js库,使用jQuery的话,会比使用JavaScript更简单。
js库:把一些常用到的方法写到一个单独的js文件,使用的时候直接去引用这js文件就可以了。(animate.js、common.js)
我们知道了,jQuery其实就是一个js文件,里面封装了一大堆的方法方便我们的开发,其实就是一个加强版的common.js,因此我们学习jQuery,其实就是学习jQuery这个js文件中封装的一大堆方法。
jQuery的版本
官网下载地址:http://jquery.com/download/
jQuery版本有很多,分为1.x 2.x 3.x
大版本分类:
1.x版本:能够兼容IE678浏览器
2.x版本:不兼容IE678浏览器
1.x和2.x版本jquery都不再更新版本了,现在只更新3.x版本。
3.x版本:不兼容IE678,更加的精简(在国内不流行,因为国内使用jQuery的主要目的就是兼容IE678)
关于压缩版和未压缩版
jquery-1.12.4.min.js:压缩版本,适用于生产环境,因为文件比较小,去除了注释、换行、空格等东西,但是基本没有颗阅读性。
jquery-1.12.4.js:未压缩版本,适用于学习与开发环境,源码清晰,易阅读。
jQuery的入口函数
使用jQuery的三个步骤:
1. 引入jQuery文件
2. 入口函数
3. 功能实现
关于jQuery的入口函数:
//第一种写法
$(document).ready(function() {
});
//第二种写法
$(function() {
});
//常用第二种写法
jQuery入口函数与js入口函数的对比
1. JavaScript的入口函数要等到页面中所有资源(包括图片、文件)加载完成才开始执行。
2. jQuery的入口函数只会等待文档树加载完成就开始执行,并不会等待图片、文件的加载。
jQuery对象与DOM对象的区别(重点)
1. DOM对象:使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
2. jQuery对象:jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。
3. jQuery对象其实就是DOM对象的包装集(包装了DOM对象的集合(伪数组))
4. DOM对象与jQuery对象的方法不能混用。
DOM对象转换成jQuery对象:【联想记忆:花钱】
var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM对象转jQuery对象
var div1 = document.getElementById("one");
var $div1 = $(div1)
console.log($div1)
jQuery对象转换成DOM对象:
var $li = $(“li”);
//第一种方法(推荐使用)
$li[0]
//第二种方法
$li.get(0)
//1.用下标来取出来
var $divs = $('div')
console.log($divs);
var div1 = $divs[0];
console.log(div1);
//2.用JQuery的方法 get();
var div2 = $divs.get(1);
console.log(div2);
【练习:隔行变色案例.html】
text样式和CSS样式
css()方法设置参数为要获取值的样式名。
-
获取边框这样的样式值,一定要记得给一个准确的边框。(上下左右)
-
获取包含了多个dom元素的JQ对象的样式,只能获取到第一个dom对象的样式。
-
设置样式:css(‘样式名‘,‘样式值‘)
-
设置多样式
$('#div').css({ width:300, 'height':'300px', 'background-color':'green' 'boder-top-width':'10px', });
text()
选择器
什么是jQuery选择器
jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。注意:jQuery选择器返回的是jQuery对象。
jQuery选择器有很多,基本兼容了CSS1到CSS3所有的选择器,并且jQuery还添加了很多更加复杂的选择器。【查看jQuery文档】
jQuery选择器虽然很多,但是选择器之间可以相互替代,就是说获取一个元素,你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。
基本选择器
名称 | 用法 | 描述 |
---|---|---|
ID选择器 | $(“#id”); | 获取指定ID的元素 |
类选择器 | $(“.class”); | 获取同一类class的元素 |
标签选择器 | $(“div”); | 获取同一类标签的所有元素 |
并集选择器 | $(“div,p,li”); | 使用逗号分隔,只要符合条件之一就可。 |
交集选择器 | $(“div.redClass”); | 获取class为redClass的div元素 |
总结:跟css的选择器用法一模一样。
层级选择器
名称 | 用法 | 描述 |
---|---|---|
子代选择器 | $(“ul>li”); | 使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素 |
后代选择器 | $(“ul li”); | 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 |
跟CSS的选择器一模一样。
过滤选择器
这类选择器都带冒号:
名称 | 用法 | 描述 |
---|---|---|
:eq(index) | $(“li:eq(2)”).css(“color”, ”red”); | 获取到的li元素中,选择索引号为2的元素,索引号index从0开始。 |
:odd | $(“li:odd”).css(“color”, ”red”); | 获取到的li元素中,选择索引号为奇数的元素 |
:even | $(“li:even”).css(“color”, ”red”); | 获取到的li元素中,选择索引号为偶数的元素 |
【案例:隔行变色】
筛选选择器(方法)
筛选选择器的功能与过滤选择器有点类似,但是用法不一样,筛选选择器主要是方法。
名称 | 用法 | 描述 |
---|---|---|
children(selector) | $(“ul”).children(“li”) | 相当于$(“ul>li”),子类选择器 |
find(selector) | $(“ul”).find(“li”); | 相当于$(“ul li”),后代选择器 |
siblings(selector) | $(“#first”).siblings(“li”); | 查找兄弟节点,不包括自己本身。 |
parent() | $(“#first”).parent(); | 查找父亲 |
eq(index) | $(“li”).eq(2); | 相当于$(“li:eq(2)”),index从0开始 |
next() | $(“li”).next() | 找下一个兄弟 |
prev() | $(“li”).prev() | 找上一次兄弟 |
【案例:下拉菜单】this+children+mouseenter+mouseleave
【案例:突出展示】siblings+find
【案例:手风琴】next+parent
【案例:淘宝精品】index+eq
MOUSEOVER 和 MOUSESEENTER 事件触发
mouseover 事件在鼠标移动到选取的元素及其子元素上时触发
mouseenter 事件只在鼠移动到选取的元素上时触发
**以后如果有鼠标移入事件,请使用mouseenter,而不是mouseover **
鼠标离开事件请使用mouseleave,而不是mouseout
Class操作
//添加类
$(function () {
$("input").eq(0).click(function () {
// 添加一个类
$("li").addClass("basic");
//也可以添加多个类
$("li").addClass("basic fontSize30 width200");
});
//移除类
$("input").eq(2).click(function () {
//移除一个类
$("li").removeClass("bigger");
//也可以移除多个类
$("li").removeClass("basic fontSize30 width200");
});
//判断类
//判断一个元素有没有某个类,如果【有】就返回ture,【无】就返回false
$("input").eq(3).click(function () {
//移除一个类
console.log($("li").hasClass("bigger"));;
});
//切换类
//如果元素有这个类就移除这个类,如果没有这个类就添加这个类
$("input").eq(4).click(function () {
//判断li有没有basic类,如果有,就移除他,如果没有,添加他
//toggle
$("li").toggleClass("basic");
});
【案例】Tab栏切换
jQuery 动画
-
jQuery 提供了三组基本动画,这些动画都是标准的、有规律的效果,jQuery还提供了自定义动画的功能。
-
演示动画效果
三组基本动画
-
显示(show)与隐藏(hide)是一组动画;
-
滑入(slideDown)与滑出(slideUp)与切换(slideToggle),效果与卷帘门类似
-
淡入(fadeln)与淡出(fadeOut)与切换(fadeToggle)
$obj.show([speed],[callback]); // speed(可选):动画的执行时间 //1.如果不传,就没有动画效果。如果是slide和fade系列,会默认为normal //2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐) //3.固定字符串,slow(600)、normal(400)、fast(200),如果传其他字符串,则默认为normal。 //callback(可选):执行完动画后执行的回调函数 slideDown();slideUp();slideToggle();同理 fadeIn();fadeOut();fadeToggle();同理
-
/*******************************显示和隐藏*****************************/
$(function(){
//1.显示show();
//没有参数就没有效果,想要动画参数就要给他参数;
$('#show').click(function(){
$('#div1').show(2000);
$('#div1').show('fast'); //相当于给了他200毫秒。 如果代表时长的单词写错了,就相当于写了一个normal。
//加回调函数
$('#div1').show(2000,function(){
alert('动画执行完毕了...');
});
});
//2.隐藏hide()
$('#hide').click(function(){
$('#div1').hide(2000);
//加回调函数
$('#div1').hide(2000,function(){
alert('动画隐藏了...');
});
});
//toggle 切换
$('#toggle').click(function(){
//如果元素是隐藏状态就动画显示;如果元素是显示状态就动画隐藏
$('#div1').hide(2000);
});
});
/*******************************滑入和滑出*****************************/
$(function(){
//滑入
$('#slideDown').click(function(){
/*
slideDown(参数1,参数2);
参数1:动画执行的时长
参数2:动画执行完毕后的回调函数
*/
$('#div1').slideDown();//没有给参数,相当于给了normal代表的400毫秒
$('#div1').slideDown(2000,function(){
alert('动画执行完毕了...');
});
//滑出
$('#div1').slideUp();//没有给参数,相当于给了normal代表的400毫秒
$('#div1').slideUp(2000,function(){
alert('动画执行完毕了...');
});
//切换
$('#div1').slideToggle(2000);
});
});
/*******************************自定义动画*****************************/
$(selector).animate({params},[speed],[easing],[callback]);
//{params}:要执行动画的CSS属性,带数字(必选)
//speed:执行动画时长(可选)
//easing:执行效果,默认为swing(缓动) 可以是linear(匀速)
$(function(){
//自定义动画
//参数1:必选的 对象 代表的是需要做动画的属性
//参数2:可选的 代表执行动画的时长
//参数3:可选的 easing 代表的是缓动还是匀速 linear swing
$('#lr800').click(function(){
//让id为div1的元素动画移动到800那个位置
$('#div1').animate({
left:800,
width:200;
height:200;
opacity:0.5
},2000,'linear',function (){
alert('动画执行完毕了..');
});
});
});
/*******************************动画队列与停止动画*****************************/
//在同一个元素上执行多个动画,那么对于这个动画来说,后面的动画会被放到动画对列中,等前面的动画执行完成了才会执行(联想:火车进站)
//stop方法:停止动画效果
stop(clearQueue,jumpToEnd);
//第一个参数:是否清楚队列
//第二个参数:是否跳转到最终效果
//如果stop()方法不写参数,默认就是两个false.
$('stop').click(function (){
$('div').stop(true,false);
});
jQuery节点操作
创建节点
//$(htmlStr)
//htmlStr:html格式的字符串
$('<span-这是一个span元素</span-');
append appendTo 在被选元素的结尾插入内容
prepend prependTo 在被元素的开头插入内容
//原生JS中创建节点:document.write();innerHTML;document.createElement();
//JQ中如何创建节点?
// 1.html() 2.$()
//1.html()
//1.1 获取内容:html()方法不给参数 --- 获取到元素的所有内容
$('#div1').html()
//1.2设置内容:html()方法给参数 --- 会把原来的内容给覆盖
//如果设置的内容中包含了标签,是会把标签给解析出来的
$('#div1').html('我是设置的内容');
//2.$()
//确实能创建元素,但是创建的元素只存在于内存中,如果要在页面上显示,就要追加
var $link = $('<a> 我是新闻 </a>') //创建元素
$('#div1').append($link); //追加元素
***************************添加节点的方式*************************
//1.append()
//父元素.append(子元素); --- 作为最后一个子元素添加
//1.新创建一个li标签,添加到ul1中的去
//2.把ul1中已经存在的li标签添加到ul1中去,剪切后作为最后一个子元素添加
//3.把ul2中已经存在的li标签添加到ul1中去,剪切后作为最后一个子元素添加
$('#ul1').append($liNew);
//2.prepend()
//父元素.append(子元素); --- 作为第一个子元素添加
//1.新创建一个li标签,添加到ul1中的去
//2.把ul1中已经存在的li标签添加到ul1中去,剪切后作为第一个子元素添加
//3.把ul2中已经存在的li标签添加到ul1中去,剪切后作为第一个子元素添加
//3.before()
//元素A.before(元素B); --- 把元素B插入到元素A的前面,作为兄弟元素添加
//after()
//元素A.after(元素B); --- 把元素B插入到元素A的后,作为兄弟元素添加
//appendTo();
//子元素.appendTo(父元素); --- 把子元素作为父元素的最后一个子元素添加
$liNew.appendTo($('#ul1'));
***************************************表格生成案例********************
//需求:点击获取数据按钮,根据data中数组里面的数据来给tbody追加tr
//data这个数组,有多少个元素,就生成多少个tr,每一个元素又是一个对象,所以对象有多少个键值对应就有多少个td.
//给获取数据按钮设置一个点击事件。
$('#j_btnGetData').click(function(){
//1. html()方法
//设置内容,内容中有标签会解析,会覆盖原来的内容 --- 所以一次性把所有TR全部获取到再复制
var list = [];
for(var i = 0 ; i < data.length ; i++ ){ //遍历数组
//生成tr
list.push("<tr>");
//生成td
for(var key in data[i]){
list.push("<td>");
list.push("data[i][key]");
list.push("<td>");
}
list.push("</tr>");
}
list.join(""); //用join方法并给一个空字符串的方式,把数组里的数据连接成一个字符串
$('#j_tbData').html();//找到需要填充的地方,然后用html方法覆盖
// $()方式
for(var i = 0 ; i < data.length ; i++ ){ //遍历数组
var $tr = $("<tr><td>"+data[i]['name']+"</td><td>"+data[i]['url']+"</td><td>"+data[i]['type']+"</td></tr>");
//把创建出来的tr添加到tb中去
$('#j_btnGetData').append($tr);
}
});
*********************清空节点***********
清空元素:empty()
移除节点:remove()
***************************************
//清空ul
//$('#ul1').html(''); --- 不推荐使用,有可能会造成内存泄漏,不安全
$('#ul1').empty();//推荐使用,不仅可以清空元素,还可以清空元素上面的事件
//移除某一个元素
$('#li3').remove(); //自杀
//移除ul,但只能获取li3这个标签
$('#li3').parent().remove();
*****************克隆节点**********************
//jQuery中克隆节点:clone()
//只存在于内存中,如果要在页面上显示,就应该追加到页面是
//clone()方法参数不管是ture 还是 false,都是会克隆到后代节点的
//区别在于:参数是ture表示会把事件一起克隆到, 如果参数是false就不会克隆事件,不给参数默认是false
var $cloneDiv = $('#Div1').clone(); //克隆节点
//修改克隆节点的id
$cloneDiv.attr('id','div2');
$('body').append($cloneDiv); //追加节点到body中
**********************设置/获取表单元素内容**************
//原生JS是通过value属性来获取或者设置表单元素的值
//jQ中如何设置或者获取表单元素的值呢? --- val();
//val()不给参数就是获取,给参数就是设置
$('#text').val();
$('#text').val(1);
**********************jQ操作属性**************
//jQ中操作属性:attr() removeAttr()
$('img').attr('src','992.gif');//以前有src属性,更改这个属性
$('img').attr('aaa','哈哈哈');//修改自定义属性
$('img').attr('bbb','bbb');//如果元素原来没有这个属性,那就是添加属性
//设置多属性
$('img').attr({
src:'992.gif',
aaa:'hahha',
bbb:'bbb'
});
//获取属性
//自带属性可以获取;自定义的属性也可以获取;如果没有这个属性,获取到的值就是undefined;
//attr()设置的属性也可以获取
$('img').attr('src'); --- //给一个属性名就可以返回属性值
//移除属性
$('img').removeAttr('src');
//移除多属性
$('img').removeAttr({
src:'992.gif',
aaa:'hahha',
bbb:'bbb'
});
**********************prop()属性**************
在jQuery1.6之后,对于checked、selected、disabled这类boolean类型的属性来说,不能用attr方法,只能用prop方法。
//设置属性
$(':checked').prop('checked',true);
//获取属性
$(':checked').prop('checked'); //返回true或者false
*********************************************
//checked属性写在元素身上就表示选中,没有写在元素的身上就表示没有选中
//原生JS是给他设置ture或者false,取值也是得到ture或者false
document,getElementById("btn1").onclick = function(){
//设置操作
document,getElementById("ckb1").checked = false;
//获取操作
document,getElementById("ckb1").checked;
};
$('#ckb1').prop('checked'); --- 如果多选框是选中状态返回一个true;如果多选框是取消状态那返回一个false.
jQuery尺寸和位置操作
width方法和height方法
-
设置或者获取高度,不包括内边距、边框和外边距
//带参数表示设置的高度 $('img').height(200); //不带参数获取高度 $('img').width(200);
-
获取网页的可视区宽高
//获取可视区宽度 $(window).width(); //获取可视区高度 $(window).height();
innerWidth/innerHeight/outerWidth/outerHeight
innerWidth()/innerHeight() 方法返回元素的宽度/高度(包括内边距)
outerWidth()/outerHeight() 方法返回元素的宽度/高度(包括内边距和边框)
outerWidth(true)/outerHeight(true) 方法返回元素的宽度/高度(包括内边距、边框和外边距)
//1.获取id为one的div的宽高
$('#one').css('height');
$('#one').css('width');
//2.width() height()
//获取或设置元素的宽高的,这个宽高不包括padding/border/margin
$('img').height(200);
$('img').width(200);
//3.innerWidth()/innerHeight()
//方法返回元素的宽度/高度(包括内边距)
$('#one').innerWidth();
$('#one').innerHeight();
offset方法和position方法
-
offset方法获取元素距离document的位置
-
position方法获取的是元素距离有定位的父元素(offsetParent)的位置。
//获取元素距离document的位置,返回值为对象:{left:100,top:100} $(selector).offset(); //获取相对于其最近的有定位的父元素的位置 $(selector).position();
scrollTop 与scrollLeft
-
设置或者获取垂直滚动条的位置
//获取页面被卷曲的高度 $(window).scrollTop() ; $('#div1').scrollTop(); $('#div1').scrollTop(200); --- 可以设置值 //获取页面被卷曲的宽度 $(window).scrollLeft()
-
on注册事件(重点)
- jQuery用on统一了所有事件的处理方法
- 最现代的方式,兼容zepto,强烈建议使用
on注册简单事件
//表示给$(selector)绑定事件,并且由自己触发,不支持动态绑定
$(selector).on('click',function(){});
on注册事件委托
//表示给$(selector)绑定代理事件,当必须是它的内部元素span才能触发这个事件,支持动态绑定
$(selector).on('click','span',function(){});
$('body').on('click','div,span',function(){ // 事件名称,要触发这个事件的子元素,事件处理程序
console.log("单击事件。");
});
事件委托原理
//事件委托原理
var ul = document.querySelector('#url');
ul.onclick = function(e){
if(e.target.tagName.toLowerCase() === 'li'){
console.log(e.target);
}
}
事件解绑
- off方式(推荐)
//解绑匹配元素的所有事件
$(selector).off();
//解绑匹配元素的所有click事件
$(selector).off('click');
触发事件
$(selector).click(); //触发click事件
$(selector).trigger('click');
//事件触发 trigger
//a.代码的方式来触发事件
//b.可以使用他来触发自定义事件
***********************
//给div注册一个自定义事件
$('#one').on('linge',function(){
console.log("啦啦啦,我是林哥事件");
});
$('#one').on('click',function(){
var res = confirm('请问林哥帅吗');
if(res){
//触发自定义的linge事件。
$('#one').trigger('linge');
}
});
jQuery事件对象
- jQuery事件对象其实就是js事件对象的一个封装,处理了兼容性
//screenX和screenY 触发事件哪一点 距离应屏幕最左上角的值
//clientX和clientY 触发事件哪一点 距离页面左上角的位置(忽视滚动条)
//pageX和pageY 触发事件哪一点 距离页面最顶部的左上角的位置(会计算滚动条的距离)
//event.stopPropagation() 阻止事件冒泡行为
//event.preventDefault() 阻止浏览器默认行为 --- 比如a标签的自动跳转
//return false:既能阻止事件冒泡,又能阻止浏览器默认行为
//event.keyCode 按下的键盘代码
1.什么是事件对象
注册一个事件,系统就会帮我们生成一个对象记录这个事件触发时候的一些信息,比如触发事件的时候有没有按住某个键,再比如触发这个事件的时候的一些坐标信息..
jQuery的事件对象是对原生js对象的一个封装,帮你处理好了兼容性。
--- jQuery中用事件参数e来获取 ---
$('#one').on('click',function(e){
});
//阻止事件冒泡行为 --- 给父元素一个事件,再给子元素一个事件。一般来说,待触发子元素的事件执行完毕之后会接着执行父元素的触发事件。如果不想这样,则需阻止事件冒泡行为
$('#one').on('click',function(){ //父元素事件
alert('我是父元素');
});
$('#btn1').on('click',function(e){ //父元素事件
alert('我是子元素');
e.stopPropagation(); //阻止事件冒泡
});
jQuery补充知识点
链式编程
- 通常情况下,只有设置操作才能把链式编程延续下去,因为获取操作的时候,会返回获取到的相应值,无法返回jQuery对象
end(); //筛选选择器会改变jQuery对象的DOM对象,想要回复到上一次的状态,并且返回匹配元素之前的状态。**************************************************************************************
1.Q:什么时候可以链式编程?
如果给元素调用一个方法,这个方法有返回值,并且返回值是一个jQuery对象,那就可以继续再调用jQuery方法。
2.必须是jQuery对象才能调用出jQuery方法
3.有些时候我们一个方法返回的确实是一个jQuery对象,但是这个对象又不是我们想要的对象,那这个时候就不要再继续点下去了。
4.end(); --- 回到上一个状态
5.end()方法也是jQuery方法,那他也需要一个jQuery对象才能点出来。
**************************************************************************************
each方法
- jQuery发隐式迭代会对所有的DOM对象设置相同的值,但是如果我们需要给每一个对象设置不同的值时候,就需要自己进行迭代了
作用:遍历jQuery对象集合,为每个匹配的元素执行一个函数
//参数1:当前元素在所有匹配元素中的索引号
//参数2:表示当前元素(DOM对象)
$(selector).each(function(index,element){});
案例:迭代
多库共存
- jQuery使用作为标示符,但是如果与其他框架中的冲突时,jQuery可以释放$符的控制权
var c = $.noConflict(); //释放$的控制权,并且把$的能力给了c
1.如何查看jQuery的版本?
console.log(jQuery.fn.jquery) ;
console.log(jQuery.prototype.jquery) ;
console.log($.fn.jquery) ;
console.log($.prototype.jquery) ;
2.如果引入了多个jQuery文件,那$使用的是哪一个jQuery文件中的呢?
哪个文件后引入,使用的$就是哪个的
3.多库共存
. n o C o n f l i c t ( ) ; / / 把 .noConflict(); // 把 .noConflict();//把符号的控制权给释放了
var _$ = $.noConflict();
$.noConflict(); //3.0.0版本jQuery文件把$符号的控制权给释放了
console.log(jQuery.fn.jquery) ; //3.0.0
console.log($.fn.jquery) ; //1.12.4
var _$ = $.noConflict();
console.log(_$.fn.jquery) ; //3.0.0
(function($){
//在这个自执行函数中,就可以继续使用$了
}(_$));
插件
常用插件
插件:jquery不可能包含所有的功能,我们可以通过插件扩展jquery的功能。
jQuery有着丰富的插件,使用这些插件能给jQuery提供一些额外的功能。
jquery.color.js
animate不支持颜色的渐变,但是使用了jquery.color.js后,就可以支持颜色的渐变了。
使用插件的步骤
1. 引入jQuery文件
2. 引入插件(如果有用到css的话,需要引入css)
3. 使用插件
jquery.lazyload.js
懒加载插件
jquery.ui.js插件
jQueryUI专指由jQuery官方维护的UI方向的插件。
官方API:http://api.jqueryui.com/category/all/
其他教程:jQueryUI教程
基本使用:
2. 1. 引入jQueryUI的样式文件
2. 引入jQuery
3. 引入jQueryUI的js文件
4. 使用jQueryUI功能
使用jquery.ui.js实现新闻模块的案例
制作jquery插件
原理:jquery插件其实说白了就是给jquery对象增加一个新的方法,让jquery对象拥有某一个功能。
//通过给$.fn添加方法就能够扩展jquery对象
$.fn. pluginName = function() {};
制作手风琴插件