jQuery是随着Web2.0兴起的JavaScript库之一,因为其独特的优点,受到越来越多人的追捧!


1.1 JavaScript和JavaScript库

1.1.1 JavaScript简介

JS是一种脚本语言。

JS的优点:是网页和用户之间实现了一种实时的、动态的和交互的关系,是网页可以包含更多活跃的元素和更加精彩的内容。

JS的不足:复杂的文档对象模型(DOM)、不一致的浏览器实现和便捷的开发、调试工具的缺乏。

1.1.2 JavaScript库作用及对比

JS库出现的目的是为了简化JS的开发,封装了很多预定义的对象和实用函数,能帮助使用者轻松地建立高难度交互的Web2.0特性的富客户端页面,并且兼容各大浏览器。

1. Prototype

2. Dojo

3. YUI

4. Ext JS

5. MooTools

6. jQuery

1.2 加入jQuery

1.2.1 jQuery简介

jQuery创建于2006年。语法简介,跨平台兼容性,极大简化了JS开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。

1.2.2 jQuery的优势

jQuery理念是写得少,做得多(write less,do more)。

(1)轻量级

(2)强大的选择器

(3)出色的DOM操作的封装

(4)可靠的事件处理机制

(5)完善的Ajax

(6)不污染顶级变量

(7)出色的浏览器兼容

(8)链式操作方式

(9)隐式迭代

(10)行为层和结构层的分离

(11)丰富的插件支持

(12)完善的文档

(13)开源

1.3 jQuery代码的编写

1.3.1 配置jQuery环境

1. 获取jQuery最新版本

在jQuery官网http://jquery.com/。可以下载最新的版本。

2. jQuery库类型说明

1. jQuery版本分为两种:开发版(比较大,主要用于测试、学习和开发)和生产版(比较小,主要用于产品和项目)。

3. jQuery环境配置

不需要安装jQuery,只需要引用公共位置的jQuery库。

4. 在页面中引入jQuery

1.3.2 编写简单的jQuery代码

$是jQuery的简写形式。

对比window.onload和$(document).ready():执行时机、编写个数、简化写法(P8 表1-2详情)。在上一篇博文中也有介绍。

1.3.3 jQuery代码风格

1. 链式操作风格

一行代码可以完成多个操作。

jQuery操作最好有良好的 代码风格:

(1)对于同一个对象不超过3个操作,可以直接写成一排。

$("li").show().unbind("click");

(2)对于同一个对象的较多操作,建议每行写一个操作。

$(this).removeClass("mouseout")
       .addClass("mouseover")
       .stop()
       .fadeTo("fast",0.6)
       .fadeTo("fast",1)
       .unbind("click")
       .click(function(){
          // do something...
       })    

(3)对于多个对象的少量操作,可以每个对象写一行,如果涉及子元素,可以考虑适当地缩进。

$(this).addClass("highlight")
       .children("li").show().end()
.siblings().removeClass("highlight")
       .children("li").hide();

注意:程序块严格采用缩进风格书写,能保证代码清晰易读,风格一致。

2. 为代码添加注释

虽然jQuery选择器很强大,能够省去JavaScript必须编写的很多航代码,但是,千万不要忘记给这一行代码加上注释,无论是日后自己阅读还是与他人分享、合作开发,注释都能起到良好的效果。可以提高可读性。

1.4 jQuery对象和DOM对象

1.4.1 DOM对象和jQuery对象简介

目的是为了区分哪些是jQuery对象,哪些是DOM对象。

1. DOM对象

DOM元素节点可以通过JavaScript中的getElementsByTagName或者getElementById来获取,像这样获取的DOM元素都是DOM对象。

2. jQuery对象

在jQuery对象中无法使用DOM对象的任何方法,DOM对象也不能使用jQuery里的方法。

1.4.2 jQuery对象和DOM对象的相互转换

1. jQuery对象转成DOM对象

jQuery提供两种方法将一个jQuery对象转化成DOM方法,即[index]和get(index)。

(1)jQuery对象是一个类似数组的对象,可以通过[index]的方法得到对应的DOM对象。

jQuery代码如下:

var $cr = $("#cr");      //jQuery对象
var cr  = $cr[0];        //DOM对象
alert(cr.checked);

(2)另一种方法是jQuery本身提供的,通过get(index)方法得到相应的DOM对象。

jQuery代码如下:

