当前位置: 代码迷 >> Web前端 >> jquery从零开始学习札记
  详细解决方案

jquery从零开始学习札记

热度:94   发布时间:2012-10-09 10:21:45.0
jquery从零开始学习笔记
第一个例子:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").click(function(){
  $(this).hide();
  });
});
</script>
</head>

<body>
<p>点击就消失.</p>
</body>

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

总结:1.普通HTML元素的选择          $("p")
     2.包含类选择器的HTML元素选择  $(".test")
     3.包含id选择器的HTML元素选择  $("#test")
     4.文档对象的选择               $(document)
     5. $(this)  表示当前元素,即调用方法的元素。
      6.$("p").click()

例子2.
<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>
总结:
    $(this).fadeOut();用于淡出。

例子3:
<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>

总结:
    1.取得当前元素的父元素  $(this).parents(".ex")
   2.$(this).parents(".ex").hide("slow");慢慢隐藏
   3。$(".ex .hide"),取得div下class选择器为hide的元素
  
  相关解决方案