>>245
> なにそのくそ仕様誰得なの？

もともとdata-*属性なんてなかった
jQueryのdataの方が先に作られた

jQueryのdataはdata-*属性を書き換えるものじゃない。
メモリの中に要素に関連づいたデータを持たせるためのもの
だからdata-*属性ではもたせられないようなオブジェクトでも持たせられる
data-*は属性はjQueryのdataの初期値としても使われるってだけの話

そしてdata-*属性は、属性なのだからattrメソッドで操作すれば良い

>>247
> 何のためにjQuery使ってんの？ってこと

jQueryオブジェクトのためだよ
別にdataメソッドのためじゃない

>>247
> $(el).attr('style', 'color: red; background-color: black;');
> なんて面倒なことやらないだろ？
> $(el).css({'color': 'red', 'background-color': 'black'});
> こうするだろ？

面倒くさい以前に意味が違ってる。
前者はstyle属性まるまる入れ替え。値を文字列としてそのまま使う

後者はJavaScriptからみたstyleプロパティの値。
既存のスタイルを残して、指定したものだけ置き換えるだけ

例えばこういうHTMLがあって
<span id="id" style="color: #000">red</span>

attrで取得したときは 'color: #000' が返ってくるが
cssメソッドだとcolorの値は 'rgb(0, 0, 0)' となる。

attrとcssは本来は目的によって使い分けるもの
ただstyleの場合、属性として読み書きすることが少ないってだけ

>>251
大変勉強になりました。くそ仕様とか言ってごめんなさいm(_ _)m

>>253
>>247はそんなことを言ってるんじゃないだろ？
$(el).css('color', 'red');
$(el).hover(
function(){ $(this).attr('style', 'color: blue;'); },
function(){ $(this).attr('style', 'color: red;');}
);
なんてやらないだろ？ってことだろ

>>255
だって、それだとstyleについているかも知れない
color以外のものまで変わってしまうじゃん

そういう将来的に不具合の元になるような
ことはやらないよ。それが>>253に書いて有ることだよ

>>256
attr()は単なる文字列操作
css()はハッシュ関数で値を操作できる
どちらが有利かということだろ

>>257
違う

attr()はその名の通り要素の属性値を変更するもの
DOM APIで言えばsetAttribute/getAttribute相当のもの

それに対してcss()は、要素の属性値ではなくDOMのstyleプロパティの値を読み書きしている
style属性とstyleプロパティは、そのまま一対一で対応しているわけではない

例えば <span style="background: border-box">と属性で指定した時、
element.style.backgroundColor は initialとなる。属性には何も書いていないのに設定される

さらにcss()による読み込みは単純にstyleプロパティを読み込むだけじゃなく
window.getComputedStyle() を使って最終的なスタイル情報を取得している。

具体的に言うと span { color: red } 、<span style="background-color: blue">
とあった時、attrでは"background-color: blue"としかわからずcolorがredであることは分からないが、
css()ではcolorがred（正確にはChromeではrgb(255,0,0)）ということがわかる

またcss()による設定もDOM API的にはelement.style.color = 'red' のような形で実行される
それが最終的に要素の属性に反映されるのだろうがそれはブラウザがやっていることで、どういう属性になるかは不明
例えば .css({borderTop: '1px', borderBottom: '1px', borderLeft: '1px', borderRight: '1px'}) とすると
style="border-width: 1px; border-style: initial; border-color: initial;" となった（Chromeの場合）

またcss()は一部のプロパティに対してはベンダープレフィックスを自動的に追加する機能も持っている

まとめるとattr()は要素の属性をそのまま読み書きするもので、
css()は、読み込みはDOMが解釈した要素の（実際の）スタイルを読み書きし
要素の属性をそのまま読み込んだり反映したりしているわけではない

要素の属性をそのまま変えたいときはattr(), DOMのstyleプロパティとして変えたいときはcss()
使う目的が違っている

>>251
>data-*属性ではもたせられないようなオブジェクト
とは例えば何でしょうか？
{'plice': '100', 'size': 'L'} のようなオブジェクトならattrメソッドで取得設定できるが関数とかかな？

>>258
ハッシュ(値) 　→ 値
属性(名称)　　→　文字列

これだけのこと

>>259
それ、もたせられないよ。

どの要素にも有るグローバル属性のtitleを使って

$('#id').attr('title', {'plice': '100', 'size': 'L'} );
console.log($('#id').attr('title'));

これで試してみ、 [object Object] という文字列になってしまう

JavaScriptのオブジェクトは、文字列ではないので属性値として使えないからね
（正確には強制的にtoString()が呼び出され文字列に変換してしまう）

>>260
>>258で反論してることを一切無視して
話を戻そうとしても無駄ｗ

お前が言ったそれが間違っていることは>>258に書いた。
それに対して無視すること自体が
お前が間違ってることをお前自身で認めたようなもんだよｗ

