忍者ブログ

Wordpressメモとかアフィめもとか

Wordpress,PHP,アフィリエイトとかの個人メモを記録していくよ

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

jQuery select要素の取得 css セレクタ nameとか

jQueryでHTMLのselect要素で選択されている値selectボックスに表示している値を取得する場合。

<select name="cat">
  <option val="1">カテゴリー1</option>
  <option val="2" selected>カテゴリー2</option>
  <option val="3">カテゴリー3</option>
</select>



select要素表示しているテキストを取得
var SELECT_TXT  = $('select[name="cat"] option:selected').txt();
 
これでカテゴリー2がSELECT_TXTに入る。

拍手[5回]

PR

jQueryで複数のセレクタを指定する方法

表題の通り、jQueryで複数のセレクタを条件したい場合の記述方法。ANDとORの違い。

<p class="p_a" id="1">p-1</p>
<p class="p_a" id="2">p-2</p>
<p class="p_a" id="3">p-2</p>
<p class="p_b" id="4">p-4</p>
<p class="p_b" id="5">p-5</p>
<p class="p_b" id="6">p-6</p>

のような構造であった場合

classが"p_a"でIDが5ののものだけを指定したい場合（or条件）

$(function() {
  $(".p_a,#5").css("backgroundColor", "red");
});



classが"p_b"かつidが6のものだけを指定したい場合（and条件）

$(function() {
  $(".p_b" + "#6").css("backgroundColor", "red");
});



orのときは

セレクタ1, セレクタ2


andのときは

セレクタ1 + セレクタ2


となる。

andとorの混在する複合の応用は
classがp_aかつid2とclassがp_bでidが5と6を指定したい場合

$(function() {
  $(".p_a" + "#2" + "," + ".p_b" + "#5, #6").css("backgroundColor", "red");
});

となる。ややこし。。。

拍手[0回]

jquery autopager ページがスクロールして一番下に来たら次を読み込む

twitterのTLみたいなやつ。
ページがスクロールして、一番下に来たら次のページを追加で読み込む。（ページの再読み込みはしない）

autopagerを使う。

head内に下を書く。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="autopager.js"></script>
<script type="text/javascript">$(function() {$.autopager();});</script>


コンテンツとページ送りはこんな感じ

 
<div class="content">
  ほげほげほげ
</div>
<a rel="next" href="次ページへのパス">次</a>



これで画面がrel="next"が画面に表示されたら、次ページのパスを読み込んでclass="content"のところに置き換わる。

autopager.jsのソース
/*
 * jQuery.autopager v1.0.0
 *
 * Copyright (c) 2009 lagos
 * Dual licensed under the MIT and GPL licenses.
 *
 * http://lagoscript.org
 */
