jQuery 实例

你想增进 jQuery 技能吗?

jQuery 选择器

$(this).hide()

演示 jQuery 的 hide() 函数,隐藏当前的 HTML 元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>芝麻教程(web3.xin)</title> 
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(this).hide();
  });
});
</script>
</head>

<body>
<button>点我</button>
</body>
</html>

$("p").hide()

演示 jQuery 的 hide() 函数,隐藏所有 <p> 元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>芝麻教程(web3.xin)</title> 
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>

$(".test").hide()

演示 jQuery 的 hide() 函数,隐藏所有 class="test" 的元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>芝麻教程(web3.xin)</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});
</script>
</head>
<body>

<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body>
</html>

$("#test").hide()

演示 jQuery 的 hide() 函数,隐藏 id="test" 的元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>芝麻教程(web3.xin)</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>
</body>

</html>

jQuery 事件

jQuery click()
演示 jQuery jQuery click() 事件.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>芝麻教程(web3.xin)</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>

<p>如果你点我,我就会消失。</p>
<p>点我消失!</p>
<p>点我也消失!</p>

</body>
</html>
联系我们

邮箱 626512443@qq.com
电话 18611320371(微信)
QQ群 235681453

Copyright © 2015-2022

备案号:京ICP备15003423号-3