var $cr = $("#cr");      //jQuery对象
var cr  = $cr.get(0);    //DOM对象
alert(cr.checked);

2. DOM对象转成jQuery对象

对于一个DOM方法,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。方法为$(DOM对象)。

jQuery代码如下:

var cr=document.getElementById("cr");   //DOM对象
var $cr=$(cr);                          //jQuery对象

注意:DOM对象才能使用DOM中的方法,jQuery不能使用DOM中的方法,但jQuery对象提供了一套更加完善的工具操作DOM。

1.4.3 实例研究

详见此书page15例子。

1.5 解决jQuery和其他库的冲突

1. jQuery库在其他库之后导入

在其他库和jQuery库都加载完毕之后,可以在任何时候调用jQuery.noConflict()函数将变量$的控制权移交给其他JavaScript库。

//...省略其他代码
<p id="pp">Test-prototype(将被隐藏)</p>
<p>Test-jQuery(将被绑定单击事件)</p>
<!-- 引入 prototype  -->
<script src="lib/prototype.js" type="text/javascript"></script>
<!-- 引入 jQuery  -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script>
   jQuery.noConflict();                //将变量$的控制权让渡给prototype.js
   jQuery(function(){                  //使用jQuery
      jQuery("p").click(function(){
        alert( jQuery(this).text() );
      });
   });

$("pp").style.display = 'none';        //使用prototype.js隐藏元素
</script>
//...省略其他代码

确保不与其他库冲突,自定义一个快捷方式,代码如下:

//...省略其他代码
<p id="pp">Test-prototype(将被隐藏)</p>
<p >Test-jQuery(将被绑定单击事件)</p>
<!-- 引入 prototype  -->
<script src="lib/prototype.js" type="text/javascript"></script>
<!-- 引入 jQuery  -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script>
  var $j = jQuery.noConflict();        //自定义一个比较短快捷方式
  $j(function(){                       //使用jQuery
      $j("p").click(function(){
         alert( $j(this).text() );
       });
    });

   $("pp").style.display = 'none';       //使用prototype.js隐藏元素
</script>
//...省略其他代码

第三种方法传参$:

其一:

//...省略其他代码
<script>
   jQuery.noConflict();                //将变量$的控制权让渡给prototype.js
   jQuery(function($){                 //使用jQuery
      $("p").click(function(){         //继续使用 $ 方法
        alert( $(this).text() );
      });
   });

   $("pp").style.display = 'none';     //使用prototype
</script>
//...省略其他代码

其二:

//...省略其他代码
<script>
  jQuery.noConflict();                //将变量$的控制权让渡给prototype.js
  (function($){                        //定义匿名函数并设置形参为$
     $(function(){                    //匿名函数内部的$均为jQuery
        $("p").click(function(){    //继续使用 $ 方法
            alert($(this).text());
        });
    });
  })(jQuery);                            //执行匿名函数且传递实参jQuery

  $("pp").style.display = 'none';        //使用prototype
</script>
//...省略其他代码

2. jQuery库在其他库之前导入

无需调用jQuery.noConflict()函数,直接使用”jQuery”来做一些jQuery的工作。同时,可以使用$()方法作为其他库的快捷方式。

示例如下:

//...省略其他代码
<script>
   jQuery(function(){   //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。
      jQuery("p").click(function(){
        alert( jQuery(this).text() );
      });
   });

   $("pp").style.display = 'none'; //使用prototype
</script>
//...省略其他代码

1.6 jQuery开发工具和插件

1. Dreamweaver

2. Aptana

3. jQueryWTP和Spker插件

4. Visual Studio 2008

5. 其他工具

1.7 小结

本章重点是介绍了jQuery对象和DOM对象的区别和它们之间的相互转换,然后讲解了jQuery和其他JavaScript库冲突的问题及解决办法。本章强调了代码风格和变量风格。


END

