//点击我我就消失
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>点击我，我就消失</p>
</body>
//点击按钮,所以的P元素隐藏
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
//点击按钮，class为test的元素隐藏
$(document).ready(function()
{
$("button").click(function()
{
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
//点击按钮，id=test的元素隐藏
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button type="button">Click me</button>
</body>
//点击id=test的元素，淡出页面
$(document).ready(function(){
$("#test").click(function(){
$(this).fadeOut();
});
});
</script>
</head>
<body>
<div id="test" style="background:yellow;width:200px">CLICK ME AWAY!</div>
<p>如果您点击上面的框，它会淡出。</p>
</body>
//点击我我就慢慢消失
$(document).ready(function(){
$(".ex .hide").click(function(){
$(this).parents(".ex").hide("slow");
});
});
</script>
<style type="text/css">
div.ex
{
background-color:#e5eecc;
padding:7px;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body>
<h3>Island Trading</h3>
<div class="ex">
<button class="hide" type="button">Hide me</button>
<p>Contact: Helen Bennett<br />
Garden House Crowther Way<br />
London</p>
</div>
<h3>Paris Trading</h3>
<div class="ex">
<button class="hide" type="button">Hide me</button>
<p>Contact: Marie Bertrand<br />
265, Boulevard Charonne<br />
Paris</p>
</div>
//点击向下卷曲
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
<body>
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
<p class="flip">请点击这里</p>
//点击扩大缩小
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>
</head>
<body>
<p><a href="#" id="start">Start Animation</a></p>
<div id="box"
style="background:#98bf21;height:100px;width:100px;position:relative">
</div>
$("p").html("W3School"); //改变元素内容
$("p").append(" <b>W3School</b>."); //在元素内追加
$("p").after(" W3School."); //在元素后追加
$("p").css("background-color","red"); //改变css样式
$("p").css({"background-color":"red","font-size":"200%"}); //改变多个css样式
$("#result").html($(this).css("background-color"));//获取元素属性
$('#myDiv').load('/jquery/test1.txt'); //
htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
$("#myDiv").html(htmlobj.responseText); //通过ajax来改变文本内容
分享到：
相关推荐
**jQuery特效集锦**是网页开发中非常有价值的学习资源，尤其对于那些想要提升网页交互体验的开发者来说。jQuery是一款强大的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务，使得网页...
【jQuery特效圣诞雪花】 在网页设计中，动态效果可以增加用户体验，使页面更加生动有趣。"jQuery特效圣诞雪花"就是一个典型的例子，它利用jQuery库来实现一种节日氛围的动画效果，让网页背景飘落雪花，营造出冬日...
"web前端jquery特效巨集合"这一资源集合，为学习者提供了一个全面的jQuery特效实践平台，包括101个精心设计的jQuery特效以及《锋利的jQuery》电子书和源码，旨在帮助开发者快速提升jQuery应用能力。 首先，jQuery的...
《jQuery特效与实例集合——深度探索JavaScript魅力》 在当今的Web开发领域，jQuery以其简洁易用的API和强大的功能，成为了JavaScript库的首选。这个名为"jQuery特效和实例集合"的压缩包，包含了50多个精心设计的...
前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...
本资源包包含了28个实用的jQuery特效，可以帮助开发者快速实现各种交互功能，提升用户体验，使得网页更加生动有趣。 1. **日历插件**：jQuery提供了许多日历插件，如jQuery UI的Datepicker，可以方便地添加日期选择...
本资源包含100个常用的jQuery特效和插件，旨在帮助开发者提升网页的用户体验和视觉效果。 1. **选择器与遍历**： jQuery提供了强大的选择器，如ID选择器(#id)，类选择器(.class)和元素选择器(element)，以及组合...
《jQuery特效深度解析》 jQuery，作为一款广泛应用于前端开发的JavaScript库，以其简洁的API和强大的功能赢得了开发者们的喜爱。在网页动态效果的实现上，jQuery特效扮演着至关重要的角色，极大地提高了开发效率，...
这个“超酷炫jQuery特效”集合包含了一系列由国外编程达人精心设计和实现的特效，旨在为网页增添互动性和视觉吸引力。** **一、jQuery基础** 1. **选择器**: jQuery的选择器是其核心功能之一，它允许开发者轻松地...
本资源“常用jQuery特效汇总”包含了多种常见的jQuery特效，旨在帮助开发者快速构建具有动态效果的网页。 1. **选择器**：jQuery的选择器功能强大，能够方便地选取DOM元素。例如，`$("#id")`选取ID为指定值的元素，...
**jQuery特效概述** jQuery是一个广泛使用的JavaScript库，它极大地简化了JavaScript代码的编写，特别是对于网页动态效果和交互。jQuery的出现使得开发者可以快速、高效地实现各种复杂的网页特效，无需深入理解底层...
"最新各类jquery特效插件&前端必备"这个主题涵盖了jQuery在现代Web开发中的广泛应用，包括3D标签、表单处理、表格操作、弹出层、窗口管理、导航设计、评分系统、时间与日历组件、进度条、图片处理、文字动画、广告...
js特效和jquery特效
【jQuery特效介绍】 jQuery是一种广泛应用于网页开发的JavaScript库，它简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。jQuery的核心特性是“Write Less, Do More”，即通过简洁的API设计使得开发者...
Jquery是继prototype之后又一个优秀的Javascript框架。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使...
"可自由变换布局排版的jquery特效.zip"这个压缩包文件，显然是一个包含jQuery特效的资源集合，特别关注的是布局和排版的动态变化，这在网页设计和开发中是非常关键的一环。 jQuery的布局和排版特效通常是通过其强大...
【jQuery特效圣诞下雪花】是一种基于JavaScript库jQuery的创意网页特效，主要应用于圣诞节主题的网站设计，为用户提供一种模拟真实雪花飘落的视觉体验。这种特效可以增添网站的节日氛围，提升用户浏览时的互动性和...
jquery.ripples是一款基于WebGL的效果非常炫酷的元素背景水波涟漪jQuery特效插件。该jQuery插件通过强大的WebGL，可以在指定的元素上添加一个水波层，制作出水波涟漪的炫酷效果，并且可以使用鼠标来和它进行互动。
本文将深入探讨“jQuery超酷弹出窗体特效”，包括如何实现最大最小化、关闭收缩功能以及与CSS的结合使用。 首先，jQuery的弹出窗体特效通常涉及到创建一个可浮动的对话框或模态窗口，这些窗口可以用于显示信息、...
**jQuery特效合集详解** jQuery，作为一款广泛使用的JavaScript库，极大地简化了DOM操作、事件处理、动画制作等任务，让网页开发变得更加高效。本文将深入探讨jQuery特效合集中的重要知识点，帮助开发者在实际项目...