JQ 공통 데모

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(). 교체(/word/ig, ''));

3：

$('button.someClass').live('click ', someFunction);

//jQuery 1.4.2에서는 위임 및 위임 취소 옵션

//더 나은 컨텍스트 지원을 제공하기 때문에 라이브 대신 도입되었습니다.
//예를 들어, 과거에는 테이블의 경우
//.live()
$("table").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 ','절대');

this.css('top', ( $(window).height() - this.height() ) / + $(window).scrollTop() + 'px ');

this.css('left', ( $(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:

JQuery에서 .siblings()를 사용하여 형제 요소를 선택하는 방법

$('# 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);

tog = !tog;

})

11:

커서 위치 x 및 y

$(document).ready(function() {$(document).mousemove(function(e){$('#XY').html( ”X 축 : ” + e .pageX + ” |

전체 목록 요소(LI)를 클릭 가능하게 만드는 방법

$("ul li").click(function(){
window . location=$(this).find("a").attr("href");
return false;
});

13:

이미지가 완전히 로드되었는지 확인하는 방법

$('#theImage').attr('src', 'image.jpg').load(function() {

alert ('이 이미지가 로드되었습니다');

});


14:

쿠키 활성화 여부 확인 방법

var dt = new Date();

dt.setSeconds(dt.getSeconds() + 60);

document.cookie = "cookietest=1; 만료=" + dt.toGMTString();

var cookieEnabled = document .cookie.indexOf("cookietest=") != -1;
if(!cookiesEnabled) {
//쿠키가 활성화되지 않았습니다

}

15;

쿠키 만료 방법:

var date = new Date();
date.setTime(date.getTime() + (x * 60 * 1000 ));
$.cookie('example', 'foo', { 만료: 날짜 });