jQueryで親要素や子要素を取得する方法

jQueryで親要素や子要素を取得する方法をまとめてみました。

なんだかんだで書いておかないと忘れてしまうので。。。

親要素を取得する

  • parent([条件等])
  • 直近の親要素のみを取得し、1つ上以上の親を探さない。
    条件を書かなければ直近の親要素を、条件を書くと条件に一致する場合は要素が、一致しない場合は空の配列が返ってくる

    例) #content の親要素である div を取得する

    $("#content").parent();
    
    <div>
        <div id="content"></div>
    </div>

    “jQueryで親要素や子要素を取得する方法” の続きを読む

jQueryの.hover()をon()で使う方法

こんにちは!

jQueryで.hover()を使っていたのですが、ふと.on()で.hover()を使うためにはどうやるのだろうか・・・と思って少し調べてみたので書いておきます。

.hover()を使ってみる

まずそもそも.hover()の使い方ですが、以下のような感じになります。

$('#sample1').hover(function(){
    $(this).hide(10);
}, function(){
    $(this).show(10);
});


マウスオンしてみる

.on()で.hover()を書いてみる

それじゃぁ同じものを.on()で書いてみましょう。

$('#sample2').on({
    'mouseenter': function(){
        $(this).fadeOut(10);
    },
    'mouseleave': function(){
        $(this).fadeIn(10);
    }
});
マウスオンしてみる

はいこれで出来ました!一丁上がり〜〜

全く関係ないですが今日この本買ってうきうき気分です

JavaScriptで学ぶ関数型プログラミング
Michael Fogus
オライリージャパン
売り上げランキング: 10,105

jQuery fancyboxが起動しないときの対処法

jQuery fancybox、とても便利ですよね。
気軽にモーダルウインドウが実装出来るのでよく使ってるjQueryプラグインの1つです。

今回そのfancyboxを使っていて、原因は不明なのですがなぜか発火しなかったときの対処法を書いておきます。
ただ原因不明なので詳しい方、ぜひとも教えていただけると助かります。

普通fancyboxは.fancybox()で起動しますが、今回はなぜか起動しませんでした。

なので以下のような方法で無理やりfancyboxを立ち上げました。

$(document).ready(function () {
        $.fancybox({
            'width': '40%',
            'height': '40%',
        });
});

fancyboxは$のあとの関数としても登録されているため上記のようなことが出来ると思います。
参考になると幸いです。

参考サイト

jQuery, fancybox working but only when you click this image twice
How to launch jQuery Fancybox on page load?

ドットインストールで公開されているBackbone.js入門をCoffeeScriptで書きなおしたので公開します

みなさんこんにちは。

最近はやっとJavaScriptをがっつりいじることが出来そうになったので、Backbone.jsに入門してみました。
また、CoffeeScriptも便利だと聞いたのでこれも勉強してみました。

勉強のためにドットインストールで公開されているBackbone.js入門の完成品を参考に、JavaScriptのコードをCoffeeScriptで書きなおしました。

これからCoffeeScriptを勉強しようと思っている人に少しでも役に立てればと思います。

CoffeeScriptもやり始めて1日くらいしかたってないので、ここはCoffeeだとこんな感じに書けるよ!とかあれば教えていただけると幸いですー
ドットインストール便利!いつもお世話になってます!

“ドットインストールで公開されているBackbone.js入門をCoffeeScriptで書きなおしたので公開します” の続きを読む

めちゃくちゃ可愛い「おけいはん」が好きすぎていつでもどこでも可愛い「おけいはん」が見れるChrome拡張機能作ったった

みなさんはとても可愛い「おけいはん」というキャラクターを知っていますか?

僕は数日前に知り合いに教えてもらって、初めて知りました。

おけいはんって??

「おけいはん」というのは、京阪電気鉄道が2000年12月より登場させているイメージキャラクターで2011年11月から5代目の畦田ひとみさんという方が担当されています。

