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 相关文章推荐
基于jquery实现的鼠标拖拽元素复制并写入效果
Aug 23 Javascript
关于JS控制代码暂停的实现方法分享
Oct 11 Javascript
javascript模拟实现ajax加载框实例
Oct 15 Javascript
node.js中的console.assert方法使用说明
Dec 10 Javascript
javascript制作网页图片上实现下雨效果
Feb 26 Javascript
Bootstrap轮播插件简单使用方法介绍
Jun 21 Javascript
基于Node.js实现压缩和解压缩的方法
Feb 13 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
详解vue项目接入微信JSSDK的坑
Dec 14 Javascript
这样回答继承可能面试官更满意
Dec 10 Javascript
Vue左滑组件slider使用详解
Aug 21 Javascript
实现AJAX异步调用和局部刷新的基本步骤
Mar 17 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
PHP实现的连贯操作、链式操作实例
2014/07/08 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
详解微信小程序——自定义圆形进度条
2016/12/29 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
Python中安装easy_install的方法
2018/11/18 Python
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
Python常用库大全及简要说明
2020/01/17 Python
python实现跨excel sheet复制代码实例
2020/03/03 Python
python matplotlib imshow热图坐标替换/映射实例
2020/03/14 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
css3学习心得分享
2013/08/19 HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
2012/12/13 HTML / CSS
W Concept美国:精选全球独立设计师
2017/02/22 全球购物
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
庆祝教师节活动方案
2014/01/31 职场文书
教师节商场活动方案
2014/02/13 职场文书
个人求职自荐信范文
2014/06/20 职场文书
机关作风建设自查报告
2014/10/22 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电