01 - jQuery介绍和体验

Posted article-record

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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显示出来并增加背景图;

<-- 这是页面结构 -->
<!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中的顶级对象;

  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则不会,而且还不止一种方法
<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介绍和体验的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS初体验-01

jquery基础知识基本使用概述

新时代网站必备jQuery插件

01-jQuery的介绍

01-jQuery的介绍

初识jQuery