jQuery

什么是jQuery?

jQuery是一个快速的、轻量的、功能丰富的js库。

jQuery的官网 http://jquery.com/

jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。

js库：把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。（animate.js、common.js）。

jquey和js的关系

1 就jq底层是计算，就是把js进行了封装。

2jq能够很方便获取节点，发送ajax。

为什么要学jQuery

使用JS操作DOM的时候，会遇到以下的一些缺点：

1.获取元素的方法太少且长，麻烦。

2.遍历伪数组很麻烦，通常要嵌套一大堆的for循环。

3.注册的事件会覆盖。

4.有兼容性问题。

5.实现动画很麻烦

伪数组：拥有length，可以通过下表获取元素，但是不能使用数组的方法。

使用jQuery的优点

1.获取元素的方式非常的简单，而且非常的丰富

2.jQuery的隐式迭代特性，不再需要书写for循环语句。

3.使用jQuery完全不用考虑兼容性问题。

4.jQuery提供了一系列动画相关的函数，使用非常方便。

版本介绍

官网下载地址：http://jquery.com/download/

jQuery版本有很多，分为1.x 2.x 3.x

大版本分类：

1.x版本：能够兼容IE678浏览器（最终版本1.12.4）

2.x版本：不兼容IE678浏览器（最终版本2.2.4）

//jQuery目前正在更新的版本

3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）,3.x版本只是在原来的基础上增加了一些新的特性。

关于压缩版和未压缩版

jquery-1.12.4.min.js:压缩版本，适用于生产环境，因为文件比较小，去除了注释、换行、空格等东西，但是基本没有可阅读性。

jquery-1.12.4.js:未压缩版本，适用于学习与开发环境，源码清晰，易阅读。

Jquery的引入

引入本地jquery包

入口函数

入口函数的好处：

1.等待文档加载完成，保证能够获取到元素

2.形成了一个沙箱，防止全局变量污染。

两种写法：

//第一种写法

$(document).ready(function() {

});

//第二种写法

$(function() {

});

jQuery入口函数与js入口函数的对比

1. JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。

2. jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

jQuery对象与DOM对象

基本概念：

1.DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。

2.jQuery对象：jquery对象就是使用jquery的方法获取页面中的元素返回的对象

3.jQuery对象其实就是DOM对象的包装集（包装了DOM对象的集合（伪数组））

jQuery对象与DOM对象的区别：

1.DOM对象与jQuery对象的方法不能混用。

2.DOM对象可以和jQuery对象相互转化

DOM对象转换成jQuery对象

// 将dom对象放入,$()中,既可以进行转化

var$obj=$(domObj);

// $(document).ready(function(){});就是典型的DOM对象转jQuery对象

jQuery对象转换成DOM对象：

var$li=$(“li”);

//第一种方法（推荐使用）

$li[0]

//第二种方法

$li.get(0)

准备:html代码

<ul>

</ul>

第一步: 使用js获取id,且修改背景颜色

// 1. 什么是DOM对象(js对象):使用js的方式获取到的元素就是js对象（DOM对象）

var cloth = document.getElementById("cloth");

cloth.style.backgroundColor = "pink";

第二步:使用jquery获取li,使用text()修改文本内容

//2. 什么是jq对象：使用jq的方式获取到的元素就是jq对象

var $li = $("li");

console.log($li);

$li.text("我改了内容");

第三步: 使用js对象调用jquery的text方法

//js对象对象不能调用jq对象的方法

var cloth = document.getElementById("cloth");

cloth.text("呵呵");

第四步:jquery对象也不能直接调用js的方法:setAttribute()

var $li = $("li");

$li[0].setAttribute("name","hehe");

总结:

DOM无法调用jQuery对象的方法：为什么：因为是两个不同对象

DOM对象调用jQuery对象的方法。需要把DOM对象转换成jQuery对象。

jq对象与js对象的联系（jq对象其实就是js对象的一个集合，伪数组，里面存放了一大堆的js对象）（宏观上）

第五步:将js对象转化为Jquery对象

