锋利的jQuery 第一章

浏览数：22 / 时间：2015年06月09日

知识点梳理

1，常用的JavaScript库

　　Prototype 老牌的JS库了。YUI雅虎推的jS库。ExtJS，，，，。jQuery于2006年1月创立的开源项目。jQuery团队包括核心库、UI、插件、jQuery Mobile等

2，jQuery的优势

　　（1）轻量级

　　（2）强大的选择器

　　（3）出色的DOM操作的封装

　　（4）可靠的事件处理机制

　　（5）完善的Ajax

　　（6）不污染顶级变量

　　（7）出色的浏览器兼容性

　　（8）链式操作方式

　　（9）隐式迭代

　　（10）行为层与结构层的分离

　　（11）丰富的插件支持

　　（12）完善的文档

　　（13）开源

3，如何开始编写使用jQuery库的JS代码

　　jQuery库就一个文件,发行版也就30KB左右，开发版在2，300KB左右。推荐使用百度的CDN，来引用jQuery库。百度的速度在我们国内还是不错的。至于CDN是什么，自己查去。

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

4，一切都从一个函数开始

　　jQuery提供了许下的函数。这两个函数是同一个函数的不同写法。网页中所有的DOM结构绘制完毕就执行方法。与传统的window.onload不同的是，前者不需要等待图片等资源下载完毕再执行函数；并且可以多次注册，依次执行。

<script  type="text/javascript" charset="utf-8">
            $(document).ready(function(){
                alert(‘hello world‘);
            });
            $(function () {
                alert(‘again hello world‘);
            });
</script>

5，jQuery对象和DOM对象

　　使用原生JavaScript方法获得的对象，既是DOM对象。使用 $() 获得的是一个类似数组的jQuery对象。无论如何$()函数都会返回一个jQuery对象。在使用前可以通过length来判断是否找到了对应的元素

        <div id="content">
            <div id="head">
                这是头
            </div>
            <div id="main">
                这是内容区
            </div>
            <div id="bottom">
                这是底部 
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                //这是DOM对象
                var domObj = document.getElementById("head");
                //这是jQuery对象
                var $Obj = $(‘#head‘);
                //len 的值为1
                var len = $Obj.length;
                
                //DOM对象转换为jQuery对象
                var result = $(domObj);
                //jQuery对象转换为DOM对象
                var domResult = $Obj[0]; 
                domResult = $Obj.get(0);
            })
        </script>