01 - jQuery介绍和体验

jQuery介绍

在说jQuery之前，先说一个概念吧，什么是JavaScript框架库，其实就是一个普通的js文件，里面封装了很多函数或者说封装了很多兼容的代码；当然啦，jQuery就是众多库的一员，那么我们为什么要学习jQuery呢，那就讲一下他的特点；

1. 很好的解决了不同浏览器之间的兼容性问题(IE6+，FF 2+， Safari 3.0+， Opera 9.0+ ，Chrome) 只是针对js的兼容性；
2. 体积小 几十kb 使用简单方便 链式编程 隐式迭代 插件丰富 开源 免费；

jQuery 学习网站

jQuery官网： https://jquery.com/
jQuery在线API： https://api.jquery.com/
jQueryUI: https://jqueryui.com/

只是说还是不行下面咱们还是通过一些实例体验一下吧

---

jQuery快速体验

下面就用DOM和jQuery 的方式来实现一个小案例，体验一下吧；

要求：点击按钮使按钮下方div显示出来并增加背景图；

<-- 这是页面结构 -->



    
    
    
    


    
    

// jQuery 方式

以上实例可以看出jQuery还是比DOM要简洁一些的；要系统的学习，还是要从开始慢慢来，下面怎们来说说jQuery中的顶级对象！

jQuery顶级对象

在讲顶级对象之前，刚好回忆一下DOM和BOM中的顶级对象；

1. DOM中的顶级对象 document ----- 页面中的顶级对象
2. BOM中的顶级对象 window ----- 浏览器中的顶级对象
3. jQuery中的顶级对象 jQuery 或者 $

jQuery中的页面加载事件

// 在DOM中页面加载事件 onload 只能有一次，比如
window.onload = function () {
  console.log('hello');
}
window.onload = function () {
  console.log('world');
}
// 此时页面只会输出world，那这个肯定是我们不能接受的；

// jQuery则不会，而且还不止一种方法

DOM对象和jQuery对象互转

DOM 对象转Jquery对象操作方便,毕竟Jquery中方法都是封装 好了的,而且兼容问题解决的很好,代码少,方便. Jquery对象转DOM对象,因为Jquery中文件一直在更新，很多 东西都是随着使用而进行封装和升级,不太可能把所有dom中 用到的进行封装,还有很多未知的兼容问题没有封装进去,所以, 有的时候jquery中不能解决的问题,还需要原生的js代码来解决, 所以,jquery对象有的时候需要转成dom对象来进行操作。

网页开关灯案例

要求：点击按钮切换body的背景颜色；下面咱们用DOM和jQuery的方式分别实现

转载于:https://www.cnblogs.com/article-record/p/11442004.html