読み込み - javascript jquery 違い




jQueryの$(ドキュメント)のバニラJS相当のものは何ですか? (3)

jQueryの結果セットは、一般的にDOMElement保持するオブジェクトのような配列ですが、jQueryは結果セットのオブジェクトにどのような型があるかを実際には気にしません。 DOMElementsも、jQueryの結果セットに格納されている他の要素も、何らかの形で嘲笑されたりラップされたりすることはありません。結果セットに直接格納されます。 jQueryは、利用可能な関数を見て、それらのオブジェクトに対して何をしなければならないかを調べようとします。

.attrを呼び出すと、jQueryはgetAttribute関数を持っていればセット内の各オブジェクトをチェックします。この場合、関数setAttributeもあるとsetAttributeます。

関数getAttributeがない場合は、関数呼び出しを.prop()関数に転送し、propは内部的に次のようにします。

elem[name] = value

したがって、単純なオブジェクトをjQueryに渡すと、そのプロパティが設定されます。

var a = {  
}

$(a).attr('test', 'hello world');

console.dir(a) // for `a`  the property `test` is set
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

そのオブジェクトにgetAttributeおよびsetAttribute関数を追加すると、jQueryはそれらを呼び出します。

var a = {
  getAttribute() {

  },
  setAttribute() {
    console.log('setAttribute was called')
  }
}

$(a).attr('test', 'hello world');

console.dir(a);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

ただし、jQueryがどのようにこれらのテストを変更するかという方法と順序を常に想定しておく必要があります。 さらに、ドキュメントに明示的に記載されている場合にのみ、それに頼ってください。

私は次のコードのバニラ相当物を理解しようとしています:

$(document).attr('key', 'value');

これまで私は見てきました

  • document - 要素ではないので、 setAttributeを呼び出すことはできません
  • document.documentElement - htmlタグを返します。 これは、jqueryがターゲティングしているのと同じ "要素"ではありません
  • $(document)[0] Chromeのインスペクタでシャドウ要素を返すようです
  • $(document).attr('key', 'somethingUnique')はChrome Inspectorに存在しません

jQueryは、それが実際の要素のように扱うことができるように、ドキュメントのそれ自身のシャドウ要素モックを作成していますか? $(document)を実行するとjQueryが実際に参照する要素は何ですか?


jQueryは値をdocument直接割り当てるだけです。

$(document).attr('test', 'hello world');
console.log(document['test']); // prints "hello world"

私は本当にjQueryがDOM要素をラップしていると思っていました。なぜなら何らかの理由でvar x = $('#x')を書き換えて後で再利用するためです。

それが私が書いた理由です。

はい、それはラップされています

しかし、@ t.nieseのanswer読んだ後、私は試しました

var x = $('#x')
var y = $('#y')

var ref = x[0]
x[0] = y[0] // hack jQuery Object reference to DOM element

setTimeout(() => x.html('1'), 1000) // actually writes in #y
setTimeout(() => x.html('2'), 2000) // actually writes in #y
setTimeout(() => { x.push(ref) }, 2500) // hack jQuery Object reference to DOM element
setTimeout(() => x.html('3'), 3000) // actually writes in both #x and #y

そして、私はvar x = $('#x')ラップされたオブジェクトではなくラップされたオブジェクトであるという理由で書くのではないことを理解しています。

私はAPIのエントリポイントは$だと思ったが、 var api = $()ようなAPIと、 (el) => api.push(el)または(sel) => api.push(document.querySelector(sel))

私は$().pushができますが、 $().forEachはできません$().forEachもシフトもシフトもしませんが、インデックスを削除します

この例では

setTimeout(() => { x.map((item) => {console.log(item)}) }, 3500)

要素ではなく、0と1を記録します。 jQueryバージョン3.3.1を使用してテスト済み







jquery