>>261
なんで変えてるのでしょうか
そりゃtitleには入れられないでしょうからそれならこれで
$('#id').attr({title,: 'hoge', target: '_blank'});

ようは
$(el).attr('style', 'color: red; background-color: black;');
なんてしないし
$(el).css({'color': 'red', 'background-color': 'black'});
は更に（最終的によほどでないと）しないし、style持ち出すのは話別なんじゃないの、と

>>263
> $('#id').attr({title,: 'hoge', target: '_blank'});

それは、title属性にhogeという文字列を入れる
target属性に_blankという文字列を入れるという意味で
入れてるのは文字列になってる

俺は属性にオブジェクト入れられないって言ってるの

少しは頭使ったら？

ひでえ言い方だな
このスレに向かない人なんだな

だから？ 言い方の話にすり替えないように

それ言ったらこれもだから？だな

>入れてるのは文字列になってる
>俺は属性にオブジェクト入れられない

つーか、やってみればわかるのにな
priceをpliceと書き間違えるようなやつじゃ無理かｗ

var hash = {price: 100, size: "L"};

$('#id').data('value', hash);
console.log($('#id').data('value')); // => {price: 100, size: "L"}

$('#id').attr('data-value', hash );
console.log($('#id').attr('data-value')); => [object Object]


HTML属性用のattrだと文字列化されるからハッシュを入れることはできない



↓はおまけ。attrだと文字列化されるから数値を入れても文字列に変えられてしまう

$('#id').data(hash);
console.log(typeof $('#id').data('price')); => number

$('#id').attr(hash); // data-を付けずに、price属性、size属性を作ってるからHTML5的には違反
console.log(typeof $('#id').attr('price')); => string

>>268
attrでは属性にオブジェクトは入れられないよ
>>269で証明済み

JSONで出し入れすればできる
強引だが

でそのdata-*やら属性やらが「classよりいい」と関係してるのかね？
toggleClassや他のclassの削除はスルーなんかな

それはJSONを使ってオブジェクトを文字列にすればって意味なので
属性にオブジェクトを入れてることにはならない

加えてJSON文字列に文字列化（シリアライズ）できないものや
情報が失われてしまうものがオブジェクトに
含まれている場合にもやっぱり対応できない

例えば関数とか日付型とかDOM要素とか。
JSONを拡張して頑張れば、少しはましになるかもしれないけど
DOM要素のシリアライズとかまず無理だろうね

>>272
> でそのdata-*やら属性やらが「classよりいい」と関係してるのかね？
誤解されるような書き方をするな。わざとか？

> toggleClassや他のclassの削除はスルーなんかな
すでに回答済みだったはずだが？



もう一回書いてやると、
<span class="button color-white size-M">
みたいな書き方をしていて、colorは全12色みたいにもっと色があって
sizeにもS, M, L, LL みたいに複数サイズがあったとする

これをclassを操作して
<span class="button color-red size-l">
のように変えるのは大変。コード側に全ての色を定義して一旦全部
removeClassするか、全てのクラス値を列挙してプリフィックスで見分けるようなコードが必要になる

そういう使い方の場合、data-*属性のほうが、classを使うより良いという話

<span class="button" data-color="white" data-size="M"> を
<span class="button" data-color="red" data-size="L"> に書き換えるならば
$(…).attr({"data-color": "red", "data-size": "L"}) これだけで終わり


こういう話が先にあって、その流れでdata-*やら属性やらが「classよりいい」と言ってる

propっていう関数もなかったっけ？
あれはどういうときに使うべき？
使い分けの方針を教えてください。

>少しは頭使ったら？
>priceをpliceと書き間違えるようなやつじゃ無理かｗ

こういう余計なこと書かなきゃいいのに
それで嫌われてるんだろうな

あ、自分で部下に頼れると自慢してた人かな？ｗ

頼れる→頼られる

>>261
$('#hoge').attr({'data-price': '100', 'data-size': 'L'});
alert($('#hoge').attr('data-price'));

「1つの属性に」オブジェクトを入れられないということでいいですよね

>>265
入れられないというか同時設定できるだけということでいいですよね
http://semooh.jp/jquery/api/attributes/attr/properties/

>>278
> 「1つの属性に」オブジェクトを入れられないということでいいですよね

最初からそう言ってる。属性は文字列しか受け付けられないから
オブジェクトを入れようとしても文字列化される

data()メソッドはもともと要素に紐付いたデータを保存するための仕組みで
オブジェクト等自由に入れることができる。

data()メソッドはdata-*属性と無関係・・・と言いたいところだが
data()メソッドの初期値として利用される。だけどそれだけ。
基本的にはdata()メソッドはdata-*属性を読み書きするものじゃない


