jquery基础教程.docx

jquery基础教程.docx

《jquery基础教程.docx》由会员分享，可在线阅读，更多相关《jquery基础教程.docx（27页珍藏版）》请在冰豆网上搜索。

jquery基础教程

第1章.选择符—取得你想要的一切

$（）会替换FOR循环访问一组元素的需求，放到贺括号中的任何元素都将自动执行循环遍历。

并且会保存到一个JQUERY对象中，如果一个页面有几个JQUERY库，有可能会产生冲突，最简单的方式是把每个库用一个JQUERY代替，也可以参考插件中的解决方法。

用JQuery取得的元素是JQuery对像，不是普通的DOM对象，但可以访问包装在jQuery对象中的DOM元素。

$（document）.ready会在DOM加载后立即执行。

这个$（）中的参数是一个DOM对象，也可以是一段HTML代码。

所以用$（document.createElement（‘script’））是可以的。

$（document）.ready（function（）

{

alert（'dd'）;

}）;

第1节.$的其他用法

$（函数）:

DOM载入后就执行该函数.所以$（document）.ready（）可以写做$（）

$（选择器部分,选择器来源）:

这个举例说明

$（"input:

radio",document.forms[0]）:

在文档的第一个表单中,搜索所有单选按钮

$（"div",xml.responseXML）:

查询指定XML文档中的所有div元素

第2节.访问DOM元素

1.取得DOM元素：

get（index）

Ø例：

取得id=”my”属性的元素集合的第一个元素的标签名。

varmyTag=$（‘#my’）.get（0）.tagName或$（‘#my’）[0]。

其中jquery变量也可以用vart=$（‘’）来定义，但t只能调用jquery的方法。

Øget（）

如果没有参数,返回所有,是一个对象数组;如果带参数,必须是数字,基数从0开始.例子:

$（"div"）.get（）:

返回一个div对象数组

$（"div"）.get

（1）:

返回第二个div对象，也可以简写成$（‘div’）[1]

Øindex（需求的元素节点对象）

返回数字.用个例子说明:

$（"div"）.index（$（".test"））[1]//表示从所有div节点中查找class属性为test的节点.并且找的是第二个节点（基数从0开始）.返回值是该节点在div节点中的位置（基数也是从0开始）.

2.this选择符

var$ele=$（this）;//返回的是jquery对象

第3节.选择符类型

CSS选择符，XPath选择符及其它选择符。

第2章.事件—扣去扳机

前面提到的$（document）.ready（）事件相当于window.onload。

但前者是DOM树下载之后就可以执行，这时有些图片文件可能没下载完，所以相应的属性不能执行，可以考虑用.load（）方法来代替。

而onload要等所有的图片和相关的文件都下载后才执行，速度上可能要慢一些。

$（'img'）.load（function（）{}）;

一般的onload只能加bind一个函数，但用jquery可以bind多个函数。

也就是说当

window.onload=fu1;

window.onload=fu2;

这时程序只会执行fu2；如果用bind绑定后会依次顺序执行，是一个继承的过程。

这里的onload只是一个例子。

第1节.一般的事件

Ø$（‘’）.bind（‘’,function（）），如果用$（this）则指当前控件。

允许向$（）传递DOM元素，但只允许是this，也可像if（this.id==“mytag”）这样来使用。

在function中还可以带参数，详细参考下面的事件目标一节。

Øunbind（‘’,function（））：

解除绑定。

Øone（‘’,function（））：

如果有些事件只触发一次就解除可以调用此方法。

Ø$（"p"）.bind（"click",function（）{alert（$（this）.text（））;}）;      //为每个p元素添加单击事件

Ø$（"p"）.unbind（）;      //删除所有p元素上的所有事件

Ø$（"p"）.unbind（"click"）      //删除所有p元素上的单击事件

Ø向方法中传递参数

