HTML:dataカスタム属性で値を渡す

1344 ワード

HTML httml 5 javascript jquery

Data-*プロパティは、プライベートページ後に適用されるカスタムデータを格納するために使用され、すべてのHTML要素にデータを埋め込むことができます.
カスタマイズされたデータは、Ajaxを使用したり、サービス側でデータをクエリーしたりする必要がなく、ページのインタラクティブな体験を向上させることができます.
data-*プロパティは、次の2つのセクションで構成されています.

プロパティ名には大文字は含まれません.data-の後に少なくとも1つの文字が必要です.

この属性は任意の文字列

であることができる.
注:カスタムプロパティ接頭辞「data」はクライアントに無視されます.
構文:

1つの要素にdata属性を割り当ててデータを格納する

在js中设置和获取

var open = document.getElementsByClassName('open');

open.dataset.id = '1';//  

open.onclick = function () {

        alert(this.dataset.id);//  

    }

jqでの設定と取得

  $('.open').click(function () {
        var name = $(this).data("name","word")//  

        var id = $(this).attr("data-id")//  

        //   var id = $(this).data('id')

        console.log(id)
    })

jqにキー/値ペアを含むオブジェクトを設定して、選択された要素にデータを追加することもできます(要素data-*属性にjsonデータを設定する場合は、単一の二重引用符に注意する必要があります.そうしないとundefinedが発生し、データが取得されない可能性があります.正しい方法は二重引用符です.)

dom.data('setObj', JSON.stringify({'name': 'william', 'age': 22}))

取るときは、ただ

var obj = dom.data('setObj')

モバイル端末による検索機能の実現

Python 100例——第五章---不定方程式の解