(function($) {
    var window = this, options = {},
        content, currentUrl, nextUrl,
        active = false,
        defaults = {
            autoLoad: true,
            page: 1,
            content: '.content',
            link: 'a[rel=next]',
            insertBefore: null, 
            appendTo: null, 
            start: function() {},
            load: function() {},
            disabled: false
        };
 
    $.autopager = function(_options) {
        var autopager = this.autopager;
 
        if (typeof _options === 'string' && $.isFunction(autopager[_options])) {
            var args = Array.prototype.slice.call(arguments, 1),
                value = autopager[_options].apply(autopager, args);
 
            return value === autopager || value === undefined ? this : value;
        }
 
        _options = $.extend({}, defaults, _options);
        autopager.option(_options);
 
        content = $(_options.content).filter(':last');
        if (content.length) {
            if (!_options.insertBefore && !_options.appendTo) {
                var insertBefore = content.next();
                if (insertBefore.length) {
                    set('insertBefore', insertBefore);
                } else {
                    set('appendTo', content.parent());
                }
            }
        }
 
        setUrl();
 
        return this;
    };
 
    $.extend($.autopager, {
        option: function(key, value) {
            var _options = key;
 
            if (typeof key === "string") {
                if (value === undefined) {
                    return options[key];
                }
                _options = {};
                _options[key] = value;
            }
 
            $.each(_options, function(key, value) {
                set(key, value);
            });
            return this;
        },
 
        enable: function() {
            set('disabled', false);
            return this;
        },
 
        disable: function() {
            set('disabled', true);
            return this;
        },
 
        destroy: function() {
            this.autoLoad(false);
            options = {};
            content = currentUrl = nextUrl = undefined;
            return this;
        },
 
        autoLoad: function(value) {
            return this.option('autoLoad', value);
        },
 
        load: function() {
            if (active || !nextUrl || options.disabled) {
                return;
            }
 
            active = true;
            options.start(currentHash(), nextHash());
            $.get(nextUrl, insertContent);
            return this;
        }
 
    });
 
    function set(key, value) {
        switch (key) {
            case 'autoLoad':
                if (value && !options.autoLoad) {
                    $(window).scroll(loadOnScroll);
                } else if (!value && options.autoLoad) {
                    $(window).unbind('scroll', loadOnScroll);
                }
                break;
            case 'insertBefore':
                if (value) {
                    options.appendTo = null;
                }
                break
            case 'appendTo':
                if (value) {
                    options.insertBefore = null;
                }
                break
        }
        options[key] = value;
    }
 
    function setUrl(context) {
        currentUrl = nextUrl || window.location.href;
        nextUrl = $(options.link, context).attr('href');
    }
 
    function loadOnScroll() {
        if (content.offset().top + content.height() < $(document).scrollTop() + $(window).height()) {
            $.autopager.load();
        }
    }
 
    function insertContent(res) {
        var _options = options,
            nextPage = $('
').append(res.replace(//g, "")),
            nextContent = nextPage.find(_options.content); 
 
        set('page', _options.page + 1);
        setUrl(nextPage);
        if (nextContent.length) {
            if (_options.insertBefore) {
                nextContent.insertBefore(_options.insertBefore);
            } else {
                nextContent.appendTo(_options.appendTo);
            }
            _options.load.call(nextContent.get(), currentHash(), nextHash());
            content = nextContent.filter(':last');
        }
        active = false;
    }
 
    function currentHash() {
        return {
            page: options.page,
            url: currentUrl
        };
    }
 
    function nextHash() {
        return {
            page: options.page + 1,
            url: nextUrl
        };
    }
})(jQuery);
非常にシンプルかつ便利。

拍手[2回]

jquery autopager ページがスクロールして一番下に来たら次を読み込む

twitterのTLみたいなやつ。
ページがスクロールして、一番下に来たら次のページを追加で読み込む。（ページの再読み込みはしない）

autopagerを使う。

head内に下を書く。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="autopager.js"></script>

<script type="text/javascript">$(function() {$.autopager();});</script>


コンテンツとページ送りはこんな感じ
 
<div class="content">
  ほげほげほげ
</div>
<a rel="next" href="次ページへのパス">次</a>


これで画面がrel="next"が画面に表示されたら、次ページのパスを読み込んでclass="content"のところに置き換わる。

autopager.jsのソース
/*
 * jQuery.autopager v1.0.0
 *
 * Copyright (c) 2009 lagos
 * Dual licensed under the MIT and GPL licenses.
 *
 * http://lagoscript.org
 */
(function($) {
    var window = this, options = {},
        content, currentUrl, nextUrl,
        active = false,
        defaults = {
            autoLoad: true,
            page: 1,
            content: '.content',
            link: 'a[rel=next]',
            insertBefore: null, 
            appendTo: null, 
            start: function() {},
            load: function() {},
            disabled: false
        };
 
    $.autopager = function(_options) {
        var autopager = this.autopager;
 
        if (typeof _options === 'string' && $.isFunction(autopager[_options])) {
            var args = Array.prototype.slice.call(arguments, 1),
                value = autopager[_options].apply(autopager, args);
 
            return value === autopager || value === undefined ? this : value;
        }
 
        _options = $.extend({}, defaults, _options);
        autopager.option(_options);
 
        content = $(_options.content).filter(':last');
        if (content.length) {
            if (!_options.insertBefore && !_options.appendTo) {
                var insertBefore = content.next();
                if (insertBefore.length) {
                    set('insertBefore', insertBefore);
                } else {
                    set('appendTo', content.parent());
                }
            }
        }
 
        setUrl();
 
        return this;
    };
 
    $.extend($.autopager, {
        option: function(key, value) {
            var _options = key;
 
            if (typeof key === "string") {
                if (value === undefined) {
                    return options[key];
                }
                _options = {};
                _options[key] = value;
            }
 
            $.each(_options, function(key, value) {
                set(key, value);
            });
            return this;
        },
 
        enable: function() {
            set('disabled', false);
            return this;
        },
 
        disable: function() {
            set('disabled', true);
            return this;
        },
 
        destroy: function() {
            this.autoLoad(false);
            options = {};
            content = currentUrl = nextUrl = undefined;
            return this;
        },
 
        autoLoad: function(value) {
            return this.option('autoLoad', value);
        },
 
        load: function() {
            if (active || !nextUrl || options.disabled) {
                return;
            }
 
            active = true;
            options.start(currentHash(), nextHash());
            $.get(nextUrl, insertContent);
            return this;
        }
 
    });
 
    function set(key, value) {
        switch (key) {
            case 'autoLoad':
                if (value && !options.autoLoad) {
                    $(window).scroll(loadOnScroll);
                } else if (!value && options.autoLoad) {
                    $(window).unbind('scroll', loadOnScroll);
                }
                break;
            case 'insertBefore':
                if (value) {
                    options.appendTo = null;
                }
                break
            case 'appendTo':
                if (value) {
                    options.insertBefore = null;
                }
                break
        }
        options[key] = value;
    }
 
    function setUrl(context) {
        currentUrl = nextUrl || window.location.href;
        nextUrl = $(options.link, context).attr('href');
    }
 
    function loadOnScroll() {
        if (content.offset().top + content.height() < $(document).scrollTop() + $(window).height()) {
            $.autopager.load();
        }
    }
 
    function insertContent(res) {
        var _options = options,
            nextPage = $('
').append(res.replace(//g, "")),
            nextContent = nextPage.find(_options.content); 
 
        set('page', _options.page + 1);
        setUrl(nextPage);
        if (nextContent.length) {
            if (_options.insertBefore) {
                nextContent.insertBefore(_options.insertBefore);
            } else {
                nextContent.appendTo(_options.appendTo);
            }
            _options.load.call(nextContent.get(), currentHash(), nextHash());
            content = nextContent.filter(':last');
        }
        active = false;
    }
 
    function currentHash() {
        return {
            page: options.page,
            url: currentUrl
        };
    }
 
    function nextHash() {
        return {
            page: options.page + 1,
            url: nextUrl
        };
    }
})(jQuery);
非常にシンプルかつ便利。

拍手[0回]

jqueryでページ内にタブ切り替え

ページ内にタブがあってタブを押すと、テキストエリアの内容が変わるっていうよくあるあれ。

こちらのページが非常に参考になりました。（下記スクリプト部分等は引用させてもらいました。）
jQuery事始めvol.3・プラグインに頼らず自分でクリックで切り替わるタブメニューを作ってみる
 


タブ１ タブ２ タブ３

タブ1の内容


タブ２を選ぶと内容が変わるやつ。

コード部分（表示させたいページのhead内に書くか、jsファイルとして呼び出す）
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">

	
$(document).ready(function() {
 $('.area:first').show();
 $('.tab li:first').addClass('active');
 $('.tab li').click(function() {
   $('.tab li').removeClass('active');
   $(this).addClass('active');
   $('.area').hide(); $($(this).find('a').attr('href')).fadeIn(); return false;
 }); 

	
});</script>





css部分（上と同じ）



	
.tab, .tab li, .tab li a {/*クリックするタブ部分*/
    float: left;
    padding:3px;
    margin-right:2px;
}

.content {/*切り替わる部分を囲うボックス*/
    clear: both;
    overflow: hidden;
    width: 300px;
    border:1px solid #eee;
    height:300px;
}
.area {/*切り替わる部分はまず全部消しておく*/
    display: none;
}
.tab li.active {/*選択中のタブ。色を変える等*/
    background: #eee;
}

.tab li.active a{/*選択中のタブのリンクカラー*/
    color:red;
}




html部分


	
<!--ここがタブ-->
<ul class="tab">
    <li><a href="#tab1">tab1</a></li>
    <li><a href="#tab2">tab2</a></li>
    <li><a href="#tab3">tab3</a></li>
    <li><a href="#tab4">tab4</a></li>
</ul>
<!--ここが切り替わる部分-->
<div class="content">
    <div class="area" id="tab1">
        Tab1
    </div>
    <div class="area" id="tab2">
       Tab2
    </div>
    <div class="area" id="tab3">
        Tab3
    </div>
    <div class="area" id="tab4">
        Tab4
    </div>
</div>







	 



	 


拍手[2回]

                                        
                                    

 
                




                                

                                

                    
                    

                

                            

                                    
                        
                        

                                

                    
    
                                            

                

            

                        
        

                
                

                                    

                
ブログ内検索

                

                













                

            

                                                

                
最新記事

                

                

jQuery select要素の取得 css セレクタ nameとか



(02/25)

PHPの文字列比較 （数値型と文字列型の比較）



(02/20)

JavaScriptのクロスドメイン制限（外部ドメインのファイルを取得とか）



(02/20)

JavaScriptでURLアドレスを取得する location.href



(02/20)

JavaScriptで正規表現を使ったグループマッチとか RegExp



(02/20)

                

            

                                                

                
カテゴリー

                

                

未選択(0)


Wordpress(19)


HTML/CSS(4)


PHP(9)


アフィ(2)


blog(1)


lolipop(8)


linux(3)


perl(15)


mysql(8)


電脳卸(2)


jquery(5)


xampp(2)


JavaScript(4)


                

            

                                                

                
最新コメント

                

                

                

            

                                                

                
広告

                

                




                

            

                                                

                
プロフィール

                
なんとなくはじめてみたよ

                
忍者ツールズプロフィールは終了しました

                

            

                                                

                
カウンター