일반적인 Jquery 기술 모음_jquery-JS 튜토리얼-php.cn

일반적인 Jquery 기술 모음_jquery

WBOY

풀어 주다： 2016-05-16 18:16:33

원래의

1021명이 탐색했습니다.

예를 들어 오른쪽 클릭 비활성화, 검색 텍스트 상자 텍스트 숨기기, 새 창에서 링크 열기, 브라우저 감지, 이미지 미리 로드 등이 있습니다. 자세한 내용은 다음과 같습니다.
오른쪽 클릭 금지

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

 
$(document ).ready(function(){ 
$(document).bind("contextmenu",function(e){ 
return false; 
}); 
}) ; 

검색 텍스트 상자 텍스트 숨기기

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

 
$(document ).ready(function() { 
$("input.text1").val("여기에 검색 텍스트를 입력하세요."); 
textFill($('input. text1')); 
} ); 
function textFill(input){ //포커스 텍스트 입력 함수 
var originalvalue = input.val() 
input.focus( function(){ 
if( $.trim(input .val()) == 원래 값 ){ input.val('') } 
}) 
input.blur( function(){ 
if( $.trim(input.val() ) == '' ){ input.val(originalvalue); } 
}) 
} 

새 창에서 링크 열기

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

$(document).ready(function() {
//예 1: 모든 링크가 새 창에서 열립니다.
$('a[href^="http://"]').attr("target", "_blank")
//예 2: rel= "external" 속성이 있는 링크는 새 창에서만 열립니다.
$('a[@rel$='external']').click(function(){
this.target = "_blank";
});
// 사용 방법

브라우저 감지
참고: 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){ 
// 뭔가를 합니다 
} 
 }) 

 

이미지 미리 로드

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

$(document).ready(function() {

jQuery.preloadImages = function() 
{ 
for(var i = 0; i").attr(" src", 인수[ i]); 
} 
}; 
// 사용 방법 
$.preloadImages("image1.jpg"); 
}); 

 
 페이지 스타일 전환

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

$ (document).ready(function( ) {

$("a.Styleswitcher").click(function() {
//A REL 속성의 값으로 LINK REL 속성을 전환합니다.
$( 'link[rel=stylesheet]' ).attr('href' , $(this).attr('rel'))
})
// 사용 방법
// 헤더
< LINK href="default.css" type=text/css rel=stylesheet>
// 링크
기본 테마
빨간색 테마
Blue Theme
})

열의 높이가 동일합니다

두 개의 CSS 열을 사용하는 경우 이 방법을 사용하여 높이를 만들 수 있습니다. 두 열 중 동일합니다.

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

 
$(document).ready(function() { 
function equalHeight(group) { 
tallest = 0; 
group.each(function() { 
thisHeight = $ (this).height(); 
if(thisHeight > maximum) { 
tallest = thisHeight 
} 
}); 
// 사용 방법 
$(document).ready(function() { 
equalHeight($(".left")); 
equalHeight($(".right")); 
}); 
}); 

 
动态控제조页면자체대소 

复aze代码代码如下:

$(document).ready(function() {

// 글꼴 크기 재설정(기본값으로 돌아감) 
var originalFontSize = $('html').css('font-size'); 
$(".resetFont").click(function(){ 
$('html').css('font-size', originalFontSize); 
}); 글꼴 크기(더 큰 글꼴0 
$(".increaseFont").click(function(){ 
var currentFontSize = $('html').css('font-size'); 
var currentFontSizeNum = parseFloat(currentFontSize, 10); 
var newFontSize = currentFontSizeNum*1.2; 
$('html').css('font-size', newFontSize) 
return false; 
// 글꼴 크기 줄이기(더 작은 글꼴) 
$(".decreaseFont").click(function(){ 
var currentFontSize = $('html').css('font-size' ); 
var currentFontSizeNum = parsFloat(currentFontSize, 10); 
var newFontSize = currentFontSizeNum*0.8; 
$('html').css('font-size', newFontSize); false; 
}) 
}); 

 
返回页面顶part功能 

复代码

代码如下:

$(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);
거짓을 반환합니다.
}
}
});
// 사용 방법
//
로 스크롤하려는 위치에 이 항목을 배치하세요.
// 링크
맨 위로 이동>
});

获得鼠标指针XY值

复代码

代码如下:

$(document).ready(function() { $().mousemove(function(e){ //id가 XY인 div 내에 x 및 y 축 값을 표시합니다. $ ('#XY').html("X 축 : " e.pageX " | Y 축 " })

// 사용 방법

});

验证元素是否为空

复aze代码

代码如下:

$(document).ready(function() { if ($('#id').html()) { // 뭔가를 하세요 } });

 
替换元素 

复代码

代码如下:

$ (document).ready(function() { $('#id').replaceWith('

교체되었습니다

); });

 
jQuery延时加载功能 

复aze代码

代码如下:

$(document).ready(function() { window.setTimeout(function() { // 뭔가를 하세요 }, 1000); });

 
移除单词功能 

复代码

代码如下:

$(document).ready(function() { var el = $('#id'); el.html(el.html().replace(/word/ig, "")) ; });

验证元素是否存재于jQuery对象集합중 

复主代码

代码如下:

$(document).ready(function() { if ($('#id').length) { // 뭔가를 하세요 } });

DIV 전체를 클릭 가능하게 만들기

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

$(document) .ready(function() {
$("div").click(function(){
//href 속성에서 URL을 가져오고 URL을 시작합니다
window.location=$ (this).find("a").attr("href"); return false
})//

home

});

ID와 클래스 간 전환 창 크기 변경 시 ID와 클래스 간 전환

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

$(document).ready(function() { 
 function checkWindowSize() { 
if ( $(window).width() > 1200 ) { 
$('body').addClass('large') 
} 
else { 
$( 'body').removeClass('large'); 
} 
} 
$(window).resize(checkWindowSize) 

 
객체 복제

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

$(document). Ready(function() {

var cloned = $('#id').clone(); 
// 사용 방법 

 }); 

 요소를 화면 중앙에 배치

코드 복사

$ (document).ready(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; $("#id").center(); 
}); 

 
직접 선택기 작성

코드 복사

코드는 다음과 같습니다. $(document).ready(function() { $.extend($.expr[':'], {

moreThen1000px: function(a) {

return $( a).width() > 
} 
}); click(function() { 
// 간단한 js 경고 상자 만들기 
alert('클릭한 요소의 너비가 1000픽셀을 초과합니다.'); 
}) 

 
요소 개수 세기

코드 복사

코드는 다음과 같습니다. $(document).ready(function() { $(" p").size(); })

나만의 글머리 기호 사용

코드 복사

코드는 다음과 같습니다. $(document).ready(function() { $("ul").addClass("Replaced"); $("ul > li").prepend("\")// ul 사용 방법 { list-style : none; }

});

 
 Google 호스트의 jQuery 클래스 라이브러리 참조 

 코드

코드는 다음과 같습니다.

//예제 1
// 예시 2:(가장 빠르고 가장 빠른 방법)

jQuery(애니메이션) 효과 비활성화

코드 복사

코드는 다음과 같습니다.

$(document ).ready(function() { jQuery.fx.off = true ; });

다른 JavaScript 라이브러리와의 충돌 해결

코드 복사

다음과 같습니다.

 
$(document).ready(function() { 
var $jq = jQuery.noConflect(); 
$jq('#id').show(); 
} ); 