首页 > 代码库 > JQuery简介
JQuery简介
JQuery简介
jQuery是一个JavaScript工具库（类库），它通过封装原生的JavaScript函数得到一整套定义好的方 法。它的作者是John Resig，于2006年创建的一个开源项目，随着越来越多开发者的加入， jQuery已经集成了JavaScript、CSS、DOM和Ajax于一体的强大功能。它可以用最少的代码， 完成更多复杂而困难的功能，从而得到了开发者的青睐。
一句话总结类库。 就是JavaScript的工具库。 原始社会生火方式， 钻木取火。 但是有了火柴就不一样了。
JQuery版本
1.XX版本兼容IE 6， 7 ， 8
2.XX版本放弃了对IE6，7 , 8 的兼容。
引入Jquery库
像引入其他js文件一样吧jquery库引入过来。
本地jquery文件
1.jquery-1.XX.X.min.js
实例1.建立jquery环境。引用一个外部的jquery库。和引入外部script方法一致。
jquery的第二种引入方式，CDN引入。
<scriptsrc="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
JQuery核心
window.onload是原生方法， jquery（）是jquery方法， 他们在页面中能不能共存那？
jquery中的window.onload=function(){}方法是jQuery(document).ready(function(){})
他和window.onload有什么不同那?
实验证明， .ready()方法他的执行速度更快于window.onload 。内部原理忽略不计。
可以共存就意味着可以同时使用。但是并不意味着， 这两个方法同时存在是合理的。一个页面我们习惯只放一个.ready()方法。 这样不会让页面的逻辑混乱，会增加代码的可读性 。
推荐用.ready()方法，可以排除jquery未引入错误。
习惯， 页面中只用一个.ready()方法（可以存在多个，但是并不科学。）
开发中炫酷的简写：
$(function(){
})
JQuery选择器
|
选择器 |
CSS模式 |
jQuery模式 |
描述 |
|
标签名 |
div{} |
$(‘div‘) |
获取所有div标签的DOM元素 |
|
ID |
#box{} |
$(‘#box‘) |
获取一个ID为box的DOM对象 |
|
class(类名) |
.box{} |
$(‘.box‘) |
获取所有class名为box的DOM对象 |
JQuery对象和 Dom节点对象直接互相转换
$(‘DOM‘)[0].style.color=red;
$(‘DOM‘).get[0].style.color=red;
|
选择器 |
CSS模式 |
jQuery模式 |
描述 |
|
群组选择器 |
div,span,p{} |
$(‘div,span,p‘) |
略 |
|
后代选择器 |
ul li a{} |
$(‘ul li a‘) |
略 |
|
通配选择器 |
*{} |
$(‘*‘) |
略 |
层次选择器
|
选择器 |
css模式 |
jQuery模式 |
描述 |
|
后代选择器 |
ul li a{} |
$(‘ul li a‘) |
获取追溯到的所有元素 |
|
子选择器 |
div>p{} |
$(‘div>p‘) |
只获取子类节点 |
|
next选择器 |
div+p{} |
$(‘div+p‘) |
只获取某节点后一个同级DOM元素 |
|
nextAll选择器 |
div~p{} |
$(‘div~p‘) |
获取某节点后所有同级DOM元素 |
jQuery为后代选择器提供了一个方法find()这个find方法里面有一个参数，就是想要找到的后代（可以是标签，类名，ID）
$(‘div p‘).css(‘color‘,‘red‘) == $(‘div‘).find(‘p‘).css(‘color‘,‘red‘)
jQuery为子选择器提供了一个方法，children()，参数同上；
$(‘div>p‘).css(‘color‘,‘red‘) == $(‘div‘).children(‘p‘).css(‘color‘,‘red‘);
jQuery提供了next(）, nextAll( ) 选择器，参数同上：注意next（）选择器，只选择后一个元素。
$(‘div+p‘).css(‘color‘,‘red‘) == $(‘div‘).next(‘p‘).css(‘color‘,‘red‘)
$(‘div~p‘).css(‘color‘,‘red‘) == $(‘div‘).nextAll(‘p‘).css(‘color‘,‘red‘)
注意：children() , next() , nextAll() 这些方法如果不传递参数的话， 那么就默认传递一个通配符*，通常在使用这些选择器的时候，我们需要精准的选择元素，避免发生各种怪异结果。
属性选择器：
|
CSS模式 |
jQuery模式 |
描述 |
|
input[name] |
$(‘input[name]‘) |
获取具有这个属性的DOM元素 |
|
input[name=XXX] |
$(‘input[name=XXX]‘) |
获取具有属性且属性值为XXX的DOM元素 |
伪类选择器：
|
过滤器名 |
jQuery语法 |
说明 |
返回 |
|
:first |
$(‘li:first‘) |
选取第一个元素 |
单个元素 |
|
:last |
$(‘li:last‘) |
选取最后一个元素 |
单个元素 |
|
：not() |
$(‘li:not(.red)‘) |
选取class不是red的元素 |
一组元素 |
|
:even |
$(‘li:even‘) |
选择偶数的所有元素 |
一组元素 |
|
:odd |
$(‘li:odd‘) |
选择所有奇数元素 |
一组元素 |
|
：eq |
$(‘li:eq（1）‘) |
选择对应下表的元素 |
单个元素 |
可见性选择器
|
过滤器名 |
jQuery语法 |
说明 |
返回 |
|
:hidden |
$(li:hidden) |
选取所有不可见元素 |
集合元素 |
|
:visible |
$(‘li:visible‘) |
选取所有可见元素 |
集合元素 |
jQuery在选择器和过滤器的基础上提供了一些常用的方法，方便我们开发时灵活使用。
|
方法名 |
jQuery语法 |
说明 |
返回 |
|
is() |
li.is(‘.red‘) |
传递选择器、DOM、jquery对象 |
true||false |
|
hasClass() |
$(‘li‘).hasClass(‘red‘) |
就是is(‘.‘+class) |
true||false |
JQuery操作DOM
DOM 在 JavaScript 课程中我们详细的探讨过，它是一种文档对象模型。方便开发者对 HTML 结构元素内容进行展示和修改。在 JavaScript 中，DOM 不但内容庞大繁杂，而且我们开发的过程中需要考虑更多的兼容性、扩展性。在 jQuery 中，已经将最常用的 DOM 操 作方法进行了有效封装，并且不需要考虑浏览器的兼容性，对于之前的DOM是一颗岑天大树枝繁叶茂让我们遥不可及，那么jQuery的DOM树，就是一个简笔画的小树，所有枝叶都唾手可得。
JQuery遍历
祖先：
parent()
parents()
parentsUntil()
后代 :
children()
find()
兄弟：
siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()
过滤：
eq()
DOM元素及属性操作
1.设置（获取）元素内容。
html() 可以获取该元素的标签和内容
html(text)
text(text) 只可以获取该元素的文本内容；
text()
val(text)
val()
2.操作元素属性。（获取，设置、删除）
.attr( )
.attr( )的参数有几种设置方法。
1）$(‘div‘) .attr(‘type‘)获取该属性属性值
2）$(‘div‘) .attr(‘type‘,‘value‘)设置属性值
3)$(‘div‘) .attr({
‘data‘:‘valuer1‘,
‘data2‘:‘value2‘
})
设置一组属性值；
4）$(‘div‘).removeAttr(‘title‘)
操作元素样式
css()
注：css（）方法不仅能获取行内样式，也能获取非行内样式
css()
方法的参数有几种设置方法，
css(name)
获取某个元素的行内样式
css([name1,name2,name3])
获取多个样式，返回值是一个数组；
css(‘name‘,value)
设置行内样式
css({
name1:value1,
name2:value2
})
设置多个行内样式
addClass( )方法
addClass（class） 给元素添加一个class
addClass( class1 class2 class3 )给元素添加多个class
removeClass(class) 给元素删除一个class
removeClass(class1 class2 class3)给元素删除多个class
toggleClass(class) 如果元素没有当前class那么添加，如果有那么删除
css方法
width()
height()
innerWidth() 包含内边距（padding）
outerWidth()包含内边距和边框(padding border)
offset() 获取某个元素相对于浏览器窗口(可视区域的距离)
position()获取某个元素相对于父元素的偏移距离
scrollTop()获取垂直滚动条的值；
scrollTop(value)设置垂直滚动条的值;
scrollLeft()获取水平滚动条的值；
scrollLeft(value)设置水平滚动条的值;
JQuery节点操作
1.创建节点。
var box=$(‘<div id="box">节点</div>‘); //创建一个节点 $(‘body‘).append(box); //将节点插入到<body>元素内部
2.插入节点
append(content) 向指定元素内部后面插入节点 content
appendTo(content) 将指定元素移入到指定元素 content 内部后面
prepend(content) 向指定元素 content 内部的前面插入节点
prependTo(content) 将指定元素移入到指定元素 content 内部前面
after(content) 向指定元素的外部后面插入节点 content
before(content) 向指定元素的外部前面插入节点 content
3.包裹节点
.warp()
$(‘div‘).wrap(‘<strong></strong>‘); //在 div 外层包裹一层 strong
$(‘div‘).wrap(‘<strong>123</strong>‘); //包裹的元素可以带内容
$(‘div‘).wrap(‘<strong><em></em></strong>‘); //包裹多个元素
$(‘div‘).wrap($(‘strong‘).get(0)); //也可以包裹一个原生 DOM 不推荐使用，会崩溃
$(‘div‘).wrap(document.createElement(‘strong‘)); //临时的原生 DOM
$(‘div‘).unwrap(); //移除一层包裹内容，多个需移除多次
$(‘div‘).wrapInner(‘<strong></strong>‘); //包裹子元素内容
4.节点操作
$(‘body‘).append($(‘div‘).clone(true)); //复制一个节点添加到 HTML 中
注：clone(true)参数可以为空，表示只复制元素和内容，不复制事件行为。而加上 true 参数的话，这个元素附带的事件处理行为也复制出来。
$(‘div‘).remove(); //直接删除 div 元素
remove()方法可以接收一个参数，过滤需要删除的元素。
$(‘div‘).replaceWith(‘<span>节点</span>‘); //将 div 替换成 span 元素
JQuery事件
各种类型事件
click
dblclick
mouseenter
mouseleave
mouseover
mouseout
hover
scroll
....
事件绑定和解绑
bind
unbind
delegate
on
off
事件对象
JavaScript事件对象是浏览器默认传入的，但是对于浏览器的兼容问题，我们需要对事件对象进行兼容。很烦！但是jQuery已经帮我们解决了所有兼容性的烦恼，并且给我们添加了很多有用的方法。
event.target 获取绑定事件的DOM元素
event.type 获取事件的类型
event.data 获取事件中传递的数据
event.pagX/pagY 获取根据页面原点的X,Y值
event.screenX/screenY 获取根据显示器窗口的X,Y值
event.offsetX/offsetY 获取根据父元素X,Y值
event.which 获取当前鼠标点击的键1,2,3
event.altKey/shiftKey/ctrlKey/ 返回 true、false
事件冒泡（默认事件）
preventDefault() //阻止默认行为
stopPropagation() //取消事件冒泡
return false 阻止默认事件和事件冒泡
AJAX
AJAX简介
AJAX是什么
Ajax 全称为：“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML）， 它并不是 JavaScript 的一种单一技术，而是利用了一系列交互式网页应用相关的技术所形 成的结合体。使用 Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了用户体验。
Ajax 概述
Ajax 这个概念是由 JesseJamesGarrett 在 2005 年发明的。它本身不是单一技术，是一串 技术的集合，主要有：
1.JavaScript，通过用户或其他与浏览器相关事件捕获交互行为
2.XMLHttpRequest 对象，通过这个对象可以在不中断其它浏览器任务的情况下向服务 器发送请求；
3.服务器上的文件，以 XML、HTML 或 JSON 格式保存文本数据；
4.其它 JavaScript，解释来自服务器的数据（比如 PHP 从 MySQL 获取的数据）并将其 呈现到页面上。
由于 Ajax 包含众多特性，优势与不足也非常明显。优势主要以下几点：
1.不需要插件支持（一般浏览器且默认开启 JavaScript 即可）；
2.用户体验极佳（不刷新页面即可获取可更新的数据）；
3.提升 Web 程序的性能（在传递数据方面做到按需放松，不必整体提交）；
4.减轻服务器和带宽的负担（将服务器的一些操作转移到客户端）；
而 Ajax 的不足由以下几点：
1.不同版本的浏览器度 XMLHttpRequest 对象支持度不足(比如 IE5 之前)；
2.前进、后退的功能被破坏（因为 Ajax 永远在当前页，不会几率前后页面）；
3.搜索引擎的支持度不够（因为搜索引擎爬虫还不能理解 JS 引起变化数据的内容）；
4.开发调试工具缺乏（相对于其他语言的工具集来说，JS 或 Ajax 调试开发少的可怜） 。
异步和同步
使用 Ajax 最关键的地方，就是实现异步请求、接受响应及执行回调。那么异步与同步 有什么区别呢？我们普通的 Web 程序开发基本都是同步的，意为执行一段程序才能执行下 一段，类似电话中的通话，一个电话接完才能接听下个电话；而异步可以同时执行多条任务， 感觉有多条线路，类似于短信，不会因为看一条短信而停止接受另一条短信。Ajax 也可以 使用同步模式执行，但同步的模式属于阻塞模式，这样会导致多条线路执行时又必须一条一 条执行，会让 Web 页面出现假死状态，所以，一般 Ajax 大部分采用异步模式。
load 方法
jquery对Ajax进行了大量封装，对于封装方式，jquery采用了多层封装，其中$.ajax()是最底层封装，上层封装方法有.load()方法， $.get()，$.post()方法;
jquery对Ajax进行了大量封装，对于封装方式，jquery采用了三层封装，其中$.ajax()是最底层封装，上层封装方法有.load()方法， $.get()，$.post()方法;
.load()方法是局部方法,.load()方法中共有三个参数，一个是url，链接地址，第二个是发送的数据data，第三个是回调函数callback
1.参数url, 可以提供筛选功能。
$().load(‘data/test.html ‘)
$().load(‘data/text.html .url‘)>>>筛选功能
2.data参数传入决定，是否以post方式提交参数是一个对象形式传入。
$().load(‘data/test.html‘,{
url:‘zmkm‘
})
3.回调函数function(response,status,xhr){}
$().load(‘data/test.html‘,{
url:‘zmkm‘
},function(response,status,xhr){})
第一个参数为返回结果，和页面里内容一样 。
第二个参数是状态，success，或者error
第三个参数是XHMJavaScript，他是一个对象
get和post
$.get()和$.post()有四个参数，其中第一个地址参数为必填参数，第二个参数data，和第三个callback函数和.load()方法一样， 第四个参数为type
$.get(‘data/test.html‘,{
url:‘zmkm‘
},‘html‘)
由于php返回的值默认为纯文本格式，所以数据格式html和test格式可以不写。如果写入数据格式，那么默认会强制转换为该格式。如果传入错误格式，那么不会有返回值。
注：一般情况下，type都是只能判断，并不需要人为设置，除非需要打印整个文件的代码，才需要强制类型转换。
$.get()和$.post()的差别:$.get()是以get方式提交，$.post()方式是以post方式提交。
1.get方式提交数据是吧数据放在浏览器网址上面的，post是通过http消息，实体提交的。
2.get提交方式有大小限制，限制在2KB，而post方式不收大小限制。
3.get方式因为在浏览器中会被历史记录缓存，所以这种提交数据方式并不安全，post方式没有这种问题。
4，在服务器端（php语言）， get方式通过$GET[]方式获取，post通过$POST[]方式获取。
ajax使用方式
$.ajax({ url:‘‘, 链接路径
type:‘post/get‘ 用什么方式提交
data:{键:值}, 传入数据用键值对方式传入
success:function(){ 成功是传入的参数 } ,
error:function(){}
})
jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback: "自定义函数名",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
ajaxSetup()ajax初始化对于ajax可以做一个预先设置，减少重复。
$.ajaxSetup({
url:‘‘,
type:‘post‘,
data:{user:‘ddd‘}
})
$.ajax({
success:function(data){
alert(data)
}
})
动画
非自定动画
1.显示、隐藏：
show( ) 、hide( )、toggle()
show()、hide()、toggle()方法有两种用法，一种是不传参数，代表直接显示隐藏。
另一种是向方法中传递一个参数，这个参数为number类型，代表动画的执行时间。会有显示隐藏的动画效果。
示例:
show(100)、hide(100)、toggle(100)
不仅如此，jQuery还为动画方法提供了三种字符串形式的参数，分别是：fast、slow、和空字符串‘‘
show(‘fast‘)、hide(‘slow‘)、toggle(‘‘)
三种参数的执行时间，分别为 ，‘fast‘ ：200毫秒 ‘‘(默认值):400毫秒 ‘slow‘：600毫秒
2.滑动：
slideUp()：向上滑动（隐藏）
slideDown():向下滑动（显示）
slideToggle()：滑动（自动）
3.淡入淡出：
fadeOut():淡出（隐藏）
fadeIn():淡入（显示）
fadeToggle():显示隐藏（）自动
该方法是将元素的透明度从1变成零之后将元素的display属性设置为none;
但是如果我们想要将透明度设置到一个固定值，这些方法并不能实现，jQuery为我们提供了一个方法fadeTo()，该方法接受两个参数。
第一个参数是动画执行的时间，第二个参数是期望达到的透明度。
自定义动画
animate()方法
animate()方法有三个参数。分别是动画目标(target),动画执行时间，回调函数。只有第一个参数是必填参数。
animate()方法的使用：
1.animate({
‘width‘:‘200px‘，
‘height‘:‘200px‘
})
2动画的执行顺序：
如果想要动画按照顺序执行（执行完第一个动画之后，再执行下一个动画）有三种方法：
1）借助动画的回调函数。
$(‘input‘).click(function(){
$(‘div‘).animate({
‘width‘:‘400px‘,
‘height‘:‘400px‘,
},function(){
$(‘div‘).animate({
‘width‘:‘200px‘,
‘height‘:‘200px‘
})
})
})
2）将动画效果分开写。
$(‘input‘).click(function(){
$(‘div‘).animate({
‘width‘:‘400px‘,
‘height‘:‘400px‘,
})
$(‘div‘).animate({
‘width‘:‘200px‘,
‘height‘:‘200px‘
})
})
3）连缀
$(‘input‘).click(function(){
$(‘div‘).animate({
‘width‘:‘400px‘,
‘height‘:‘400px‘,
}).animate({
‘width‘:‘200px‘,
‘height‘:‘200px‘
})
})
这几种方法在什么情况下使用那？
在操作同一元素的时候，推荐使用连缀。在操作不同元素的时候，推荐使用回调函数。
连缀：jquery的动画方法，每次调用都会返回当前选择的元素，从而可以让jQuery可以实现连缀。
动画执行顺序
当我想要执行一个其他方法的时候，比如给当前元素加一个背景颜色。
$(‘input‘).click(function(){
$(‘div‘).animate({
‘width‘:‘400px‘,
‘height‘:‘400px‘,
}).animate({
‘width‘:‘200px‘,
‘height‘:‘200px‘
}).css(‘background‘,‘yellow‘)
})
问题出现了：当我按照连缀写法，并没有出现我想要的效果所有方法都按照顺序执行，而是将css方法提前执行了。
问题分析：根据我们以往写运动框架的经验，知道每个动画都是有定时器的，发生这个问题原因就在于此，定时器是异步的，在运行动画的时候我们后面的方法会继续执行，也就出现了上面的问题。
解决：
1）可以用回调函数解决：
$(‘input‘).click(function(){
$(‘div‘).animate({
‘width‘:‘400px‘,
‘height‘:‘400px‘,
}).animate({
‘width‘:‘200px‘,
‘height‘:‘200px‘
},function(){
$(this).css(‘background‘,‘yellow‘)
})
})
2）jquery给我们提供了一个类似于回调函数的方法queue()：
$(‘input‘).click(function(){
$(‘div‘).animate({
‘width‘:‘400px‘,
‘height‘:‘400px‘,
}).animate({
‘width‘:‘200px‘,
‘height‘:‘200px‘
}).queue(function(){
$(this).css(‘background‘,‘yellow‘)
})
})
queue()方法的问题:
当我想要在这个列队函数中再加一个动画的时候，发现在queue()方法后的函数无法执行。
$(‘input‘).click(function(){
$(‘div‘).animate({
‘width‘:‘400px‘,
‘height‘:‘400px‘,
}).animate({
‘width‘:‘200px‘,
‘height‘:‘200px‘
}).queue(function(next){
$(this).css(‘background‘,‘yellow‘);
next();
}).hide(‘400‘)
})
原理：连缀的原理是因为每个jquery动画方法都会提供一个返回值，这个返回值就是所选择的元素，queue()方法并不会提供一个返回值。为了让连缀继续，我们这时候应该让queue()方法有一个返回值。jquery为queue提供了一个参数next,我们只需要在queue()方法中传入这个参数并调用，那么queue()方法就有了一个返回值，连缀就可以继续了。
动画及相关方法
1.stop()方法
这个方法是停止动画的方法，他有两个参数，都是布尔值。第一个参数代表是否清除动画队列，第二个参数代表是否直接运行到最后结果。
2.delay()方法
延时执行，该方法有一个参数，是延时执行的毫秒数。
3.动画的递归
$(‘div‘).slideToggle(2000,recursion)
function recursion(){
$(this).slideToggle(2000,recursion)
}
自我调用
高级写法：
$(‘div‘).slideToggle(2000,function(){
$(this).slideToggle(2000,arguments.callee)
})
arguments.callee：常用在匿名函数中， 代表当前的函数。
4.动画的全局方法
能影响程序性能$.fx.interval 属性可以调整动画每秒的运行帧数，默认为 13 毫秒。数字越小越流畅，但可。
$.fx.interval=1000;动画的帧数设置。
$.fx.off=true;动画关闭。
//轮播图 jquery改版
JQuery简介