码迷,mamicode.com
首页 > Web开发 > 详细

锋利的jQuery 第一章

时间:2015-02-12 17:49:18      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:

知识点梳理

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>

 

 

6,解决与其他库的冲突问题 .使用自定义别名 

  jQuery库只使用一个顶级变量对象jQuery,它的别名是$。

  jQuery在其他库之前引入,使用下面的办法

 

锋利的jQuery 第一章

标签:

原文地址:http://www.cnblogs.com/xtluping/p/4288288.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!