mission-30(jquery-ajax)

Q 1:jQuery中,$(document).ready()とはどういう意味ですか.
DOM(ドキュメントオブジェクトモデル)がロードされ、画像を含むページが完全に表示されるとreadyイベントが発生します.このイベントはドキュメントが準備された後に発生するため、他のすべてのjQueryイベントと関数をイベントに配置するのは非常に良い方法です.上の例のように.ready()関数は、readyイベントが発生したときに実行されるコードを規定する.ready()関数は現在のドキュメントでのみ使用できるため、セレクタは必要ありません.
Q2: $node.html()と$node.text()の違いは?
$node.html():コレクション内の最初の一致する要素のhtmlコンテンツを取得するか、各要素のhtmlコンテンツを設定します.$node.text():一致する要素のセット内の各要素の集計テキストを取得し、その子孫を含むか、一致する要素のセット内の各要素のテキスト内容を指定したテキスト内容に設定します.ps:.text()メソッドはinput要素またはscripts要素では使用できません.inputまたはtextareaは使用する必要がある.val()メソッドは、テキスト値を取得または設定します.scripts要素の値を取得し、使用する.html()メソッド
Q3: $.extendの役割と使い方?
$.extendメソッドは、複数のオブジェクトを最初のオブジェクトにマージするために使用します.

 var o1 = {p1:'a',p2:'b'};
 var o2 = {p1:'c'}; 
 
$.extend(o1,o2);
 o1.p1 // "c"
 

$.extendのもう一つの使い方は、既存のオブジェクトを継承するための新しいオブジェクトを生成することです.この場合、最初のパラメータは空のオブジェクトである必要があります.

 var o1 = {p1:'a',p2:'b'};
 var o2 = {p1:'c'}; 
 
var o = $.extend({},o1,o2);
 o
 // Object {p1: "c", p2: "b"}
 

デフォルトでは、extendメソッドによって生成されるオブジェクトは「浅いコピー」です.つまり、ある属性がオブジェクトまたは配列である場合、値はコピーされずにそのオブジェクトまたは配列を指すポインタのみが生成されます.「深いコピー」を使用する場合は、extendメソッドの最初のパラメータからブール値trueを入力できます.

 var o1 = {p1:['a','b']}; 
 
var o2 = $.extend({},o1);
 var o3 = $.extend(true,{},o1);
 
 
o1.p1[0]='c';
 
 
o2.p1 // ["c", "b"]
 o3.p1 // ["a", "b"]
 

Q 4:jQueryのチェーンコールは何ですか?
$(「セレクタ」).方法1(コールバック関数1).方法2(コールバック関数2).方法N(コールバック関数N);簡単に言えば、jQueryメソッドを連続的に使用できるプロセスをチェーン呼び出しといい、$(「セレクタ」)とも書くことができる.方法1(コールバック関数1).方法2(コールバック関数2).方法N(コールバック関数N);このような書き方が提唱されている
Q 5:jQueryにおけるdata関数の役割
html 5のdata属性と同様に、ユーザーがラベルにデータをバインドするのを容易にするために使用され、jqueryのdata関数は現在のjqueryオブジェクトが一致するすべての要素にデータをアクセスするために使用され、data()関数がアクセスするデータは一時的なデータであり、ページがリフレッシュされると、以前に保存されたデータは存在しません.removeData()メソッドを削除する必要がある場合.使用法:keyとvalue、またはobjectの2つのパラメータを入力できます.データを読み込むときは、最初の一致要素のみに準拠することに注意してください.
Q 6:以下の機能に対応するjQueryメソッドを書き出します.
要素$nodeにclass activeを追加、要素$noedにclass activeを削除

 $node.addClass('active');//  
 $node.removeClass('active');//  
 

要素$nodeを表示、要素$nodeを非表示

 $node.show();
 $node.hide();
 

要素$nodeを取得する属性:id、src、title、以上の属性を変更

 //   
 $node.attr('id');
 $node.attr('src');
 $node.attr('title');
 //   
 $node.attr('id', 'wrap');
 $node.attr('src', 'https://github.com');
 $node.attr('title', 'welcome');
 

$nodeにカスタム属性data-srcを追加

 $node.attr('data-src', wrap);
 

$ct内部の先頭に要素$nodeを追加

 $ct.prepend($node);
 

$ct内部の最後尾に要素$nodeを追加

 $ct.append($node);
 

$nodeを削除

 $node.remove();
 

$ct内の内容をクリア

 $ct.empty();
 

$ct内にhtmlを設定

 $ct.html('
')
 

获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)

 $node.width(); // content
 $node.height(); // content
 $node.innerWidth(); // content+padding
 $node.innerHeight(); // content+padding
 $node.outWidth(); // content+padding+border
 $node.outHeight(); // content+padding+border
 $node.outWidth(true); // content+padding+border+margin
 $node.outHeight(true); // content+padding+border+margin
 

ウィンドウスクロールバー垂直スクロール距離を取得

 $(window).scrollTop();
 

$nodeからルートノードまでの水平、垂直オフセット距離を取得する

 $node.offset();
 

$nodeのスタイルを変更する、フォント色を赤、フォントサイズを14 px

 $node.css({'color': 'red'; 'font-size': '14px'})
 

ノードを巡回し、各ノードのテキスト内容を繰り返し

 $.each(function () {
 console.log($(this).text());
 })
 

$ctからclassを検索する.itemの子元素

 $ct.find('.item');
 

$ctの中のすべての子を取得

 $ct.children();
 

$nodeに対してclassを上に見つけて'.ct'の父は、その父から見つかった.パネル'の子

 $node.parent('.ct').find('.panel');
 

選択した要素の数を取得

 $node.length;
 

現在の要素の兄弟ランキングを取得

 $(this).index();
 

Q 7:jQueryで以下の操作を実現
$btnをクリックすると、$btnの背景色を赤にして青にします.ウィンドウがスクロールすると、垂直スクロール距離を取得します.マウスを$divに置き、$divの背景色を赤に変更し、マウスの背景色を白にします.input入力ボックスをアクティブにすると、入力ボックスの枠が青になり、入力ボックスの内容が変更されると、入力ボックスの文字が小文字になります.入力ボックスがフォーカスを失うと枠の青を取り除き、コンソールに入力ボックスの文字が表示されます.selectを選択すると、ユーザーが選択した内容が取得されます.http://js.jirengu.com/ginodeguki
Q 8:jQuery ajaxで以下の効果を実現する.`[詳細をロード]をクリックすると、データがページに表示されます.
http://js.jirengu.com/dojojeqowi/1/edit
天気予報小demo:
http://js.jirengu.com/tilokutete/1/edit?html,css,js,output