JQuery分析和总结分析和总结.docx

JQuery

一、介绍

Jquery是一个javascript框架

是轻量级的js库，它兼容CSS3。还兼容各种不同的浏览器。

Jquery可以简单的实现Dom编程、事件、实现动画效果，可以更加方便地为网站提供

Ajax服务。

文档非常全面，介绍详细。

它的插件非常多。

Jquery实现页面展现和页面内容的分离。7.宗旨：Writeless,DoMore.

讲课用的版本

讲课用的版本jquery-1.4.4.min.js。

scripttype=text/javascriptsrc=js/jquery1.4.4.min.js

/script

一定要引入该js文件，否则将报错 $isnotdefined

二、常用方法

1.

1.工厂函数

① $

② jQuery

2.ID

2.ID选择器

#号。

3.获取Value值

使用方法val()

inputid=atype=textonblur=pop()

function pop(){

//alert(document.getElementById(a).value)alert($(#a).val())

//alert(jQuery(#a).val())

$#(a).val(你好)

}

4.

4.获取文本值

spanid=mySpan123/span

JAVASCRIPT：alert(document.getElementById(mySpan).innerText)

JQUERY：

JQUERY：alert($(#mySpan).text())

5.

5.获取属性值

attr()

imgid=img

写：$(#img).attr(src,bu01.gif)读：$(#img).attr(src)

spanid=mySpantable=abc123/span

$(#mySpan).attr(table)

6.

6.获取html内容

Html()

tableborder=1

trid=myTr

tdid=myTd123/td

td456/td

/tr

/tablealert($(#myTr).html());

$(#myTd).html(inputtype=\text\value=\+value+\/);

7.

7.文档加载完毕

当文档加载完毕时触发。ready

$(document).ready(function (){alert(aaaaaaaaaaaaaaa);

});

注意，该

注意，该ready可以写多个。

作业：

① 文档加载完毕时打印span标签之间的文本值

② 使用val()、text()、html()、attr()函数

8.

8.标签选择器

直接使用标签即可。

imgid=img

imgid=img1

JAVASCRIPT：alert(document.getElementsByTagName(img).length)

JQUERY：alert($(img).length)

alert($(img).size())

imgclass=imgsimg

imgclass=imgs

imgclass=imgsalert($(.imgs).size())

10.eq()

imgclass=imgsaa=

imgclass=imgsaa=1

imgclass=imgsalert($(img).eq(0).attr(aa))

11.each()

相当于循环。

imgclass=imgsaa=1

imgclass=imgsaa=2

$(img).each(function(i){

alert($(this).attr(aa))

})

处理情况：节点下有子节点，选择器结果有多个元素。

12.size()

返回元素的个数。

13.get()

Get方法可以实现JQuery转换为JAVASCRIPT。

inputid=atype=textonblur=pop()alert($(#a).get(0).value)

注意采用get方法之后，必须采用JAVASCRIPT中的属性或者方法，而不能采用JQUERY

中的方法和属性。

14.find()

找到对应的标签元素。

tableborder=1

trid=myTr

tdid=myTdondblclick=popInp(this)123/td

td456/td

/tr

/table

$(table).eq(0).find(td).each(function(i){

alert($(this).text())

})

})

JQUERY采用链式结构进行方法的拼接。

作业：