API/1.3/Attributes/API/jQuery JavaScript Library


Attributes/API/jQuery




 [Attr:] ////////////////////////////////////////////////////////////////

□ attr( name )
Access a property on the first matched element.
This method makes it easy to retrieve a property value from the first matched element.
If the element does not have an attribute with such a name, undefined is returned.
Attributes include title, alt, src, href, width, style, etc.
最初の要素が持つ指定属性の値を返し、要素が指定属性を持っていない場合、undefinedを返す


Finds the title attribute of the first <em> in the page.
最初のem要素が持つtitle属性の値を表示する

Sample jquery
------------------------------------------------------
  $(document).ready(function(){

    var title = $("em").attr("title");
    $("div").text(title);

  });


CSS
------------------------------------------------------
  em { color:blue; font-weight;bold; }
  div { color:red; }


HTML
------------------------------------------------------
  <p>
    Once there was a <em title="huge, gigantic">large</em> dinosaur...
  </p>
  The title of the emphasis is:<div></div>




□ attr( properties )
Set a key/value object as properties to all matched elements.
キーと値がセットされたオブジェクトを属性として全ての要素へ設定する。

This serves as the best way to set a large number of properties on all matched elements.
Note that you must use 'className' as key if you want to set the class-Attribute.
Or use .addClass( class ) or .removeClass( class ).
大量の属性を設定したい場合に適した方法である。
class属性を設定したい場合は、キーの名前は'className'
もしくは、.addClass(class)/.removeClass(class)メソッドを用いる

Keep in mind this recursively calls attr( key, value ) or attr ( key, fn ), so if
one of the properties you are passing is a function, the function will be evaluated
and not stored as the attribute itself.
もし渡されたプロパテイが関数である場合は、属性設定せずに評価のみを行うので
再帰的に呼び出しは　attr( key, value ) attr ( key, fn )　を使う

Key/value pairs to set as object properties.

Sample jquery
------------------------------------------------------
  $(document).ready(function(){
    
    $("img").attr({ 
          src: "/images/hat.gif",
          title: "jQuery",
          alt: "jQuery Logo"
        });
    $("div").text($("img").attr("alt"));

  });

CSS
------------------------------------------------------
  img { padding:10px; }
  div { color:red; font-size:24px; }

HTML
------------------------------------------------------
  <img />
  <img />
  <img />
  <div><B>Attribute of Ajax</B></div>




□ attr( key, value )
Set a single property to a value, on all matched elements.
一致した全要素に、ひとつの属性値を設定する

key    String : The name of the property to set.
value  Object : The value to set the property too.

the 1st ボタン以降を使用不可にする

Sample jquery
------------------------------------------------------
$(document).ready(function(){
    $("button:gt(1)").attr("disabled","disabled");
  });

CSS
------------------------------------------------------
HTML
------------------------------------------------------
  <button>0th Button</button>
  <button>1st Button</button>
  <button>2nd Button</button>





□ attr( key, fn )
Set a single property to a computed value, on all matched elements.
一致した全ての要素に、演算処理をひとつの属性としてセットする

Sets id for divs based on the position in the page.
ページ上の位置を基にDIV要素にIDを設定する

Sample jquery
------------------------------------------------------
  $(document).ready(function(){
    
    $("div").attr("id", function (arr) {
          return "div-id" + arr;
        })
        .each(function () {
          $("span", this).html("(ID = '<b>" + this.id + "</b>')");
        });

  });


CSS
------------------------------------------------------
  div { color:blue; }
  span { color:red; }
  b { font-weight:bolder; }

HTML
------------------------------------------------------
  <div>Zero-th <span></span></div>
  <div>First <span></span></div>
  <div>Second <span></span></div>





□  removeattr( name )
Remove an attribute from each of the matched elements.
各要素から、属性を削除する

Clicking the button enables the input next to it.

Sample jquery
------------------------------------------------------
  $(document).ready(function(){
    
    $("button").click(function () {
      $(this).next().removeAttr("disabled")
             .focus()
             .val("editable now");
    });

  });

CSS
------------------------------------------------------
HTML
------------------------------------------------------
<button>Enable</button>
<input type="text" disabled="disabled" value="can't edit this" />








 [Class:] ////////////////////////////////////////////////////////////////

addClass( class )
Adds the specified class(es) to each of the set of matched elements.
各要素にセットされたクラスへ指定したクラスを追加する

Sample jquery
------------------------------------------------------
  $(document).ready(function(){
    $("p:last").addClass("selected");
  });
CSS
------------------------------------------------------
  p { margin: 8px; font-size:16px; }
  .selected { color:blue; }
  .highlight { background:yellow; }

HTML
------------------------------------------------------
  <p>Hello</p>
  <p>and</p>
  <p>Goodbye</p>






□  hasClass( class )
Returns true if the specified class is present on at least one of the set of matched elements.
要素のクラスに、指定のクラスがひとつ以上存在する場合、値にtrueを返す

