JQuery简介

Posted sjpqy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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,解释来自服务器的数据(比如 phpmysql 获取的数据)并将其 呈现到页面上。

由于 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简介的主要内容,如果未能解决你的问题,请参考以下文章

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段(转)

几个有用的JavaScript/jQuery代码片段(转)

几个非常实用的JQuery代码片段

高效Web开发的10个jQuery代码片段