JQuery-day1

Jquery的版本

从JQery2.0开始将不再支持IE6,7,8

Juery库的类型

Jquery库的类型分为两种,分别是生产版(最小压缩版)和开发版(未压缩版),它们的区别如下

名称	大小	说明
jquery.js（开发版）	约229k	完全无压缩版,主要用于测试,学习,和开发
jquery.min.js(生产版)	约31k	经过工具压缩或经过服务器开启Gzip压缩，主要应用于产品和项目

在页面引用jquery也非常简单,由于jquery是javascript的一个封装库,所以直接在页面中引用即可

<!--本地引入-->
<script type="text/javascript" src="js/jquery.js"></script>
<!--远程CDN引入-->
<!-- <script src=”http://libs.baidu.com/jquery/1.9.1/jquery.min.js”></script>-->

文档就绪函数为了防止在文档还未加载完全的情况下运行jquery函数

<!--第一种方式-->
$(document).ready(function(){....})
<!--第二种方式是对第一种的简写,一般不推荐此写法-->
$().ready(function(){...})
<!--第三种方式(推荐此种写法)-->
$(function(){...})

原生js文档就绪函数对比jquery文档就绪函数的区别

	window.onload	$(document).read()
执行时机	必须等待网页全部加载完毕（包括图片等），然后再执行包裹代码	只需要等待网页中的DOM结构加载完毕，就能执行包裹的代码
执行次数	不能同时编写多个，只能执行一次，如果第二次，那么第一次的执行会被覆盖	能同时编写多个文档就绪函数

JQuery对象与DOM对象的不一样

通过jQuery方法包装后的对象，是一个数组对象，而DOM对象就是一个单独的DOM元素。它与DOM对象完全不同，唯一相似的是它们都能操作DOM;

jQuery对象是jQuery独有的，如果一个对象是jQuery对象,那么它就可以使用jQuery 里的方法: $(“#p1”).html();

jQuery对象无法使用DOM对象的任何方法, 同样DOM对象也不能使用jQuery里的任何方法;

约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $.
var $variable = jQuery 对象
var variable = DOM 对象

Jquery对象和DOM对象间的相互转换

jQuery对象转成DOM对象，有如下两种处理方法:

1. jQuery对象是一个数组对象,利用数组下标[index]的方法得到对应的DOM对象.
2. 使用jQuery中的get(index)方法得到相应的DOM对象

<!--第一种:通过数组下标获得DOM对象-->
<script type="text/javascript">
var $div = $('div'); //jQuery对象
var div = $div[0];// 转化成DOM对象
div.style.color = 'red'; //操作dom对象的属性
</script>

<!--第二种:通过JQuery对象的get()方法获得DOM对象-->
var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法，转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

相比较jQuery转化成DOM，开发中更多的情况是把一个DOM对象加工成jQuery对象。
对于一个DOM对象,只需要用$()把DOM对象包装起来(jQuery对象就是通过jQuery包装
DOM对象后产生的对象),就可以获得一个jQuery对象.

var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色