01 - jQueryの紹介と体験 - コードワールド

jQueryの紹介

jQueryのは、JavaScriptフレームワークライブラリーとは何か、それをコンセプトに開始すると言って前に、実際には、多くの機能をカプセル化するか、互換性のあるコードの多くをカプセル化し、通常のjsファイルは、;もちろん、jQueryのは、多くのライブラリの一つであり、なぜ私たちは、jQueryのそれは、その後、彼の特徴について話を学ぶ必要があります。

ただのJSの互換性のために別のブラウザ（IE6 +、FF 2+、Safari 3.0以降オペラ9.0以降、クローム）間の互換性の問題に良い解決策。
無料の連鎖暗黙の反復プログラミングプラグインが豊富なオープンソースを使用して簡単に小さなサイズのキロバイト数十。

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>

上記の例は、DOM jQueryのか、いくつかのよりも単純であることを見ることができ、システムを学ぶために、あるいは最初からゆっくりと、jQueryのトップレベルのオブジェクトがどのように言って、次の！

jQueryのトップレベルのオブジェクト

トップレベルのオブジェクトの前にいえば、ちょうどトップレベルのオブジェクトのDOMとBOMを思い出します。

トップレベルのオブジェクトのDOMドキュメント-----ページのトップレベルのオブジェクト
ブラウザウィンドウでBOMのトップレベルのオブジェクト-----トップレベルのオブジェクト
トップレベルのオブジェクト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のファイルが更新されているためのjQueryオブジェクト-DOMオブジェクト、多くのものがありますカプセル化やアップグレードを使用して、すべての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>

ケースのWebスイッチが点灯

要件：身体の背景色を切り替えるクリックすると、我々は方法のjQueryの次にそれぞれDOMを実現

<!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の紹介と体験