ゼロから学ぶJavaScript_シリーズ(七)——jquery(チェックボックスおよび反発、divブロック、cssの変更、ラベル配列、ajax連続ロード)

(17)チェックボックスが選択されているかどうかを確認する
チェックボックスは次のとおりです.

<input type="checkbox" name="yingmingliu"id="yingmingliu" value="yingmingliu"/>

jq構文は次のとおりです.

$("#yingmingliu").is(':checked')

選択した場合はtrue、選択されていない場合はfalseを返します.
 
チェックボックスの値を表示します.

$("#yingmingliu").attr('value')

valueを返す
 
2つのチェックボックスは互いに反発します:(別の自動失効を選択)

$(document).ready(function()
{
 $("#guluan").focus(function(){$("#meiyinxiang").attr("checked",false);})
})
$(document).ready(function()
{
 $("#meiyinxiang").focus(function(){$("#guluan").attr("checked",false);})
})

効果:
①これは2つのチェックボックスボタン(checkbox)です.
②いずれかが選択されると(フォーカスfocusとなる)、もう一方が自動的に選択されないように設定される.
 
 
 
(18)あるdivブロックAを常に別のdivブロックBの下部に配置する方法
まず、両方とも同じ親ブロックの下にあり、その親ブロックclassはBブロックのclassである(必要かどうかは不明).
次のようになります.

<div class="dam"><!--    -->
       <div id="dam"class="dam"></div>
       <divid="lastdam" class="lastdam">
</div>

次にcssプロパティを設定します

div .dam
{
 
       float: left;
       color:red;
       font-size:20px;
       text-align:left;
       width:270;
}
div .lastdam
{
       float: left;
       color:blue;
       font-size:20px;
       text-align:left;
       <span style="color:#ff0000;">width:100%;</span>
}

キーは赤い部分です.
そしていいです.
注意:バックグラウンドカラーが必要な場合、lastdamの幅が親ブロックのdamより大きい幅に等しいため、バックグラウンドの幅が以前の幅をはるかに上回る可能性があるという欠点があります.
 
(19)jqueryによるcss属性の変更(displayでのプレゼンテーション)
コード:

$("#maincontent_dafengche").css('display','none');

効果:
IDをmaincontent_とするdafengcheのcss属性displayの値、noneに設定
 
 
 
(20)jqを用いたnameセレクタ
コード#コード#

$("[name='maincontent']").css('display','none');

効果:
すべてのname=「maincontent」のラベルを選択
 
 
(21)複数のラベルを同時に選択して操作する
コード:

function selectAll() //  3       
{
       var objs =document.getElementsByName('twId');
       var i;
       for(i = 0; i <objs.length; i++)
       {
              if(objs[i].type =="checkbox")
              {
                     objs[i].checked= true;
              }
       }
}

効果:
①すべてのname="twId"の項目を選択します.
②そのタイプがチェックボックス(checkbox)である場合.では、そのボタンタイプをtrueに設定します.(選択された状態);
③配列(変数objs)であることを説明し、そのうちの1つを選択する際にobjs[i](iは数字)を使用する.
④それはname='twId"の順で配列メンバーとなるものと推測する(ただしjsやdojoによって追加されたラベルであれば、その順序が確定しないのは、追加後の位置によってその順序が決まるのかもしれない);
 
 
 
(22)配列のメンバー数を決定する
オブジェクト配列名がobjである場合
では、そのメンバーの数はobjである.length
 
 
 
(23)jqueryによるajax非同期ローディングテキスト
構文:
$(selector).load(URL,data,callback);
 
 
コード:

$(document).ready(function()
{
       $("#aa").click(function()
       {
              $(".another").load('a.txt');
       })
})

htmlコード:

       <divclass="one">   </div>
       <divclass="another">   </div>
       <inputtype="button" id="aa" value="    ajax">
 

効果
①ボタンをクリックすると、同ディレクトリのa.txtファイルを読み込む.
②class=「another」のラベルの内容をa.txtファイルの内容で置き換える.
③class=「another」のラベルが複数ある場合、それぞれが置き換えられます.
 
 
ステップ:ファイルの一部をロードする
コードを次のように変更します.

$(".another").load('a.txt #a');

効果:
①ファイル中のid=「a」のラベルを読み取る.
②書類の内容:

   ！！
<div id="a">   ~~~</div>

2行目の内容のみを読み出す.
 
 
ステップ:コールバック関数
コードを次のように変更します.

$(".another").load('a.txt',function(responseTxt,statusTxt,xhr)
{
       alert(responseTxt);
});

効果:
1関数はコールバック関数(load後に実行される関数)である.
②最初のパラメータが返されるテキスト(すべてのテキストは、'a.txt#a'を使用しても、一部ではなくすべて表示されます)、パラメータ名は変更できます.
②2番目のパラメータはloadが成功したかどうかの状態です.呼び出しに成功するとstatusTxt値は「success」(文字列)、失敗するとerrorとなります.
3番目はxhrであるオブジェクト(object)である.statusはloadの状態を表し、xhr.statusTextはエラーの状況を表します.
 
 
 
 
(24)consoleを用いてエラーを記録する
コード:
console.log(xhr.statusText);
 
エラーテキストをログに記録します(火狐の開発者ツールで表示できます).
他にも4つの方法があります.
console.info(「これはinfo」);
console.debug(「これはdebug」);
console.warn(「これはwarnです」);
console.error(「これはerror」);
具体的には違いは不明ですが、(少なくともlogもerrorも表示できます)
 
 
 
 
(25)AJAXを使用して外部htmlをロードした後、ロードしたボタンを使用してjsイベントをトリガーする
状況:
①外部htmlがあるとし、       {
              alert("1");
       })
})
 
解決策:
1 onの書き方を使用し、そのセレクタはbodyまたはdocumentであるべきである.
②コード例:

$("body").on("click","bb", function()
      {
           alert("1");
      })

できます.ここで、第1のパラメータはclick(イベント)であり、第2のパラメータはイベントをトリガーするラベル(bb)であり、第3のパラメータはコールバック関数(イベントをトリガーした後に実行される内容)である.