실용적인 jQuery 코드 조각 모음_jquery

아래 jQuery 스니펫은 학습 과정에서 일반적으로 사용되는 jQuery 코드를 발견한 경우 공유해 주세요. 이러한 코드 조각을 살펴보겠습니다.

1.jQuery가 사용자 IP를 가져옵니다.

코드 복사 코드는 다음과 같습니다.

$.getJSON("http://jsonip.appspot.com?callback=?", function (data) {
alert("귀하의 IP: " data.ip);
} );

2.jQuery로 이미지의 너비와 높이를 확인합니다.

코드 복사 코드는 다음과 같습니다.

var theImage = new Image();
theImage.src = $('#imageid').attr("src")
alert ("Width: " theImage.width);
alert("Height: " theImage.height)

3.jQuery는 지정된 문자열을 찾습니다:

코드 복사 코드는 다음과 같습니다.

var str = $('*:contains("the string")');
4.js 브라우저에서 쿠키를 활성화하는지 여부를 결정합니다.
$(document).ready(function () {
document.cookie = "cookieid=1;expires=60";
var result = document.cookie.indexOf("cookieid=") != -1 ;
if (!result) {
alert("브라우저에서 쿠키를 활성화하지 않습니다.")
}
}); 🎜>

5.jQuery가 키보드 키를 감지합니다:

코드 복사 코드는 다음과 같습니다.

$(document).ready(function () {
$(this).keypress(function (e) {
switch (e.which) {
case 13:
alert("Enter 키를 눌렀습니다.");
break
//추가 감지
}
})


, 이 기사는 여기에 요약되어 있습니다. 이 jQuery 코드 조각 기사가 모든 사람에게 도움이 되기를 바랍니다.

1. jQuery 스크롤링 상단/하단
jQuery 스크롤링과 관련하여 이 사이트는 이전에 유사한 기사를 게시한 적이 있습니다. 예: jQuery를 맨 위로 돌아가서 아래에 다시 구성합니다.

코드 복사 코드는 다음과 같습니다. 다음:

//맨 위로 스크롤

$( "html, body").animate({ scrollTop: "0px" }, 1000); Bottom
//$("#container"): 스크롤할 요소
$( "html, body").animate({
scrollTop: $("#container").height()
}, 1000);


2.jQuery가 요소의 존재 여부를 확인합니다.
jQuery를 사용하여 요소의 존재 여부를 확인하는 방법은 무엇입니까? 방법은 다음과 같이 매우 간단합니다.

코드 복사 코드는 다음과 같습니다. if ($(" #elementid").length) {

//요소가 존재합니다

}


3. Ajax 요청을 취소하려면 abort() 메서드를 사용하세요.
js 비동기 요청 실행 시 마지막 요청을 취소하는 abort() 메소드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. var req = $.ajax({

type: "post",

url: "/article/form/ comment.aspx",
data : { "id": 1 },
success: function() {
//handle
}
})
//Ajax 요청 취소
if (req) {
req.abort()
}


jQuery Ajax는 jQuery를 처음 사용하는 사람이라면 흥미로울 수 있는 부분이다. 익숙하지 않은 경우 jQuery 학습 요약(5) jQuery Ajax를 살펴보세요.

4.jQuery에서 마우스 오른쪽 버튼이 비활성화됩니다

코드 복사 코드는 다음과 같습니다. $(document).ready(function() {

$(document).bind("contextmenu", function() {

return false;
});
} );


5. setTimeout()이 호출한 메소드에 매개변수를 전달합니다.

코드 복사 코드는 다음과 같습니다: $(document).ready(function() {

timeout = setTimeout(function() {

showMess("succeed")
} , 2000);
} );
function showMess(m) {
alert(m)
}


1.jQuery Countdown

코드 복사 코드는 다음과 같습니다.

$( document).ready(function () {
var count = 10;
countdown = setInterval(function () {
$("p.countdown").html(count "초 단위로 점프합니다!" );
if (count == 0) {
clearInterval(countdown)
window.location = 'http://google.com';
count--; >} , 1000);
});


2.jQuery가 브라우저 유형과 버전 번호를 결정합니다

jQuery가 브라우저 유형과 버전 번호를 결정합니다. $.browser 방법 판단을 내립니다. 그런데 직접 테스트해 보니 크롬 브라우저에서 사파리가 돌아오는 것을 발견했습니다. 인터넷으로 검색해 보니 다음과 같은 코드가 나왔습니다.

코드 복사. 코드는 다음과 같습니다.

var browserName = navigator.userAgent.toLowerCase()

mybrowser = {
version: (browserName.match (/. (? :rv|it|ra|ie)[/: ]([d.] )/) || [0, '0'])[1],
safari: /webkit/i. test(browserName) && !this.chrome,
opera: /opera/i.test(browserName),
firefox: /firefox/i.test(browserName),
msie: /msie/i. test(browserName) && !/opera/.test(browserName),
mozilla: /mozilla/i.test(browserName) && !/(호환|webkit)/.test(browserName) && !this.chrome,
chrome: / chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)
}
$(document).ready(function () {
if (mybrowser.msie) {
alert("브라우저: Internet Explorer 및 버전 번호: " $.browser.version)
}
else if (mybrowser.mozilla ) {
alert( "브라우저: Firefox 및 버전 번호:" $.browser.version)
}
else if (mybrowser.opera) {
alert("브라우저 is: Opera 및 버전 번호:" $ .browser.version);
}
else if (mybrowser.safari) {
alert("브라우저: Safari 및 버전 번호: " $.browser.version);
}
else if (mybrowser.chrome) {
alert("브라우저: Chrome, 버전 번호: " mybrowser.version)
else {
alert("神马");
} ( 아래에서 jQuery를 사용하여 요소를 중앙에 배치하는 것이 상대적으로 간단한 방법을 참조하세요.




코드 복사

코드는 다음과 같습니다.

//플러그인 형식으로 작성(function ( $) { jQuery.fn.center = function () { this.css('position', 'absolute'); this.css('top', ($ (window).height () - this.height()) /2 $(window).scrollTop() 'px') this.css('left', ($(window).width() - this.width() ) / 2 $(window).scrollLeft() 'px');

return this

}
})(jQuery); function () {
//Call
$("#somediv").center();
})


4.jQuery는 이미지가 완전히 로드되었는지 확인합니다.




코드 복사

코드는 다음과 같습니다.

$("#demoImg").attr ("src", "demo.jpg").load(function() { alert("이미지 로딩 완료"); }) 유용한 정보가 있다면 jQuery 코드 조각을 jQuery에 게시하세요. 배운 내용을 모두와 공유하세요!