JQuery入门—编写一个简单的JQuery应用案例

一、官方网站下载：http://jquery.com
二、引入JQuery文件库
下载完后不用安装，只需将文件导入页面中即可，即在<head></head>中加入如下代码：<script language="javascript" type="text/javascript" src="jquery-1.8.3.min.js"></script>
三、编写一个弹出对话框的简单应用。


代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript" type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){ //$是JQurey程序的标志
alert("您好，欢迎来到JQuery世界!");})
</script>
</HEAD>
<BODY>
</BODY>
</HTML>

效果图如：
四、JQuery基本结构为：


代码如下:

$(document).ready(function(){
//程序段
})
类似于JavaScript代码：window.onload=function(){
//程序段
}

五、


代码如下:

$(document).ready(function(){
//程序段
})
等价于
$(function(){
//程序段
})

赞 (0)

相关推荐

  • jquery入门必备的基本认识及实例(整理)

    1.Juqery是javascript的优秀框架.它是轻量级的js库,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器.jQuery使用户能更方便地处理HTML documents.events.实现动画效果,并且方便地为网站提供AJAX交互. jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择.jQuery

  • jQuery LigerUI 使用教程入门篇

    获取最新代码 可以到http://ligerui.googlecode.com下载最新代码. 简介 jQuery LigerUI 是基于jQuery的一系列UI控件组合,简单而又强大,致力于快速打造Web前端界面解决方案. 因为是前端控件,跟服务器无关,可以适合.net,jsp,php等等web服务器环境.目前全部插件的打包压缩JS只有100K左右,很轻巧.使用插件式的开发模式,以"简单"为原则的设计,每个插件尽量独立,并可依赖拓展. ligerUI是什么 jQuery LigerUI

  • jquery Mobile入门—多页面切换示例学习

    jquery Mobile入门—多页面切换示例学习

    1.在JQuery Mobile中,多个页面的切换是通过<a>元素.并将<href>属性设置为#+对应的id号的方式进行的. 2.多页面切换示例代码: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta

  • jquery Mobile入门—外部链接切换示例代码

    jquery Mobile入门—外部链接切换示例代码

    1.内部链接是通过在<a>标签内将href属性值设为#+id的形式,外链则是在<a>中增加rel属性,并将属性值设为external,如:<a href="about.html" rel="external">3i Studio</a> 2.外部链接切换示例代码: 复制代码 代码如下: <!DOCTYPE HTML > <!DOCTYPE HTML PUBLIC "-//W3C//DTD H

  • JQuery入门——事件切换之hover()方法应用介绍

    JQuery入门——事件切换之hover()方法应用介绍

    1.在JQuery中,有两个方法用于事件的切换,一个方法是hover(),另一个是toggle().所谓切换事件,即有两个以上的事件绑定于一个元素,在元素的行为动作间进行切换.如一个超级链接标记<a>若想实现当鼠标悬停时触发一个事件,鼠标移出时又触发一个事件,可以用切换事件轻松实现. 2.示例代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:

  • jquery validate.js表单验证的基本用法入门

    这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码 代码如下: <script type="text/javascript"> function lang(key) { mylang = { 'ls_input_myb': '请输入您的账户', 'ls_myb_email': '漫游币账户为邮箱地址', 'ls_login_password': '请输入您的登录密码', 'ls_password_length': '密码

  • JQuery入门——事件切换之toggle()方法应用介绍

    JQuery入门——事件切换之toggle()方法应用介绍

    1.在toggle()方法中,可以依次调用N个指定的函数,直到最后一个函数,然后重复对这个函数轮番调用,其语法如下:toggle(fn, fn2, [fn3, fn4,...]),其中fn.fn2.fn3.fn4等函数依次调用. 2.示例代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

  • JQuery入门——用bind方法绑定事件处理函数应用介绍

    JQuery入门——用bind方法绑定事件处理函数应用介绍

    1.bind()功能是为每个选择元素的事件绑定处理函数,其语法如下:bind(type, [data], fn) 其中type为一个或多个类型的字符串,如click或change,也可以自定义:可以被type调用的类型包括blur.focus.load.resize.scroll.unload.click.dbclick.mousedown等事件.参数data是作为event.data属性值传递对象的额外数据对象.参数fn是绑定到每个选择元素的事件中的处理函数. 2.示例代码: 复制代码 代码如

  • jQuery的几个我们必须了解的特点

    jQuery是脚本库, 而不是脚本框架. "库"不等于"框架", 比如"System程序集"是类库,而"ASP.NET MVC"是框架. jQuery并不能帮助我们解决脚本的引用管理和功能管理,这些都是脚本框架要做的事. 脚本库能够帮助我们完成编码逻辑,实现业务功能. 使用jQuery将极大的提高编写javascript代码的效率, 让写出来的代码更加优雅, 更加健壮. 同时网络上丰富的jQuery插件也让我们的工作变成了&q

  • JQuery入门—编写一个简单的JQuery应用案例

    一.官方网站下载:http://jquery.com 二.引入JQuery文件库 下载完后不用安装,只需将文件导入页面中即可,即在<head></head>中加入如下代码:<script language="javascript" type="text/javascript" src="jquery-1.8.3.min.js"></script> 三.编写一个弹出对话框的简单应用. 复制代码 代码如

  • jquery入门—编写一个导航条(可伸缩)

    jquery入门—编写一个导航条(可伸缩)

    1.编写一个导航条,单击标题时,可以伸缩导航条内容,简化内容或显示更多内容. 示例代码如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="

  • 一个简单的jQuery计算器实现了连续计算功能

    一个简单的jQuery计算器,只是实现了一个连续计算的功能 <!DOCTYPE html> <html> <head> <meta charset="utf8"/> <title>Javascript计算器</title> </head> <body> <table> <tr> <td colspan="4"><input id=

  • 利用Rust编写一个简单的字符串时钟

    目录 1.简介 2.用到的知识点 2.1 取utc时间 2.2 图片变换为像素图案 2.3 字符方式显示当前时间 2.4 时间刷新 1.简介 用rust写的一个简单的练手的demo,一个字符串时钟,在终端用字符串方式显示当前时间.本质是对图片取灰度,然后每个像素按灰度门限用星号代替灰度值,就把图片变为由星号组成的字符型图案.把时间字符串的每个字符按照字母和数字图片的样式转换为字符,然后拼接字符图案就实现了字符时钟的效果. 主要用到的知识有:rust操作时间.字符串.vector,字符串和vect

  • 利用 Go 语言编写一个简单的 WebSocket 推送服务

    本文中代码可以在 github.com/alfred-zhong/wserver获取. 背景 最近拿到需求要在网页上展示报警信息.以往报警信息都是通过短信,微信和 App 推送给用户的,现在要让登录用户在网页端也能实时接收到报警推送. 依稀记得以前工作的时候遇到过类似的需求.因为以前的浏览器标准比较陈旧,并且那时用 Java 较多,所以那时候解决这个问题就用了 Comet4J.具体的原理就是长轮询,长链接.但现在毕竟 html5 流行开来了,IE 都被 Edge 接替了,再用以前这种技术就显得过

  • 使用原生js编写一个简单的框选功能方法

    使用原生js编写一个简单的框选功能方法

    今天我们来聊一下怎么使用原生javascript编写一个简单的框选功能. 需求描述 鼠标左键按下不放,移动鼠标出现矩形选框: 鼠标左键松开,根据上边出现的矩形选框统计选框范围内的DOM元素: 嗯...上边的功能描述看着是挺简单的,但实现起来也还是会有些地方需要斟酌思考的.比如,如果我们的框选范围不是document.body,而是某一个div里边进行框选呢?而现实开发过程中,我们会遇上的应该就是第二种情况. 点击查看完整的源码 怎么实现 二话不说,咱们动手写代码吧!因为更好的兼容性,这里就避免了

  • 使用C++ MFC编写一个简单的五子棋游戏程序

    MFC简介: MFC(MicrosoftFoundationClasses)是微软基础类库的简称,是微软公司实现的一个c++类库,主要封装了大部分的windows API函数. MFC除了是一个类库以外,还是一个框架,在vc++里新建一个MFC的工程,开发环境会自动帮你产生许多文件,同时它使用了mfcxx.dll.xx是版本,它封装了mfc内核,所以你在你的代码看不到原本的SDK编程中的消息循环等等东西,因为MFC框架帮你封装好了,这样你就可以专心的考虑你程序的逻辑,而不是这些每次编程都要重复的

  • python+flask编写一个简单的登录接口

    在学习接口测试的时候往往会因为没有实际操作的接口进行测试而烦恼,这里教大家自己编写两个接口用于学习接口测试 1.编写一个登录的接口 2.在pycharm运行 3.使用apipost进行登录接口测试 输入url和参数值进行访问,访问成功. 4.在pycharm查看是否正常进行访问 5.在编写一个需要登录返回的token直接访问的查询接口 6.运行登录和查询两个接口 7.使用apipost进行登录和查询的接口测试 首先进行登录的接口测试获取返回的token 使用登录返回的token值进行查询的接口测

  • C# 利用VS编写一个简单的网游客户端

    C# 利用VS编写一个简单的网游客户端

    目录 一.测试连接服务器 二.设计客户端 三.运行效果 四.总结 一.测试连接服务器 1.打开cmd,输入ping 10.1.230.74 2.输入telnet,进入telnet界面 3.输入set localecho,打开本地回显: 4.连接服务器,输入命令open 10.1.230.74 3900 二.设计客户端 1.新建项目 打开VS2022选择新建Windows窗体应用 如果没找到,说明没有安装相应的配置,可以添加工具 选择 安装成功就能找到了. 2.设计界面 新建完成后,会直接来到Fo

  • Java Swing编写一个简单的计算器软件

    Java Swing编写一个简单的计算器软件

    目录 实现要求 实现代码: 实现要求 1.使用Java图形界面组件设计软件,界面如图所示. 2.软件能够满足基本的"加.减.乘.除"等运算要求. 3.程序代码清晰,语法规范,结构合理,逻辑正确. 4.编辑菜单中包括"复制和粘贴"两个菜单项,为菜单项编写事件代码. 实现代码: import java.awt.BorderLayout; import java.awt.GridLayout; import java.awt.event.ActionEvent; impo

随机推荐