일반적인 Jquery 기술 모음_jquery

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

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

$(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();
} );

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.