一般的な 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('') }
}); $.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){
/ / 何かをする
}
// ターゲット Camino
if( $.browser.camino){
// 何かをする
}
// ターゲット 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", argument[ i]); }

};

// 使用方法
$.preloadImages("image1.jpg");
});


ページスタイルの切り替え




コードをコピー

コードは次のとおりです:

$ (document).ready(function( ) { $("a.Styleswitcher").click(function() { //LINK REL 属性を A REL 属性の値と入れ替えます $( 'link[rel=stylesheet]' ).attr('href' , $(this).attr('rel')) });

// これを配置する方法ヘッダー内

< LINK href="default.css" type=text/css rel=stylesheet>
// リンク
デフォルトのテーマ
赤のテーマ
Blue Theme
});


2 つの CSS 列が使用されている場合、このメソッドを使用して高さを調整できます。 2 つの列は同じです。




コードをコピー

コードは次のとおりです:

$(document).ready(function() {
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $ (この).height();
if(thisHeight > 最も高い) {
最も高い = この高さ>}
});
// 使い方
$(document).ready(function() {
equalHeight($(".left"));
equalHeight($(".right"));
});
});


動态制御页面字体大小

复制代码代码如下: $(document).ready(function() {

// フォント サイズをリセット (デフォルトに戻す)

varoriginalFontSize = $('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;
return false;
// フォント サイズを小さくします (フォントを小さくします)
$(".decreaseFont").click(function(){
var currentFontSize = $('html').css('font-size' );
var currentFontSizeNum = parseFloat(currentFontSize, 10);
$('html').css('font-size', newFontSize); false;
});
});


返页面顶部機能





代码如下:

$(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);
false を返します。
}
}
});
// 使い方
// これを
までスクロールしたい場所に置きます。
// リンク
トップに戻る
});


获得鼠标指针XY值




复制代


代码如下:

$(document).ready(function() {

$().mousemove(function(e){ //ID XY を持つ div 内の x 軸と y 軸の値を表示します $ ('#XY').html("X 軸 : " e.pageX " | Y 軸 " e.pageY) }); //

の使用方法;

});

验证元素が空であるかどうか




复制代码


代码如下:

$(document).ready(function() {

if ($('#id').html()) { // 何かをします } }); 代替元素

复制代


代码如下:

$ (document).ready(function() {

$('#id').replaceWith('

置き換えられました

); }); jQuery遅延付加機能

复制代


代码如下:

$(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");
これ。 css("left", ( $(window).width( ) - this.width() ) / 2 $(window).scrollLeft() "px"); $("#id").center();
});


独自のセレクターを作成します




コードをコピーします

コードは次のとおりです。

$(document).ready(function() { $.extend($.expr[':'], { moreThen1000px: function(a) { return $( a).width() > 1000; }

}); 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 クラス ライブラリを参照します




code

コードは次のとおりです:

//例 1 // 例 2:(最良かつ最速の方法)

jQuery (アニメーション) 効果を無効にする




コードをコピー


コードは次のとおりです:

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

}); 他の JavaScript ライブラリとの競合解決

コードをコピーします


は次のとおりです:

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