JQuery(1) 工厂函数

1.什么是jQuery？

        jQuery是一个优秀的轻量级的JavaScript类库，是由John Resig创建于2006年1月份的开源项目

        jQuery可以兼容CSS3，及各种浏览器

        使开发人员更方便的处理HTML页面，事件，操作DOM，实现动画效果。

        注意：jQuery2.x开始不再支持ie6,7,8

        jQuery的核心理念就是，写更少的代码，做更多的事情。

2.jQuery的编程步骤

        （1）引入jQuery的js文件

        （2）使用选择器定位要操作的节点

        （3）调用jQuery的方法进行操作

3.工厂函数$()

        在jQuery中，无论使用哪种类型的选择符，都要从一个美元符号$和一对圆括号开始：$()。

        所有能在样式表中使用的选择符，都能放到这个圆括号中的引号内

        大家知道，在JQuery中我们可以使用 $(document).ready(); 在其中加入页面加载后的代码，以便做出丰富的页面行为。

        它和传统的JS中的onload有什么区别呢？

        传统的window的onload程序如下：

        window.onload = function() {

               ...

        }

        它是在整个页面完全被加载之后执行。

        这样做最大的一个缺点就是速度问题，onload中的代码不仅是在构建DOM树之后，而且是在所有图像和其它外部资源被完整地加载，并在页面浏览器窗口显示完毕之后才执行。而$(document).ready()最大地优点就是在浏览器构建DOM树之后立即执行其中的代码。

$(document).ready()的写法比较正式，用得比较多的写法还可以是：$(), 你可以在括号中直接加你的匿名函数，如下：

$(function() {

        ...

});

或

$(document).ready(function() {

      ...

});

都是正确的。

$()函数会消除使用for循环访问一组元素的需求，因为放到圆括号中的任何元素都将自动执行循环遍历，并且会被保存到一个jQuery对象中。可以在$()函数的圆括号中使用的参数几乎没有什么限制。比较常用的一些例子如下。

标签名：$('p')会取得文档中所有的段落。

ID：$('#some-id')会取得文档中具有对应的some-id ID的一个元素。

类：$('.some-class')会取得文档中带有some-class类的所有元素。

4.什么是jQuery对象

        jQuery对象就是通过jQuery包装DOM对象后产生的对象

        jQuery对象是jQuery独立的，如果一个对象是jQuery对象，就可以使用jQuery的方法

        在jQuery对象中无法使用DOM对象的任何方法，反之DOM对象也无法使用任何jQuery对象的方法

        如：$('div')和$('#d1')都是jQUery对象

5.DOM对象转换为jQuery对象

        使用$()将DOM对象包装起来，就可以转换成jQuery对象

        $(DOM对象)

        function f(){

                var obj=document.getElementById('d1');

                //DOM——> jQuery对象

                var $obj=$('obj');

                $obj.html('hello jQuery');

        }

6.jQuery对象转换为DOM对象

        jQuery对象通过jQuery提供的get(index)方法，得到对应的DOM对象

        -------DOM对象 = jQuery对象.get(index);

        jQuery对象是一个数组对象，也可以通过[index]方法得到对应的DOM对象

        ------DOM对象 = jQuery对象[index];

        function f(){

                var $obj = $('#d1');

                //jQuery对象——>DOM对象

                var obj = $obj.get(0);

                obj.innerHTML='jello Jquery';

        }