《锋利的jQuery(第2版)》笔记-第1章-认识jQuery的更多相关文章

  1. JQuery攻略读书笔记---第2章 数组

      2 数组2.8 创建对象数组循环数组2.9 数组排序 2 数组 2.8 创建对象数组 //数组化对象 var student =[ { "role":101, "na ...

  2. 《C Primer Plus》第六版笔记--7~10章

    目录 第七章 C控制语句:分支和跳转 第八章 字符输入/输出和输入验证 第九章 函数 第十章 数组和指针 第七章 C控制语句:分支和跳转 if else 用法 if (expression) //ex ...

  3. 《C Primer Plus》第六版笔记--4~6章

    目录 第四章 字符串和格式化输入/输出 第五章 运算符.表达式和语句 第六章 C控制语句:循环 虽然匆匆忙忙,但还是要做笔记,虽然大概都知道...... 挑一些容易忘记的地方 第四章 字符串和格式化输 ...

  4. 《C Primer Plus》第六版笔记--1~3章

    目录 第一章 初识C语言 1 使用C语言的7个步骤 1.1 定义程序目标 1.2 设计程序(功能实现) 1.3 编写代码 1.4 编译 1.5 运行程序 1.6 测试和调试程序 1.7 维护和修改代码 ...

  5. JavaPersistenceWithHibernate第二版笔记-第六章-Mapping inheritance-003Table per concrete class with unions(@Inheritance(strategy = InheritanceType.TABLE_PER_CLASS)、<union-subclass>)

    一.代码 1. package org.jpwh.model.inheritance.tableperclass; import org.jpwh.model.Constants; import ja ...

  6. JavaPersistenceWithHibernate第二版笔记-第六章-Mapping inheritance-002Table per concrete class with implicit polymorphism(@MappedSuperclass、@AttributeOverride)

    一.结构 二.代码 1. package org.jpwh.model.inheritance.mappedsuperclass; import javax.persistence.MappedSup ...

  7. JavaPersistenceWithHibernate第二版笔记-第六章-Mapping inheritance-001Hibernate映射继承的方法

    There are four different strategies for representing an inheritance hierarchy: Use one table per co ...

  8. JavaPersistenceWithHibernate第二版笔记-第五章-Mapping value types-007UserTypes的用法(@org.hibernate.annotations.Type、@org.hibernate.annotations.TypeDefs、CompositeUserType、DynamicParameterizedType、、、)

    一.结构 二.Hibernate支持的UserTypes接口  UserType —You can transform values by interacting with the plain JD ...

  9. JavaPersistenceWithHibernate第二版笔记-第五章-Mapping value types-006类型转换器( @Converter(autoApply = true) 、type="converter:qualified.ConverterName" )

    一.结构 二.代码 1. package org.jpwh.model.advanced; import java.io.Serializable; import java.math.BigDecim ...

随机推荐

  1. Spring、hibernate以及struts2三大框架的整合

    1.首先导入整合框架所需要的43个jar包: 2.配置xml文件: <?xml version="1.0" encoding="UTF-8"?> & ...

  2. 一个典型的MapRuduce实例------webcount(网站统计访客信息)

    统计某一特定网站的某个时辰访客人数 所用版本:hadoop2.6.5 数据样式如下: 111.111.111.111 - - [16/Dec/2012:05:32:50 -0500] "GE ...

  3. android 设颜色透明值

    如:把    <color name="line_gray_tran">#8d8d8d</color> 要设70%的透明值 计算方法:255*0.75=19 ...

  4. .NET中集合已修改;可能无法执行枚举操作 的解决办法

    foreach是取只读的,在取的时候数据不能变(包括修改,删除,添加等).要避免这个问题,就应该使用for循环. https://msdn.microsoft.com/zh-cn/library/tt ...

  5. SCNU ACM 2016新生赛初赛 解题报告

    新生初赛题目.解题思路.参考代码一览 1001. 无聊的日常 Problem Description 两位小朋友小A和小B无聊时玩了个游戏,在限定时间内说出一排数字,那边说出的数大就赢,你的工作是帮他 ...

  6. java.io.NotSerializableException: test.io.file.Student

    java.io.NotSerializableException: test.io.file.Student    at java.io.ObjectOutputStream.writeObject0 ...

  7. click与 mousedown

    一.想做出鼠标右键 自己定义的菜单 则需要先使用 document.oncontextmenu= functions(){ event.preventDefault()//去除鼠标右键的默认格式 } ...

  8. The Euler function[HDU2824]

    The Euler functionTime Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)To ...

  9. Gearman使用示例

    最近的一个旧项目重构过程中,使用到了gearman这个开源项目,简单来讲,这是一个类似MQ的异步系统,一边派发任务,一边处理任务(有类似MQ中的消息发送方与接收方),目前支持java,php等多种语言 ...

  10. [LeetCode] Basic Calculator II 基本计算器之二

    Implement a basic calculator to evaluate a simple expression string. The expression string contains ...