JQuqryという優れたJavascriptフレームワークとその簡単な応用について簡単に述べる.

JQuqry
jQuery紹介
jQueryは優秀なJavascriptフレームワークであり、無料、オープンソース、軽量級のJSライブラリであり、マルチブラウザ対応のJavascriptライブラリであり、核心理念はwrite less、do more(より少なく、より多くのことを書く)である.
jQueryは何ができるの?
Queryは、ユーザーがHTMLをより容易に処理し、WebサイトにAJAXインタラクションを容易に提供できるようにします.
構文設計により、ドキュメントオブジェクトの操作、DOM要素の選択、アニメーション効果の作成、イベント処理、AJAXの使用、その他の機能など、開発者がより便利になります.
jQuery導入
jQuery-1.11フォルダをプロジェクトのwebapp下のstaticディレクトリにコピー
jQueryオブジェクトDOMオブジェクト
document.getElementById()で見つかった要素は、$()で見つからない要素とは異なります.

 1.    jQuery          ，   jQuery   。
      2.  jQuery         DOM        ，       ，            。
      3.     jQuery       DOM           ，        jQuery     DOM  
                  ，       jQuery      ，              DOM
    。

jQueryオブジェクトの一般的な方法
JQueryの一般的な方法:jQueryオブジェクト.size();//jQueryに含まれる要素の個数を取得jQueryオブジェクト.val();//操作要素のvalue属性jQueryオブジェクト.html();//操作要素内のHTMLコードjQueryオブジェクト.text();//操作要素内のテキスト、HTMLタグjQueryオブジェクト.css();//操作要素のstyleプロパティ
jQueryセレクタ
QueryセレクタはjQueryクラスライブラリの最も重要な機能の一つであり、jQueryはページ要素を取得する構文を提供する.
きほんセレクタ

id                  

階層セレクタ

  ：$(“form input”)
  ：                 
  ：$(“form > input”)
  ：               
  ：$(”label + input“)
  ：        prev      next   。
  ：$(“form ~ input”)
  ：   prev         siblings   

フィルタセレクタ

          （:）  ，         ，       ，    ，     ，
    ，     ，           

jQueryでよく使われるDOM操作の方法
appendメソッド要素はサブ要素を追加し、最小のサブ要素です.
afterメソッド要素弟要素を追加します.
empty、removeとdetachの方法emptyは子孫を絶ち、removeとdetachは自殺した.
リストの移動

<script>
  function moveAll(srcId, targetId) {
    $('#' + targetId).append($("#" + srcId + " > option"));
 }
  function moveSelected(srcId, targetId) {
    $('#' + targetId).append($('#' + srcId + ' > option:selected'));
 }
</script>

ドロップダウン

<script>
  function distinct() {
    //       select   option    value    ，       
    var arr = [];
    $('#s2 > option').each(function(i, domEle){
      var val = $(domEle).val();
      arr.push(val); //            
   });
    console.log(arr);
    //      select   option     value  ，         ，   ，   
   option
    $('#s1 > option').each(function(i, domEle){
      var $option = $(domEle);
      var val = $option.val();
      if($.inArray(val, arr) >= 0){ //   val      
        $option.remove(); //      option   
     }
   });
 }
</script

すべて選択

<script>
  function checkChange(src) {
    //          ，                  
    var checked = $(src).prop('checked');
    checkAll(checked);
 }
  function checkAll(flag) {
    $('[name=hobby]').prop('checked', flag);
    //          ，         
    //           ，          
    $('#checkAll').prop('checked', flag);
 }
  //   
  function checkUnAll() {
    $('[name=hobby]').each(function (i, domEle) {
      //        
      var oldValue = $(domEle).prop('checked');
      //   
      var newValue = !oldValue;
      //      
      $(domEle).prop('checked', newValue);
      // $(domEle).prop('checked', !$(domEle).prop('checked'));
   });
    //     ，      ，         ，      
    check();
 }
   $(function () {
    //          ，      ，         ，      
    $('[name=hobby]').click(function () {
      check();
   });
 });
 
  function check() {
    var total = true; //   
    $('[name=hobby]').each(function (i, domEle) {
      var checked = $(domEle).prop('checked'); //           
      total = total && checked; //     total          total  
   });
    //         ，total     true,                
    $('#checkAll').prop('checked', total);
 }
</script>

JSON
定義＃テイギ＃
軽量レベルのデータ交換フォーマット
プログラミング言語とは完全に独立したテキストフォーマットでデータを格納および表示
簡潔で明確な階層によりJSONは理想的なデータ交換言語となる
JSONはフォーマットされた文字列です
[{"名前1":値,"名前2":値2},{"名前1":値,"名前2":値2}]
JavaScriptでのJSON
var json1 = ‘{“id”:1,“name”:“zs”,“age”:18}’;//JSON
var jsObj1 = {“id”:1, “name”:“zs”, “age”:18};//JSオブジェクト
JavaでのJSON
Javaでは、変換JSONの依存やJARがたくさんありますが、ここではJackson:Spring MVCに内蔵してサポートしています.速度も速く、安定性が良いです.Fastjson:アリ出品は、Java分野でJSONを変換するのが最も速いプラグインと呼ばれ、中国語のドキュメントがそろっています.

<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.6</version>
</dependency>

Fastjson
<dependency>
<groupId>com.alibaba</groupId>
  <artifactId>fastjson</artifactId>
  <version>1.2.47</version>
</dependency>

JSON.toJSONString(department)
Spring MVC応答JSON
pom.xmlにJackson依存を追加します.mvc.xmlでMVC注記解析器を構成します.対応するプロパティパッケージデータを提供するクラスを定義します.JSONデータに応答するコントローラの処理方法に@ResponseBody注記を貼り付け、メソッドは上記で定義したクラスのタイプを返します.処理方法で定義したクラスのオブジェクトを作成し、データをカプセル化して返します.
AJAXの概要
AJAXは具体的な技術ではなく、いくつかの技術の総合的な応用である.
Javascript、XHTML、CSS、DOM、XML、XMLhttpリクエスト.
AJAXコアは、WebサーバがHTTPプロトコルを使用して対話可能なXMLfttpRequestクラスをJavascriptで呼び出すことにすぎません.プログラムはブラウザで要求を発行するのではなく、この特殊なJavaScriptオブジェクトで要求を送信し、応答を受信します.XMLHttpRequestオブジェクトのネットワーク上の通称はAJAXオブジェクトである.