jQuery スタディ ノート コントロール ページの実装 code_jquery

each() は要素 (k1) を走査します

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

$(document).ready(function () {
$("#btn").html("each() は要素を横断します").click(function (event) {
$( "div").each(function (index) {
$(this).html("これは "インデックス "div");
}); ;
});
});

属性 (k1) の値を取得します

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

$(document).ready(function () {
$("#btn").html( "属性値を取得"). click(function (event) {
$("div").each(function () {
alert("タイトル属性の値は次のとおりです:" $(this). attr("title"));
event.preventDefault()
});


(k1) attr(name,value), attr (name,fn)
eg1

コードをコピー コードは次のとおりです $(document ).ready(function () {

$("div").each(function () {

$(this).html(this.タイトル);
});
$( "#btn").html("属性値の設定").click(関数 (イベント) {
$("div").each(関数 ( ) {
$(this).attr("style ", "color:Red")
event.preventDefault()
});


eg2

コードをコピー

コードは次のとおりです: $(document).ready(function () { $( "div").each(function () { $(this).html(this.title);

});

$("#btn").html("属性値の設定" ).click(function (event) {
$("div").each(function (index) {
$(this) .attr("id", function () {
return "div -id" インデックス;
}).html($(this).attr("id"));
event.preventDefault();
})
});


属性 (k1) の削除

要素のスタイルを設定します

コードをコピーします


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

addClass(names)、removeClass(names)、toggleClass( names) $(document).ready(function () { $ ("div").each(function () { $(this).html(this.title).addClass(" myClass1").mouseover(function () { $(this).toggleClass( "myClass2");

});

});
});


直接取得してスタイルを設定します (k1) css(name), css(name,value )




コードをコピー

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

$(document).ready(function () { $("div").each(function () { $(this).html (this.title).css({ color: "Red", opacity: "0.5" }).mouseover( function () { $(this).css("opacity", "1.0"); }).mouseout(function () {

$(this).css("opacity", " 0.5");

});


CSS タイプを判断 hasClass(name) is(name)


ページの要素を処理
text() プレーンテキストコンテンツを取得 html () innerHTML 属性を取得innerHTML を含む

要素の移動とコピー (k2) append()、appendTo(target) には 2 つの形式があります: copy と move 、単一ターゲットの移動、複数のターゲットのコピー

コードをコピー


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

$(document ).ready(function () { $("p")。 append($("a:eq(0)")); $("p:eq(1)").append($("a:eq(1)")); ; ノードの追加: before()、insertBefore()、after()、insertAfter() はい 要素を子要素として挿入するのではなく、ノードの前後に直接追加します。コピーと移動の 2 つの形式、単一ターゲットの移動、複数のターゲットのコピー

要素の削除 (k2)
eg1:remove()

コピーcode


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


$(function () {

$(" p").remove(":contains(P)" );// $("p:contains("P")").remove() と同等
eg2: empty() 注: empty() と Remove() には違いがあります。empty() はすべての子要素を削除します。

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

$(function () {
$("p").css({border:"1px Solid #FF0000", height:"20px"} ).empty();
});

要素のコピーと移動の問題を解決します (k3)

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

$(function () {
$("#btn-k3")。 html("clone() 自分自身のクローンを作成し、イベントのクローンを作成します").click(function () {
//自分自身のクローンを作成し、クリック イベントのクローンを作成します (true に設定)
$(this).clone(true)。 insertAfter(this);
}) ;
});

フォーム要素 (k4) の値の処理

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

$(function () {
$("input[type=button]") .click(function () {
var sValue = $( this).val();
$("input[type=text]").val(sValue);
}); >});

処理ページ イベント
バインド イベント リスナー (k5) binding(eventType,[data],Listener),eventTypeName(fn), one(eventType,Listener)

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

$(function () {
for (var) i = 0; i $( "div:last").clone(true).insertAfter($("div:last")); ("div").one("click", function () {
$(this).addClass("myClass1").html("クリックできるのは 1 回だけです");
}); >});


イベントの削除 (k5) unbind(), unbind("click"), unbind("click",myFunc)

コードをコピー

コードは次のとおりです: $(function () { $("div").clone().html( "unbind() イベント削除").click(function () {

$(" div").unbind();

}).insertAfter($("div")); "div:first").click(function () {
alert("削除されていないイベント");
})
});


/* プロパティとjQuery イベントオブジェクトのメソッド
altKey Alt キーが押されている場合は true、そうでない場合は false
ctrlKey Ctrl キーが押されている場合は true、そうでない場合は false
keyCode キーアップおよびkeydown イベント、キーの値を返します (「A」と「a」は同じ値、つまり 65 です)

page.X,page .Y クライアント上のマウス ポインターの座標 (ツールバーとスクロールを除く)バーなど
関連ターゲット
マウス イベントでマウス ポインターが出入りする要素
screenX、screenY コンピューター画面全体に対するマウス ポインターの座標値
shiftKey は、Shift キーが押されたときに true押されている場合、 false の場合
イベントを引き起こした要素/オブジェクトをターゲットとします
イベントの名前を入力します
これはキーボード イベントのキーの Unicode 値であり、マウスのキーの値を表しますイベント (1 は左のボタン、2 は中央のボタン、3 は右のボタン)
stopPropagation() イベントが上向きにバブリングするのを防ぎます
preventDefault() はイベントのデフォルトの動作を防ぎます
* /
は自動的にイベント (k5 ) をトリガーしますtrigger(eventType)




コードをコピー

コードは次のとおりです: $(function () { $("div").click(function () {

alert("クリックイベント");

});
$( ".myClass3").trigger("click") ;
});


クリックイベントの動的交互の実装 (k6) toggle(fn,fn)

コードをコピーします

コードは次のとおりです: $(function () { $("img")。 attr("title","クリックイベントの動的変更を実装するtoggle()").toggle(function (event) {

$(event.target).attr("src", "Img/Img2.jpg") ;

},
関数 (イベント) {
$(event.target).attr("src", "Img/Img1.jpg");
}); ;


センサーマウスの実装 (k6)

コードをコピー

コードは次のとおりです。 > $(function () { $("img").hover(function (event) { $(event.target).css("opacity", "1.0") ; },

関数 (イベント) {

$(event.target).css("opacity", "0.5");


html コード




コードをコピー

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

リンク 1 を追加
リンク 2 を追加

iPhone p>

Lumia900

;%--k4--%>

>

クリックしてください




css コード

コードをコピー

コードは次のとおりです: .myClass1{ 色:青; 背景:#e58302;} .myClass2{ 色:赤;}

.myClass3{ 境界:1px 高さ:50px; :left;}