`

jquery demo

阅读更多


demo-1

======页面加载完成后。执行alert('');========

$(document).ready(function() { 
// do stuff when DOM is ready 
alert(' '); 
}); 

 


上述方法可以简写为;

$(function() { 
// code to execute when the DOM is ready 
alert(""); 
}); 

 demo2

======页面加载完成后。点击id为asd的元素时,执行alert('');========

 

$(document).ready(function() { 
$("#asd").click(function() { 
  alert("Hello world!"); 
}); 
}); 

 demo3

页面加载完成后。点击所有a元素(超链接)时,执行alert('');========

$(document).ready(function() { 
$("a").click(function() { 
  alert("Hello world!"); 
}); 
}); 

 

demo4 : ajax 
$.ajax(
{

type:"POST", 
url:"showIter.do?method=successIter", 
data:"",//$("#formId").serialize()接受form中的所有数据 
dataType:"text/html", 
async:false, 
success:      function (msg) {
//msg = eval('(' + msg + ')');//解析后台的json数据 } 
});                             

 
demo5:ajax提交表单(同步提交)
这里在引用jquery-core以后,还要引用jquery-form插件

$(document).ready(function() { 
$("#button_1").click(function() { 
$("#myFormId").submit();   
}); 
}); 
 
<form id="myFormId"> 
<input type="button" value="submit" id="button_1" /> 
</form> 
 demo6:ajax异步提交表单
这里在引用jquery-core以后,还要引用jquery-form插件
$(document).ready(function() { 
$("#button_1").click(function() { 
$("#myFormId").ajaxSubmit();   
}); 
});   
 
<form id="myFormId"> 
<input type="button" value="submit" id="button_1" /> 
</form> 
 

 

分享到:
评论

相关推荐

    jquery例子大全 jquery demo

    在“jQuery例子大全 jQuery demo”这个压缩包中,包含了一系列的示例,旨在帮助用户快速理解和掌握jQuery的核心概念及常用方法。** ### 一、jQuery 基本使用 jQuery 的核心在于它的选择器,它允许我们方便地选取...

    jQuery demo例子下载

    在提供的 "jQuery Demo" 压缩包中,包含了若干 jQuery 的示例代码,你可以通过查看这些示例学习如何使用jQuery实现各种功能。例如,可能包含有简单的元素选择和操作示例、事件处理示例、动画效果示例以及AJAX请求...

    jquerydemo

    1. 第一个 jQuery 程序 2. jQuery 对象和 DOM 对象 3. 基本选择器 4. 层次选择器 5. 基本过滤选择器 6. 内容过滤选择器 7. 可见性过滤选择器 8. 属性过滤选择器 9. 子元素过滤选择器 10. 表单元素过滤选择器 11. 小...

    Jquery演示 jquerydemo jquery常用

    **jQuery 演示:深入理解与应用** jQuery 是一个高效、简洁且功能丰富的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画...这个"jQuerydemo"压缩包中的案例,将会是你学习和探索jQuery的宝贵资源。

    30个jquery经典Demo

    《jQuery经典Demo详解:探索30个精彩实例》 jQuery,作为一款强大的JavaScript库,以其简洁的API和高效的功能,深受Web开发者的喜爱。这里我们聚焦于30个经典的jQuery Demo,它们涵盖了从基础交互到复杂动画的各种...

    JqueryDemoTools-用于整理jQueryDemo V1.2

    jQueryDemoTools V1.2 是一个专门为开发者设计的工具集合,旨在帮助用户更好地理解和实践jQuery的各类功能和技巧。这个项目,通过一系列精心编排的示例,展示了jQuery库的强大之处,同时也提供了便捷的平台供开发者...

    jquerydemo锋利的jQuery的demo

    **jQuery简介** jQuery是一款高效、简洁的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。jQuery由John Resig于2006年创建,自那时起,它就成为了Web开发中最为广泛使用的库之...

    JQuery功能测试源码_jquerydemo.zip

    首先,让我们来看看"JQuery功能测试源码_jquerydemo.zip"中包含的内容。这个压缩包很可能包含了多个示例文件,用于演示jQuery的各种核心功能,如选择器、DOM操作、事件绑定、动画和Ajax请求等。这些示例代码是学习和...

    Jquery Demo

    **jQuery 框架简介** jQuery 是一个高效、简洁且功能丰富的JavaScript库,它极大地简化了JavaScript编程,尤其是处理网页中的DOM...通过学习和实践"Jquery Demo"中的示例,开发者将更好地理解和应用jQuery的核心功能。

    Lazy Load Plugin for jQuery demo

    标题 "Lazy Load Plugin for jQuery demo" 暗示这是一个关于如何使用 jQuery Lazy Load 插件的实际演示。在这个项目中,我们可以期待看到如何配置和集成该插件,以及在不同场景下它的实际运行效果。这个演示可能包含...

    JQUERY demo+api

    标题中的"JQUERY demo+api"表明我们将探讨jQuery的基本概念、常见用法以及API的详细说明。 首先,jQuery的核心理念是“写得更少,做得更多”(Write Less, Do More)。它通过提供简洁的语法,使得开发者能够快速...

    jqueryDemo

    《jQueryDemo:初学者的宝典》 jQuery是一款强大的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。对于初学者来说,"jqueryDemo"提供了丰富的示例,帮助理解并掌握jQuery的...

    15个经典 jquerydemo jquery窗帘

    在"15个经典jquerydemo"中,我们可以深入理解jQuery的强大功能及其在网页开发中的应用。 1. **选择器(Selectors)** jQuery 提供了丰富的选择器,如 ID 选择器 (#id),类选择器 (.class),元素选择器 (tagname) ...

    jQueryDemo.JQ集合.rar

    "jQueryDemo.JQ集合.rar"是一个包含多种jQuery实践示例的资源包,对于初学者和进阶者来说,都是一个极好的学习和参考资源。 一、jQuery基础 jQuery的核心理念是"Write Less, Do More",它通过封装JavaScript的复杂...

    jQueryDemo(JQuery常用操作2005)

    《jQueryDemo:深入理解JQuery常用操作》 jQuery,作为一款强大的JavaScript库,极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。在"jQueryDemo(JQuery常用操作2005)"中,我们将深入探讨jQuery...

    jQueryDemo30个经典实用打包下载

    这个压缩包包含的 "jQueryDemo" 文件可能包含了30个展示 jQuery 主要功能和应用场景的实例。这些示例可能涵盖以下方面: 1. **选择器示例**:演示如何使用基础和组合选择器,如 ID 选择器 (`#id`), 类选择器 (`....

    简单的Jquery demo

    本教程将通过一个简单的jQuery Demo来深入理解这一强大的工具。 标题"简单的jQuery demo"暗示我们将探讨一个基础的交互式网页应用,其中用户可以通过点击右侧的缩略图来查看左侧的详细内容。这种设计常见于图片展示...

Global site tag (gtag.js) - Google Analytics