jQuery初認識-jQueryって何?

41146 ワード

jQuery JavaScript jquery

jQuery
jQueryって何?

jQueryは優れたJavaScriptライブラリであり、命名からjQueryの最も主要な用途はクエリー(jQuery=js+Query)であることがわかります.jQueryの公式Logo副題が言ったように(write less,do more)jQueryを使用することで、HTMLドキュメントの遍歴と操作、イベント処理、アニメーション、Ajaxをより簡単にすることができます.

原生jsを使用してDOM要素

window.onload = function (event) {
       
    var div1 = document.getElementsByTagName("div")[0];
    var div2 = document.getElementsByClassName("box1")[0];
    var div3 = document.getElementById("box2");
}

を検索する.

jQueryを使用してDOM要素

$(function () {
       
    var $div1 = $("div");
    var $div2 = $(".box1");
    var $div3 = $("#box2");
});

を検索

原生jsを使用する背景色

window.onload = function (event) {
       
    div1.style.backgroundColor = "red";
    div2.style.backgroundColor = "blue";
    div3.style.backgroundColor = "yellow";
}

を設定する.

原生jQueryを使用して背景色

$(function () {
       
    $div1.css({
       
        backgroundColor: "red",
    });
    $div2.css({
       
        backgroundColor: "blue",
        width: "200px",
        height: "200px",
    });
    $div3.css({
       
        backgroundColor: "yellow",
    });
});

を設定.
jQueryバージョン選択の問題

1.x:ie 678と互換性があるが、他のバージョンのファイルに比べて大きく、公式はBUGメンテナンスのみを行い、機能は追加されず、最終バージョン:1.12.4(2016年5月20日).

2.x:ie 678と互換性がない、相対1.xファイルは小さくて、訪問はBUGのメンテナンスだけをして、機能はもう新しくなくて、最終バージョン:2.2.4(2016年5月20日)

3.x:ie 678と互換性がなく、最新のブラウザのみをサポートし、多くの古いjQueryプラグインはこのバージョンをサポートしていません.xファイルは小さく、Ajax/アニメーションAPIを含まないバージョンを提供します.

jQueryの使用

<script src="jquery-1.12.4.js"></script>
<script>
    // 1.   js     
    window.onload = function (event) {
     };
// 2. jQuery     
$(document).ready(function () {
     
    console.log("Hello World");
});
</script>

jQuery入口関数と原生js入口関数の違い

原生jsとjQuery入口関数のロードモードが異なる

原生jsはDOM要素のロードが完了するまで待ち、ピクチャもロードが完了するまで

を実行しない.

jQueryはDOM要素のロードが完了するまで待つが、画像もロードが完了するまで

を実行することはない.

オリジナルのjs複数のエントリ関数が記述されている場合、後に記述されるのは、前に記述された

を上書きする.

jQueryには複数のエントリ関数が記述されており、後の

は前のを上書きしない.
jQueryエントリ関数の4つの書き方

// 1.      
$(document).ready(function () {
     
    console.log("hello 1");
});

// 2.      
jQuery(document).ready(function () {
     
    console.log("hello 1");
});

// 3.      (  )
$(function () {
     
    console.log("hello 1");
});

// 4.      
jQuery(function () {
     
    console.log("hello 1");
});

jQueryの競合問題

<script src="jquery-1.12.4.js">script>
<script src="test.js">script>

test.jsファイルの内容は以下の通りです.

var $ = 100;

test.jsの$記号はjquery-1.12.4の$記号を上書きします.
このとき$記号を使用するとtestが使用される.jsの$

// 1.    $     
//    ：                 
//               $ ,     jQuery

//  jQuery.noConflict();

// 2.          

var nj = jQuery.noConflict();

nj(function () {
     
    console.log("hello");
});

jQueryコア関数

// $();      jQuery     

