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. AngularJs ng-repeat指令中怎么实现含有自定义指令的动态html

    今天用angular写table的时候,遇到了一个问题.在ng-repeat中,含有动态的html,而这些html中含有自定义指令. 因为希望实现一个能够复用的table,所以定义了一个指令mySta ...

  2. 最近发现的.net core中的一些bugs

    1.使用.net core的过程中发现TypeInfo.GetCustomAttributes()只能写在主线程中,否则如果该自定义特性存在于nuget中就会报错,貌似nuget中的dll仅在主线程使 ...

  3. STL_deque双端队列

    deque:元素数据采用分块的线性结构存储.若干线性存储块成为deque块.一般大小为512字节,元素的数据类型所占用的字节数,决定了每个deque块可容纳的元素个数. 所有的deque块使用一个Ma ...

  4. nodejs中的异步流程序控制nsync

    异步编程是指由于异步I/O等因素,无法同步获得执行结果时, 在回调函数中进行下一步操作的代码编写风格,常见的如setTimeout函数.ajax请求等等 http://cnodejs.org/topi ...

  5. 实现自动构建编译javaweb项目并发布到N台服务器

    前言 当你使用nginx实现了负载均衡,当你有了超过3台以上的应用服务器时,一个特别头疼的问题就来了,发布项目好麻烦. 你每次都要在本地编译打包一遍,然后手动复制到每一台服务器上面去,如果只有一两台服 ...

  6. ACM 树形数组

    树状数组(Binary Indexed Tree(BIT), Fenwick Tree)是一个查询和修改复杂度都为log(n)的数据结构.主要用于查询任意两位之间的所有元素之和,但是每次只能修改一个元 ...

  7. 在.NET项目中使用PostSharp，实现AOP面向切面编程处理

    PostSharp是一种Aspect Oriented Programming 面向切面(或面向方面)的组件框架,适用在.NET开发中,本篇主要介绍Postsharp在.NET开发中的相关知识,以及一 ...

  8. node c++多线程插件 第一天 c++线程相关函数

    因为不会c++,今天主要是学习了一下c++的东西,感觉非常麻烦. 目前知道了c++里创建线程createThread,返回一个内核对象(HANDLE),我的理解是,c++中系统层面上的操作(线程,文件 ...

  9. 1684: [Usaco2005 Oct]Close Encounter

    1684: [Usaco2005 Oct]Close Encounter Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 387  Solved: 181[ ...

  10. 2431: [HAOI2009]逆序对数列

    2431: [HAOI2009]逆序对数列 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 954  Solved: 548[Submit][Status ...