注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天高云淡的博客

A bad beginning makes a bad ending.

 
 
 

日志

 
 

Tutorials:Live Examples of jQuery  

2010-10-25 09:53:05|  分类: javascript + jqu |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.changeP{
 color: #FFFFFF;
 border: 2px solid #CC6633;
 width: 150px;
 background-color: #CC6633;
 padding:10px;
 line-height:1.4em;
}
.alert {
 font-weight: bold;
 color: #FFFFFF;
 background-color: #FF0000;
 padding: 10px;
 text-transform:uppercase;
}

.addedtext{
color:#FF0000;
}

pre {
display: none;
}
</style>

<script type="text/javascript" src="jquery-1.4.3.min.js" /></script>
<script type="text/javascript">
 $(document).ready(function()
 {
  $("#one").click(function()
  {
   alert($("div.contentToChange p").size());
  })
  
  $("#two").click(function()
  {
   $("div.contentToChange p.firstparagraph:hidden").slideDown("slow");

   
  })
  
  $("#three").click(function()
  {
   $("div.contentToChange p.firstparagraph:visible").slideUp("slow");
   
  })
  
  $("#four").click(function()
  {
   //$("div.contentToChange p:not(.alert)").append("<strong class="addedtext"> This text was just appended to this paragraph</strong>");
  })
  
  $("#five").click(function()
  {
   $("strong.addedtext").remove();
  })
  
  $("#six").click(function()
  {
   $("div.contentToChange p.thirdparagraph").hide("slow");
  })
  
  $("#seven").click(function()
  {
   $("div.contentToChange p.thirdparagraph").show("slow");
  })
  
  $("#eight").click(function()
  {
   $("div.contentToChange em").css({color:"#993300", fontWeight:"bold"});
  })
  
  $("#nine").click(function()
  {
   $("p.fifthparagraph").addClass("changeP");
  })
  
  $("#ten").click(function()
  {
   $("p.fifthparagraph").removeClass("changeP");
  })
  
 })
</script>
</head>

<body>
<input type="button" id="one" value="Get number of paragraph" />
<input type="button" id="two" value="Show" />
<input type="button" id="three" value="Hide" />
<input type="button" id="four" value="Add" />
<input type="button" id="five" value="Remove" />
<input type="button" id="six" value="Remove paragraph" />
<input type="button" id="seven" value="Show paragraph" />
<input type="button" id="eight" value="Change Italic" />
<input type="button" id="nine" value="Add Class" />
<input type="button" id="ten" value="Remove Class" />
<div style="float:right;width:50%;background:#F5F5F5;" class="contentToChange">
<h2 style="margin-left:30px;">Column 2:</h2>

<p class="alert">Use the buttons to the left to run jQuery code on the HTML below.</p>

<p class="firstparagraph">Lorem ipsum <em>dolor</em> sit amet, consectetuer <em>adipiscing</em> elit, sed diam nonummy nibh euismod <em>tincidunt</em> ut laoreet dolore magna aliquam erat <strong>volutpat</strong>. Ut wisi enim ad minim <em>veniam</em>, quis nostrud exerci <strong>tation</strong> ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

<p class="secondparagraph">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse <strong>molestie</strong> consequat, vel illum <strong>dolore</strong> eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer <strong>adipiscing</strong> elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p class="thirdparagraph">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea <em>commodo</em> consequat. Duis autem vel eum iriure dolor in hendrerit in <em>vulputate</em> velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te <strong>feugait</strong> nulla facilisi.</p>

<p class="fourthparagraph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, <strong>quis</strong> nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in <em>hendrerit</em> in vulputate velit <em>esse</em> molestie consequat, vel illum dolore eu feugiat nulla <strong>facilisis</strong> at vero eros et accumsan et <em>iusto</em> odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te <strong>feugait</strong> nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh <strong>euismod</strong> tincidunt ut laoreet <em>dolore</em> magna aliquam erat volutpat.</p>

<p class="fifthparagraph">Lorem ipsum <em>dolor</em> sit amet, consectetuer <em>adipiscing</em> elit, sed diam nonummy nibh euismod <em>tincidunt</em> ut laoreet dolore magna aliquam erat <strong>volutpat</strong>. Ut wisi enim ad minim <em>veniam</em>, quis nostrud exerci <strong>tation</strong> ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

<p class="sixthparagraph">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse <strong>molestie</strong> consequat, vel illum <strong>dolore</strong> eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer <strong>adipiscing</strong> elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

</div>

</body>
</html>

  评论这张
 
阅读(791)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017