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,如需转载请自行联系原作者

目录
相关文章
|
3月前
|
开发框架 JSON JavaScript
ASP.NET Core3.1实战教程---基于Jquery单文件上传
ASP.NET Core3.1实战教程---基于Jquery单文件上传
26 0
|
6月前
|
JavaScript 前端开发
JQuery入门到精通教程(二)
JQuery入门到精通教程(二)
23 0
|
6月前
|
JavaScript 前端开发
JQuery入门到精通教程()
JQuery入门到精通教程()
35 0
|
10月前
|
XML JavaScript 前端开发
【jQuery超快速入门教程】上篇
【jQuery超快速入门教程】上篇
|
移动开发 JavaScript HTML5
jQuery工具提示插件tooltip.js 使用教程
jQuery工具提示插件tooltip.js 使用教程
ADI
|
XML JSON 前端开发
[记录] Jquery教程
[记录] Jquery教程
ADI
114 0
|
设计模式 Web App开发 JSON
动力节点jQuery学习教程,jQuery入门看这一篇就够了
jQuery 是一个“写得更少,但做得更多”的轻量级 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程,它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
125 0
|
前端开发 JavaScript 数据安全/隐私保护
jQuery EasyUI简明教程
1. 背景 EasyUI虽然样式比较固定,但是功能比较全面,而且入门比较简单,适合刚刚学习前端的童鞋们,此处拿出来讲讲如何使用EasyUI。
137 0
|
JavaScript 前端开发 CDN
|
前端开发 JavaScript 索引