Jquery实验报告.docx

资源描述

Jquery实验报告.docx

《Jquery实验报告.docx》由会员分享，可在线阅读，更多相关《Jquery实验报告.docx（14页珍藏版）》请在冰点文库上搜索。

Jquery实验报告.docx

Jquery实验报告

〈！

DOCTYPEhtmlPUBLIC”—//W3C//DTDXHTML1。

0Transitional//EN””http：

//www。

w3。

org/TR/xhtml1/DTD/xhtml1-transitional。

dtd”〉

〈htmlxmlns="http:

//www.w3。

org/1999/xhtml”>

〈metahttp—equiv=”Content-Type"content="text/html;charset=utf—8"/〉

〈scripttype="text/javascript"src=”script/jquery-1.8。

1.min。

js"〉

〈ptitle="选择你最喜欢的水果.">你最喜欢的水果是?

〈lititle=”苹果">苹果

菠萝〈/li〉

//这里输入替换的代码

var＄li=$（"ulli：

（1）”）；

varli_txt=＄li.text（）;

alert（li_txt）;

var＄para=＄（"p"）；

varp_txt=＄para.attr（"title"）;

alert（p_txt）；

var＄li_1=＄（”〈li〉香蕉〈/li>”）;

var＄li_2=＄（"

雪梨〈/li>”）;

$（”ul”）。

append（$li_1）;

$（"ul”）。

append（$li_2）;

var＄li_1=＄（”

var$li_2=＄（"〈lititle=’雪梨’>雪梨

var$li_3=$（”其它〈/li〉"）;

var＄parent=＄（”ul”）;

var$two_li=$（”ulli:

（1）"）;

＄parent。

append（＄li_1）；

$parent.prepend（＄li_2）;

＄li_3。

insertAfter（＄two_li）；

var$one_li=＄（”ulli：

（1）"）；

var＄two_li=$（"ulli:

（2）”）;

＄two_li。

insertBefore（＄one_li）;

$（"ulli:

（1）"）.appendTo（"ul"）;

＄（”ulli"）。

remove（”li［title!

=菠萝]”）;

＄（”ulli：

（1）”）。

empty（）；

$（”ulli”）。

click（function（）｛

$（this）.clone（）。

appendTo（"ul”）；

｝）

$（"p”）。

replaceWith（"〈strong〉你最喜欢的水果是

将〈p>元素的HTML代码改成

〈ptitle="选择你最喜欢的水果。

">你最喜欢的水果是?

〈/strong〉

varp_html=＄（”p”）。

html（）；

alert（p_html）

varp_text=$（”p"）.text（）;

alert（p_text）

〈！

doctypehtml〉

〈html〉

〈metacharset=”utf—8”>

〈title>无标题文档

〈scriptsrc="script/jquery-1。

8.1。

min.js”type="text/javascript”>

〈body〉

〈script〉

＄（function（）｛

//对地址框进行操作

＄（”＃address"）。

focus（function（）{

vartxt_value=$（this）。

val（）;

if（txt_value==”请输入邮箱地址"）{

$（this）。

val（””）；

｝

｝）;

$（”#address”）.blur（function（）｛

vartxt_value=＄（this）。

val（）;

if（txt_value=="”）{

$（this）。

val（"请输入邮箱地址”）;

｝

}）；

//对密码框进行操作

＄（”＃password”）.focus（function（）｛

vartxt_value=$（this）.val（）；

if（txt_value==”请输入邮箱密码"）{

＄（this）.val（””）;

｝

}）；

$（"#password"）。

blur（function（）｛

vartxt_value=$（this）.val（）;

if（txt_value==”"）{

$（this）.val（”请输入邮箱密码”）;

｝

｝）

｝）；

〈/script>

〈/html〉

var$p1=＄（"p"）.next（）；//取得紧邻

var＄ul=$（”ul"）。

prev（）；//取得紧邻〈ul〉元素前的同辈元素

var$p2=＄（”p"）.siblings（）;//取得〈p〉元素的同辈元素

varoffset=＄（”p”）。

offset（）;//获取〈p〉元素的offset（）

varleft=offset。

left；//获取左偏移

vartop=offset。

top；//获取上偏移

varposition=＄（”p”）。

position（）；//获取

varleft=position.left;//获取左偏移

vartop=position.top；//获取右偏移

var＄p=＄（"p"）；

varscrollTop=$p。

scrollTop（）;//获取元素的滚动条距顶端的距离

varscrollLeft=$p。

scrollLeft（）;//获取元素的滚动条距离左侧的距离

$（"textarea"）。

scrollTop（300）；

＄（”textarea"）。

scrollLeft（300）;

<！

doctypehtml>

〈html>

〈head〉

8.1.min.js”type="text/javascript">

〈/head〉

〈body>

提示1。

〈p〉

〈ahref="#”class=”tooltip"title="这是我的超链接提示2。

"〉提示2。

〈/a〉

〈/p>

〈p>

”〉这是自带提示1.

〈/p〉

〈p>

〈ahref="#"title="这是我的超链接提示3。

">这是自带提示2。

〈scripttype=”text/javascript"〉

$（function（）{

＄（"a.tooltip"）.mouseover（function（）｛

//显示title

vartooltip=”

title+”〈/div>";

＄（”body"）.append（tooltip）；

$（"#tooltip"）.css（{”top”:

e。

pageY+”px",”left"：

e。

pageX+"px”｝）.show（"fast”）;

｝）.mouseout（function（）｛

//隐藏title

$（”#tooltip"）。

remove（）；

｝）

}）

〈/script〉

〈/html〉

展开阅读全文