锋利的 jQuery | 第1章_认识 jQuery

锋利的 jQuery

一、JavaScript和JavaScript库

JavaScript简介

JavaScript是Netscape公司开发的一种脚本语言（scripting language）。JavaScript的出现使得网页和用户之间实现了一种实时的、动态的和交互的关系，使网页可以包含更多活跃的元素和更加精彩的内容

• 弊端
  • 复杂的文档对象模型（DOM）
  • 不一致的浏览器实现和便捷的开发
  • 调试工具的缺乏

JavaScript库作用及对比

jQuery同样是一个轻量级的库，拥有强大的选择器、出色的DOM操作、可靠的事件处理、完善的兼容性和链式操作等功能。

二、加入jQuery

jQuery简介

由John Resig创建于2006年1月的开源项目。现在的jQuery团队主要包括核心库、UI、插件和jQuery Mobile等开发人员以及推广和网站设计、维护人员

jQuery的优势

1. 轻量级：采用UglifyJS压缩后，大小保持在30KB左右
2. 强大的选择器：
   3. 从CSS 1到CSS 3几乎所有的选择器
   4. jQuery独创的高级而复杂的选择器
   5. 支持XPath插件选择器
   6. 开发者可以编写属于自己的选择器
3. 出色的DOM操作
4. 可靠地事件处理：
   5. 在预留退路（graceful degradation）
   6. 循序渐进
   7. 非入侵式（Unobtrusive）
5. 完善的Ajax：专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题
6. 不污染顶级变量：jQuery只建立一个名为jQuery的对象，其所有的函数方法都在这个对象之下。其别名$也可以随时交出控制权，绝对不会污染其他的对象。该特性使jQuery可以与其他JavaScript库共存，在项目中放心地引用而不需要考虑到后期可能的冲突
7. 出色的浏览器兼容
8. 链式操作方式
9. 隐形迭代
10. 行为层与结构层分离
11. 丰富的插件
12. 完善的文档
13. 开源

三、jQuery代码的编写

配置jQuery环境

• 获取jQuery最新版本
  进入jQuery的官方网站下载

Tips : 获取的方式有好多，补充两个书中没有提到的方式。

1. 通过NPM进行下载
   npm install jquery
2. 通过Yarn进行下载
   yarn add jquery

• jQuery库类型说明
  • 生产版（最小化和压缩版）
  • 开发版（未压缩版）

名称	大小	说明
开发版 (jquery.js v3.2.1 )	约261KB	完整无压缩版本，主要用于测试、学习和开发
生产版 (jquery.min.js v3.2.1 )	约84.6KB	经过工具压缩或经过服务器开启Gzip压缩 主要应用于产品和项目

• jQuery环境配置
  • jQuery也可以不需要下载，在script标签引入百度静态资源公共库对应链接(http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js)
  • 页面中引入本地jquery

  //使用公共库
  

  //在head标签引入 jQuery，应该配合 window.onload() 方法使用
  
   
  
  //在标签最下方引入jQuery
  
  
页脚
    
  

编写简单的jQuery代码

在jQuery库中，$就是jQuery的一个简写形式，$("#foo")和jQuery("#foo")是等价的，$.ajax和jQuery.ajax是等价的。

$(document).ready(function(){
    //
})

window.onload和 $(document).ready( )的对比

	window.onload	$(document).ready()
执行时机	必须等待网页中所有的内容加载完毕（包括图片）才能执行	网页中所有的DOM结构绘制完毕就执行，可能DOM元素关联的东西还没有加载完
编写个数	不能同时编写多个只能输出最后一个	能同时编写多个互不影响
简化写法	—	$(function(){})

jQuery代码风格

• 优秀代码风格
  • 对于一个对象不超过3个操作的，可以写成一行
  • 对于一个对象的较多操作，建议每行写一个操作
  • 对于多个对象的少量操作，可以每个对象写一行，涉及子元素适当缩进
  • 为代码添加有意义的注释，能够培养良好的编码习惯和风格，提高开发效率

四、jQuery对象和DOM对象

DOM对象和jQuery对象简介

• DOM对象：DOM（Document Object Model，文档对象模型），每一份DOM都可以表示成一棵树
• jQuery对象：jQuery对象就是通过jQuery包装DOM对象后产生的对象

Tips：在jQuery对象中无法使用DOM对象的任何方法

jQurey对象和DOM对象的相互转换

• jQuery对象转成DOM对象
  • 通过[index]的方法得到相应的DOM对象
  • 通过get(index)方法得到相应的DOM对象

    var $box = $("#box");
    var box=$box[0];
    
    var box=$box.get(0);

• DOM对象转成jQuery对象
  • 用$()把DOM对象包装起来，就可以获得一个jQuery对象

    var box =document.getElementById("box");
    var $box=$(box);

解决jQuery和其他库的冲突

默认情况下，jQuery用$作为自身的快捷方式

• jQuery库在其他库之后导入
  • 调用jQuery.noConflict()函数来将变量$的控制权移交给其他JavaScript库
  • 自定义一个快捷方式
  • 不想自定义快捷方式，还使用$

    //控制权移交给其他JavaScript库
    jQuery().noConflict();
    jQuery(function(){
        jQuery("p").click(function(){
            
        })
     })
   //自定义一个快捷方式
    var $j=jQuery().noConflict();
      $j(function(){
        $j("p").click(function(){
            
        })
     })
     
    //不想自定义快捷方式，还使用$
    //方式一
    jQuery().noConflict();
    jQuery(function($){ //使用jQuery设定页面加载时执行的函数
        $("p").click(function(){ //在函数内部继续使用$()
            
        })
     })
     
    //方式二
    jQuery().noConflict();//将变量$的控制权让渡给其他库
    (function($){ //定义匿名函数并设置形参为$
       $(function(){ //匿名函数内部的$均为jQuery
           $("p").click(function(){ //继续使用$()方法
               
           })
       }) 
    })(jQuery)

• jQuery库在其他库之前导入

    //直接使用jQuery,无需调用" jQuery().noConflict()" 函数
    jQuery(function(){
        jQuery("p").click(function(){            
        })
     })