12개의 실용적인 jQuery 코드 조각을 공유하세요_jquery

jQuery는 웹 개발자와 웹 디자이너 사이에서 매우 유명한 뛰어난 JavaScript 라이브러리로, 웹 디자이너가 창의적이고 아름다운 웹 페이지를 많이 개발할 수 있도록 도와줍니다.

이 글은 주로 12가지 유용한 jQuery 기술을 공유하며, 구체적인 내용은 다음과 같습니다

다음은 웹사이트 레이아웃과 애플리케이션의 창의성과 기능을 향상하는 데 도움이 되는 몇 가지 팁입니다.

1. 새 창에서 링크를 엽니다

이 코드를 사용하면 하이퍼텍스트 링크를 클릭하면 새 창에서 열리므로 사용자에게 더 나은 경험을 제공합니다.

$(document).ready(function() {
 //select all anchor tags that have http in the href
 //and apply the target=_blank
 $("a[href^='http']").attr('target','_blank');
});
 

2. 타이머 설정

$(document).ready(function() {
 window.setTimeout(function() {
 // some code
 }, 500);
});

3. 동일한 높이의 열을 설정합니다

다음 코드를 사용하여 웹 애플리케이션의 각 열 높이를 동일하게 만드세요.

<div class="equalHeight" style="border:1px solid">
 <p>First Line</p>
 <p>Second Line</p>
 <p>Third Line</p>
</div>
<div class="equalHeight" style="border:1px solid">
 <p>Column Two</p>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
 equalHeight('.equalHeight');
});
//global variable, this will store the highest height value
var maxHeight = 0;
function equalHeight(col) {
 //Get all the element with class = col
 col = $(col);
 //Loop all the col
 col.each(function() {
 //Store the highest value
 if ($(this).height() > maxHeight) {
 maxHeight = $(this).height();
 }
 });
 //Set the height
 col.height(maxHeight);
}
</script>

4. jQuery 사전 로드 이미지

이 방법을 사용하면 웹페이지에서 이미지 로딩 속도를 높일 수 있습니다.

jQuery.preloadImagesInWebPage = function() {
 for (var ctr = 0; ctr & lt; arguments.length; ctr++) {
 jQuery("").attr("src", arguments[ctr]);
 }
}
// 使用方法：
$.preloadImages("image1.gif", "image2.gif", "image3.gif");
// 检查图片是否被加载
$('#imageObject').attr('src', 'image1.gif').load(function() {
 alert('The image has been loaded…');
});

5. 요소를 페이지 중앙에 배치하세요

<div id="foo" style="width:200px;height: 200px;background: #ccc;"></div>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
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;
}
//Use the above function as:
$('#foo').center();
</script>
 

6. 마우스 오른쪽 버튼 비활성화

$(document).ready(function() {
 //catch the right-click context menu
 $(document).bind("contextmenu", function(e) {
 //warning prompt - optional
 alert("No right-clicking!");
 //delete the default context menu
 return false;
 });
});

7. 하위 요소 수 계산

<div id="foo">
 <div id="bar"></div>
 <div id="baz">
 <div id="biz"></div>
 <span><span></span></span>
 </div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
 //jQuery code to count child elements $("#foo > div").size()
alert($("#foo > div").size())
</script>

8. 스타일 목록 변경

이 코드는 스타일 목록을 변경하는 데 도움이 됩니다.

 $(document).ready(function() {
 $("a.cssSwap").click(function() { 
 //swap the link rel attribute with the value in the rel 
 $('link[rel=stylesheet]').attr('href' , $(this).attr('rel')); 
 }); 
 });

9. jQuery를 사용하여 텍스트 크기 설정

이 코드를 추가하면 사용자는 필요에 따라 텍스트 크기(증가 또는 감소)를 재설정할 수 있습니다.

 $(document).ready(function() {
 //find the current font size
 var originalFontSize = $('html').css('font-size');

//Increase the text size
 $(".increaseFont").click(function() {
 var currentFontSize = $('html').css('font-size');
 var currentFontSizeNumber = parseFloat(currentFontSize, 10);

var newFontSize = currentFontSizeNumber*1.2;
 $('html').css('font-size', newFontSize);
 return false;
 });

//Decrease the Text Size
 $(".decreaseFont").click(function() {
 var currentFontSize = $('html').css('font-size');
 var currentFontSizeNum = parseFloat(currentFontSize, 10);

var newFontSize = currentFontSizeNum*0.8;
 $('html').css('font-size', newFontSize);
 return false;
 });

// Reset Font Size
 $(".resetFont").click(function(){
 $('html').css('font-size', originalFontSize);
 });
 });

10. 현재 마우스 좌표 감지

이 JS 코드를 사용하면 모든 브라우저에서 마우스 좌표를 얻을 수 있습니다.

 $(document).ready(function() {
 $().mousemove(function(e)
 {
 $('# MouseCoordinates ').html("X Axis Position = " + e.pageX + " and Y Axis Position = " + e.pageY);
 });

11.마우스 포인터의 X/Y축을 구합니다

 $().mousemove(function(e){
 //display the x and y axis values inside the P element
 $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
 });

12. 상위링크로 가기

이 코드는 상대적으로 긴 페이지에 매우 실용적입니다. 사용자는 맨 위로 돌아가기 위해 스크롤 막대를 당길 필요가 없으며 "맨 위로 돌아가기"를 직접 클릭할 수 있습니다.

 $(document).ready(function() {
 //when the id="top" link is clicked
 $('#top').click(function() {
 //scoll the page back to the top
 $(document).scrollTo(0,500);
 }
 });

jQuery는 Ajax 및 HTML 스크립트 클라이언트를 지원하는 최고의 JavaScript 라이브러리 중 하나이며 주로 이벤트 처리 및 애니메이션 제작에 사용됩니다. 또한 jQuery에는 개발자가 가장 빠른 시간에 웹 페이지를 만들 수 있는 다양한 플러그인도 있습니다.

이 기사가 jquery 프로그래밍을 배우는 모든 사람에게 도움이 되기를 바랍니다.