ホームページ > 記事 > ウェブフロントエンド > $selector -- DOM を jquery オブジェクトにカプセル化する方法
$selector -- DOM を jquery オブジェクトにカプセル化する方法
- jackloveオリジナル
- 2018-06-11 23:01:292328ブラウズ
前書き: jquery に関して話さなければならないのは、jquery の強力なセレクター機能です。この機能は非常に強力で、セレクター機能のみを使用する必要がある友人のためにシズルモジュールが別に分離されています。 (この記事では jquery セレクターの強力な機能については説明しませんが、まず jquery が DOM 要素を jquery オブジェクトにカプセル化する方法について説明します)
1. Dom オブジェクトと jquery オブジェクト
<body> <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script> <p id="box">测试</p> <script> var oBox = document.getElementById('box'); var oBox2 = document.querySelector('#box'); var $Box = $('#box'); console.log(oBox); console.log(oBox2); console.log($Box); </script> </body> </html>
操作結果:
このことから、$() は DOM オブジェクトを jquery オブジェクトにカプセル化し、DOM オブジェクトも jquery[0] に格納されることがわかります。 jquery オブジェクトを DOM オブジェクトに変換するには、jquery[0] または jquery.get(0) を使用するだけでよいと言われるのはこのためです。
2. jquery をシミュレートします -- ID に従って jquery オブジェクトをカプセル化します
まず単純化して、カプセル化のプロセスの一部を見てみましょうjQueryのレートを上げるオブジェクト
<body>
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<p id="box">测试</p>
<script>
var $Box = $('#box');
console.log('这是jquery对象');
console.log($Box);
console.log('------分界线------');
(function(window,undefined){
var jQ = function(selector){
return new jQ.fn.init(selector);
};
jQ.fn = jQ.prototype = {
jquery:'2.0.0', //jquery版本号信息
constructor: jQ, //添加构造器属性
length:0, //初始length属性
selector:'', //初始selector属性
init: function(selector){
var match, elem, rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/;
match = rquickExpr.exec( selector );
//console.log(match); //正则匹配找出id的值
if ( !selector ) { //如果selector为'',null,undefind直接退出操作
return this;
}
elem = document.getElementById(match[2]);
this[0] = elem;
this.context=document;
this.length = 1;
this.selector = selector;
return this;
}
}
jQ.fn.init.prototype = jQ.fn;
window.$$ = jQ;
})( window );
console.log('这是模拟的对象');
console.log($$('#box')); //输出封装的对象
</script>
</body>②出力結果：（Firefoxブラウザで開いたもの）
なお、chromeブラウザでは表示に多少の違いがあります
jquery は配列のようなオブジェクト形式を表示します。
③、分析
上記のコードが理解できない人は、以前に書いた記事[jqueryソースコード]を参照することをお勧めしますソースコードの学習を始める前に解決してください。
正規表現の場合は、ソースコード内の正規表現を直接コピーして、正規表現処理の結果を出力して確認することができます。 3. jquery をシミュレートします -- タグ名に基づいて jquery オブジェクトをカプセル化します
コードに直接移動します
<body>
<ul class="list">
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
<li>测试4</li>
</ul>
<script>
console.log('这是jquery对象');
var aLi1 = $('li');
console.log(aLi1);
console.log('------分界线------');
(function(window,undefined){
var jQ = function(selector,context){
return new jQ.fn.init(selector, context);
};
jQ.fn = jQ.prototype = {
jquery:'2.0.0', //jquery版本号信息
constructor: jQ, //添加构造器属性
length:0, //初始length属性
selector:'', //初始selector属性
init: function(selector, context){
var match, elem;
if ( !selector ) { //如果selector为'',null,undefind直接退出操作
return this;
}
elem = document.getElementsByTagName(selector);
for(var i =0,len=elem.length; i<len; i++){
this[i] = elem[i];
}
this.context=document;
this.length = elem.length;
this.selector = selector;
return this;
}
}
jQ.fn.init.prototype = jQ.fn;
window.$$ = jQ;
})( window );
console.log('这是模拟的对象');
console.log($$('li')); //输出封装的对象
</script>
</body>出力結果:
これは単なるシミュレーションです。JQ の処理は単純ではなく、JQuery も多くの判断を行います (この問題については、次の記事で引き続き説明します) ）。 jquery オブジェクトで prevObject 属性を見つけることもできます。これにより、前のレベルの検索オブジェクトが保存されます。以下の例を見て理解してください。 <body>
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<ul class="list">
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
<li>测试4</li>
</ul>
<script>
var aLi1 = $('li');
console.log(aLi1);
var aLi2 = $('li','.list');
console.log(aLi2);
var aLi3 = $('.list').find('li');
console.log(aLi3);
</script>
</body>
関連する推奨事項:
css3 アニメーション ナビゲーション バー 3D
リクエスト ライブラリの基本的な使用方法
フロントエンドは WeChat 支払いインターフェイスを呼び出します
以上が$selector -- DOM を jquery オブジェクトにカプセル化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。