jQuery知识宝库

来源：互联网发布：av动漫下载软件编辑：程序博客网时间：2024/05/10 02:18

jQuery知识宝库

jQuery是javaScript库。jQueryUI界面库是jQuery的扩展库，提供了更丰富的页面组件。

jQuery

版本说明

本文以jquery-1.9.1为例

项目配置步骤

一、搭建开发环境（该步骤具体可根据个人喜好可变化）

1.服务器：可选Apache；有人会省掉服务器，但有服务器则更贴近真实环境；

2.浏览器：Firefox；

3.在Firefox基础上安装强大的工具FireBug；

4. jQuery核心库的安装：

官方地址:http://jquery.com；有精要版（代码经压短处理）和初始版可供下载，功能其实一样。

托管地址CDN:谷歌、微软等。（该方式可节省带宽）

例如：谷歌在https://developers.google.com/speed/libraries/devguide?hl=zh-CN#jQuery页面向程序员展示了它保存的各个流行库的地址。

二、在需要的文件中引入jQuery核心库

注意要放在包含CSS文件之后，以确保jQuery修改DOM之前所有的CSS已应用到DOM。

三、使用jQuery库

高明之处

1.选择器使用CSS的表达式。目前支持CSS3。

2.很多函数支持对象字面量。

用一个大括号包括的用逗号分隔键/值对列表，有助于组织代码，

如：css()方法：$('.telephone').css({'border':'1px solid #ccc','width':'250px', 'padding':'10px'});

键若是变量名，可省略引号。值若是变量，则一定不能加引号。

3.支持所有的javascript原生事件。

包装器：

（简洁的核心）

包装器格式为：$(选择器)

其中，$可换成jQuery。选择器可以是下述这些

1. javascript本身的对象，如：$(document).ready()、$(window).load()；

不过$(document).ready(function(){})有一种简写形式$ (function(){})

2.jquery的字符串表达式，如：$('h1').css('font-family','arial,verdana');；

链式调用

（简洁的帮手）

如：

$('.tool-tip'). fadeIn(900);

$('.tool-tip').delay (1000);

$('.tool-tip'). fadeOut(900);

可写成：

$('.tool-tip'). hide().fadeIn(900).delay (1000).fadeOut(900);

常用代码结构

（实验时可把“脚本”放在页面文件中。实际开发时，代码应放入外部js文件）

方式一：把jQuery库包含到页头

<html>

<head>

脚本

</script>

</head>

<body>

内容

</body>

</html>

方式二：把jQuery库包含到页尾，它不会阻塞其它内容，提高页面加载速度

<html>

<head>

</head>

<body>

内容

脚本

</script>

</body>

</html>

防止与其他库冲突

主要是因为别的库也可能用$作为别名，解决办法有：

法一：$.noflict();

法二：改所有$为“jQuery”

法三：再定义别名，如var $alien=jQuery，之后可以用alien。

选择器

这里以选择器调用css()方法为例；

css()方法将以内嵌的样式应用到本页面的目标元素，不会影响其它页面。

可选项

格式与示例

通配符

$('*')

例：$('*') .css('border','1px solid #333');

HTML标签

$('html标签名')

例：$('h1').css('font-family','arial,verdana');

对应javascript原生方法document.getElementByTagName()

$('#id名')

例：$('#sidebar').css('display','none');

对应javascript原生方法document.getElementById()

class

$('.class名')

例：$('.telephone').css({'border':'1px solid #ccc','width':'250px', 'padding':'10px'});

对应javascript原生方法document.getElementByClassName()

多class

选择同时含有多个class值的元素，可接连的形式$('.class名.class名….')

例：$('.book.inactive').css('display','none');

组合（并集）

同时选择多个符合条件的集，用逗号分隔各表达式

例：$('.book-one, .book-two, .book-three, #header, #footer p').css('display','none');

var text_query=$("#text11,.text12");

子元素（直接父子级）

获取符合A的元素下面的所有符合B的直接子元素

$('A>B')

其中，A、B可以是标签、id名、class名

例：$('.book.inactive > p').css('display', 'none');

后代（不同级）

获取符合A的元素下面的所有符合B的元素

与子元素选择器相比较，把>换成空格。

$('A B')

例：$('ul li').css('border','3px dashed blue');

（同级）