$（function（）{

$（'p'）.bind（'click',{'str1':

'hello','str2':

'world'},function（event）{

alert（event.data['str1']+event.data['str2']）;

}）;

}）;

$（document）.ready（function（）

{

var$ok=$（'#ok'）.attr（'id'）;//取得属性的使用方法

alert（$ok）;

$（'#ok'）.bind（'click',function（）

{alert（this.value）}）;//这里的this使用方法

}）;

第2节.复合事件

⏹.toggle（function,function）：

交替事件，接受两个参数，在第一次点击时运行第一个参数指定的函数。

第二次点击时执行第二个参数指定的函数。

⏹.hover（function,function）：

第一函数在鼠标进入时执行，第二个函数在鼠标离开时执行。

⏹.toggleClass（‘cssClassName’）：

这个方法一般会用addClass取代。

⏹.addClass（‘cssClassName’）：

⏹removeClass（‘cssClassName’）：

（可选）一个或多个要删除的CSS类名，请用空格分开，如果不带名称，则是删除所有的样式。

⏹string.test（this.value）：

验证是否符合字符串要求//这个方法手册中没有

⏹trigger（‘click’）：

$（‘#switcher’）.trigger（‘click’）模拟事件的操作，这个是在页面一加载就开始执行。

不需要用户点击，常用于表单提交验证等。

第3节.事件传播

事件触发一般有两种方式：

事件捕获和事件冒泡，这是不同IE厂商的不同标准所致。

但如何用JQUERY的机制来绑定事件，否则也存在跨浏览器的问题，相关的方法都自动处理了这个问题，没有处理的也可以用内置的方法来解决。

⏹事件捕获：

事件从外层向内层传输。

⏹事件冒泡：

与上相反，这是IE的机制。

1.解决方法1：

事件目标

原理就是在function中传递event参数，这是DOM中规定的类型，然后利用event.target属性来进行验证。

$（'#btu1'）.bind（'click',function（event）{

if（event.target==this）

||if（$（event.target）.is（‘btu1’））//这句可有可无

{

alert（event.target）;

}

}）;

2.解决方法2：

JQUERY内置方法

也传递event参数，但用到的是stop方法来完成。

$（'#btu1'）.bind（'click',function（event）{

alert（event.target）;

event.stopPropageation（）;

}）;

第4节.其它几个有用的全局方法

1.event.preventDefault（）

在默认操作前终止将在进行的默认操作，如输入表单后按回车则会提交表单，如果在提交前调用此函数。

则可以终止提交行为，也可以有JS中的returnfalse来完成相应的功能，JS中验证后就是通过返回false来阻止提交操作。

2.$.browser

浏览器类型：

检测浏览器类型。

有效参数：

safari,opera,msie,mozilla。

如检测是否ie：

$.browser.isie，是ie浏览器则返回true，其中$是jQuery的缩写。

3.$.extend（target,prop1,propN）

用一个或多个其他对象来扩展一个对象，返回这个被扩展的对象。

这是jquery实现的继承方式。

例如：

$.extend（settings,options）; //合并settings和options，并将合并结果返回settings中，相当于options继承setting并将继承结果保存在setting中。

varsettings=$.extend（{},defaults,options）;//合并defaults和options，并将合并结果返回到settings中而不覆盖default内容。

可以有多个参数（合并多项并返回）

4.$.map（array,fn）

数组映射。

把一个数组中的项目（处理转换后）保存到到另一个新数组中，并返回生成的新数组。

如：

vartempArr=$.map（[0,1,2],function（i）{returni+4;}）;

tempArr内容为：

[4,5,6]

vartempArr=$.map（[0,1,2],function（i）{returni>0?

i+1:

null;}）;

tempArr内容为：

[2,3]

5.$.merge（arr1,arr2）

合并两个数组并删除其中重复的项目。

如：

$.merge（[0,1,2],[2,3,4]）      //返回[0,1,2,3,4]

6.$.trim（str）

删除字符串两端的空白字符。

