jQuery:1.[1-2],jQuery基础学习(一)

ylbtech-jQuery:jQuery学习

jQuery语法实例

$(this).hide()
jQuery 的 hide() 函数,隐藏当前的 HTML 元素。
$("p").hide()
jQuery 的 hide() 函数,隐藏所有 <p> 元素。
$(".test").hide()
jQuery 的 hide() 函数,隐藏所有 class="test" 的元素。
$("#test").hide()
jQuery 的 hide() 函数,隐藏 id="test" 的元素。
 

Hiding - Sliding- Fading

jQuery fadeOut()
简单的 jQuery fadeout() 函数。
jQuery hide()
简单的 jQuery hide() 函数。
Hide explanations
如何隐藏部分文本。
Slide panel
简单的 Slide Panel 效果。
jQuery animate()
简单的 jQuery animate() 函数。
 
jQuery:1.1.1,$(this).hide()返回顶部
<html>

<head>

<script type="text/javascript" src="jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

  $(this).hide();

});

});

</script>

</head>



<body>

<button type="button">Click me</button>

<hr>

test

<button type="button">Click me2</button>

<button type="button">Click me3</button>

<button type="button">Click me4</button>

</body>



</html>
jQuery:1.1.2,$("p").hide()返回顶部
<html>

<head>

<script type="text/javascript" src="jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("p").hide();

});

});

</script>

</head>



<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button type="button">Click me</button>

</body>

</html> 
jQuery:1.1.3,$(".test").hide() 返回顶部
<html>

<head>

<script type="text/javascript" src="jquery/jquery.js"></script>

<script type="text/javascript">

$(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>

</html>
jQuery:1.1.4,$("#test").hide() 返回顶部
<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

<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>



</html>
jQuery:1.2.1,fadeOut()返回顶部
<html>

<head>

<script type="text/javascript" src="jquery/jquery.js"></script>

<script type="text/javascript">

$(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>



</html>
jQuery:1.2.2.hide()返回顶部
<html>



<head>

<script type="text/javascript" src="Jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("p").click(function(){

  $(this).hide();

  });

});

</script>

</head>



<body>

<p>If you click on me, I will disappear.</p>

</body>



</html> 
jQuery:1.2.3,explanations返回顶部
<html>

<head>

<script type="text/javascript" src="jquery/jquery.js"></script>

<script type="text/javascript">

$(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>



</body>

</html>
jQuery:1.2.4,panel返回顶部
<html>

<head>



<script type="text/javascript" src="jquery/jquery.js"></script>

<script type="text/javascript"> 

$(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>

 

</body>

</html>
jQuery:1.2.5,animation返回顶部
<html>

<head>

<script type="text/javascript" src="jquery/jquery.js"></script>

<script type="text/javascript"> 

$(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>

 

</body>

</html>

 

warn 作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

你可能感兴趣的:(jquery)