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改版