01 - jQuery介绍和体验

jQuery介绍

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

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

jQuery 学习网站

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

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

jQuery快速体验

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

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

<-- 这是页面结构 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="button" value="显示效果" id="btn">
    <div id="dv"></div>
</body>
</html>

<script>
   // DOM方式
  // 如果在页面顶部加script标签的话，需要用window.onload
  window.onload = function () {
    document.getElementById('btn').onclick = function () {
      var div = document.getElementById('dv');
      div.style.width = '200px';
      div.style.height = '200px';
      div.style.backgroundColor = 'yellow';
    }
  }
</script>

// jQuery 方式
<script src="../jquery-1.12.2.js"></script>
<script>
  // 如果使用jQuery就要先引入文件
  $(function () {
    $('btn').click(function () {
      $('dv').css({'width': '200px', 'height': '200px', 'backgroundColor': 'red'});
    });
  });
</script>

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

jQuery顶级对象

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

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

jQuery中的页面加载事件

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

// jQuery则不会，而且还不止一种方法
<script src="../jquery-1.12.2.js"></script>
<script>
  // 第一种  与onload功能完全相同
  // 页面中所有的内容都加载完成后才触发  标签 图片。。。
  $(window).load(function () {
    console.log('hello');
  });
  $(window).load(function () {
    console.log('world');
  });
  // 此时页面就会输出 hello  world

  // 第二种  页面中基本的标签加载完毕后就可以触发了
  // 1. ready() 页面加载事件的写法都是 ---- 方法
  $(document).ready(function () {
    console.log('hello');
  });
  $(document).ready(function () {
    console.log('world');
  });
  
  jQuery(function () {
    console.log('hello');
  });
  jQuery(function () {
    console.log('world');
  });

  $(function () {
    console.log('hello');
  });
  $(function () {
    console.log('world');
  });
  // 可以看出咱们前面说过jQuery中的顶级对象是jQuery 和 $ 
  // 所以大多数人更偏向与最后一种使用方式
</script>

DOM对象和jQuery对象互转

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

<script src="../jquery-1.12.2.js"></script>
<script>
  // 还是上面那个HTML的案例 咱们试一下转换
  // DOM操作按钮，修改颜色
  window.onload = function () {
    // btn 就是DOM对象 
    var btn = document.getElementById('id');
    // DOM对象转换jQuery对象，只需要把DOM对象放在$(DOM对象) ---- 对象
    $(btn).click(function () {
      // 此时要通过$(this) 把this指向 jQuery
      $(this).css('backgroundColor', 'red');
    });
   }

  // jQuery对象转DOM对象 有两种方式 下面咱们演示一下
  $(function () {
    // $('#btn') 是jQuery对象 通过 .get(0)  转换为DOM对象
    $('#btn').get(0).onclick = function () {
      this.style.backgroundColor = 'red';
    }
  });
  
  $(function () {
    // $('#btn') 是jQuery对象 通过后面追加[0] 的方式转换为DOM对象
    $('#btn')[0].onclick = function () {
      this.style.backgroundColor = 'red';
    }
  });
  /*
  *   DOM对象和jQuery对象可以互转
  *   DOM对象转jQuery对象
  *     $(DOM对象) --- jQuery对象
  *   jQuery对象转DOM对象
  *     $(#btn)[0] --- DOM对象
  *     $(#btn).get(0) ---- DOM对象
  */
</script>

网页开关灯案例

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        // DOM 方式
        window.onload = function () {
          // 获取按钮，注册点击事件
          document.getElementById('btn').onclick = function () {
            // 判断开灯还是关灯
            if (this.value == '关灯') {
              document.body.style.backgroundColor = 'black';
              this.value = '开灯';
            } else {
              document.body.style.backgroundColor = 'white';
              this.value = '关灯';
            }
          }
        }

      // jQuery 方式
      $(function () {
        $('#btn').click(function () {
          // .val() --- 获取按钮对象的值
          if ($(this).val() == '关灯') {
            $('body').css('backgroundColor', 'black');
            // .val('content') --- 设置按钮的value值
            $(this).val('开灯');
          } else {
            $('body').css('backgroundColor', 'white');
            $(this).val('关灯');
          }
        });
      });
    </script>
</head>
<body>
    <input type="button" value="关灯" id="btn">
</body>
</html>

01 - jQuery介绍和体验

jQuery介绍

jQuery 学习网站

jQuery快速体验

jQuery顶级对象

jQuery中的页面加载事件

DOM对象和jQuery对象互转

网页开关灯案例

猜你喜欢