jQueryの$()
10067 ワード
jQueryオブジェクト
jQueryオブジェクト:jQueryライブラリに付属の方法でページDOM要素を取得するオブジェクトをjQueryオブジェクトと呼び、jQueryオブジェクトを保存する変数は通常$で始まります.
var $userName = $("#user_name");
$userName.val(“Tom”);
jQueryオブジェクトはjQuery独自のオブジェクトであり、DOMオブジェクトのメソッドを使用できません.同じDOMオブジェクトでもjQueryのメソッドは使用できません.
jQueryオブジェクトはDOMオブジェクト1を回転し、2つの方法でjQueryオブジェクトをDOMオブジェクト:DOMオブジェクト:JavaScriptのオリジナルHTML要素オブジェクトに変換できます.jQueryオブジェクトは配列オブジェクトであり、jQueryオブジェクト[index]によって対応するDOMオブジェクトを得ることができる:コード例:
<script type="text/javascript" src="js/jquery-1.8.3.js"/>
<input type="text" name="name" id="name" value="admin"/>
<script>
/*var element = document.getElementById("name");
console.log(element.value);*/
console.log($("#name").val());
console.log($("#name"));//jQuery
console.log($("#name")[0]);//jQuery JavaScript HTML
/*element = $("#name").get(0);// $("#name")[0]*/
console.log(document.getElementById("name"));//JavaScript HTML
console.log($(document.getElementById("name")));//jQuery
</script>
</code></pre>
<p>2、 jQuery get(index) DOM </p>
<pre><code><span class="token doctype">
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"/>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>js/jquery-1.8.3.js<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token script language-javascript"/><span class="token tag"><span class="token tag"><span class="token punctuation"/>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"/>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>admin<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#name"</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//jQuery JavaScript HTML </span>
<span class="token keyword">var</span> element <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#name"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// $("#name")[0]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>element<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation"/>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"/>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"/>html</span><span class="token punctuation">></span></span>
</span></code></pre>
<h2>DOM jQuery </h2>
<p> $(DOM ) DOM jQuery ：</p>
<pre><code><script>
$(“#user_name").val("Tom");
$(document.getElementById("user_name")).val("Tom");
</script>
</code></pre>
<p> 。</p>
<p> ：</p>
<pre><code>
<meta charset="UTF-8"/>
<title/>
<script type="text/javascript" src="js/jquery-1.8.3.js"/>
<input type="text" name="user_name" id="name" value="admin"/>
<script>
$("#user_name").val("Tom");
$(document.getElementById("user_name")).val("Tom");
console.log($("#user_name"));
console.log($("#user_name").val("Tom"));
console.log($(document.getElementById("user_name")).val("Tom"));
</script>
</code></pre>
</div>
</div>
</div>
</div>