「おけいはん」は4代目まではタレントさんを起用されていたようなのですが、5代目からはより親しみを持ってもらうべく初めて公募したようです。
その結果、選ばれたのが大学生の畦田ひとみさん。
和風の雰囲気がとてもよく、惹かれるものがあります。
“めちゃくちゃ可愛い「おけいはん」が好きすぎていつでもどこでも可愛い「おけいはん」が見れるChrome拡張機能作ったった” の続きを読む

超便利!!OSやブラウザごとにCSSで要素のスタイルを指定出来るJavaScriptプラグイン「CSS Browser Selector」

ずれる。

Web制作をしていて本当に困るのが、OSやブラウザによって表示が崩れていたりずれていたりすること。
こうなったときによく行うのがCSSハックです。僕のブログでも一度取り上げました。

>>> 困ったときに役に立つ! CSSハックまとめ

ただこの方法だとブラウザ毎の差異は吸収出来るのですが、OS間の差異が吸収出来ません。
ほとんどずれることはないのですがたまにずれるのです。。。

こういうときに役に立つJavaScriptプラグインをご紹介します。
(JavaScriptなのでJavaScriptをoffにされるともちろん動きません。ただそういう人は既に一般的ではないでしょう。)

それでは目次です。

◯ 今回紹介するJavaScriptプラグイン
◯ 使い方

“超便利!!OSやブラウザごとにCSSで要素のスタイルを指定出来るJavaScriptプラグイン「CSS Browser Selector」” の続きを読む

CSSを早く書くことが出来るLESSに入門しました!


みなさんはCSSの拡張メタ言語であるLESSを知っていますか?
拡張メタ言語というのは、普通の言語とは違って、ある言語をより簡単に書くために作られた言語です。
例えば最近だと、CoffeeScriptとかTypeScriptとかが話題になっていますね。
これらは全てJavaScriptの拡張メタ言語であり、CoffeeScriptTypeScriptで書いたファイルをコンパイルするとJavaScriptを生成することが出来ます。

今回入門してみたLESSはCSSの拡張メタ言語です。つまりLESSで書いたファイルをコンパイルすると、CSSが生成されるわけですね。

それでは早速入門してみましょう!!

“CSSを早く書くことが出来るLESSに入門しました!” の続きを読む

めちゃくちゃ便利なJavaScript オリジナル関数10選

この記事はonextrapixelに掲載された 10 Useful and Time Saving JavaScript Snippets の内容を日本語訳したものです。

JavaScriptはすごい勢いで進化しています。ただ常に全てのサイトに対して最新のJavaScriptを適用していくのはとても骨が折れる作業です。jQueryはとても人気のあるすぐれたライブラリであるが、いくつかのスクリプトは純粋なJavaScriptで書かれています。

この記事では、共通の問題を解決し、あなたの時間を節約することが出来る便利な10のスクリプトを紹介します。これらのスニペットはほとんどがコピー&ペーストによって使用することが出来ますし、あなたのスクリプトに自由に埋め込んで使うことが出来ます。ぜひ使ってみてください。
“めちゃくちゃ便利なJavaScript オリジナル関数10選” の続きを読む

nodejsのフレームワーク、expressを動かしてみるまで


前回はnodejsをインストールするまでを書いてみました。
今回は前回の記事を行った前提でお話を進めていきます。
それでは始めて行きましょう。

◯ npmをインストールする
◯ expressをインストールする
◯ nodejsでexpressを動かしてみる

“nodejsのフレームワーク、expressを動かしてみるまで” の続きを読む

さくらVPSにnaveでnode.jsを入れてみる


いまだにnodejsを触ったことがなかったので今回触ってみました。

感想としては、難しい印象を持ってたけどあっという間に入れることが出来るんだなぁって感じです。
つまり特に難しいことをせずともすぐに使い始められるって印象です。

もしまだnode.jsを触ったことがない人がいればぜひ触ってみてください。
面白いですよ。

◯ 必要なパッケージをインストールする
◯ naveをインストールする

“さくらVPSにnaveでnode.jsを入れてみる” の続きを読む