当前位置： 移动技术网 > IT编程>开发语言>Jquery > 01 - jQuery介绍和体验

01 - jQuery介绍和体验

2019年09月01日  | 移动技术网IT编程  | 我要评论
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>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网