获取id为text11元素后面的class为button11元素，只获取一个符合条件的元素。text11与button11在地位上属于同级关系

var button11_query=$("#text11+.button11");

（同级）

获取id为text11元素后面的所有class为button11的元素

var button11_query=$("#text11~.button11");

过滤器

（使“选择”目标范围缩小）

:first、:last、

:not(条件表达式)、

:even、:odd、

:eq(index)、

:gt(index)、

:lt(index)、

:header、

:animated、

:contains('字符串')、

:empty、

:has(表达式)、

:parent、

:hidden、

:visible、

子元素过滤器:查找所有在父元素中的所有子元素中排第n的input元素。有

first-child、:last-child、only-child、nth-child((index))

属性过滤器

（以input标签为例）

1.查找所有含有name属性的input元素

var input_query=$("input[name]");

2.查找name值为text11的input元素

var input_query=$("input[name='text11']");

3.查找name值不等于text11的所有input元素

var input_query=$("input[name!='text11']");

4.查找name值以text开头的input元素

var input_query=$("input[name^='text']");

5.查找name值以11结尾的所有input元素

var input_query=$("input[name$='11']");

6.查找name值中含有ext的所有input元素

var input_query=$("input[name*='ext']");

7.查找name值为text或者以text开头且后紧跟一个连字符-的所有input元素

var input_query=$("input[name|='text']");

8.查找name值包含text的任意一个字串的所有input元素。（其中text是由空格分隔的字串）

var input_query=$("input[name~='text']");

9.同时匹配，查找所有含有name1]属性并且name2值中含有ext的input元素

var input_query=$("input[name1][name2*='ext']");

用jQuery操作HTML和CSS

没有参数时获取字符串，有参数时设置字符串。

.html()

.html('字符串')

下述text函数只能针对文本，不能是含html<>标签的文本

.text()

.text('字符串')

元素内追加

append()

prepend()

注append和appendTo的区分。$(A).appendTo(B)：不是把B追加到A中，而是把A追加到B中。

如

$('container').click(function(){$(this).clone().appendTo('.container');} );

元素前、后追加

before()

after()

删除

remove()

克隆

clone()

设置css样式

css()

增、删class属性

addClass('以空格分开的字符串')

removeClass()和removeClass('以空格分开的字符串')

切换class属性

toggleClass('字符串')

事件处理

之一般写法

以$(document).ready()为例说明

(document).ready()事件与javascript原生Onload事件有区别。(document).ready()指DOM完全准备好。

(document).ready()事件与(window).load()事件的区别在于(window).load()要等待图片加载完成之后。

用户的绝大多数代码应放到$(document).ready()事件里执行，如

<html>

<head>

$(document).ready(function() {

用户代码

});

脚本

</script>

</head>

<body>

内容

</body>

</html>

事件处理

之几个重大事件

触发对象

事件名字

备注

document

ready()

不用等到图片加载完

window，imag等

load()

window的load要等到图片加载完后才会触发；

window

unload()

$(window).unload(function(){})

可能有的老浏览器不能支持，需用

$(window).bind('unload',function(){})替代

浏览器窗口

resize()

窗口被滚动

scroll()

页面的所有元素

error()

元素加载失败，如HTTP请求出错；

如

事件处理

之鼠标

click；

dbclick；

mousedown、mouseup：可用于拖放；

mouseenter、mouseleave；

mousemove；

mouseout、mouseover：有些问题；

hover：结合mouseenter、mouseleave而成。如可以$('.container').hover(function(){} ,function(){});，前后两个函数分别在mouseenter和mouseleave时执行；

事件处理

之键盘

keydown

keypress

keyup

事件处理

之表单

change、

focus、blur、

focusin、focusout、

select、

submit、

reset、

绑定事件处理函数的三大方法

bind()：当关联到事件处理函数后，接下来所复制的新元素却不具有老元素同样的事件处理函数；

live()：当关联到事件处理函数后，接下来所复制的新元素具有老元素同样的事件处理函数；但live()不支持链式调用；

delegate()：既能像live一样关联事件处理函数，又支持链式调用。

很多事件处理既能用简写形式，也能用绑定形式，如鼠标的事件，

$('.container').click(function(){})

$('.container').bind('click' ,function(){})

但绑定形式可以一次为多个事件绑定同一个处理函数，或用对象字面量

$('.container').bind('click dbclick ' ,function(){});

