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/
