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. 从零开始--Spring项目整合(2)整合SpringMVC

    1.pom.xml 定义版本 <properties> <spring.version>4.2.7.RELEASE</spring.version> <jac ...

  2. wpf的无边框窗体透明

    本人做了3年的winform,来了新的工作,需要使用wpf.对于wpf,本人小白一个.说的不对的地方,请大家多多指导.... 今天先从wpf的窗体属性开始说起! 需要做的项目功能大概和电脑桌面类似,需 ...

  3. 读书笔记 effective c++ Item 25 实现一个不抛出异常的swap

    1. swap如此重要 Swap是一个非常有趣的函数,最初作为STL的一部分来介绍,它已然变成了异常安全编程的中流砥柱(Item 29),也是在拷贝中应对自我赋值的一种普通机制(Item 11).Sw ...

  4. 面向对象 "一"

    1:面向对象不是所有情况都适用. 2面向对象编程 a:定义类 calss Foo: 注意顶一个类的时候首字母必须是大写 def (方法一)(self,bb) pass b:根据创建对象,创建和Foo实 ...

  5. Visual Studio 2017正式版离线安装及介绍

    Visual Studio 2017 RTM正式版离线安装及介绍. 首先至官网下载:https://www.visualstudio.com/zh-hans/downloads/ VS 2017 正式 ...

  6. Xpath定位总结

    先贴上练习xpath的地址:http://www.w3school.com.cn/example/xmle/books.xml 或则也可以使用百度进行练习 1.相对定位与绝对定位 //表示相对定位,对 ...

  7. 《深入理解Java虚拟机》学习笔记之工具

    善于利用工具,不仅可以加快我们分析数据,还可以快速定位和解决问题.现在我们就来看看虚拟机性能监控和故障处理工具. 在JDK的bin目录可以看到sun免费送给了我们很多小工具,这些工具虽然小巧但功能强大 ...

  8. 版本管理工具 —— SVN

    想想我们在开发过程中是不是会遇到这样的情况: 今天写了很长的一段代码,觉得不合理,然后删了,第二天突然发现昨天的那段代码才是正确的,那怎么办,也无法撤销删除的代码? 还有团队中多人共同开发一个项目,如 ...

  9. ST 单元测试之maven引入junit包

    按照上篇博客,已经完成了mavne以及eclipse的安装配置,新建好了一个maven项目. 接下来打开项目,双击打开pom.xml,可以看到如下所示, 点击下方的pom.xml,然后添加如下代码,即 ...

  10. 关于java泛型

    <T> 代表的是泛型 ,实例化的时候将传入真正的数据类型,比如: public interface BaseProvider<T>{ public T test(); } 实例 ...