jQueryのmouseoverメソッドとmouseenterメソッドの違い
jQueryのmouseoverメソッドとmouseenterメソッドの違い このエントリーはjQuery Advent Calendar 2013の 2日目のエントリーです。(Advent Calendarとは様々なテーマを12/1〜12/25までリレー形式でブログなどに執筆する企画です。) 1日目ではJavaScriptのイベントデリゲートやイベントバブリングについて解説をしたので、それを踏まえて2日目はjQueryのmouseoverメソッドとmouseenterメソッドの違いについて解説します。 mouseoverメソッドとmouseoutメソッド mouseoverメソッドとmouseoutメソッドはその名のとおり、要素のマウスカーソルが乗った場合やマウスカーソルが外れた際に発火するイベントです。次のように記述するとdiv要素にマウスカーソルが乗った際に横幅、高さが200pxに拡
Gruntで始めるWeb制作の自動化
Gruntで始めるWeb制作の自動化 Grunt.jsとはWeb制作の様々なタスクを自動化してくれるツールです。 node.jsで開発されており、Sass/CompassやLessなどのCSSプリプロセッサーのコンパイルやCSS/JSの結合圧縮、JSHintによるバリデーションなど様々なタスクを自動で行ってくれます。 インストール まずはnode.jsをインストールします。公式サイトでインストーラーが配布されていますので簡単にインストールが可能です。 次にMacではターミナルを開いてgrunt-cliをインストールしましょう。cliとはCommon Language Infrastructureの略でコマンドラインからGruntを利用するためのツールです。 sudo npm install -g grunt-cli パスワードが聞かれるので入力してください。成功すればgrunt-cliのイ
14のjQueryベストプラクティス[to-R]
14のjQueryベストプラクティス 原文:14 Helpful jQuery Tricks, Notes, and Best Practices 良かったので翻訳してみました。かなりの意訳で、上手に訳せてない箇所も多いので詳しくは原文を参照してください。 1.メソッドはjQueryオブジェクトを返す ほとんどのメソッドがjQueryオブジェクトを返すのが重要です。 これにより次のようなメソッドチェーンが可能になっています。 $someDiv .attr('class', 'someClass') .hide() .html('new stuff'); jQueryオブジェクトを返すのがわかっていれば次のように分割して書くことも出来ます。 var someDiv = $('#someDiv'); someDiv.hide(); 次のように一行で書くことも出来ます。 var someDiv
iPhone/iPadでダブルタップが利用できるjQueryプラグイン「jquery.event.dblTap.js」
iPhone/iPadでダブルタップが利用できるjQueryプラグイン「jquery.event.dblTap.js」 iPhone/iPadでダブルタップをJavaScriptで実装するで紹介してたダブルタップの実装方法をjQueryプラグインにしてみました。 利用方法 jQuery本体とjquery.event.dblTap.jsをhead要素などで読み込みます。 <script src="jquery-.min.js"></script> <script src="jquery.event.dblTap.js"></script> 後は「dblTap」をbindするとdblTapイベントが実装できます(クリックにも反応するようにしています)。 $("button").bind("dblTap",function(){ alert("duble tap"); }) デモ 初期設定では5
iPhone/iPadでPCと同じJavaScriptのイベントを実装する
iPhone/iPadでPCと同じJavaScriptのイベントを実装する PC向けに作ったサイトをiPhoneやiPadでも利用できるようにする際に注意しなくてはいけないのがJavaScriptのイベントです。 iPhone/iPadではonmouseoverやonmousedownなどのonMouse系のイベントが利用できず、代わりにontouchstartやontouchmove、ontouchendなどのonTouch系のイベントが用意されています。 使い分けとしてはだいたい次のようになります。 ontouchstart = onmousedown ontouchmove = onmousemove ontouchend ≒onmouseup ですのでjQueryを利用した場合、 var ua =navigator.userAgent; if(ua.indexOf('iPhone'
Firebugで始めるCSSデバッグ
Firebugで始めるCSSデバッグ FirebugはWeb制作をアシストしてくれるFirefoxの拡張機能(アドオン)です。CSSデバッグに関してはWeb Developerよりこちらを使っている人のほうが多いと思います。個人的にもFirebugなしでCSSは書きたくないと思うぐらい重宝しています。 インストール Firefoxで配布サイトにアクセスして「Firefoxへの追加」をクリックします。 インストール画面が表示されます。画面下部に『インストール(5)』といったグレーのボタンが表示されますが、すこし待つと『今すぐインストール』に変わります。変わりましたらボタンをクリックしてインストールを開始してください。 インストールが終了したらFirefoxの再起動が求められるので、Firefoxを再起動してください。 Firebugの使い方 Firebugをインストールするとブラウザの右下に
[ASCII.jp]40分で覚える！jQuery速習講座
[ASCII.jp]40分で覚える！jQuery速習講座 ASCII.jpで「40分で覚える！jQuery速習講座」が公開されました。 jQueryってどんな感じ？どんなことが出来るの？というのを短時間で理解できる構成になっております。 jQueryに興味があるけど・・・という方はぜひ一度この講座をごらんになってください。 そして、この講座でjQueryに興味を持って、Web制作の現場で使う jQueryデザイン入門で様々なこと表現できるようになっていただけたらと思います。 スポンサードリンク to-Rについて JavaScriptやCSS、React/Angularなどのフロントエンド情報を発信しています。 書いてる人 西畑一馬 (株式会社トゥーアール) 代表取締役/フロントエンドエンジニア 株式会社トゥーアールについて 渋谷にあるフロントエンドに特化したWeb制作会社です。フロントエン
![[ASCII.jp]40分で覚える！jQuery速習講座](https://cdn-ak-scissors.b.st-hatena.com/image/square/c564e5493933f3aaee932ca1e5daf08a2113da62/height=288;version=1;width=512/http%3A%2F%2Fblog.webcreativepark.net%2Fimages%2F001_590x150.png)
Re:PHPで誰でも簡単Webサービス製作！でなんか作って公開した奴ちょっと来い
Re:PHPで誰でも簡単Webサービス製作！でなんか作って公開した奴ちょっと来い ネタ元：PHPで誰でも簡単Webサービス製作！でなんか作って公開した奴ちょっと来い PHPのXSSとSQLインジェクションの解説が書かれています。丁寧に書かれていますのでぜひ一読ください。ただ、読む上で1点注意することがあります。 XSSはそれほど単純じゃない！ ネタもとのXSS対策済みのソースコードの１行目で次のようなコードがあります。 <form action="<?=$_SERVER['PHP_SELF']?>" method="get"> 実はここにもXSSの脆弱性が含まれています。次のようなURLでアクセスされた場合、任意のスクリプトを実行することが出来ます。 http://www.example.jp/ example.php/%22%3E%3Cscript%3Ealert(document.co
jQuery基礎文法最速マスター[to-R]
jQuery基礎文法最速マスター はやっているようなのでまとめてみたいと思います。 jQueryの読み込み Google AJAX Libraries APIで簡単に読み込めます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> jQueryの記述場所 基本的にはscript要素内の次の箇所に記述していきます。 <script type="text/javascript"> $(function(){ /*ここにjQueryを記述*/ }) </script> 上のコードは$(document).ready()のショートカットなので、次のように書いても大丈夫です。 <script type="text/javascri
Ajax中にページ更新する際の注意点
Ajax中にページ更新する際の注意点 Ajaxで通信中にF5などを押してページをリロードすると通信エラーが帰ってきます。 詳しくは調べていませんが、どうもFirefoxでの挙動のようです。 参考：FirefoxでAjax中にF5押したとき « pocketo.net blog このサイトのようにAjaxのXMLHttpRequestをabort()で中断すれば、この問題は解決できます。 var xhr = $.ajax( {....}) $( document ).bind( 'beforeunload', function() { xhr.abort(); } ); ただ、通信の数が多い場合は、毎回設定するのは少し面倒。 そういう場合は、以下のように設定しておくとjQueryでajaxを使うと自動でabort()を設定してくれます。 $("body").bind("ajaxSend",
jQueryを良くする25のTIPS
jQueryを良くする25のTIPS ネタ元：Improve your jQuery - 25 excellent tips ちょっと多いですが、かなり良いTIPSがまとまっています。 Google AJAX Libraries APIを利用しよう Google AJAX Libraries APIを活用すればすばやくライブラリを読み込むことが出来ます。 <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // Load jQuery google.load("jquery", "1.2.6"); google.setOnLoadCallback(function() { // Your code goes here. }); </script> 直接読み込むことも出来ます。
JSONとJSONP
JSONとJSONP ネタ元：JSONについての勉強メモ：外部URLから呼び出せない。どうやったら・・・ JSONやJSONPを利用したJavaScriptでのデータをの取り扱い方です。 JSONの場合 JSONはJSONについての勉強メモで書かれているようにデータをオブジェクトとして記述しておく方法です。 var jsonData ={"users": [ { name: "hamu", age : 24, language:["XHTML" , "CSS"] }, { name: "h2", age:25, language:["PHP" , "Java"] }, { name: "hoge", age:26, language:["JS" , "jQuery"] } ]} とJSONを定義しておけば、 for(var index in jsonData.users){ documen
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
