jQuery学习笔记之Helloworld

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）。如图：


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(){})

赞 (0)

相关推荐

  • jQuery学习笔记之jQuery的动画

    一.系统预定义的动画函数 1.显示隐藏函数 show(); //显示元素(同时增加宽.高.不透明度) hide(); //隐藏元素 执行hide()隐藏界面元素,相当于将css样式中的display:none. 我们也可以在函数中加入参数,具体如下: show("slow"); 除了slow取值外,还可以设置为normal,fast,分别代表时间为600,400,200毫秒 我们也可以加如具体时间取值.具体如下: slow(1000); 这样代表时间完全显示出元素的时间间隔为1000毫

  • jQuery学习笔记之jQuery选择器的使用

    一.基本选择器: #id   :选择给定ID名的元素 如:$("#id1")为选择id为id1的元素 .class   :选择给定类名的元素 element   :选择给定元素名的所有原色 *  :匹配所有元素 selector1,selector2,......   :选择这些名称的元素,以逗号隔开,可以是类或id名 二.层次选择器: $("ancestor  descendant") :选择ancestor元素下的所有descendant(后代)元素 $(&qu

  • jQuery学习笔记之jQuery的事件

    一.事件绑定 1.事件绑定函数 事件的绑定函数为如下形式: .bind(type [,data],fn) type:类型 如click..... data:参数 fn:事件执行的函数 例子 复制代码 代码如下: $(function(){ $(#id1).click(function(){ $(#id2).show();//id2显示 }) ; }); 二.合成事件 1.鼠标滑过事件 .hover(enter,leave) enter:鼠标光标移动到对象时触发的函数 leave:鼠标光标移出对象

  • jQuery学习笔记之jQuery的DOM操作

    一.节点的操作 1.查找节点: var $var_1=$("htmltype");   //这句话就是获取所有htmltype节点 如:var $ul_1=$("ul"); 2.创建并追加节点: var $var_1=$("<htmltype>");//这句话是创建一个节点 $("htmltype2").append($var_1) ; //这句话是把节点插入所有htmltype2节点中 例子:var $li_1=

  • jQuery学习笔记之DOM对象和jQuery对象

    jQuery学习笔记之DOM对象和jQuery对象

    什么是DOM对象? HTML是以树形结构来组织文档的,具体如下: 复制代码 代码如下: <!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"> <

  • jQuery学习笔记之Helloworld

    jQuery学习笔记之Helloworld

    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+, F

  • jQuery学习笔记之回调函数

    1.回调函数定义 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,才会真正的执行回调函数内部的方法. 2.代码 JS代码 (function($){ $.fn.shadow = function(opts){ //定义的默认的参数 var defaults = { copies: 5, opacity:0.1

  • jQuery学习笔记之Ajax用法实例详解

    本文实例讲述了jQuery学习笔记之Ajax用法.分享给大家供大家参考,具体如下: 一.Ajax请求 1.jQuery.ajax(options) 通过 HTTP 请求加载远程数据.jQuery 底层 AJAX 实现.简单易用的高层实现见 .get,.post 等. .ajax()返回其创建的XMLHttpRequest对象.大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求..ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息.详细参数选项见下.

  • 那些年，我还在学习jquery 学习笔记

    原来Jquery就是一个javascript写的一个库,它给我们提供了很多常用的方法,使用这些方法可以兼容多种浏览器,使用它可以达到很好的动画效果,下面就来看看那些年的学习笔记吧一.$符号 1.选择器 可以选择html标签,也可选择ID,Class等 如下: 复制代码 代码如下: <script type="text/javascript"> $( function() { $("table.datalist tr:nth-child(odd)").ad

  • jquery学习笔记 用jquery实现无刷新登录

    好了,唠嗑就到这里,现在看如何用jquery实现无刷新登录. 首先先创建html的部分 复制代码 代码如下: <table> <tr> <td> 用户名: </td> <td> <input type="text" id="username" /> </td> </tr> <tr> <td> 密码: </td> <td> &

  • jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路

    jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路

    jQuery是时下比较流行的一个js库,能够用简单的代码做出理想的效果,就像官网上说的那样"write less ,do more".Jquery在一定程度上改写了以往对JavaScript的写法,本人就用jquery实现上篇中用ajax实现异步通信的效果,感受一下jquery的魅力. 首先你需要下载jquery的最新的js文件,并将其引入到文件中,你也可以在此下载:点我下载. 这次通信用的是jquery的jQuery.post(url,[data], [callback],[type

  • jQuery学习笔记之入门

    最近在学习jQuery,在网上看到有几篇关于jQuery的文章,写的不错转载过来跟大家分享一下: 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: $('#info').val('Hello World!'); 嗯,可以看

  • jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架

    jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架

    好久以来就想实现一个模态的框框,找了很多的jquery插件,都没有碰到自己满意的,这次碰到了一个,但是由于还处于开发阶段吧,连个文档API都没有,自己摸索了好长一段时间才搞定. 先来看看代码,本人看着源代码定制了自己想要的效果: 复制代码 代码如下: <%@ page language="java"contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DO

  • JQuery 学习笔记 选择器之一

    本章主要先对Jquery的选择器进行说明下,本人也不敢说讲解,哈,因为我也是正在学习中,本系列文章所写目的只在与对自己学习过程中的心得等记录下来,一方面加强自己的印象,另一方面共享下学习的经验,呵,小弟刚开始写这种文章,希望大家多多支持^^,有哪些方法不好可以跟贴指导指导^^ 现在,让我们一起开始在JQuery的世界里飞翔吧^^ 首先,本章先来学习JQuery最基本的选择器的使用咯 先声明下,使用JQuery最基本的规则 $(document).ready(function(){ //do so

  • jQuery学习笔记[1] jQuery中的DOM操作

    DOM分为3个方面,即DOM Core,HTML-DOM,CSS-DOM. 1,DOM Core并不专属于JavaScript,任何一种支持DOM的程序设计语言都可以使用它. JavaScript中的getElementById(),getElementsByTagName()...等方法. 例如:使用DOM Core来获取表单对象的方法: document.getElementsByTagName("form"); 2,HTML-DOM. 在使用JavaScript和DOM为HTML

随机推荐