// 1.       
$(function () {
     
    console.log("hello 1");
    // 2.        
    // 2.1           
    //     jQuery  ，           DOM  
    var $box1 = $(".box1");
    var $box2 = $("#box2");
    console.log($box1);
    console.log($box2);
    // 2.2            
    //     jQuery  ，         DOM  
    var $p = $("    
");
    console.log($p);
    $box1.append($p);
    // 3.     DOM  
    //        jQuery       
    var span = document.getElementsByTagName("span")[0];
    console.log(span);
    var $span = $(span);
    console.log($span);
});

jQueryオブジェクト

$(function () {
     
    /*
     * 1.    jQuery  
     * jQuery          
     *
     * 2.          ？
     *  0 length-1   ，   length  
     */
     var $div = $("div");
     console.log($div);

     var arr = [1, 3, 5];
     console.log(arr);
});

スタティツクメソッド

var arr = [1, 3, 5, 7, 9];
var obj = {
      0: 1, 1: 3, 2: 5, 3: 7, 4: 9, length: 5 };
/*
             ：      
             ：        
           ：
           forEach        ，         
      */
//   arr.forEach(function (value, index) {
     
//     console.log(index, value);
//   });

//   obj.forEach(function (value, index) {
     
//     console.log(index, value);
//   });

// 1.   jQuery each        
/*
             ：        
             ：      
           ：
        jQuery each             
      */
//   $.each(arr, function (index, value) {
     
//     console.log(index, value);
//   });
$.each(obj, function (index, value) {
     
    console.log(index, value);
});

静的メソッドmapメソッド

var arr = [1, 3, 5, 7, 9];
var obj = {
      0: 1, 1: 3, 2: 5, 3: 7, 4: 9, length: 5 };
// 1.     js map    
/*
             ：        
             ：        
             ：        
           ：
            forEach  ，          
      */
//   arr.map(function (value, index, array) {
     
//     console.log(index, value, array);
//   });

//   obj.map(function (value, index, array) {
     
//     console.log(index, value, array);
//   });

/*
             ：      
            ：                
               ：
             ：        
             ：      
           ：
         jQuery  each      ，map              
      */
//   $.map(arr, function (value, index) {
     
//     console.log(index, value);
//   });

var res1 = $.map(obj, function (value, index) {
     
    console.log(index, value);
    return value + index;
});

var res2 = $.each(obj, function (index, value) {
     
    console.log(index, value);
    return value + index;
});

/*
        jQuery  each     map       ：
        each            ，       
        map                

        each                       
        map              return          ，            
      */
console.log(res1, res2);

jQueryの他の静的メソッド

/*
 $.trim();
   ：          
   ：          
    ：          
 */
/*
  var str = "    lnj    ";
  var res = $.trim(str);
  console.log("---" + str + "---");
  console.log("---" + res + "---");
  */
//    
var arr = [1, 3, 5, 7, 9];
//    
var arrlike = {
      0: 1, 1: 3, 2: 5, 3: 7, 4: 9, length: 5 };
//   
var obj = {
      name: "lbj", age: "33" };
//   
var fn = function () {
     };
// window  
var w = window;

/*
   $.isWindow();
     ：          window  
      ：true/false
  */
/*
   var res = $.isWindow(w);
   console.log(res);
  */

/*
   $.isArray();
     ：             
      ：true/false
  */

/*
   var res = $.isArray(arr);
   console.log(res);
  */

/*
   $.isFunction();
     ：              
      ：true/false
      ：
   jQuery          
  */
var res = $.isFunction(jQuery);
console.log(res);

静的アプローチのholdReadyメソッド


<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>12-     holdReady  title>
    <script src="jquery-1.12.4.js">script>
    <script>
      // $.holdReady(true);   ：  ready  
      //     ：       ，     
      $.holdReady(true);
      $(document).ready(function () {
      
        console.log("ready");
      });
    script>
  head>
  <body>
    <button>  ready  button>
    <script>
      var btn = document.getElementsByTagName("button")[0];
      btn.addEventListener("click", () => {
      
        $.holdReady(false);
      });
    script>
  body>
html>

jQueryコンテンツセレクタ

// :empty   ：                    
// var $div = $("div:empty");
// console.log($div);

// :parent   ：                 
// var $div = $("div:parent");
// console.log($div);

// :contains(text)   ：               
// var $div = $("div:contains('  div')");
// console.log($div);

// :has(selector)   ：              
var $div = $("div:has('span')");
console.log($div);

Ajax及びHTTP状態値

jsを使用してURLのパラメータを切断する