$('.container').bind({mouseenter : function(){} , mouseleave : ,function(){}});

特效之

显示/隐藏设置

（参数还可能更丰富）

1.show()：元素显示，同时DOM的display属性变为block

重载：show([duration][callback])

2.hide()：元素隐藏，同时DOM的display属性变为none

重载：hide([duration][callback])

（上述两者，duration可以是'fast'、'slow'、或毫秒数，callback是完成后紧接着调用的函数）

3.toggle()在显示/隐藏之间进行切换

另一个重载形式是：toggle(function(){},function(){})，与无参数的toggle()完全不同。作用是元素每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。但是这个函数只用于点击。

1.slideDown()：元素滑下显示，与show()对应

重载：slideDown ([duration][callback])

2. slideUp()：元素滑上隐藏，与hide ()对应

重载：slideUp ([duration][callback])

3.slideToggle()：滑动式的在显示/隐藏之间进行切换

另一个形式是：slideToggle ([duration][callback])，设置了速度和回调函数。

特效之

淡入/淡出

它们将对被选中元素的CSS：style的opacity属性进行设置。

1.fadeIn()：淡入

重载：fadeIn([duration][callback])

2.fadeOut()：淡出

重载：fadeOut([duration][callback])

3.fadeTo([duration][opacity][callback])：将元素的透明度改变为指定的透明度。

特效之

延迟执行后续函数

形式：delay(毫秒数).后续函数()

如$('.tool-tip').delay (2000).fadeOut(900);

高级动画

animate()

形式：animate({对象字面量},duration, [callback])

其中，对象字面量可以是一些CSS控制,即{属性:值,属性:值,属性:值,…}，代表目标状态。

常常需要下述一些函数的配合，

stop():停止动画；

clearQueue():清理动画序列；

常配合使用的javascript原生函数

1.setInterval(function, newsInterval)和clearInterval()。

setInterval在通知停止前会不间断执行指定的函数。

2.setTimeout(function, newsInterval)和clearTimeout()。

setTimeout指定的函数只执行一次。

其它一些函数

一.

attr()：设置或获取某属性的值。

val()：比如取表单项的值。

二.

parents('字符串') :从父元素开始向上查找到第一个符合'字符串'的元素。与过滤器:parent功能不同。

closeset('字符串'):从当前元素开始向上查找到第一个符合'字符串'的元素。（有可能结果是当前元素）

三.

event.preventDefault()第85页。

效果等同于return false，即阻止事件的默认行为（如阻止表单提交、阻止文本框字符上屏）

四.

find()：找到第一个满足'字符串'的元素。如：$(this).find('.subnav').slideDown('slow');

end()：得到包含上一步操作结果的元素，常与find配合来做链式调用

如：'#news'下有'#.politics'和'#.finance'，那么

$('#.politics').css('border','1px solid red');

$('#.finance').hide();

可写成：$('#news').find('#politics').css('border','1px solid red').end().find('#finance').hide();

五

not()：找到不满足'字符串'的元素。如$('.accordion-content').not(':first').hide();

与过滤器:not()效果一样。

六．

index('字符串')：从元素集合中计算出'字符串'代表的元素所在的下标。

$('ul#tabs li a').index(this);

七．

next()：返回下一个兄弟元素

pre()：返回上一个兄弟元素

这两个函数都可以传入'字符串'参数。

对Ajax的支持

这些方法都有很多的重载形式

$选择器.load()

$.ajax()

$.post()

$.get()

非匿名函数转化为匿名函数

（无参才能转换）

（非匿名有利于被其它代码调用）

无参函数

非匿名

$('.mylink').bind('click' ,alertMe);

function alertMe ()

{alert("hello world");}

匿名

$('.mylink').bind('click' ,function(){

alert("hello world");

})

有参函数

这种不行，页面一载入就直接运行alert了

非匿名

$('.mylink').bind('click' ,alertMe("hello world"));

function alertMe (var s)

{alert(s);}

匿名

无法转化成匿名的

注意：alertMe ()与alertMe 被作为参数时的区别

alertMe ()表示此时调用该函数，将其结果作为参数

alertMe表示将函数本身作为一个参数来使用

比如$('.mylink').bind('click' ,alertMe);不能写成$('.mylink').bind('click' ,alertMe());

预加载图片

P62, 实践了attr()函数