var cloth = document.getElementById("cloth");

//DOM对象就变成jQuery对象

$(cloth).text("呵呵");

第六步:将jquey对象转化为js

//jQuery对象怎么转换成DOM对象（取出来）

var $li = $("li");

$li[1].style.backgroundColor = "red";

$li[2].style.backgroundColor = "yellow";

$的本质

$其实就是一个函数，以后用$的时候，记得跟小括号 $();

有三种用法:

//$其实就是一个函数，以后用$的时候，记得跟小括号 $();

//参数不同，功能就不同

//3种用法

//1. 参数是一个function, 入口函数

$(function () {

});

console.log(typeof $);

//2. $(domobj) 把dom对象转换成jquery对象

// $(document).ready(function () {

// });

//3. 参数是一个字符串,用来找对象

//$("div") $("div ul") $(".current")

选择器

什么是jQuery选择器

jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。

jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。【查看jQuery文档】

jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。

css选择器

jQuery完全兼容css选择器

名称用法描述

ID选择器$(“#id”);获取指定ID的元素

类选择器$(“.class”);获取同一类class的元素

标签选择器$(“div”);获取同一类标签的所有元素

并集选择器$(“div,p,li”);使用逗号分隔，只要符合条件之一就可。

交集选择器$(“div.redClass”);获取class为redClass的div元素

子代选择器$(“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元素中，选择索引号为偶数的元素

:first$(“li:first”).css(“color”, ”red”);获取到的li元素中的第一个

:last$(“li:last”).css(“color”, ”red”);获取到的li元素中的最后一个

筛选选择器(方法)

筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

名称用法描述

children(selector)$(“ul”).children(“li”)获取当前元素的所有子元素中的li元素

find(selector)$(“ul”).find(“li”);获取当前元素中的后代元素中的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()找上一次兄弟

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<styletype="text/css">

p{height:10px;}

.top{width:100px;height:100px;}

.one{background:red;}

</style>

</head>

<body>

<inputtype="button"name="btn"id="btn"value="点击试试"/>

<divclass="top"></div>

<divclass="box">1</div>

<divclass="box">2</div>

<divclass="box">3</div>

<inputtype="text"id="search"value=""/>

<p></p>

<ulclass="list ul"id="">

<liclass="red">mysql</li>

<li>python</li>

<li>javascript</li>

</ul>

<ulclass="list"id="list">

<li>mysql</li>

<li>python</li>

<li>javascript</li>

</ul>

<!--<divid="cont">4</div>

<divid="cont">5</div>

<divid="cont">6</div>-->

<divclass="msg">

<divclass="xbox">

</div>

<inputtype="text"name="user"id="a"value=""/>

<inputtype="password"name="user"id="b"/>

<inputtype="tel"id="c"value=""name="tel"/>

</body>

<scriptsrc="../jquery.2.2.4.js"type="text/javascript"charset="utf-8"></script>

<scripttype="text/javascript">

// $("#cont").css({background:"red"})

// $(".box").css({background:"red"})

// $("span").css({background:"red"})

// 包含的节点

// $(".msg h3").css({background:"red"})

// $(".msg").find("h3").css({background:"red"})

// 子节点

// $(".msg>h3").css({background:"red"})

// $(".msg").children("h3").css({background:"red"})

// 后代选择

// $(".msg .xbox h3").css({background:"red"})

// $(".msg").children(".xbox").children("h3").css({background:"red"})

// 下一个兄弟节点

// $(".msg+input").css({background:"red"})

// $(".msg").next("input").css({background:"red"})

// 选中后面所有符合条件的节点

// $(".msg~input").css({background:"red"})

// $(".msg").nextAll("input").css({background:"red"})

// 选中拥有指定属性的节点

// $("input").css({background:"red"})

// $("input[value]").css({background:"red"})

// $("input[name=user]").css({background:"red"})

// $("input[name=user][value]").css({background:"red"})

// 选中第一个,和最后一个元素

// $(".list li:first").css({background:"red"})

// $(".list li").first().css({background:"red"})

// $(".list li:last").css({background:"red"})

// $(".list li").last().css({background:"red"})

// 选中子元素中除了class=red之外的元素

// $(".list li:not(.red)").css({background:"red"})

// $(".list li").not(".red").css({background:"red"})

// $(".list li:even").css({background:"red"})

// $(".list li:odd").css({background:"red"})

// $(".list li:eq(2)").css({background:"red"})

// $(".list li").eq(2).css({background:"red"})

// $(".list li:contains(h)").css({background:"red"})

// 是否存在class=red,指定条件存在,就设置样式

// $(".list:has(.red)").css({border:"solid 1px black"})

// .is()判断某一个class/id/tagName是否存在

// console.log($(".list").eq(1).is(".ul"))

// console.log($(".list").eq(0).is("#list"))

// console.log($(".list").eq(1).hasClass("ul")

</script>

</html>

jquery事件用法

js中原有的事件,在js中都是支持的,但是都变成了方法,注意jquery中要去掉on

注：在jquery中事件都是不要加on前缀，原生js需要加on

①通过事件名直接绑定

语法：jquery对象.事件名(function(){} )

如单击事件：$(‘div’).click(function(){} )

②在jq中可以使用bind方法进行事件的绑定：

1,bind(type,callback)：对事件进行绑定只能绑定一个事件

参数说明：

type：指事件名但是这里的事件名不要带on前缀。

fn：匿名函数,事件的处理程序

2,bind({type:fn,type:fn})：对事件进行绑定可以绑定多个事件

参数说明：

要求是一个JSON对象

type：指事件名,注事件名不带on前缀

fn：匿名函数事件的处理程序

1,unbind([type])：对事件进行解绑

参数说明：

type：可缺省,type指解绑的事件名。如果没有指定事件名，则表示将所有的事件都解绑！

③在jq中可以使用on方法进行事件的绑定：

③ 在jq中可以使用on方法进行事件的绑定：

jQuery1.7之后，jQuery用on统一了所有事件的处理方法。

1, on(type,callback) 只能给页面已有的元素的绑定事件。

参数说明:

type：事件名

callback：事件的处理程序

给未来创建的元素绑定事件

2, on( type,selector,callback) 在已有的元素上绑定代理的事件。（事件委托的方式）

参数说明：

type ：事件名

selector:选择器

callback：事件的处理程序

委托的调用形式：父选择器.on(type,子选择器,callback);

例1: 直接绑定方式

格式：jquery对象.事件名(function(event){ });

//简单事件，给自己注册的事件

$("div").click(function () {

alert("哈哈");

});

例2:使用bind方式绑定

$("div").bind('click',function () {

alert("哈哈");

});

例3:使用on给原有和新增的元素绑定事件

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<ul>

</ul>

// on 不仅可以给页面中存在的元素绑定事件

// 还可以个给新增的元素绑定事件

// $('ul').on('click',function(){

// console.log('哈哈')

// });

// $('li').on('click',function(){

// console.log('嘿嘿')

// })

/// 点击之后新增一个li

$('input').on('click',function(){

var liObj = $('<li></li>');

liObj.text('肚皮要撑破');

liObj.appendTo('ul')

});

// 给新增的li邦定事件

// $('父级元素').on(事件类型,指定元素,回调函数)

$('ul').on('click','li',()=>{

console.log('新增的也有事件')

});

</script>

</body>

</html>

Jquery中动画

三组基本动画

显示(show)与隐藏(hide)与切换是一组动画：滑入(slideUp)与滑出(slideDown)与切换(slideToggle)，效果与卷帘门类似淡入(fadeIn)与淡出(fadeOut)与切换(fadeToggle)

show() hide() toggle()三个方法参数一致

show([speed], [callback]);

speed(可选)：动画的执行时间

1.如果不传，就没有动画效果。如果是slide和fade系列，会默认为normal

2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)

3.固定字符串，slow(200)、normal(400)、fast(600)，如果传其他字符串，则默认为normal。

callback(可选):执行完动画后执行的回调函数

例1:使用show与hide实现红色div的显示,与隐藏

<!DOCTYPE html>

<head>

<style>

div{

width: 300px;

height: 300px;

background-color: #f99;

display: none;

}

</style>

</head>

<body>

$(function(){

// show(speed, callback)

// hide(speed,callback)

// toggle(speed,callback)

// 不传参，就没有动画效果

// 主要修改的时候元素的width、height、opacity

// 三个参数都是可选的

// 参数：

// speed：动画时长，单位是ms，默认还提供了三个字符串的值，可选

// "slow": 600

// "normal": 400

// "fast": 200

// 如果传递的是除了上面三个之外的字符串，取normal

// callback: 动画结束的时候来执行的函数,可选

$("button").eq(0).click(function(){

$("div").show(1000, function(){

console.log("show 动画结束了");

});

})

$("button").eq(1).click(function(){

$("div").hide(1000, function(){

console.log("hide 动画结束了");

});

})

$("button").eq(2).click(function(){

$("div").toggle(1000, function(){

console.log("toggle 动画结束了");

});

})

</script>

</body>

</html>

例2: 使用slide系列,类似卷帘门

<!DOCTYPE html>

<head>

<style>

div{

width: 300px;

height: 300px;

background-color: #f99;

display: none;

}

</style>

</head>

<body>

$(function(){

// slideDown(speed, easing, callback)

// slideUp(speed, easing, callback)

// slideToggle(speed, easing, callback)

// 不传参，有动画效果，normal = 400

// 参数和show方法一样，主要是动画效果不同

$("button").eq(0).click(function(){

$("div").slideDown(3000, function(){

console.log("slideDown 运动结束了");

});

})

$("button").eq(1).click(function(){

$("div").slideUp(3000, function(){

console.log("slideUp 运动结束了");

});

})

$("button").eq(2).click(function(){

$("div").slideToggle(3000, function(){

console.log("slideToggle 运动结束了");

});

})

// fadeIn()

// fadeOut()

// fadeToggle()

})

</script>

</body>

</html>

例3:fade的淡入与淡出

<!DOCTYPE html>

<head>

<style>

div{

width: 300px;

height: 300px;

background-color: #f99;

display: none;

}

</style>

</head>

<body>

$(function(){

// slideDown(speed, easing, callback)

// slideUp(speed, easing, callback)

// slideToggle(speed, easing, callback)

// 不传参，有动画效果，normal = 400

// 参数和show方法一样，主要是动画效果不同

$("button").eq(0).click(function(){

$("div").fadeIn(3000, function(){

console.log("slideDown 运动结束了");

});

})

$("button").eq(1).click(function(){

$("div").fadeOut(3000, function(){

console.log("slideUp 运动结束了");

});

})

$("button").eq(2).click(function(){

$("div").fadeToggle(3000, function(){

console.log("slideToggle 运动结束了");

});

})

$("button").eq(3).click(function(){

$(".box").fadeTo(1000,0.5)

})

// fadeIn()

// fadeOut()

// fadeToggle()

})

</script>

</body>

</html>

自定义动画

语法

$(selector).animate({params},[speed],[easing],[callback]);

// {params}：要执行动画的CSS属性，带数字（必选）

// speed：执行动画时长（可选）

// easing:执行效果，默认为swing（缓动）可以是linear（匀速）

// callback：动画执行完后立即执行的回调函数（可选）

<!DOCTYPE html>

<html>

.box{

width: 100px;

height:100px;

background: red;

position: absolute;

top: 50px;

}

基本动画案例

一次性全部执行完毕

//情况1 基本动画案例

$("#btn1").click(function(){

$(".box").animate({

width:"+=100px",

height:200,

left:300,

top:200

})

回调式动画

使用回调函数,执行一个样式完成后,在函数函数中,再执行另一个

$("#btn1").click(function(){

$(".box").animate({

width:"+=100px"

},function(){

$(".box").animate({

height:200

})

链式调用

jq提供了动画队列来实现依次执行动画的效果, 给元素的动画队列添加多个动画，依次来执行动画队列里面的动画, 就是链式编程的写法

// 如果链式的动画调用的还是之前那个元素

$(".box").animate({

width:"+=200px"

}).animate({

height:"+=200px"

})

特殊情况

1 如在动画完成后,需要通过.css(),设置,样式,则必须使用回调函数

在animate之后,调用其他方法,会异步执行

$(".box").animate({

width:"+=200px"

}).animate({

height:"+=200px"

}).css({background:"yellow"})

// 只能使用回调函数

$(".box").animate({

width:"+=200px"

}).animate({

height:"+=200px"

},function(){

$(".box").css({

background:"yellow"

})

}).animate({

left:300

})

2 也可以单独设置一个函数,来完成动画完成后的其他操作

queue()在所有的动画结束后,调用

// 情况四 jQuery单独设置了一个方法,用来解决其他方法的异步执行,等同于回调函数

$('input').click(function(){

$('.box').animate({width:300},2000)

.animate({left:500},2000)

.queue(()=>{

$('.box').css({background:'blue'});

})

动画的小案例

$('#div1').slideDown(1000); //向下展开，下拉。1000毫秒，表示动画展开过程时间。

$('#div1').slideUp(1000); //向上收起

$('#div1').slideToggle(1000); //合成展开收起

<!DOCTYPE html>

<head>

<style>

div{

width: 100px;

height: 100px;

background-color: #f99;

position: relative;

text-align: center;

}

</style>

</head>

<body>

<div>swing</div>

// 动画队列

// jq提供了动画队列来实现依次执行动画的效果

// 给元素的动画队列添加多个动画，依次来执行动画队列里面的动画

// 就是链式编程的写法

// $("div").animate({

// left: 500

// }, 1000)

// .animate({

// top: 300

// }, 1000)

// .animate({

// borderRadius: 50

// }, 1000)

// .slideUp(1000)

// .slideDown(1000);

// 有了动画队列的好处：

// 依次执行动画

// 坏处：

// 如果元素动画频发的触发，就会不停的去做动画队列的里面的动画

})

</script>

</body>

</html>

动画队列与动画的停止

在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完成了才会执行（联想：火车进站）。

//stop方法：停止动画效果

stop(clearQueue, jumpToEnd);

//第一个参数：是否清除队列

//第二个参数：是否跳转到最终效果

动画的延迟

jq对象.delay(2000).animate()

以毫秒为单位

例:让所有的动画延迟2s执行

<!DOCTYPE html>

<html>

.box{width: 100px;height:100px;background: red;position: absolute;}

$("#btn1").click(function(){

$(".box").delay(2000).animate({

left:500

},2000).delay(2000).animate({

top:300

},2000).delay(2000).animate({

left:0

},2000).delay(2000).animate({

top:40

},2000)

})

$("#btn2").click(function(){

$(".box").stop(true,false)

})

</html>

动画的队列(总结)

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

div {

width: 100px;

height: 100px;

background-color: pink;

position: absolute;

}

</style>

</head>

<body>

$(function () {

$("#btn").click(function () {

//把这些动画存储到一个动画队列里面

$("div").animate({left:800})

.animate({top:400})

.animate({width:300,height:300})

.animate({top:0})

.animate({left:0})

.animate({width:100,height:100})

})

});

</script>

</body>

</html>

动画的停止 stop方法

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

div {

width: 400px;

height: 400px;

background-color: pink;

display: none;

}

</style>

</head>

<body>

$(function () {

$("input").eq(0).click(function () {

$("div").slideDown(4000).slideUp(4000);

});

$("input").eq(1).click(function () {

//stop:停止当前正在执行的动画

//clearQueue:是否清除动画队列 true false

//jumpToEnd:是否跳转到当前动画的最终效果 true false

//.stop().animate();

$("div").stop(true, true);

})

});

</script>

</body>

</html>

jQuery

推荐阅读更多精彩内容