JQuery 学习笔记01 JQuery初接触

一、下载
官方网址是http://jquery.com/
官方下载地址：http://docs.jquery.com/Downloading_jQuery
里边有当前版本和历史版本的下载，可以下载下来部署在自己的服务器上
上面也有Google\Microsoft\jQuery的CDN(Content Delivery Network)地址，由于目前jQuery的广泛使用，选择CDN地址可以充分利用缓存和这些互联网大佬们的带宽和服务器资源。
官网上下载有两种版本Compressed（Minified version）和Uncompressed（Source version）
前者体积小70k左右，还不到未压缩版本的一半大小。
但是未压缩版本更容易阅读源代码，以及调试
二、安装
安装jQuery非常简单 只需在HTML中引用你下载的那个js文件即可
比如     <script type="text/javascript" src="/jslibs/jquery.min.js"></script>
如果使用CDN 就直接引用<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
三、第一个程序


代码如下:

<!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>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() { alert("hello"); })
</script>
</head>
<body>
</body>
</html>

刷新页面后 就可以执行了。
刚开始可能对$有点不适应，其实用不了多久就会习惯，并且喜欢它的简洁。如果实在吃不消，“$”也可以用“jQuery”代替

代码如下:

$(function() { alert("hello"); })

相当于

代码如下:

$(document).ready(function() { alert("hello"); })

也基本相当于

代码如下:

document.onready = function() {alert("hello");}

也就是说当浏览器把文档结构完全解析后，就可以执行下面的语句了。
与document.onload的区别在于，onload不但需要解析完文档结构，还要等待所有需要加载的内容加载完毕（比如图片等）
因为$(document).ready(fn)的频繁使用，所以可以简化为$(fn)

赞 (0)

相关推荐

  • JavaScript 学习笔记二 字符串拼接

    var str="hello"; str+="world"; 实际上,这段代码在幕后执行的步骤如下: (1) 创建存储"hello"的字符串. (2) 创建存储"world"的字符串. (3) 创建存储连接结果的字符串. (4) 把str的当前内容复制到结果中. (5) 把"world"复制到结果中. (6) 更新str,使它指向结果. 每次完成字符串连接都会执行步骤2到6,使得这种操作非常消耗资源.如果重

  • jQuery Study Notes学习笔记 (二)

    1. 使用class与id选择HTML元素 选择id为"myDivId"的元素.由于id是唯一的,所以总是选择到1个或0个元素 复制代码 代码如下: $('#myDivId') 选择class为"myCssClass". 可以选择任何多个class为"myCssClass"的元素. 复制代码 代码如下: $('.myCssClass') 获取或设置元素的值 复制代码 代码如下: var myValue = $('#myDivId').val();

  • JQuery Study Notes 学习笔记(一)

    1. 使用jquery 到jquery.com下载jquery.js当前版本是1.4.2 新建一个html页面 复制代码 代码如下: <!DOCTYPE html><BR><html lang="en"><BR><head><BR>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"&

  • JavaScript 学习笔记一些小技巧

    一.JavaScript 基础 1.try...catch 使用小写字母.大写字母会出错. 2.Throw 声明 throw 声明的作用是创建 exception(异常).你可以把这个声明与 try...catch 声明配合使用,以达到控制程序流并产生精确错误消息的目的. 语法:throw(exception)exception 可以是字符串.整数.逻辑值或者对象. 注意:使用小写字母编写 throw.使用大写字母会出错! 3.反斜杠用来在文本字符串中插入省略号.换行符.引号和其他特殊字符. 下

  • jquery学习笔记二 实现可编辑的表格

    jquery学习笔记二 实现可编辑的表格

    实现可编辑的表格demo: 实例图: 代码: 复制代码 代码如下: <!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 runa

  • jquery 学习笔记一

    jquery 学习笔记一

    jquery基本信息 jquery的官方网站:www.jquery.com jquery解释: jquery是javascript的类库,提供了大量的javascript的类库和API,方便javascript开发. jquery API中文参考手册: http://jquery-api-zh-cn.googlecode.com/svn/trunk/index.html 前台数据提交到后台demo: 实例图:   功能点: 1.使用$("#UserName")获取id为UserName

  • JQuery 学习笔记01 JQuery初接触

    一.下载官方网址是http://jquery.com/官方下载地址:http://docs.jquery.com/Downloading_jQuery里边有当前版本和历史版本的下载,可以下载下来部署在自己的服务器上上面也有Google\Microsoft\jQuery的CDN(Content Delivery Network)地址,由于目前jQuery的广泛使用,选择CDN地址可以充分利用缓存和这些互联网大佬们的带宽和服务器资源.官网上下载有两种版本Compressed(Minified ver

  • 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

  • jQuery学习笔记之jQuery中的$

    在jQuery中,最常用的莫过于使用美元符号$,它提供了各种各样的丰富功能.包括选择页面中一个或者一类元素.作为功能函数的前缀.windows.onload的完善,创建DOM节点等.本文介绍jQuery的用法.作为基础 1.选择器 在css中,选择器的作用是选择页面的某一类(类别选择器)元素或者某个(id选择器).而jQuery中的"$"作为选择器,同样是选择某类或者某个元素,只不过jQuery提供了更全面的选择方式.而且为用户处理了浏览器兼容问题. 例如在在css<h2>

  • jQuery学习笔记之jQuery构建函数的7种方法

    一:$(selectorStr[,限制范围]),接受一个选择器(符合jQuery规范的字符串),返回一个jQuery对象; 复制代码 代码如下: //$(selector[,限制范围])         $(".guo").click(function () {//这里没有context参数             $("a.aguo", this).css({"color":"red"});//this就是context参数

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

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

  • jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路

    jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路

    花了一晚上的时间解决了一个看似很容易的问题.今晚做的这个东西中由于要获取某列中的一个ID值.如果是用平常的那种JS传值的方式此问题就不存在,但是由于此次用到的都是jquery插件,包括各种弹出框,用JS传值就得用JS那丑陋的弹出框,所以,你懂得. 网上找了很多方法,用起来都不行,后来想到了jquery中的鼠标事件,可以在鼠标经过table时,获得当前行与列的值.页面如下所示:  具体操作就是点击"删除"按钮,然后调用jquery插件页面,这时候需要获得相应行的"ID"

  • jQuery学习笔记 获取jQuery对象

    使用jQuery选择器选择页面元素,目的是为了生成jQuery对象,语法相当简单:$(selector).但值得注意的是,这是生成jQuery对象,不是DOM对象,因此$(selector).innerHTML以获取元素内部HTML代码是错误的,正确写法是$(selector).html().同样的,判断一个DOM对象是否存在,不能够写成if($(selector)),而是if($(selector).length>0). 当然jQuery对象和DOM对象可以互转换.从上面的例子也可以看出,jQ

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

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

  • jQuery学习笔记之jQuery.fn.init()的参数分析

    jQuery学习笔记之jQuery.fn.init()的参数分析

    从return new jQuery.fn.init( selector, context, rootjQuery )中可以看出参数selector和context是来自我们在调用jQuery方法时传过来的.那么selector和context都有哪些可能. 对于表格中的4~9行中的可能做具体分析. 如果selector是字符串,则首先检测是html代码还是#id.126行的if语句:以"<"开头,以">"结尾,且长度>=3.则假设额这个是HTML

  • jQuery学习笔记之jQuery原型属性和方法

    复制代码 代码如下: jQuery.fn = jQuery.prototype = {     constructor: jQuery,     init: function( selector, context, rootjQuery ) { },     selector: "",            jquery: "1.7.2",            length: 0,            size: function() {},    toArra

随机推荐