//点击我我就消失
<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特效集锦特别多的小例子,实用性很强,下载下来的html都是直接可以运行的。
jquery特效圣诞雪花
前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...
网络收集100个常用的jquery特效和插件打包下载
Jquery特效,都是在各大网站上积分下载下来的,里面包含20个jquery特效和100个js特效
jQuery超酷弹出窗体特效,jQuery特效,最大最小化和关闭收缩功能和Css
jquery特效,
js特效和jquery特效
自己亲自整理的常用jquery 特效 共享
包含28个常用的jquery特效, 如:日历,导航菜单,图片截图上传,全国高校选择,星级评价,时钟,表情,弹出登录和注册 给你的页面添彩!
27个国外达人制作的超酷超炫JQuery特效 包括效果和源码 任何一个都能给你的网页增色不少
鼠标划过显示“回复”等隐藏的内容jquery特效代码 鼠标划过显示“回复”等隐藏的内容jquery特效代码 鼠标划过显示“回复”等隐藏的内容jquery特效代码
jquery.ripples是一款基于WebGL的效果非常炫酷的元素背景水波涟漪jQuery特效插件。该jQuery插件通过强大的WebGL,可以在指定的元素上添加一个水波层,制作出水波涟漪的炫酷效果,并且可以使用鼠标来和它进行互动。
【Jquery特效1】jQuery页面滚动显示进度特效
代码效果:圣诞节雪花飘落jQuery特效是一款基于jquery实现的雪花飘落网页装饰特效。
jquery 图片放大 实例 jquery特效jquery 图片放大 实例 jquery特效jquery 图片放大 实例 jquery特效jquery 图片放大 实例 jquery特效jquery 图片放大 实例 jquery特效jquery 图片放大 实例 jquery特效
jQuery特效圣诞下雪花,通过jquery来实现下雪的特效,用在个人网站是比较不错的,作为一个背景,还是很酷炫的,php中文网推荐下载!
jquery 特效 强大易学的高级特效 好实用 点击文字便文本框编辑,添加新行多行
Jquery特效大全,精心收集常用jquery特效,大概上百个常用的,很经典,相信你一定会喜欢的,记得推荐给你的朋友啊