실용적인 jQuery 코드 조각 모음_jquery-JS 튜토리얼-php.cn

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

WBOY

풀어 주다： 2016-05-16 18:04:46

원래의

952명이 탐색했습니다.

아래 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에 게시하세요. 배운 내용을 모두와 공유하세요!