jQuery学习笔记之Helloworld


Posted in Javascript onDecember 22, 2010

jQuery是什么?

jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的Jörn Zaefferer,罗马尼亚的Stefan Petre等等。jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。

jQuery的构成?

通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行“操作”(actions)。如图:

jQuery学习笔记之Helloworld
helloworld!

简单熟悉了jQuery的构成,我先写一个helloworld!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>1-1</title> 
<!-- 引入 jQuery --> 
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
//等待dom元素加载完毕. 
$(document).ready(function(){ 
alert("Hello World!"); 
}); 
</script> 
</head> 
<body> 
</body> 
</html>

1.其中 :<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>

本句是引入jQuery库文件,本文件可以到http://jQuery.com网站下载

2.代码:

<script type="text/javascript"> 
//等待dom元素加载完毕. 
$(document).ready(function(){ 
alert("Hello World!"); 
}); 
</script>

$(document).ready(function(){})相当于JS中的windows.onload方法,再文档加载完毕时执行,
在jQuery中"$()"符号就相当于"jQuery()"
$(document).ready(function(){})可以简写为$(function(){})
Javascript 相关文章推荐
Javascript Math ceil()、floor()、round()三个函数的区别
Mar 09 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
vue.js全局API之nextTick全面解析
Jul 07 Javascript
vue resource post请求时遇到的坑
Oct 19 Javascript
浅谈如何使用 webpack 优化资源
Oct 20 Javascript
解决vue处理axios post请求传参的问题
Mar 05 Javascript
vue 组件内获取actions的response方式
Nov 08 Javascript
JS数组的常用10种方法详解
May 08 Javascript
vue 使用async写数字动态加载效果案例
Jul 18 Javascript
js 将多个对象合并成一个对象 assign方法的实现
Sep 24 Javascript
用Jquery实现多级下拉框无刷新的联动
Dec 22 #Javascript
一个轻量级的javascript库 pj介绍
Dec 19 #Javascript
JavaScript Date对象 日期获取函数
Dec 19 #Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
Dec 19 #Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 #Javascript
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 #Javascript
有关js的变量作用域和this指针的讨论
Dec 16 #Javascript
You might like
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
解析php防止form重复提交的方法
2013/07/01 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
共享自己写一个框架DreamScript
2007/01/20 Javascript
document.getElementById的简写方式(获取id对象的简略写法)
2010/09/10 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
JavaScript实现的in_array函数
2014/08/27 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
大白话讲解JavaScript的Promise
2017/04/06 Javascript
浅谈JS和jQuery的区别
2019/03/27 jQuery
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
[03:11]TI9战队档案 - Alliance
2019/08/20 DOTA
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
Python3网络爬虫中的requests高级用法详解
2019/06/18 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
python使用 __init__初始化操作简单示例
2019/09/26 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
python新手学习可变和不可变对象
2020/06/11 Python
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
给酒店员工的表扬信
2014/01/11 职场文书
财务总监岗位职责
2014/03/07 职场文书
房产公证书样本
2015/01/23 职场文书
八年级作文之一起的走过日子
2019/09/17 职场文书
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android