如：

$.trim（"  hello,howareyou?

  "）;        //返回"hello,howareyou?

"

第3章.效果—为操作添加艺术性

主要讨论CSS样式添加删除和元素的淡入淡出等操作。

第1节.修改内联的CSS

.css（）：

这个方法集成get和set于一身。

主要是由参数形式来定：

$（‘’）.css（‘fontSize’）则是调用的get方法。

$（‘’）.css（‘property’,‘value’）则是调用的set方法。

$（‘’）.css（{‘property1’:

’value1’,‘property2’:

’value2’}）如果value是数字，则不需要‘’号

第2节.显示和隐藏

⏹.hide（）：

也可以带参数slow、normal、fast或int数，如hide（‘slow’）或是指定毫秒级的数据hide（850）。

如果带以上三个参数则元素会同时修改高度，宽度和不透明度三个属性。

⏹.show（）：

以上两个方法可以有两种方法指定效果从高，宽，透明度。

第3节.多重效果

以上show和hide函数可以同时改变宽，高，透明度，为了实现单独的效果可以用以下四个函数来代替。

⏹fadeIn（）和fadeOut（）：

不透明度

⏹fadeTo（）：

不透明度

⏹slideDown（）和slideUp（）：

高度。

构造函数如下，不可以不带参数，fadeIn（‘slow’,function（））回调函数。

Øspeed（String,Number）:

三种预定速度之一的字符串（"slow","normal",or"fast"）或表示动画时长的毫秒数值（如：

1000）

Øcallback（Function）:

（Optional）（可选）在动画完成时执行的函数

⏹也可以用animate（param1,spead,easing,function）方法来代替

Øparam1：

用{}括起来的CSS样式表。

Øspead：

slownormalfast或表示动画时长的毫秒数值（如：

1000）。

Øeasing：

可选的缓动类型，运动的轨迹，一般要加入第三方插件。

Øfunction：

回调函数。

例：

animate（{height:

’’,width:

’’,opacity:

’’},‘slow’）其中heigth,width要以指定数字，指定移动到哪，但移动时相对于块级元素来说的，元素默认定位方式为static，如果不设成relative和absolute则不会发生移动。

第4章.DOM操作—基于命令改变页面

这一章中有些效果可以用前几章的方法来代替，在实际操作中建议还是用前几章的方式来完成，可能会有些麻烦。

第1节.属性操作

⏹.attr（）：

attr（‘property’,‘value’）;

attr（{property1:

’value1’,property2:

’value2’}）

⏹.removeAttr（‘propertyName’）：

一次只能移徐一个。

⏹.each（function）

例：

$（‘’）.each（function（index））这样每次index都会加1。

实际操作只能传index参数。

但在方法内部可以用this或$（this）来取得此次遍历的对象。

第2节.取得属性的值

⏹$（"input"）.val（"）;      //返回表单输入框的value值

⏹$（"input"）.val（"test"）;      //将表单输入框的value值设为test

⏹$（"#msg"）.height（）;              //返回id为msg的元素的高度

$（"#msg"）.height（"300"）;      //将id为msg的元素的高度设为300

⏹$（"#msg"）.width（）;              //返回id为msg的元素的宽度

$（"#msg"）.width（"300"）;      //将id为msg的元素的宽度设为300

第3节.插入新元素

1.在每个匹配的元素中插入新元素

⏹$（par1）.append（par2）：

加在匹配的元素中的最后元素的后面，其中par1和par2是DOM对像，所以可以是css等选择符，也可以是一段html代码。

⏹appendTo（）：

⏹prepend（）：

加在匹配的元素中的第一个元素的前面

⏹prependTo（）

2.在每个匹配的元素相邻的位置上插入新元素

⏹after（）:

$（‘’）.after（htmlcode）;

⏹insertAtert（）:

$（‘htmlcode’）.inserAter（‘div.chapterp’）.

⏹before（）

