jQuery是一个轻量级的JavaScript库，拥有独特的选择器、出色的DOM操作、可靠的事件处理、完善的兼容性、链式操作以及方便的ajax等功能。jQuery的最新版本可在官方网站（http://jquery.com）下载。

1.jQuery库类型（2种）

名称

类型

大小

说明

jquery.js

开发版

约229KB

完整无压缩版本，主要用于测试、学习和开发

jquery.min.js

生产版

约31KB

经过工具压缩或经过服务器开启Gzip压缩，主要用于产品和项目

2. jQuery模板

<!-- JQuery.html -->

<!DOCTYPE html>

<html>

<head>

    <title>Test JQuery</title>

    <script type="text/javascript" src="jquery-3.2.0.js"></script>

</head>

<body>

   <!-- add your code here. --> 

</body>

</html>

3.$(document).ready()

该代码作用类似于JavaScript中的Windows.onload()。不过两者之间仍有以下区别:

windows.onload

$(document).ready()

执行时机

网页加载完成后

DOM结构加载完成后(不必等页面加载完成)

编写个数

最多1个

任意个

编码形式

windows.onload = function(){ /*…*/};

$(document).ready(function(){/*…*/});

编码简写

无

$(function(){/*…*/});

注意：在jQuery库中，$就是jQuery的简写形式。

jQuery代码必须写在<script type="text/javascript"></script>标签内。

3.1 实例：

<script type="text/javascript">

    $(document).ready(function(){

        alert("Hello JQuery");

     });

</script>

简写形式：

<script type="text/javascript">

    $(function(){

        alert("Hello JQuery");

    });

</script>

4.DOM对象和 jQuery对象

 4.1 DOM对象(通过document获取的element对象)

var  question = document.getElementById(“question”);

4.2 jQuery对象 (通过$()获取的对象)

注意：　为了方便识别jQuery变量，获取jQuery对象的变量名前面应加上“$”.

var  $question = $(“#question”);

5. jQuery对象与DOM对象的相互转换

  5.1   jQuery对象转换成DOM对象

　　jQuery提供了两种方法将jQuery对象转换成DOM对象，即[index]和get(index).

  5.1.1 [index]方法

var  $question = $(“#question”); //jQuery对象

var  question = $question[0]; //DOM对象

  5.1.2 get(index)方法

var  $question = $(“#question”); //jQuery对象

var question = $question.get(0); //DOM对象

5.2 DOM对象转换成jQuery对象

    jQuery对象本质上是就是通过jQuery包装DOM对象后产生的对象所以只需要用$()把DOM对象包装起来就可以获得jQuery对象。

var question = document.getElementById(“question”);

var $question = $(question);

注意：平时用到的jQuery对象都是通过$()函数创造出来的，$()函数就是一个jQuery对象的制造工厂。

如有纰漏，敬请联系！感谢您的支持。

　　更多内容，请访问：http://www.cnblogs.com/BlueStarWei/

jQuery入门：认识jQuery的更多相关文章

  1. jquery 入门之-------jquery 简介

    什么是jquery? Jquery是一个Javascript库,通过封装原生的Javascript函数得到一套定义好的方法.它可以用个少的代码完成更多更强大更复杂的功能,从而得到开发者的青睐. So! ...

  2. jQuery入门、jQuery选择器、jQuery操作

    一.什么是jQuery及如何使用 1.1 jQuery 简介 jQuery是一个兼容多浏览器的javascript函数库(把我们常用的一些功能进行了封装,方便我们来调用,提高我们的开发效率.),核心理 ...

  3. JQuery入门

    JQuery入门 1 jQuery的概述 1.1 jQuery简介 jQuery是一个 JavaScript函数库,它是一个“写的更少,但做的更多”的轻量级 JavaScript 库.jQuery 极 ...

  4. JQuery入门篇

    JQuery入门篇 jQuery选择器 “$”表示JQuery对象 根据ID查找 $(‘#var’)表示将一个id值为var的DOM节点封装成一个jQuery对象,DOM节点必须以“#”开头. 例如: ...

  5. jQuery入门（1）jQuery中万能的选择器

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  6. jQuery入门（2）使用jQuery操作元素的属性与样式

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  7. jQuery入门（3）事件与事件对象

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  8. jQuery入门（4）jQuery中的Ajax应用

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  9. jQuery入门必须掌握的一些API

    jQuery 中文版文档:http://www.css88.com/jqapi-1.9/category/ajax/ jQuery入门,必须掌握以下的API,平时工作中经常会用到.未列出的API,在掌 ...

  10. Web前端JQuery入门实战案例

    前端jquery入门到实战 为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...

随机推荐

  1. Ant学习总结1

    一.Ant简介 Ant是用来编译/运行/测试java程序,构建.包装和发布过程中几乎每一件事都可以由Ant的任务来处理. 二.Ant管理项目    当开始一个新的项目时,首先应该编写Ant的构建文件, ...

  2. bootstrap select2 参数详解

    Select2使用示例地址: https://select2.github.io/examples.html Select2参数文档说明: https://select2.github.io/opti ...

  3. 分布式一致性算法：Raft 算法（论文翻译）

    Raft 算法是可以用来替代 Paxos 算法的分布式一致性算法,而且 raft 算法比 Paxos 算法更易懂且更容易实现.本文对 raft 论文进行翻译,希望能有助于读者更方便地理解 raft 的 ...

  4. UWP: 体验应用内购新接口——StoreContext类

    Windows 1607 版本(内部版本 14393)之后,微软在 SDK 添加了一些与应用商店相关的新接口,像应用试用与购买.应用内购等.这些接口相对于原来的接口要方便很多.就拿应用内购来说,以前的 ...

  5. 轻松理解python中的闭包和装饰器 (下)

    在 上篇 我们讲了python将函数做为返回值和闭包的概念,下面我们继续讲解函数做参数和装饰器,这个功能相当方便实用,可以极大地简化代码,就让我们go on吧! 能接受函数做参数的函数我们称之为高阶函 ...

  6. Javascript定时器中的this指向

    使用js中的定时器(setInterval,setTimeout),很容易会遇到this指向的问题. 直接上例子: var name = 'my name is window'; var obj = ...

  7. 【转】Java通过IText导出word和pdf

    原帖地址:http://blog.csdn.net/zwx19921215/article/details/34439851 最近做的项目中需要用到把Highcharts图表导出word和pdf的功能 ...

  8. php的empty()和isset()用法

    共同点: 1.都可以判定一个变量是否为空: 2.都返回boolean类型,即true或false. 区别: 1.isset()用来检测变量是否设置,只能用于变量,因为传递任何其它参数都将造成解析错误. ...

  9. 第35篇 IIS执行原理

    服务器的监听(IIS6.0+版本) 当请求到达服务器时,请求最终会到达TCPIP.SYS驱动程序,TCPIP.SYS将请求转发给HTTP.SYS网络驱动程序的请求队列中(可以理解为专门处理http请求 ...

  10. Ceph osd启动报错osd init failed (36) File name too long

    在Ceph的osd节点上,启动osd进程失败,查看其日志/var/log/ceph/ceph-osd.{osd-index}.log日志,报错如下: 2017-02-14 16:26:13.55853 ...