jQuery入门：认识jQuery

　　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/

转载于:https://www.cnblogs.com/BlueStarWei/p/6673671.html

jQuery入门：认识jQuery相关推荐

jQuery入门(一)--jQuery中的选择器
什么是jQuery? jQuery的官网 http://jquery.com/ jQuery就是一个js库,使用jQuery的话,会比使用JavaScript更简单. js库:把一些常用到的方法写到一 ...
jQuery入门-初识jQuery
目录什么是jQuery? 下载jQuery jQuery的入口函数对比JavaScript的入口函数jQuery的入口函数,执行时机 jQuery对象和DOM对象的区别 jQuery对象和DOM对 ...
jquery 入门（jquery是什么/与JavaScript的联系与区别/jquery版本/引包/入口函数）
1. 为何要学jQuery (1)JS的劣势 (2)jQuery是什么(理解) jQuery是别人帮我们封装好的库. jQuery是JS的一个库,封装了开发过程中常用的功能,能够提高开发效率. JS ...
前端的第二十四天（jQuery入门、常用API）
前端的第二十四天(jQuery入门.常用API) 一.jQuery入门 1.jQuery 概述 2.jQuery 的基本使用官网地址:点我跳转各个版本的下载:点我跳转二.jQuery常用API ...
【转】Jquery -Ajax 入门练习 Jquery.Ajax 调用后台函数，获取DataTable Json,Asp.net
直接上图=============最后拷贝源码(图片清楚) ====================================================================== ...
Jquery入门详解
JQuery 入门介绍 1.JQuery概述:Jquery是继prototype之后又一个优秀的Javascrīpt框架.它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器(I ...
jQuery——入门（四）JQuery 事件
jQuery--入门(四)JQuery 事件一.事件初探加载文档完成触发: window.onload = function(){} //js $(window).load(function( ...
jQuery——入门（三）JQuery DOM操作（核心处理和文档处理）
jQuery--入门(三)JQuery DOM操作(核心处理和文档处理) 一.核心处理(JQuery对象访问) 1.页面加载检测函数:$(document).ready(function(){}); ...
jQuery——入门（二）动画
jQuery -- 入门(二)动画/效果一.案例解析 hide([speed,[easing],[fn]]) []:意思表示的方括号中的东西是可选的,可有可无的: []中,会有对应的参数名称[变量名 ...
jQuery——入门（一）JQuery的简介与基本选择器的使用
JQuery入门(一)-- 基本简介与基本选择器的使用一.jQuery简介 jquery是2006年1月由美国人John Resig在纽约barcamp发布,目前已经成为辅助javascript开发 ...

jQuery入门：认识jQuery

jQuery入门：认识jQuery相关推荐

最新文章

热门文章