Looks for the class 'selected' on the matched elements.
ターゲット要素に、特定の要素を追加し、指定クラスを持っていた場合
"true" か "false" の文字列を返します。

Sample jquery
------------------------------------------------------
$(document).ready(function(){
        $("div#result1").append($("p:first").hasClass("selected").toString());
        $("div#result2").append($("p:last").hasClass("selected").toString());
        $("div#result3").append($("p").hasClass("selected").toString());
});

CSS
------------------------------------------------------
  p { margin: 8px; font-size:16px; }
  .selected { color:red; }
  .highlight { background:yellow; }

HTML
------------------------------------------------------
  <p>Hello</p>
  <p class="selected">Goodbye</p>
  <div id="result1">First paragraph has selected class: </div>
  <div id="result2">Last paragraph has selected class: </div>
  <div id="result3">Some paragraph has selected class: </div>






□  removeClass( class )
Removes all or the specified class(es) from the set of matched elements.

Remove the class 'blue' from the matched elements.
一致した要素から blueクラスを取り除く

Sample jquery
------------------------------------------------------
  $(document).ready(function(){
    $("p:even").removeClass("blue");
  });

CSS
------------------------------------------------------
  p { margin: 4px; font-size:16px; font-weight:bolder; }
  .blue { color:blue; }
  .under { text-decoration:underline; }
  .highlight { background:yellow; }

HTML
------------------------------------------------------
  <p class="blue under">Hello</p>
  <p class="blue under highlight">and</p>
  <p class="blue under">then</p>
  <p class="blue under">Goodbye</p>





□  toggleClass( class )
Adds the specified class if it is not present, removes the specified class if it is present.
ターゲット要素に、指定クラスが存在しなければ追加し、存在すれば取り除く


Toggle the class 'highlight' when a paragraph is clicked.
文節がクリックされた時に、そのクラスをハイライトのON/OFFに切り替える

Sample jquery
------------------------------------------------------
  $(document).ready(function(){
    
    $("p").click(function () {
      $(this).toggleClass("highlight");
    });

  });

CSS
------------------------------------------------------
  p { margin: 4px; font-size:16px; font-weight:bolder; 
      cursor:pointer; }
  .blue { color:blue; }
  .highlight { background:yellow; }


HTML
------------------------------------------------------
  <p class="blue">Click to toggle</p>
  <p class="blue highlight">highlight</p>
  <p class="blue">on these</p>
  <p class="blue">paragraphs</p>





□  toggleClass( class, switch )
New in jQuery 1.3 Adds the specified class if the switch is true
, removes the specified class if the switch is false.

Toggle the class 'highlight' on every third click.
三回クリックされた時に、クラスをハイライトに切り替える

Sample jquery
------------------------------------------------------
  $(document).ready(function(){
    
    var count = 0;
    $("p").click(function(){
      $(this).toggleClass("highlight", count++ % 3 == 0);
    });

  });

CSS
------------------------------------------------------
  p { margin: 4px; font-size:16px; font-weight:bolder; 
      cursor:pointer; }
  .blue { color:blue; }
  .highlight { background:red; }

HTML
------------------------------------------------------
  <p class="blue">Click to toggle</p>
  <p class="blue highlight">highlight</p>
  <p class="blue">on these</p>
  <p class="blue">paragraphs</p>









 [HTML:] ////////////////////////////////////////////////////////////////


□  html( )
Get the html contents (innerHTML) of the first matched element.
This property is not available on XML documents (although it will work for XHTML documents).
最初に一致した要素のHTMLの内容を取り出します。
このプロパティはXHTMLにも利用できますが、XMLでは動作しません

Click a paragraph to convert it from html to text.
クリックした文節のHTMLソースをテキストに変換する

Sample jquery
------------------------------------------------------
  $(document).ready(function(){
    
    $("p").click(function () {
      var htmlStr = $(this).html();
      $(this).text(htmlStr);
    });

  });


CSS
------------------------------------------------------
  p { margin:8px; font-size:20px; color:blue; 
      cursor:pointer; }
  b { text-decoration:underline; }
  button { cursor:pointer; }


HTML
------------------------------------------------------
  <p>
    <b>Click</b> to change the <span id="tag">html</span>
  </p>
  <p>
    to a <span id="text">text</span> node.
  </p>
  <p>
    This <button name="nada">button</button> does nothing.
  </p>








□  html( val )
Set the html contents of every matched element.
This property is not available on XML documents (although it will work for XHTML documents).
一致した要素の全てに、HTMLを設定します。

このプロパティはXHTMLにも利用できますが、XMLでは動作しません

Add some html to each div.
各DIV要素へHTMLを幾つか追加する

Sample jquery
------------------------------------------------------
  $(document).ready(function(){
    $("div").html("<span class='red'>Hello <b>Again</b></span>");
  });

CSS
------------------------------------------------------
  .red { color:red; }

HTML
------------------------------------------------------
  <span>Hello</span>
  <div></div>
  <div></div>
  <div></div>









 [Text:] ////////////////////////////////////////////////////////////////


