jQuery DOM&イベント

1.ライブラリとフレームワークの違いを話しますか?

ライブラリ(Library)ライブラリは、コードセットを合成する製品であり、呼び出すことができる.

フレームワーク(Framework)フレームワークは、1つの(クラス)の問題を解決するために開発された製品であり、フレームワークユーザーは一般的にフレームワークで提供されたクラスや関数を使用するだけで、すべての機能を実現する傾向がある.フレームワークはライブラリのアップグレード版と言える.

ライブラリはいくつかのパッケージされた一般的な関数方法(ツールボックス)です.フレームは組み立てられた棚で、中に内容を記入すればいいです.また,フレームワークは対応するライブラリを提供したり,ライブラリベースで実現したりすることができるが,ライブラリの半分はフレームワークの規範性を備えていない.
2.jqueryは何ができるの?
JQueryは速く、小型で機能豊かなJSライブラリです.簡単で使いやすいブラウザAPIを提供し、HTML、イベント処理、アニメーションなどを操作し、遍歴させることができます.
3.jqueryオブジェクトとDOMオリジナルオブジェクトの違いは何ですか?変換方法
JQueryオブジェクトはパッケージされたDOMオリジナルオブジェクトです
変換:

jquery回転DOM:

  var $div = $('#div');  // jquery   
  var div = $div[0];  // [index]      DOM   
  var div = $div.eq(0);  // eq(index)      DOM   

DOM回転jquery

  var div = document.getElementById('div');  // DOM   
  var $div = $(div);  //   $()   ，    $     

4.jqueryでイベントをバインドする方法bind、unbind、delegate、live、on、offはどんな役割を果たしていますか?どちらがおすすめですか?onバインドイベントを使用してイベントエージェントの書き方を使用しますか?

bind:1つの要素にイベントハンドラをバインドします.jQuery 3.0では、.bind()は、廃棄としてマークされている

  $('#foo').bind('click', function() {
    alert('User clicked on "foo."');
  });

unbind:用.bind()メソッドでバインドするイベントハンドラを使用することができる.unbind()除去.jQuery 3.0では、.unbind()は、

として廃棄されたとマークされている.

  '#foo').unbind();

delegate:jQuery 3.0でイベントエージェント.delegate()は、

として破棄されたとマークされています.

  $("body").delegate("p", "click", function() { 
    $(this).toggleClass("chosen");
  });

live:このイベントは、documentオブジェクトまでイベントバブル中にすべての祖先要素に渡されます.jQuery 1.7から、この関数は時代遅れとしてマークされます.jQuery 1.9から

が除去される

  $("#btn a").live("click",function(){
    console.log('1');  //       a     ，       
  });

on:バインドイベント処理を提供するすべての機能

  $( "#div" ).on( "click", function() {
    console.log('1');
  });

on()メソッドは,以上の種々のイベントをバインドするメソッドを置き換えることができる.

off:除去する.on()バインドイベント処理関数

  $("p").off()  //           

on()バインドイベントエージェント

  $('ul').on('click', 'li', function() {
    console.log( $(this).text() );
  })

5.jqueryはどのように要素を表示/非表示にしますか?

展示要素

  $('#btn').on('click', function() {
    $('#div').show(800);
  })
  // .show(duration, complete)
  // duration (  : 400)                   
  // complete            

非表示要素

  $('#btn').on('click', function() {
    $('#div').hide(800);
  })

6.jqueryアニメーションはどのように使用しますか?
.animate()CSSプロパティのセットに基づいてカスタムアニメーションを実行する

  .animate( properties , duration , easing , complete  )
  // params           CSS   
  // duration (  : 400)                  。("slow", "normal",   "fast")            ( ：1000)
  // easing (  : swing)     ，            
  // complete            

  $('#btn').on('click',function() {
    $('#div').animate( {
      opacity:0.5,
      left:'50px',
      height:100px
     }, 5000, function() {
      console.log('    ');
     } );
  });

7.エレメント内部のHTMLコンテンツの設定と取得方法要素の内部テキストを設定して取得するにはどうすればいいですか?

要素内部HTMLコンテンツの取得と設定

  $('#ct').html()  //        HTML   
  $('#ct').html( '
   ct    HTML   
' )  //       HTML  

要素内部テキスト

の取得と設定

  $('#ct').text()  //         
  $('#ct').text( '  ct' )  //         

8.フォーム・ユーザーが入力または選択した内容を設定および取得する方法要素のプロパティを設定して取得するにはどうすればいいですか?

フォームユーザが入力または選択するコンテンツを取得および設定する

.

  $('.input').val()  //                
  $('.input').val( '      ' )  //                

要素属性

の取得と設定

  $('#img').attr( 'src' )  //       
  $('#img').attr( 'src', './images/1.png' )  //       

コード#コード#

task 25-1効果プレビュー

task 25-2効果プレビュー

task 25-3効果プレビュー