欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

01 - jQuery介绍和体验

程序员文章站 2022-08-03 21:22:27
jQuery介绍 在说jQuery之前,先说一个概念吧,什么是JavaScript框架库,其实就是一个普通的js文件,里面封装了很多函数或者说封装了很多兼容的代码;当然啦,jQuery就是众多库的一员,那么我们为什么要学习jQuery呢,那就讲一下他的特点; 1. 很好的解决了不同浏览器之间的兼容性 ......
jquery介绍

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

  1. 很好的解决了不同浏览器之间的兼容性问题(ie6+,ff 2+, safari 3.0+, opera 9.0+ ,chrome) 只是针对js的兼容性;
  2. 体积小 几十kb 使用简单方便 链式编程 隐式迭代 插件丰富 开源 免费;
jquery 学习网站

jquery官网:
jquery在线api:
jqueryui:

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


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>