jQuery-ajax

5349 ワード
jQueryでは$(document).ready()とはどういう意味ですか.
  • domが準備が整うと、実行する関数を指定します.
  • JavaScriptはloadイベントを提供しているが、画像が完全に受信されるまで、ページが表示されると、このイベントはトリガーされないまで、すべてのものを実行するために使用される.しかし、ほとんどの場合、スクリプトはDOM構造が完全にロードされている限り実行できます.処理関数を渡す.ready()メソッドは、DOMが準備ができたらこの関数を実行することを保証するので、ここでは他のすべてのイベントのバインドと他のjQueryコードの実行を行うのに最適な場所です.実行されるコードが要素がロードされてから使用される必要がある場合(例えば、ピクチャのサイズを取得するには、ピクチャがロードされた後に知る必要がある)、このようなコードをloadイベントに格納する必要がある.

    • $node.html()と$node.text()の違いは?
  • $node.html()は、テキスト、ラベルなど、要素内のすべてのHTMLコンテンツを取得できます.innerHTMLに相当します.
  • $node.text()は、要素内のテキストの内容のみを取得します.innerTextに相当します.

    • $.extendの役割と使い方?
  • $.extendでは、2つ以上のオブジェクトの内容を最初のオブジェクトにマージできます.
  • $.extend([deep],target,object 1[,objectN])の使用方法:deep:ブール値、trueであれば再帰(深コピーとも呼ばれる)にマージします.target:ターゲットオブジェクト、extendメソッドで実行するとターゲットオブジェクトが変更されます.object 1,objectN:これらのオブジェクトのプロパティはtargetにマージされ、targetに同じプロパティがすでに存在する場合は上書きされます.
  • 2つ以上のオブジェクトを$に提供する場合.extend()は、オブジェクトのすべてのプロパティをターゲットオブジェクト(targetパラメータ)に追加します.
  • パラメータが1つしかない場合は$に供給する.extend()は、ターゲットパラメータが省略されていることを意味します.この場合、jQueryオブジェクト自体がターゲットオブジェクトとしてデフォルト設定されます.これにより、jQueryのネーミングスペースに新しい機能を追加できます.これは,プラグイン開発者がjQueryに新しい関数を追加したい場合に有用である
  • 1番目のオブジェクトのプロパティ自体がオブジェクトまたは配列である場合、2番目のオブジェクトと同じkeyでプロパティが完全に書き換えられます.これらの値はマージされません.trueを関数の最初のパラメータとすると、オブジェクト上で再帰的なマージが行われます.
    • var tar = {a : 1,b : 2}
var obj = {b : 3,c : 4,d : 6}
var obj1 = $.extend({},tar,obj) //    tar   ，                  。
$.extend(tar,obj)  //  {a : 1,b : 3,c : 4,d : 6}

var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
$.extend( object1, object2 ); //{apple: 0,banana: { price: 200 },cherry: 97,durian: 100}
};

    jQueryのチェーン呼び出しは何ですか?
  • jQueryオブジェクトを呼び出すメソッドの後にそのオブジェクトが返されるので、そのオブジェクトが返された後に再びそのオブジェクトを呼び出すjQueryメソッドをチェーン呼び出しと呼び、コード量を減らしてコードをより優雅に見せることができる.
    • $('body').css({'background':red}).css('color':'#fff');

    jQueryにおけるdata関数の役割
  • 一致する要素に関連する任意のデータを格納するか、一致する要素のセットの最初の要素の所定の名前のデータ格納値を返す.
  • 1つの要素に異なる値を設定した後、これらの値を取得できます:
    • $("body").data("foo", 52);
$("body").data("bar", { myType: "test", count: 40 });
$("body").data({ baz: [ 1, 2, 3 ] });
 
$("body").data("foo"); // 52
$("body").data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }

    次の機能に対応するjQueryメソッドを書き出します.
    1.要素$nodeにclass activeを追加し、要素$noedにclass activeを削除する.要素$nodeを表示し、要素$node 3を非表示にします.要素$nodeの属性を取得する:id、src、title、以上の属性を変更する.$nodeにカスタム属性data-src 5を追加します.$ct内部の先頭に要素$node 6を追加します.$ct内部の最後尾に要素$node 7を追加する.$node 8を削除します.$ctの内容をクリアする.html 10を$ctに設定.$nodeの幅、高さ(内側の余白、内側の余白、枠線、外側の余白を除く)11を取得、設定する.ウィンドウスクロールバーの垂直スクロール距離12を取得する.$nodeからルートノードまでの水平、垂直オフセット距離13を取得する.$nodeのスタイルを変更し、フォント色を赤、フォントサイズを14 px 14に設定.ノードを巡回し、各ノード内のテキスト内容を繰り返し15.$ctからclassを検索します.itemのサブエレメント16.$ctのすべての子供を取得する17.$nodeの場合、classは'.ct'の父は、その父から見つかった.パネルの子供18.選択要素の数19を取得する.兄弟の現在の要素のランキングを取得var $node = $('.node') var $ct = $('.ct') $node.addClass('active'); $node.removeClass('active');// 1 $node class active， $noed class active $node.show(); $node.hide();//2 $node, $node $node.attr('id'); $node.attr('src'); $node.attr('title'); $node.attr('id','node node1'); $node.attr('src','123456'); $node.attr('title','xxxxxx'); //3 $node : id、src、title， $node.data('data-src','xxx123456')//4 $node data-src $node.prependTo($ct) //5 $ct $node, $ct.prepend($node) $node.appendTo($ct) //6 $ct $node. $ct.append($node) $node.remove()//7 $node $ct.empty() //8 $ct , $ct.find().remove() $ct.html('html ') //9 $ct html $node.width() $node.height() $node.css('width') $node.css('height')//10 $node.innerWidth() $node.innerHeight()//10 $node.outerWidth() $node.outerHeight()//10 $node.outerWidth(true) $node.outerHeight(true)//10 $(window).scrollTop() //11 $node.offset().left $node.offset().top //12 $node 、 $node.css({'color' : 'red';'font-size' : '14px'})//13 $node ， ， 14px $nodes.each(function(i,node){ $(node).text().clone(); })//14 ， $ct.children('.item') //15 $ct class .item $ct.find()//16 $ct $node.parents('.ct').find('.panel') //17 $node， class '.ct' ， '.panel' $node.length //18 $node.index() //19
    jQueryで以下の操作を実現
    1.$btnをクリックすると、$btnの背景色を赤色に変更する青色に変更する.ウィンドウがスクロールすると、垂直スクロール距離3が取得される.マウスを$divに置くと、$divの背景色を赤に変更し、マウスの背景色を白に移動する.マウスがinput入力ボックスをアクティブにすると入力ボックスの枠が青になり、入力ボックスの内容が変わると入力ボックスの文字の小文字が大文字になります.入力ボックスがフォーカスを失うと、枠の青を取り除き、コンソールは入力ボックスの文字6を表示する.selectを選択すると、ユーザーが選択したコンテンツコードが取得されます.http://js.jirengu.com/xiqeneximi/1/edit?html、css、jsプレビュー:http://js.jirengu.com/xiqeneximi
    jQueryでより多くのロードを実現
    フロントエンドコードhttps://github.com/cxxxingxuan/ajax/blob/master/index.htmlバックグラウンドコードhttps://github.com/cxxxingxuan/ajax/blob/master/router.js
    jQuery学習ノート--ノード遍歴
    【jquery-jqGridプラグイン】jqGrid複数選択チェックボックス編集列