Jquery에 관한 26가지 실용적인 팁(jQuery 팁, 요령 및 솔루션)_jquery
- WBOY원래의
- 2016-05-16 18:33:291364검색
예를 들어, 마우스 오른쪽 버튼 클릭 비활성화, 검색 텍스트 상자 텍스트 숨기기, 새 창에서 링크 열기, 브라우저 감지, 이미지 미리 로드, 페이지 스타일 전환, 모든 열의 높이 동일, 페이지 글꼴 크기 동적으로 제어, 마우스 포인터의 X 값과 Y 값, 요소가 비어 있는지 확인하고, 요소를 교체하고, 지연 로드하고, 요소가 Jquery 컬렉션에 존재하는지 확인하고, DIV를 클릭 가능하게 만들고, 개체를 복제하고, 요소를 가운데에 두고, 개수를 계산합니다. 요소 수, Google 호스트에서 Jquery 클래스 라이브러리 사용, Jquery 비활성화 효과는 Jquery 클래스 라이브러리와 다른 Javascript 클래스 라이브러리 간의 충돌 문제를 해결하는 것입니다.
상세 내용은 다음과 같습니다.
1. 우클릭 금지
코드 복사 코드는 다음과 같습니다.
$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});
2. 검색 텍스트 상자 텍스트 숨기기
$(document).ready(function() {
$("input.text1").val("Enter your your 여기에서 텍스트 검색");
textFill($ ('input.text1'));
});
function textFill(input){ //입력 포커스 텍스트 함수
var originalvalue = input. val();
input.focus( function (){
if( $.trim(input.val()) == originalvalue ){ input.val(''); }
});
input.blur( function(){
if( $.trim(input.val()) == '' ){ input.val(originalvalue); }
});
3 in new 창에서 링크 열기
$("input.text1").val("Enter your your 여기에서 텍스트 검색");
textFill($ ('input.text1'));
});
function textFill(input){ //입력 포커스 텍스트 함수
var originalvalue = input. val();
input.focus( function (){
if( $.trim(input.val()) == originalvalue ){ input.val(''); }
});
input.blur( function(){
if( $.trim(input.val()) == '' ){ input.val(originalvalue); }
});
3 in new 창에서 링크 열기
코드 복사 코드는 다음과 같습니다 :
$(document).ready(function () { //예 1: 모든 링크가 새 창에서 열립니다
$('a[href^="http ://"]').attr("target", "_blank") ;
//예 2: rel="external" 속성이 있는 링크는 새 창에서만 열립니다.
$('a [@rel$='external']').click(function(){
this.target = "_blank";
})
})// 사용 방법
링크 열기
4 브라우저 감지
참고: jQuery 1.4 버전에서는 $.support는 $.browser 변수를 대체했습니다.
$('a[href^="http ://"]').attr("target", "_blank") ;
//예 2: rel="external" 속성이 있는 링크는 새 창에서만 열립니다.
$('a [@rel$='external']').click(function(){
this.target = "_blank";
})
})// 사용 방법
링크 열기
4 브라우저 감지
참고: jQuery 1.4 버전에서는 $.support는 $.browser 변수를 대체했습니다.
코드 복사 코드는 다음과 같습니다. $(document).ready(function( ) {
// 대상 Firefox 2 이상 if ($.browser.mozilla && $.browser.version >= "1.8" ){
// 작업 수행
}
// Safari 대상
if( $.browser.safari ){
// 작업 수행
}
// Chrome 대상
if( $.browser.chrome){
/ / do what
}
// Target Camino
if( $.browser.camino){
// do what
}
// Target Opera
if( $ .browser.opera){
// 작업 수행
}
// IE6 이하 대상
if ($.browser.msie && $.browser.version <= 6 ){
// 뭔가를 하세요
}
// IE6 이상의 모든 것을 대상으로 합니다
if ($.browser.msie && $.browser.version > 6){
// 뭔가를 합니다
}
});
5개 이미지 미리 로드
// 작업 수행
}
// Safari 대상
if( $.browser.safari ){
// 작업 수행
}
// Chrome 대상
if( $.browser.chrome){
/ / do what
}
// Target Camino
if( $.browser.camino){
// do what
}
// Target Opera
if( $ .browser.opera){
// 작업 수행
}
// IE6 이하 대상
if ($.browser.msie && $.browser.version <= 6 ){
// 뭔가를 하세요
}
// IE6 이상의 모든 것을 대상으로 합니다
if ($.browser.msie && $.browser.version > 6){
// 뭔가를 합니다
}
});
5개 이미지 미리 로드
코드 복사 코드는 다음과 같습니다. $(document).ready(function() {
jQuery.preloadImages = function() {
for(var i = 0; i").attr( "src", 인수 [i]);
}
// 사용 방법
$.preloadImages("image1.jpg")
6 페이지 스타일 전환
for(var i = 0; i").attr( "src", 인수 [i]);
}
// 사용 방법
$.preloadImages("image1.jpg")
6 페이지 스타일 전환
코드 복사
코드는 다음과 같습니다. $(document).ready( function() { $("a.Styleswitcher").click(function() { //A REL 속성의 값으로 LINK REL 속성 전환
$('link[rel=stylesheet ]').attr('href' , $(this).attr('rel')) })
// 사용 방법
// 이것을 헤더
// 링크
기본 테마
빨간색 테마
파란색 테마< ;/A>
});
7개 열의 높이가 동일합니다.
두 개의 CSS 열을 사용하는 경우 이 방법을 사용하면 두 열의 높이를 동일하게 만들 수 있습니다.
$(document).ready(function( ) {
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > ; 가장 높음) {
tallest = thisHeight;
}
})
group.height(tallest)
}
// 사용 방법
$(document) .ready( function() {
equalHeight($(".left"));
equalHeight($(".right"));
})
8 페이지 글꼴 크기를 동적으로 제어
사용자가 페이지 글꼴 크기를 변경할 수 있음
코드 복사
// 사용 방법
// 이것을 헤더
// 링크
기본 테마
빨간색 테마
파란색 테마< ;/A>
});
7개 열의 높이가 동일합니다.
두 개의 CSS 열을 사용하는 경우 이 방법을 사용하면 두 열의 높이를 동일하게 만들 수 있습니다.
코드 복사 코드는 다음과 같습니다.
$(document).ready(function( ) {
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > ; 가장 높음) {
tallest = thisHeight;
}
})
group.height(tallest)
}
// 사용 방법
$(document) .ready( function() {
equalHeight($(".left"));
equalHeight($(".right"));
})
사용자가 페이지 글꼴 크기를 변경할 수 있음
코드 복사 코드는 다음과 같습니다.
$(document).ready(function() {
// 글꼴 크기 재설정(기본값으로 돌아가기)
var originalFontSize = $('html ').css('글꼴 크기');
$(".resetFont").click(function(){
$('html').css('글꼴 크기', originalFontSize);
});
// 글꼴 크기 늘리기(더 큰 글꼴0
$(".increaseFont").click(function(){
var currentFontSize = $('html').css( '글꼴 크기');
var currentFontSizeNum =parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$('html').css('font-size', newFontSize) ;
return false;
});
// 글꼴 크기 줄이기(더 작은 글꼴)
$(".decreaseFont").click(function(){
var currentFontSize = $ ('html').css(' 글꼴 크기');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8; 'font-size', newFontSize);
return false;
})
})
9 페이지 상단으로 돌아가기
// 글꼴 크기 재설정(기본값으로 돌아가기)
var originalFontSize = $('html ').css('글꼴 크기');
$(".resetFont").click(function(){
$('html').css('글꼴 크기', originalFontSize);
});
// 글꼴 크기 늘리기(더 큰 글꼴0
$(".increaseFont").click(function(){
var currentFontSize = $('html').css( '글꼴 크기');
var currentFontSizeNum =parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$('html').css('font-size', newFontSize) ;
return false;
});
// 글꼴 크기 줄이기(더 작은 글꼴)
$(".decreaseFont").click(function(){
var currentFontSize = $ ('html').css(' 글꼴 크기');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8; 'font-size', newFontSize);
return false;
})
})
9 페이지 상단으로 돌아가기
코드 복사 코드는 다음과 같습니다.
$(document).ready(function() { $('a[href*=#]').click(function () {
if (location.pathname.replace(/^//,'') == this.pathname.replace(/^// ,'')
&& location.hostname == this.hostname ) {
var $target = $(this.hash)
$target = $target.length && $target
|| $('[name=' this.hash.slice(1) ' ]');
if ($target.length) {
var targetOffset = $target.offset().top; ('html,body')
.animate({scrollTop: targetOffset}, 900);
return false
}
}
});
//
// 링크
로 스크롤하려는 위치에 배치하세요. 맨 위로
});
10 마우스 포인터ＸＹ 값 가져오기
if (location.pathname.replace(/^//,'') == this.pathname.replace(/^// ,'')
&& location.hostname == this.hostname ) {
var $target = $(this.hash)
$target = $target.length && $target
|| $('[name=' this.hash.slice(1) ' ]');
if ($target.length) {
var targetOffset = $target.offset().top; ('html,body')
.animate({scrollTop: targetOffset}, 900);
return false
}
}
});
//
// 링크
로 스크롤하려는 위치에 배치하세요. 맨 위로
});
10 마우스 포인터ＸＹ 값 가져오기
코드 복사
코드는 다음과 같습니다. $ (document).ready(function() { $().mousemove(function(e){
//display the ID가 XY $('# XY').html("X Axis : " e.pageX " | Y Axis "
})인 div 내부의 x 및 y 축 값 ;
// 사용 방법
})
11 요소가 비어 있는지 확인
코드 복사
코드 복사
코드 복사
코드 복사
15 Ｊｑｕeｒｙ 개체 컬렉션에 해당 요소가 있는지 확인
$(document).ready(function() {
if ($('#id').length) {
// 뭔가를 하세요
}
})
16 DＩＶ 전체를 클릭 가능하게 만들기
$( document).ready(function() {
$("div").click(function(){
//href 속성에서 URL을 가져오고 URL을 실행합니다.
window.location=$(this ).find("a").attr("href"); return false
})
//
})
17 ID와 클래스 간 전환 창 크기 변경 시 ID 간 전환 및 클래스
$(document).ready( function() {
function checkWindowSize() {
if ( $(window).width() > 1200 ) {
$('body').addClass('large')
}
else {
$('body').removeClass('large');
}
}
$(window).resize(checkWindowSize)
});
18 개체 복제
$(document).ready(function () {
var cloned = $('#id').clone();
// 사용 방법
});
19 요소를 화면 중앙에 배치
$(document).ready(function() {
jQuery.fn.center = function() {
this .css("위치","절대");
this.css ("top", ( $(window).height() - this.height() ) / 2 $(window).scrollTop() " px");
this.css("left", ( $( window).width() - this.width() ) / 2 $(window).scrollLeft() "px");
return this;
}
$("#id").center ();
})
20 나만의 선택기 작성
$(document).ready(function() {
$.extend( $.expr[':'], {
moreThen1000px: function(a) {
return $(a).width() >
}
}); ('.box:moreThen1000px').click(function() {
// 간단한 js 경고 상자 만들기
alert('클릭한 요소의 너비가 1000픽셀을 초과합니다.');
} );
});
21개 통계 요소 수
})인 div 내부의 x 및 y 축 값 ;
// 사용 방법
})
11 요소가 비어 있는지 확인
코드 복사
코드는 다음과 같습니다. $(document).ready(function() { if ($('#id').html()) {
// 뭔가를 하세요 }
})
12 대체 요소
})
12 대체 요소
코드 복사
코드는 다음과 같습니다. $(document).ready(function() { $('#id').replaceWith('
교체되었습니다
')
});
13 jQuery 지연 로딩 함수
});
13 jQuery 지연 로딩 함수
코드 복사
코드는 다음과 같습니다. $(document).ready( function() { window.setTimeout(function() {
// 뭔가를 하세요 }, 1000)
})
14 단어 제거 기능
})
14 단어 제거 기능
코드 복사
코드는 다음과 같습니다. $(document).ready(function() { var el = $('#id');
el.html(el.html().replace(/word /ig, "")) 15 Ｊｑｕeｒｙ 개체 컬렉션에 해당 요소가 있는지 확인
코드 복사 코드는 다음과 같습니다.
$(document).ready(function() {
if ($('#id').length) {
// 뭔가를 하세요
}
})
16 DＩＶ 전체를 클릭 가능하게 만들기
코드 복사 코드는 다음과 같습니다
$( document).ready(function() {
$("div").click(function(){
//href 속성에서 URL을 가져오고 URL을 실행합니다.
window.location=$(this ).find("a").attr("href"); return false
})
//
< A href="index.html" >home
})
17 ID와 클래스 간 전환 창 크기 변경 시 ID 간 전환 및 클래스
코드 복사 코드는 다음과 같습니다.
$(document).ready( function() {
function checkWindowSize() {
if ( $(window).width() > 1200 ) {
$('body').addClass('large')
}
else {
$('body').removeClass('large');
}
}
$(window).resize(checkWindowSize)
});
18 개체 복제
코드 복사 코드는 다음과 같습니다.
$(document).ready(function () {
var cloned = $('#id').clone();
// 사용 방법
});
19 요소를 화면 중앙에 배치
코드 복사 코드는 다음과 같습니다.
$(document).ready(function() {
jQuery.fn.center = function() {
this .css("위치","절대");
this.css ("top", ( $(window).height() - this.height() ) / 2 $(window).scrollTop() " px");
this.css("left", ( $( window).width() - this.width() ) / 2 $(window).scrollLeft() "px");
return this;
}
$("#id").center ();
})
20 나만의 선택기 작성
코드 복사 코드는 다음과 같습니다.
$(document).ready(function() {
$.extend( $.expr[':'], {
moreThen1000px: function(a) {
return $(a).width() >
}
}); ('.box:moreThen1000px').click(function() {
// 간단한 js 경고 상자 만들기
alert('클릭한 요소의 너비가 1000픽셀을 초과합니다.');
} );
});
코드 복사 다음과 같습니다:
$(document).ready(function() {
$("p").size();
})
22 나만의 글머리 기호 사용 $("p").size();
})
코드 복사 코드는 다음과 같습니다.
$ (document).ready(function() {
$("ul").addClass("Replaced") ;
$("ul > li").prepend("\");
// 사용 방법
ul.Replaced { list-style : none; }
});
23 Google 호스트에서 Jquery 클래스 라이브러리를 참조합니다. $("ul").addClass("Replaced") ;
$("ul > li").prepend("\");
// 사용 방법
ul.Replaced { list-style : none; }
});
코드 복사 코드는 다음과 같습니다.
//예 1
// 예시 2:(최고의 가장 빠른 방법)
🎜>
24. Jquery(애니메이션) 효과 비활성화
$ (document).ready(function() {
jQuery.fx.off = true;
})
25. 다른 Javascript 라이브러리와의 충돌 해결 방법
$(document).ready(function() {
var $ jq = jQuery.noConflect();
$jq('#id').show();
})
26. ) 기능 (페이지 로드 프롬프트 입력):
> 먼저 CSS를 작성하고 페이지의 오른쪽 상단에 절대 위치를 지정하세요.
#loading {
위치:절대 ; z- 색인:900;텍스트 정렬:중심;
배경색:#eef2fa;테두리:1px 솔리드 #d8e3e8; 색상:#000;글꼴 크기:12px;패딩:3px;너비: 80px;
right:0;top:0;
}
> 그런 다음 모든 이미지가 로드된 후 jQuery를 사용하여 로딩 DIV를 숨깁니다.
> 방금 코드를 테스트할 때 주소를 잘못 써서 미칠 뻔했습니다.
// 예시 2:(최고의 가장 빠른 방법)
🎜>
24. Jquery(애니메이션) 효과 비활성화
코드 복사 코드는 다음과 같습니다.
$ (document).ready(function() {
jQuery.fx.off = true;
})
25. 다른 Javascript 라이브러리와의 충돌 해결 방법
코드 복사 코드는 다음과 같습니다.
$(document).ready(function() {
var $ jq = jQuery.noConflect();
$jq('#id').show();
})
26. ) 기능 (페이지 로드 프롬프트 입력):
> 먼저 CSS를 작성하고 페이지의 오른쪽 상단에 절대 위치를 지정하세요.
코드 복사 코드는 다음과 같습니다.
#loading {
위치:절대 ; z- 색인:900;텍스트 정렬:중심;
배경색:#eef2fa;테두리:1px 솔리드 #d8e3e8; 색상:#000;글꼴 크기:12px;패딩:3px;너비: 80px;
right:0;top:0;
}
> 방금 코드를 테스트할 때 주소를 잘못 써서 미칠 뻔했습니다.
코드 복사 코드는 다음과 같습니다.
<script> 문서).ready(function($){ <br>$('img').load(function(){ <br> $('#loading').css("display","none"); <br>}) ; <br>}); <br></script>
> 아무 곳에나 DIV를 삽입하세요. O(∩_∩)오 하하.
> 아무 곳에나 DIV를 삽입하세요. O(∩_∩)오 하하.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.