JQuery 快速入门教程二-阿里云开发者社区

开发者社区> 开发与运维> 正文

JQuery 快速入门教程二

简介:

一、jQuery 语法:$(selector).action()

  • 美元符号定义 jQuery
  • 选择符(selector)“查询”和“查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作

示例

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$("p.test").hide() - 隐藏所有 class="test" 的段落

$("#test").hide() - 隐藏所有 id="test" 的元素

 

1、$(this).hide() 演示 jQuery hide() 函数,隐藏当前的 HTML 元素。

<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $(this).hide();
});
});
</script>
</head>
 
<body>
<button type="button">Click me</button>
</body>
</html>

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

$("#test").hide();

 

<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("#myID").hide();
});
});
</script>
</head>
 
<body>
<p>If you click on me, I will dispperar</p>
<p id="myID">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>

 

 3、$("p").hide() 表示隐藏所有 <p> 元素。

 4、 $(".test").hide()表示隐藏所有 class="test" 的元素。

<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $(".myClass").hide();
});
});
</script>
</head>
 
<body>
<p>If you click on me, I will dispperar</p>
<p id="myID">This is a paragraph.</p>
<p class="myClass">This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>

 二、所有的JQuery函数都位于下面的函数中

$(document).ready(function(){
--- jQuery functions go here ----

});

 

本文转自Work Hard Work Smart博客园博客,原文链接:http://www.cnblogs.com/linlf03/archive/2012/01/01/2309603.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章