⏹insertBefore（）

3.在每个匹配的元素外面插入新元素

⏹wrap（）：

参数为一个标签，如果标签带内容则忽略。

$（'#p1'）.wrap（'aaa

用新元素或文本替换每个匹配的元素中的元素。

⏹html（）：

如果不带参数，则和text（）一样，返回对象的文档，带参数，则参数是html标签。

⏹$（‘’）.html（“dfsafasdfsaf”）相当于innerHtml（）。

⏹text（）：

和上面差不多。

只不过不把标签做为文本来返回。

⏹$（"#msg"）.html（）;  //返回id为msg的元素节点的html内容。

$（"#msg"）.html（"newcontent"）;      

//将“newcontent”作为html串写入id为msg的元素节点内容中,页面显示粗体的newcontent

4.移除每个匹配的元素中的元素

⏹empty（）：

从文档中移除每个匹配元素及其后代，但不实际删除他们

⏹remove（）：

5.复制元素及元素的事件

⏹clone（）：

默认情况下不会复制后代结点，但当参数为true时则复制。

这个方法不会复制结点的事件，可以换成cloneWithEvent（）来取代或手工添加。

第5章.AJAX—让网站与时俱进

复用AJAX技术来实现异步传输。

由于浏览器对于XMLHttpRequest对象实现的不一致性，导致跨浏览器的问题，所以很多框架拿出自己的方案来实现跨浏览器。

第1节.追加HTML.load（）方法

$（‘#dictionary’）.load（“a.html”）：

参数是url，取得html代码段。

但有可能存在网络延迟问题，这个方法还可以追加一个回调函数。

第2节.追加JSON对象$.getJSON方法

JS对像，是由一些键-值对组成，而且可以方便使用{}来定义，数组则用[]来定义。

以下是一个数组，有几点要求注意，1，数组间和数值间用，分开；2，KEY和VALUE用双引号。

[

{

"term":

"liudong",

"quote":

[

"a1",

"b1",

"c1"

],

"age":

"a"

},

{

"term":

"liudong1",

"quote":

[

"a1",

"b1",

"c1"

],

"age":

"a1"

}

]

$.getJSON（‘x.json’,function（data））：

function为回调函数，此函数保存了x.json的内容。

JSON文件格式要求非常严格，如果出错，IE也不会报错，只是在后台终止执行。

functioninit（）

{

$（'#btu1'）.bind（'click',function（）{

$.getJSON（'a.json',function（data）{

$.each（data,function（index,entrys）{

varhtml=entrys['term'];

alert（html）;

}）

}）;

}）;

}//以上方法index和entrys一定要存在，参数名不固定。

第3节.动态加载JS脚本$.getSript（url）方法

$.getScript（url）全局方法，参数是一个URL。

第4节.追加XML对象$.get（）方法

取得URL指定的文件，然后将纯文本格式的数据提供给回调函数。

但一般由MIME类型指定。

如果指定是XML则提供给回调函数的将是一个XMLDOM树，JQUERY对XML的解析与对HTML的解析一样，可以使用find（）、filter（）及其它方法。

$.get（'b.xml',function（data）

{

$（data）.find（'entry'）.each（function（）

{

var$entry=$（this）;//entry和term是b.xml的结点和属性。

$entry.attr（'term'）;

}）;

}）;

returnfalse;

第5节.AJAX请求

⏹$.get（‘a.jsp’,{“name”:

”liudong”,“age”:

”12”},function（data））

⏹$.post（‘a.jsp’,{“name”:

”liudong”,“age”:

”12”},function（data））

⏹$（‘’）.load（‘e.jsp’，{“name”:

”liudong”,“age”:

”12”}）

为了防止这种调用方式打开新的URL，在事件处理程序中必须返回false。

在AJAX处发时会调用两个全局的函数.ajaxStart（）,.ajaxStop（）。

利用这种方式可以做一个提示页。

如：

loading....