jQueryの勉強ノート 勉強ノート(2)_jquery

1. クラスと ID を使用して HTML 要素を選択します
ID が「myDivId」である要素を選択します。ID は一意であるため、1 つまたは 0 つの要素

が常に選択されます。 >コードをコピー コードは次のとおりです:

$('#myDivId')

クラスを「myCssClass」として選択します。 OK クラス「myCssClass」を持つ複数の要素を選択します。

コードをコピーします コードは次のとおりです:

$('.myCssClass')

要素の値を取得または設定します

コードをコピーします コードは次のとおりです:

var myValue = $('#myDivId').val(); // 要素の値を取得します
$('#myDivId') .val("hello world" ); // 要素の値を設定します

と: で ID を選択する場合は、2 つのバックスラッシュ

コードをコピーします コードは次のとおりです:

// 機能しません
$("#some:id")
/ / 動作します!
$("#some\:id")
// 動作しません
$("#some.id")
// 動作します!
$("# some\.id")

または次の処理を使用します

コードをコピーします コードは次のように:

function jq(myid) {
return '#' myid.replace(/(:|.)/g,'\$1');
}
$( jq('some.id') )

2. 要素
をテストする is() メソッドを使用して、特定のクラスがあるかどうかをテストします

コードをコピー コードは次のとおりです:

if ( $('#myDiv').is('.pretty') )
$('#myDiv').show();

非表示にするかどうかをテストします

コードをコピーします コードは次のとおりです:

if ( $('#myDiv').is(':hidden') )
$('#myDiv').show ();

バージョン 1.2 以降では、hasClass メソッドを使用して処理できます

コードをコピー コードは次のとおりです。

$("div").click(function() {
if ( $(this).hasClass("protected") )
$ (これ)
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: 0 })
});

要素が存在するかどうかをテストします

コードをコピー コードは次のとおりです:

if ( $(' #myDiv').length )
$('#myDiv')。 show();

3.

コードをコピーします コードは次のとおりです。 :

// #x を無効にする
$("#x").attr("disabled","disabled" );
// #x を有効にする
$( "#x").removeAttr("無効");

コード:

コードをコピーコードは次のとおりです。

オプション>2

 // これは機能しません <br>$(this ).find('li a').eq( 2).text().replace('foo','bar'); <br>// これは機能します <br>var $thirdLink = $(this).find ('li a').eq(2); <br>var linkText = $thirdLink.text().replace('foo','bar'); <br> 

;

4.チェックボックスの選択/解除

コードをコピー コードは次のとおりです:

// #x をチェック
$("#c").attr("checked", "checked")
// #x のチェックを解除
$("#c").removeAttr("checked ");

コード:

コードをコピー コードは次のとおりです:

チェック/チェック解除されます。

5. 選択オプション

の値とテキストを取得します。 コードをコピー コードは次のとおりです。

$("select#myselect").val(); "#myselect オプション:選択済み").text ();

コード:

コードをコピーコードは次のとおりです。

Ms BR博士
>Prof

;input type="button" value="値を取得" onclick="alert($('#myselect').val() )"/>

10 項目のうち 3 番目の項目のテキストを置き換えます

コードをコピーします コードは次のとおりです:

// これは機能しません
$ (this).find('li a').eq(2).text().replace('foo','bar'); これは機能します
var $thirdLink = $(this) .find('li a').eq(2);
var linkText = $thirdLink.text().replace('foo', 'bar');
$thirdLink.text(linkText); 🎜>