□  text( )
Get the combined text contents of all matched elements.
一致要素全てのテキスト内容を結合して取り出します

The result is a string that contains the combined text contents of all matched elements.
This method works on both HTML and XML documents. Cannot be used on input elements.
For input field text use the [attribute/val].
結合されたテキスト内容を含む文字列がその結果となります。
このメソッドはHTMLとXML共に動作しますが、INPUT要素には使えません。
入力されたテキストには、attribute/valを使用します。

Find the text in the first paragraph (stripping out the html), then set the html
of the last paragraph to show it is just text (the red bold is gone).
初まりの文節からテキストだけを抜き出し、終わりの文節へ表示させます。


Sample jquery
------------------------------------------------------
  $(document).ready(function(){
    
    var str = $("p:first").text();
    $("p:last").html(str);

  });

CSS
------------------------------------------------------
p { color:blue; margin:8px; }
b { color:red; }

HTML
------------------------------------------------------
<p><b>Test</b> Paragraph.</p>
<p></p>






□  text( val )
Set the text contents of all matched elements.
一致した要素全てのテキスト内容をセットします。

Similar to html(), but escapes HTML (replace "<" and ">" with their HTML entities).
Cannot be used on input elements. For input field text use the val attribute.
html()と似ていますが、HTMLの＜と＞を置き換え、HTMLごとエスケープさせます。
INPUT要素には使えません。入力されたテキストには、attribute/valを使用します。

Add text to the paragraph (notice the bold tag is escaped).
タグをエスケープし文節へテキストを追記する

Sample jquery
------------------------------------------------------
$(document).ready(function(){
    $("p").text("<b>Some</b> new text.");
  });

CSS
------------------------------------------------------
  p { color:blue; margin:8px; }

HTML
------------------------------------------------------
  <p>Test Paragraph.</p>

  ↓

※<p>&lt;b&gt;Some&lt;/b&gt; new text.</p>





 [Value:] ////////////////////////////////////////////////////////////////


□  val( )
Get the input value of the first matched element.
A value is returned for all input elements, including selects and textareas.
 For multiple selects an array of values is returned.
最初に一致した要素のinput value 値を取得し、selects、textarea　を含む、全ての
INPUT要素のvalue 値を返します。選択メニューは、配列の値を返します。

[For selects and checkboxes, see the :selected and :checked selectors, for example: ]
$('select.foo option:selected').val();    // get the value from a dropdown select
$('select.foo').val();                    // get the value from a dropdown select even easier
$('input:checkbox:checked').val();        // get the value from a checked checkbox
$('input:radio[name=bar]:checked').val(); // get the value from a set of radio buttons
==============================================================================================


Get the single value from a single select and an array of values
from a multiple select and display their values.
単一選択から値をひとつ、複数選択からは配列の値を取得し
それらのvalue値を表示させます。

Sample jquery
------------------------------------------------------
  $(document).ready(function(){
    
    function displayVals() {
      var singleValues = $("#single").val();
      var multipleValues = $("#multiple").val() || [];
      $("p").html("<b>Single:</b> " + 
                  singleValues +
                  " <b>Multiple:</b> " + 
                  multipleValues.join(", "));
    }

    $("select").change(displayVals);
    displayVals();

  });


CSS
------------------------------------------------------
  p { color:red; margin:4px; }
  b { color:blue; }

HTML
------------------------------------------------------
  <p></p>
  <select id="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
  <select id="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select>





□  val( val )
Set the value attribute of every matched element.
一致した全ての要素に属性値を設定します。

In jQuery 1.2, this is also able to set the value of select elements,
but selecting the appropriate options.

Set the value of an input box.
インプットボックスのvalue 値を設定する

Sample jquery
------------------------------------------------------
  $(document).ready(function(){
    
    $("button").click(function () {
      var text = $(this).text();
      $("input").val(text);
    });

  });

CSS
------------------------------------------------------
  button { margin:4px; cursor:pointer; }
  input { margin:4px; color:blue; }

HTML
------------------------------------------------------
  <div>
    <button>Feed</button>
    <button>the</button>
    <button>Input</button>
  </div>
  <input type="text" value="click a button" />







□  val( val )
Checks, or selects, all the radio buttons, checkboxes, and select
options that match the set of values.
チェックおよび選択、全部のラジオボタンやチェックボックスと
セレクトオプション等の設定値の一致等

Set a single select and a multiple select .
単一選択と複数選択メニューの設定

Sample jquery
------------------------------------------------------
  $(document).ready(function(){

    $("#single").val("Single2");
    $("#multiple").val(["Multiple2", "Multiple3"]);
    $("input").val(["check1","check2", "radio1" ]);

  });


CSS
------------------------------------------------------
  body { color:blue; }

HTML
------------------------------------------------------
  <select id="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
  <select id="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select><br/>
  <input type="checkbox" name="checkboxname" value="check1"/> check1
  <input type="checkbox" name="checkboxname" value="check2"/> check2
  <input type="radio"  name="r" value="radio1"/> radio1
  <input type="radio"  name="r" value="radio2"/> radio2