> 入れられないというか同時設定できるだけということでいいですよね
複数の属性に同時設定できるという機能を、属性にオブジェクトを代入できると
勘違いしてしまったかわいそうな人がいるという話。

何も言うが属性にはオブジェクト入れられない。入れられるのは文字列だけ。
だからattr()メソッドを使って複数の属性に値を入れようとしても、
入れられるのは文字列だけ。値がオブジェクトだと当然設定することはできない。

つまり
$('#hoge').attr({'data-price': {yen: 100, doller: 1.2}, 'data-size': 'L'});
みたいに、属性の値がオブジェクトになっていれば当然入れることはできない

なるほど、attrで設定できるのは文字列だけってことだな

>>262
<el data-*= 'value'>
$(el).data('value')
この値の扱いの違い例えてを言ってやって上げてるのに
おまえのオツムでは理解できないみたいだね

<el data-*= 'value'>　ってなんだ？

まさか * がいろんな文字を意味するってことすら
分かってないのか？

ちょっとかわいそうなんで>>281に教えてあげると

$(el).data('value') で（あくまで初期値としてだが）
読み取るのはdata-value属性
data-*属性ではない。

data-valueという属性の名前になるんだよ

jQuery良く出来てるわー

>>279
>>259=>>278ですがどうも
それまでの他の書き込みに惑わされました
pliceは指摘ありがと（きついけど）

結論としては、attrメソッドは属性に文字列を設定するものだから
当然オブジェクト入れられない、入れようとしても文字列化されるので
実質意味がない。

それに対してdataメソッドは内部的に要素に関連したデータを
持たせる物。だから文字列以外のオブジェクトをもたせることができる
同じdataで惑わされているようだが、attr(data-*)とdata(*)は
本質的には別物

pliceといえばspliceとsliceでいつも混乱します。どうやって覚えたらいいですか？そもそもスライスは分かるけどspliceってどういう意味ですか？
APIにマイナーな英単語使うなや糞メリケンファック

>>283
ああ、お前さんも分かっちゃいない

>>288
わかってるお前が解説しろ

本当に分かってないのはお前だろうからさ

>>286
>>279の
>$('#hoge').attr({'data-price': {yen: 100, doller: 1.2}, 'data-size': 'L'});
>みたいに、属性の値がオブジェクトになっていれば当然入れることはできない
は（私は最初から）ｏｋですが、とすると

>>208の
>例えば、class="black white red yellow"
なんてことはせず、するなら例えば
class="black m cotton"
である場合、208のグループ化にメリットありますか？

prop()との使い分けは？ねぇねぇ

>>291
自分で調べてなかったの？

attrはHTMLの属性を読み書きするもの
propはHTMLの属性ではなくDOMのプロパティを読み書きするもの

DOMのプロパティを読み書きした結果、属性に反映されるかも知れないが
それはブラウザが勝手にやっていること

なので例えばchecked属性が空の時でも、attrで読み取るとundefiendであるが
DOMプロパティ的にはfalseなのでpropを使うとfalseになる

参照先がHTMLの属性かDOMのプロパティかの違いだよ
その点でattr()メソッドとcss()メソッドの関係と似ているね。

>>290

> なんてことはせず、するなら例えば
> class="black m cotton"
> である場合、


どういう意味？ まず日本語

>>293
>>189のような場合は別として各classがかぶらない
blackはredやgreenになり、mはlやsになり
blackはmがあろうがなかろうが何の値だろうが関係なく、mもしかり

という場合です

>>292
わーいありがとう

>>294
> blackはredやgreenになり

それをclassで実現するの大変なんだわ

だって、"hoge black" とかあって、
この内blackだけをredにするわけだろ？

この時、blackとred以外にどんな色があるかは不明とする。
またhogeはhoge以外にもどんなものが来るかは不明とする

この場合に、blackをredにする方法、どういうのがある？

>>296
私ではありませんが>>153や>>140とか
でも前者はmyTagsをいじるのかえって大変ですね

>>297
そういうこと。それに比べてdata-*属性を使えば
単純な一メソッド呼び出しで完結してしまう

それが合理的な方法であることは分かったけど>>140には「.aaaに動的に付けたclass(bbb ccc ddd・・・)の削除や付け直しを一括でしたく」って書いてあるから質問に対する答えになってなくね？
結局>>140に対する回答はどうなるの？

>>299
回答なら書いてあるじゃん

142 名前：Name_Not_Found[sage] 投稿日：2018/01/28(日) 11:50:24.50 ID:???
>>140
それだと静的に付けたclassまで消えちゃうじゃん

143 名前：Name_Not_Found[sage] 投稿日：2018/01/28(日) 17:27:37.90 ID:???
>>142
そうなんだけど・・・の管理が面倒で
変更の度にそこも付け加えなくてはならなくて
最初つけるclassは1,2個と少ないので楽かなと