4章 HTML、テキスト、フォーム値の取得＆設定 削除、クローン（コピー） 要素の削除やクローン（コピー）について見てみましょう。 .remove() .empty() .clone() .remove() マッチした要素を中身も含めて丸ごと削除します。 具体例で見てみましょう。
こんにちは、ライターのマサトです！ 今回は、対象の要素を任意のHTML要素で囲むことができる「wrap()」メソッドについて学習しましょう！ この記事では、 ・「wrap()」とは？ ・「wrap()」の使い方 という基本的な内容から、 ・「wrap()」の活用 ・「wrap()」の類似メソッド などの応用的な使い方に関しても解説していきます。 この記事で、jQueryの「wrap()」をしっかり学習して自分のスキルアップを目指しましょう！ 「wrap()」とは？ それでは、まず最初に「wrap()」メソッドについての基本的な知識から学習を始めましょう！ 「wrap()」は、指定したHTML要素で対象の要素を囲むことができるメソッドになります。 これは言い換えると、対象となる要素の「親要素」を作ることができると考えることもできるでしょう。 例えば、次のような「p要素」があるとします。 <p
Description: Encode a set of form elements as an array of names and values. version added: 1.2.serializeArray() The .serializeArray() method creates a JavaScript array of objects, ready to be encoded as a JSON string. It operates on a jQuery collection of forms and/or form controls. The controls can be of several types:
jQuery の serialize と serializeArray 関数の使い方です。 serialize関数 入力された全ての Element をURLエンコードencodeURIComponentされたクエリ文字列にシリアライズします。 シリアライズされるフォーム要素は name 属性を持っている必要があります。チェックボックスとラジオボタンはチェックされている場合にのみシリアライズされる文字列に含まれます。 以下のHTMLフォームでシリアライズ結果を確認します。 <form action="send"> <input type="text" name="user" placeholder="ユーザー名"><br> <input type="radio" name="gender" value="male" checked="checked">男 <input type="radi
See related links to what you are looking for.
結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 一年ほど前に JavaScript - jQuery.Deferredを使って楽しい非同期生活を送る方法 - Qiita [キータ] という記事を書きました。 で、一年経って、ふと、「もっと分かりやすくjQuery.Deferredの便利さを説明できるんじゃないか」と思い立ってざざざっと書いてみました。 小話と言うにはちょっと長いけど。 -- jQuery.Deferredを使うと嬉しいのは、jQuery.Deferredの仕様を満たす部品同士を簡単に組み合わせることが可能だからです。中には処理を書き下すことができるとかコールバックのネストを防げるのがいいとか言う人もいますが、個人的にこっちのほうがよっぽど重要だと感じます。 例えるならレゴブロックです。レゴブロックはあの凸と凹を持ってるブロックを自由に組み合
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。これまで、JavaScriptで非同期処理を書く上での問題として、コールバック地獄やエラー処理に例外が使えないことなどを解説してきました。 これらの問題に対処するライブラリの1つであるjQuery.Deferredに関して、もう少し丁寧に解説いたします。なお、jQueryのバージョンは記事執筆時点の最新である、1.9.1を想定しています。 jQuery.Deferredとは jQuery.DeferredとはjQueryのバージョン1.5から導入された、非同期処理をうまく扱うための標準モジュールです。使いこなすことで、以下のような効果が見込めます。 非同期処理を連結
タイトルの通りです。セレクタを使う際の注意点やDOM操作をする場合に気をつけることを書いています。 idセレクタを使いましょう jQueryでのセレクタは次の順番で速いようです： idで指定する タグ名で指定する classで指定する 属性で指定する jQuery独自拡張セレクタで指定する ってことで特別な理由がなければ#idをセレクタに使ってください。 idで取得するときにタグ名を指定しないように 1var $hoge = $('div#hoge'); のような指定の仕方はアウトです。なぜならhogeというidを見つけるためにdiv要素をすべて探す必要があるからです。単に 1var $hoge = $('#hoge'); のようにしてください。これでjQueryはJavaScriptのネイティブ関数であるgetElementByIdを使ってオブジェクトを取得します。 クラスセレクタよりも
手元のjQuery関連本に載っていなかった（見つけることができなかった）のでメモっておきます。 jQueryのオブジェクトの要素名を取得したい場合には「tagName」を使います。 例えば、hogeというクラス名が与えら … 続きを読む »
jQuery でCSVデータを簡単に取り扱える「jQuery CSV」 Check Tweet 配布元：Plugins | jQuery Plugins | CSV ライセンス：Apache License, Version 2.0 jQuery CSVはjQuery でCSVデータを簡単に取り扱うことができるjQueryプラグインです。 利用方法 次にようにCSVデータに対して$.csv()(CSVデータ)を実行することでcsvデータを配列に変換することが出来ます。 var csv = $.csv()(CSVデータ) CSVデータは$.get()などのjQueryのAjaxメソッドを利用して取得します。 $.get('data.csv',function(data){ //Ajax後の処理 }) つまり、次のようなJavaScriptを実行することでCSVファイル（data.csv）のデ
javascriptでも外部ファイルを読み込む処理って今や当たり前になりましたね。 なので、ちょっとajaxを利用してxmlファイルを読み込む処理の実験をしたいと思います。 javascriptでajaxだとちょっと記述がめんどくさいのでjQueryによるxmlファイルの読み込みを記事にしたいと思います。 ajaxによる読み込み $(document).ready(function(){ // $.ajax({ url:"index.xml", type:"get", dataType:"xml", timeout:1000, cache:false, error:function(){ alert("xmlファイルの読み込み失敗"); }, success:function(xml){ var listdata=""; $(xml).find("list").each(function(
以下のようなXMLファイルを読み込みたい。 <?xml version="1.0" encoding="utf-8" ?> <friend_list> <friend gender="male"> <name>sho322</name> <job>Engineer</job> <interests> <interest>programming</interest> <interest>swimming</interest> <interest>jogging</interest> </interests> </friend> <friend gender="female"> <name>hanako</name> <job>designer</job> <interests> <interest>flower</interest> <interest>trip</interest> <in
jQueryで外部ファイル（XMLデータ）を解析し、HTMLに表示する jQuery2011年9月29日 MovableTypeやWordPressなどのCMSツールを使用せず、ニュースリリースなどが静的HTMLで構築されているサイトの場合、HTMLを直接修正して更新する必要があります。 そこで、ニュースリリースなどの情報をひとつのXMLファイルで管理し、HTMLを触らずともあたかもデータベースのようにXMLを扱うことで、XMLファイルの更新のみでサイトの管理が可能になり、メンテナンス性が向上します。 jQueryを使用すると実装が比較的容易なので、今回サンプルを作成してみました。 jQueryはこちらからダウンロード 実際のサンプル HTML <table cellpadding="0" cellspacing="0" border="0" class="tbl"> <col width
jQuery開発チームは4月18日、JavaScriptライブラリ「jQuery 2.0」を発表した。Internet Explorer（IE） 6および7、8のサポートの廃止が行われており、より軽量かつ高速になったという。 jQuery開発チームは2012年6月、次期メジャーアップデート版となるバージョン2.0ではIE 6/7/8をサポートしない方針を打ち出しており、最新版はこの計画に沿ったものとなる。それにあたって、2013年1月に2.0とAPI互換をもつバージョン1.9を公開、同時にバージョン2.0のベータ版もリリースされていた。1.9系の最新版は現在1.9.1（2月に公開）で、1系の次期版は1.10となる。 jQuery 2.0ではIE 6/7/8など「レガシー」なWebブラウザサポートが廃止されており、これら専用のコードを削除することで1.9.1と比較してファイルサイズが12％小
You asked for it, you got it: jQuery 2.0 has arrived! As promised, this version leaves behind the older Internet Explorer 6, 7, and 8 browsers. In return it is smaller, faster, and can be used in JavaScript environments where the code needed for old-IE compatibility often causes problems of its own. But don’t worry, the jQuery team still supports the 1.x branch which does run on IE 6/7/8. You can
Jerry is a jQuery in Java. Jerry is a fast and concise Java Library that simplifies HTML document parsing, traversing and manipulating. Jerry is designed to change the way that you parse HTML content. What does Jerry code look like? import static jodd.lagarto.dom.jerry.Jerry.jerry; ... Jerry doc = jerry(html); doc.$("div#jodd p.neat").css("color", "red").addClass("ohmy"); How Jerry works? We tried
2012年1月27日、XMLをjQuery風に操作できるJavaライブラリ「jOOX 1.0.0」がリリースされました。jOOXはLukas Eder氏が開発したもので、流れるようなインタフェース（Fluent Interface）（注1）で記述していくことでXMLの走査や編集が行えます。Java 5から導入されたStatic Importをうまく使っており、非常に簡潔な記述を実現しています（リスト）。 Lukas Eder氏はjOOXのように流れるようなインタフェースでラップしたライブラリをほかにも公開しており、SQLのように書けるjOOQやリフレクションを簡潔に表せるjOORなどがあります。jOOXのWebサイトからリンクされていますので、興味のある方はぜひ参照してみてください。 リスト jOOXを使ったコード Document doc = $(new File("foo.xml
この記事は賞味期限切れです。（更新から1年が経過しています） jQueryUIのdialogは結構お世話になっているのですが、たまに欲しい機能がなかったり、あっても説明されてなかったりするのでここにDialogカスタマイズTipsをしたためておきます。 この記事の内容は既に古くなっています。現在最新バージョンのjQueryUIでは挙動が改善されていたり、渡せるオプションが変わっていたりします。 Modalしたダイアログをオーバーレイクリックで閉じる 任意の要素をクリックして閉じる アニメーションで閉じる・開く エフェクト中にオーバーレイの後ろに回りこんでしまうのを回避する 閉じる・開くアニメーションにパラメータを渡す 閉じるついでにデストロイする 1. Modalしたダイアログをオーバーレイクリックで閉じる escキー押下で閉じるオプションはあるのですが、このオプションはない様子。 そこで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
