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>

jQuery入门:认识jQuery

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学习:选择器&dom操作


下一篇:Jquery入门之----------选择器-------------