이 기사는 주로 jQuery에 대한 실용적인 기술을 공유하며 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다. 편집자를 따라가서 살펴보겠습니다. 다음 10가지 jQuery 예제는 모든 사람이 웹 디자인 프로젝트의 효율성을 향상시키는 데 도움이 될 수 있습니다.
IE 브라우저 감지
CSS를 디자인할 때 IE 브라우저는 의심할 여지 없이 개발자와 디자이너에게 골칫거리입니다. IE6의 암흑기가 지나가고 IE 브라우저 제품군의 인기가 하락하고 있지만 우리는 여전히 이를 감지해야 합니다. 물론 다음 코드 조각을 사용하여 다른 브라우저를 감지할 수도 있습니다.
$(document).ready(function() {
if (navigator.userAgent.match(/msie/i) ){
alert('I am an old fashioned Internet Explorer');
}
});페이지 상단으로 부드럽게 스크롤
다음은 jQuery의 가장 일반적인 구현 효과입니다. 링크를 클릭하면 페이지 상단으로 부드럽게 스크롤됩니다. 전혀 새로운 것은 없지만 거의 모든 개발자가 사용할 수 있습니다.
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});항상 상단에 유지
다음 코드 조각을 사용하면 요소가 항상 페이지 상단에 위치할 수 있습니다. 상상할 수 있듯이 탐색 메뉴, 도구 모음 또는 기타 중요한 정보를 처리하는 데 이상적입니다.
$(function(){
var $win = $(window)
var $nav = $('.mytoolbar');
var navTop = $('.mytoolbar').length && $('.mytoolbar').offset().top;
var isFixed=0;
processScroll()
$win.on('scroll', processScroll)
function processScroll() {
var i, scrollTop = $win.scrollTop()
if (scrollTop >= navTop && !isFixed) {
isFixed = 1
$nav.addClass('subnav-fixed')
} else if (scrollTop <p style="margin-bottom:25px;line-height:28.8px;color:rgb(64,64,64);"><strong>html 태그 교체</strong></p><p style="margin-bottom:25px;line-height:28.8px;color:rgb(64,64,64);">jQuery는 html 태그를 쉽게 교체할 수 있으며 이는 또한 우리에게 더 많은 새로운 가능성을 가져다 줄 것입니다. </p><pre style="overflow:auto;" class="brush:php;toolbar:false;">$('li').replaceWith(function(){
return $("<p></p>").append($(this).contents());
});화면 너비 감지
이제 모바일 기기의 인기가 기존 컴퓨터를 거의 능가했기 때문에 작은 화면의 크기를 감지하는 것이 매우 중요합니다. 다행히도 jQuery를 사용하면 이 기능을 쉽게 구현할 수 있습니다.
var responsive_viewport = $(window).width();
/* if is below 481px */
if (responsive_viewport <p style="margin-bottom:25px;line-height:28.8px;color:rgb(64,64,64);"><strong>손상된 이미지 자동 복구</strong></p><p style="margin-bottom:25px;line-height:28.8px;color:rgb(64,64,64);">사이트 규모가 매우 크고 몇 년 동안 온라인에 있었다면 이미지가 어느 정도 손상되었을 것입니다. 이 기능은 손상된 이미지를 감지하고 우리의 선택에 따라 교체합니다. </p><pre style="overflow:auto;" class="brush:php;toolbar:false;">$('img').error(function(){
$(this).attr('src', 'img/broken.png');
});복사, 붙여넣기 및 잘라내기 작업 감지
jQuery를 사용하면 선택한 요소의 복사, 붙여넣기 및 잘라내기 작업을 쉽게 감지할 수 있습니다.
$("#textA").bind('copy', function() {
$('span').text('copy behaviour detected!')
});
$("#textA").bind('paste', function() {
$('span').text('paste behaviour detected!')
});
$("#textA").bind('cut', function() {
$('span').text('cut behaviour detected!')
});외부 링크에 자동으로 target="blank" 속성 추가
외부 사이트에 링크할 때 페이지가 새 탭에서 열리도록 target="blank" 속성을 사용할 수 있습니다. 문제는 target="blank" 속성이 W3C 인증을 받지 않았다는 것입니다. jQuery는 많은 도움이 될 수 있습니다. 다음 스니펫은 현재 링크가 외부를 가리키는지 여부를 감지하고, 그렇다면 자동으로 target="blank" 속성을 추가합니다.
var root = location.protocol + '//' + location.host;
$('a').not(':contains(root)').click(function(){
this.target = "_blank";
});호버에서 페이드 인/아웃
은 다음 클립을 사용하여 언제든지 사용할 수 있는 또 다른 "클래식" 효과입니다.
$(document).ready(function(){
$(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads
$(".thumbs img").hover(function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout
});
});텍스트/비밀번호 입력 시 공백 비활성화
이메일, 사용자 이름, 비밀번호 등 많은 공통 필드에서는 공백을 사용할 필요가 없습니다. 다음 코드는 선택한 입력에서 모든 공백을 쉽게 비활성화합니다.
$('input.nospace').keydown(function(e) {
if (e.keyCode == 32) {
return false;
}
});위 내용은 jQuery에 대한 실용적인 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
