jQuery_jquery のいくつかの機能と使用法の概要-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 18:36:29

オリジナル

1113 人が閲覧しました

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< /b>");//オブジェクトにコンテンツを追加します 

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");