ホームページ > 記事 > ウェブフロントエンド > JQ共通DEMO
1:
//このコードは、
//ユーザーが値を入力しない場合に
//デフォルト値を保持する方法を示しています
wap_val = [];
$("。 swap").each(function(i){
wap_val[i] = $(this).val();
$(this).focusin(function(){
if ($(this).val() = = swap_val[i]) {
$(this).val("");
}
}).focusout(function(){
if ($.trim($(this).val()) == " ") {
$(this).val(swap_val[i]);
}});});
2:
var el = $('#id');
el.html(el .html().replace(/word/ig, ''));
3:
$('button.someClass').live('click', someFunction);
//jQuery の場合に注意してください1.4.2 では、より優れたコンテキスト サポートを提供するため、live の代わりにデリゲートおよびデリゲート解除オプション
// が導入されました
// たとえば、テーブルの場合、以前は
//.live()
$( "テーブル").each(function(){
$("td", this).live("hover", function(){
$(this).toggleClass("hover");
});
} );
//今度は
$("table").delegate("td", "hover", function(){
$(this).toggleClass("hover");
});
4 を使用します:
作成した要素を DOM に動的に追加する方法:
var newDiv = $('');
newDiv.attr('id','myNewDiv').appendTo('body'); 5:var cloned = $('#somediv').clone();
6:if($(element).is(':visible') == ' true') {
//要素は表示されます
}
7:JQ 位置決め
jQuery.fn.center = function () {
this.css('position','absolute');
this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px'); this. , ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px'); return this; / /上記の関数を使用します。このように: $(element).center();8:
特定の名前を持つすべての要素の値を配列に入れる方法:var arrInputValues = new Array(); $("input[name='table[]']").each(function(){
arrInputValues.push($(this).val());});
9:
$('#nav li').click(function(){
$('#nav li').removeClass ('active');$(this).addClass('active');
});//代替案は
$('#nav li').click(function(){
$(this) .addClass('active' ).siblings().removeClass('active');
});
10:
var tog = false
$('a' ).click(function) () { $("input[type=checkbox]").attr("checked",!tog)11:
の取得方法マウスパッドのカーソル位置 x と y$(document).ready(function() {$(document).mousemove(function(e){
$('#XY').html("X 軸: ” + e.pageX + ” クリック可能になります$("ul li").click(function(){window.location=$(this).find("a").attr("href");
return false;} );
13:
画像が完全に読み込まれたかどうかを確認する方法
$('#theImage').attr('src', 'image.jpg').load( function() {
alert ('この画像は読み込まれています');});
14:Cookie が有効かどうかを確認する方法
var dt = new Date();
dt.setSeconds( dt.getSeconds() + 60) ;
var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1; if(!cookiesEnabled) {/ /Cookie が有効ではありません
}
15;
Cookie を期限切れにする方法:
var date = new Date();date.setTime(date.getTime() + (x * 60 * 1000)) ;
$.cookie('example', 'foo', { 有効期限: date });