通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行“操作”(actions)。
————————————————————
jQuery 语法
jQuery 语法是为 HTML 元素的选取编制,可以对元素执行某些操作。
基础语法是:$(selector).action()
美元符号定义 jQuery
选择符(selector)“查询”和“查找” HTML 元素
jQuery action() 执行对元素的操作
实例
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$("p.test").hide() - 隐藏所有 class="test" 的段落
$("#test").hide() - 隐藏所有 id="test" 的元素
提示:jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节,您将学习到更多有关选择器的语法。
————————————————————
jQuery 语法实例
$(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>
</body>
</html>
演示 jQuery hide() 函数,隐藏当前的 HTML 元素。
$("#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 hide() 函数,隐藏 id="test" 的元素。
$("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 hide() 函数,隐藏所有 <p> 元素。
$(".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 hide() 函数,隐藏所有 class="test" 的元素。
————————————————————
文档就绪函数
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:
$(document).ready(function(){
--- jQuery functions go here ----
});
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
下面是两种假如文档完全加载之前运行函数的话,操作失败的情况:
- 试图隐藏一个不存在的元素。
- 获得未完全加载的图像的大小。
分享到:
相关推荐
jq语法
虽然jQuery使用简单,但它毕竟是一门新的技术,与传统的JavaScript在性能与语法上存在诸多差异,需要相应的书籍来引导开发者们迅速而有效地掌握它,并能真正付诸实践。综观现在已经出版的中文类jQuery图书,不是...
jQuery – serialize() 方法 W3School给出的定义与用法: serialize() 方法通过序列化表单值,创建 URL 编码文本字符串。...————————- 分割线 ———————- serialize()函数用于序列化一
jQuery替身——jQuery.sub();增强了遍历相邻节点的性能;jQuery开发团队构建系统的改进。 1.4重要新特性: ·常用方法的性能大幅提升:重写了大部分较早期的函数; ·更容易使用的设置函数(setter function):为...
Web编程基础——CSS、JavaScript、jQuery 作者:何婕,李健苹 主编出版社:重庆大学出版社出版时间:2015年06月 本书紧密围绕网页设计师在进行Web前台开发中实际需要掌握的技术,全面介绍了使用DIV+CSS、JavaScript、...
《xmpp高级编程——使用java*和jquery》将教您如何在自己的应用程序中发挥xmpp的强大威力,并向您展示如何利用xmpp构建下一代应用程序或向当前应用程序中添加新功能所需的所有工具。本书的特色是采用java*语言进行...
jQuery学习笔记: jQuery学习 1、基本语法: $(selector).action() $:定义jQuery selector:选择符,查询和查找HTML元素 action():对元素执行的操作 实例: $(this).hide()——隐藏当前元素 $(“p”),hide()——-隐藏...
本文实例讲述了jQuery实现基本动画效果的方法。...jQuery animate()——操作多个属性 默认情况下,所有HTML元素的位置都是静态的,并且无法移动,如需对位置进行操作,记得首先把元素的CSS position 属性设置为 relat
1、在toggle()方法中,可以依次调用N个指定的函数,直到最后一个函数,然后重复对这个函数轮番调用,其语法如下:toggle(fn, fn2, [fn3, fn4,…]),其中fn、fn2、fn3、fn4等函数依次调用。 2、示例代码: 代码如下:&...
stop()方法的语法结构为: stop([clearQueue],[gotoEnd]); 参数clearQueue和gotoEnd都是可选参数,为Boolean值(true或false)。clearQueue代表是否清空未执行完的动画队列,gotoEnd代表是否直接将正在执行的动画...
1、bind()功能是为每个选择元素的事件绑定处理函数,其语法如下:bind(type, [data], fn) 其中type为一个或多个类型的字符串,如click或change,也可以自定义;可以被type调用的类型包括blur、focus、load、resize、...
本文主要总结了jQuery中DOM节点的插入方法,...append()和appendTo()两种方法功能相同,主要的不同是语法——内容和目标的位置不同,append()前面是要选择的对象,后面是要在对象内插入的元素内容,appendTo()前面是要
1、one()方法功能是为所选的元素绑定一个仅触发一次的处理函数,其调用的语法格式为:one(type, [data], fn) 其中参数type为事件类型,即需要触发什么类型的事件;参数data为可选参数,表示作为event.data属性值传递...
jQuery有两个合成事件——hover()方法和toggle()方法,类似前面讲过的ready()方法,hover()方法和toggle()方法都属于jQuery自定义的方法。 hover()方法 hover()方法的语法结构为: hover(enter,leave); hover()方法...
jQuery 的 DOM 操作——http: 入门 注意:您可能需要提升权限才能运行所有“gem”和“npm”命令,例如将它们作为前缀为“sudo gem”和“sudo npm” 安装 Ruby(根据您系统的包管理标准) 安装 Sass: gem ...
我们都晓得,在jQuery中有一个很强大的方法——stop(),他是阻止在连续动画或事件中出现重复累积状况的方法。那么,stop()怎么用呢?来带大家先认识一下stop()吧: stop()在语法上有两个参数,分别都是Boolean布尔值...
译作:《ajax实战手册》、《jquery实战手册(第2版)》 个人网站:http://openhome.cc 目录 《java jdk 7学习笔记》 chapter1 java平台概论 1 1.1 java不只是语言 2 1.1.1 前世今生 2 1.1.2 三大平台 5 ...