jQuery_jquery のいくつかの機能と使用法の概要

1. オブジェクト (dom) の正確かつ簡単な選択:

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

$('#element');// document.getElementById と同等
("element")
$('.element');// クラス
$ ('p' );//html タグ
$("form > input");//サブオブジェクト
$("div,span,p.myClass");//複数のオブジェクトを選択同時に
$ ("tr:odd").css("background-color", "#bbbbff");//
テーブルのインターレース背景
$(":input"); //フォーム オブジェクト
$ ("input[name='newsletter']");//特定のフォーム オブジェクト

2. オブジェクト関数の適用はシンプルで制限がありません。

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

element.function(par) ;
$("p.surprise" ).addClass("ohmy").show("slow")...

3. 選択したオブジェクトに対する操作 (スタイルを含む) ):

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

$("# element").addClass("selected");/ /オブジェクトにスタイルを追加
$('#element').css({ "background-color":" yellow", "font
-weight": "bolder" });//オブジェクトのスタイルを変更します
$("p").text("Some new text.");//オブジェクトのテキストを変更します
$("img").attr({ src: "test.jpg", alt: "Test Image "
});//オブジェクトのテキストを変更します
$("p").add("span");//ラベルをobject
$("p").find("span" );//オブジェクト内の対応する要素を検索
$("p").parent();//オブジェクトの親要素
$("p").append("Hello");//オブジェクトにコンテンツを追加します

4. aJax、サポートファイルをサポートします。形式: xml/html/script/json/jsonp

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

$("#feeds").load("feeds.html"); //静的ページのコンテンツを対応する領域にインポートします
$("#feeds").load("feeds.php" , {limit: 25}, function()
{alert("フィードの最後の 25 エントリが
ロードされました");});//動的コンテンツのインポート

5. イベントのサポート:

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

$("p").hover(function () {
$(this).addClass( "hilite");//マウスを置いたとき
}, function () {
$(this).removeClass("hilite");//マウスを削除します
});//マウスが置かれたとき 上昇と遠ざかるときのさまざまな効果 (すべての p オブジェクト
を自動的にループします)

6. アニメーション:

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

$("p").show("slow");//隠しオブジェクト (遅いグラデーション)
$("#go").click(function(){
$("#block").animate({
幅: "90%",
高さ: "100%",
fontSize: "10em"
},
); });//マウスクリック後の幅、高さ、フォントの動的変更

7. 拡張子:

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

$.fn.background = function(bg) {
return this.css('background', bg );
};
$(#element).background("red");