js原生domオブジェクトとjQueryオブジェクトを混合して使用できますか?
2878 ワード
前に書く:
本文の主な内容はjs原生domオブジェクトとjQueryオブジェクトの違い,連絡,相互変換,およびピットを踏んだ経験を含む.状況はこのようにして、今日1つのjs検証コードの機能を実現するために、inputの値を取得する必要があります.それから私はjQueryの方法でdomノードを取得して、それから原生jsでinputの値を取得して、結果は間違っていました.今日の踏み込み経験と、ネットで調べた資料を集めて、文章を共有します.
DomオリジナルオブジェクトとjQueryオブジェクトの違い:
1.jqueryセレクタで得られたjqueryオブジェクトと標準javascriptのdocument.getElementById()で取得したdomオブジェクトは2つの異なるオブジェクトタイプであり、両者は等価ではない.
注意:jsがオリジナルで取得したdomはオブジェクトであり、jQueryオブジェクトは配列オブジェクトであり、実際には要素の配列集合を選択します.したがって,両者は異なるオブジェクトタイプで等価ではない.
2.jQueryはDOMオブジェクトのいかなる方法を使用することができず、同じDOMオブジェクトもjQueryの中の方法を使用することができない.むやみに使うと間違いを報告する.
たとえば(文章の下に2つの踏み込み経験があります):
$("#id").html(); document.getElementById("id").innerHTML;IDがidの要素内のhtmlコードを取得する.この2つのコードの結果は同じですが、中間の値取りプロセスは異なります.すなわち、$("#id").innerHTML、document.getElementById("id").html()などの書き方は間違いです.
注:jQueryはjsから派生し、同源に師事するが、jQueryは一連の操作を経て、それを一つ一つ異なる方法にカプセル化し、jQueryを学ぶには正しい観念を確立し、jQueryオブジェクトとDOMオブジェクトの違いをはっきりさせ、その後jQueryを学ぶのは楽になる.
js-domオブジェクトとjQueryオブジェクトの相互変換:
jQueryオブジェクトをDOMオブジェクトに変換---2つの変換方式:[index]と.get(index)1、jQueryオブジェクトはデータオブジェクトであり、[index]の方法(下付きインデックスでdomを探して操作する)でvar$v=$("#v");//jQueryオブジェクトvar v=$v[0];//DOMオブジェクトalert(v.checked)/このcheckboxが選択するかどうかを検出する2、jQuery自身が提供する、通過する.get(index)メソッドは、var$v=$("#v");//jQueryオブジェクトvar v=$v.get(0);//DOMオブジェクトalert(v.checked)/このcheckboxが選択されているかどうかを検出します注:実は両者は同じ理屈です.つまり、インデックスの下付きでdomを探して変換します.
DOMオブジェクトをjQueryオブジェクトに変換する:DOMオブジェクトに対して、$()でDOMオブジェクトを包装するだけで、jQueryオブジェクトを得ることができる:var v=document.getElementById("v");//DOMオブジェクトvar$v=$(v);//jQueryオブジェクト
踏み込み履歴:
今日のエラーの問題:
エラーコード:
正確には:
栗をもう一つ挙げます.
$("#id").innerHTML)、document.getElementById("id").html().
エラーポイント:最初はjqでdomを取得し、jsで操作します.2つ目はjsでdomを取得しjqで操作することです
まとめ
フレームワークのようなものはすべてカプセル化された関数で、中間はいくつかの操作を経験して、中間の値を取る過程も異なるので、私たちがコードを書くときはできるだけ同じ方法で書くようにして、混合して使うことができなくて、たぶん味噌の様子です.
参考資料:Js-DomオリジナルオブジェクトとjQueryオブジェクトの関連、区別、相互変換DOMオブジェクトとjQueryオブジェクトの理解と分析
最后:読み终わった友达が好きになってほしいです.私にも注目してください.今の段阶では、毎月15篇以上の文章はありません(干物を见ても共有します).コードワードは容易ではありませんて、支持に感謝して、感謝して尽きません!ps:現在仕事を待っていて、座標は北京で、推薦の仕事を求めます.それから私がどの方面の文章を书いて下で评论することができることを望んで、あるいは私を信じて、书くのはよくありませんが、しかし私はこれが自分の成长を记录する1种の方式だと思っています.△私ができることを前提にしています.できなければ、私も覚えています.会議が終わったらもっと出ます.掘金個人ホームページ、簡書ホームページリンク、csdnブログホームページリンク、github.
以上です.2017.4.13
本文の主な内容はjs原生domオブジェクトとjQueryオブジェクトの違い,連絡,相互変換,およびピットを踏んだ経験を含む.状況はこのようにして、今日1つのjs検証コードの機能を実現するために、inputの値を取得する必要があります.それから私はjQueryの方法でdomノードを取得して、それから原生jsでinputの値を取得して、結果は間違っていました.今日の踏み込み経験と、ネットで調べた資料を集めて、文章を共有します.
DomオリジナルオブジェクトとjQueryオブジェクトの違い:
1.jqueryセレクタで得られたjqueryオブジェクトと標準javascriptのdocument.getElementById()で取得したdomオブジェクトは2つの異なるオブジェクトタイプであり、両者は等価ではない.
注意:jsがオリジナルで取得したdomはオブジェクトであり、jQueryオブジェクトは配列オブジェクトであり、実際には要素の配列集合を選択します.したがって,両者は異なるオブジェクトタイプで等価ではない.
2.jQueryはDOMオブジェクトのいかなる方法を使用することができず、同じDOMオブジェクトもjQueryの中の方法を使用することができない.むやみに使うと間違いを報告する.
たとえば(文章の下に2つの踏み込み経験があります):
$("#id").html(); document.getElementById("id").innerHTML;IDがidの要素内のhtmlコードを取得する.この2つのコードの結果は同じですが、中間の値取りプロセスは異なります.すなわち、$("#id").innerHTML、document.getElementById("id").html()などの書き方は間違いです.
注:jQueryはjsから派生し、同源に師事するが、jQueryは一連の操作を経て、それを一つ一つ異なる方法にカプセル化し、jQueryを学ぶには正しい観念を確立し、jQueryオブジェクトとDOMオブジェクトの違いをはっきりさせ、その後jQueryを学ぶのは楽になる.
js-domオブジェクトとjQueryオブジェクトの相互変換:
jQueryオブジェクトをDOMオブジェクトに変換---2つの変換方式:[index]と.get(index)1、jQueryオブジェクトはデータオブジェクトであり、[index]の方法(下付きインデックスでdomを探して操作する)でvar$v=$("#v");//jQueryオブジェクトvar v=$v[0];//DOMオブジェクトalert(v.checked)/このcheckboxが選択するかどうかを検出する2、jQuery自身が提供する、通過する.get(index)メソッドは、var$v=$("#v");//jQueryオブジェクトvar v=$v.get(0);//DOMオブジェクトalert(v.checked)/このcheckboxが選択されているかどうかを検出します注:実は両者は同じ理屈です.つまり、インデックスの下付きでdomを探して変換します.
DOMオブジェクトをjQueryオブジェクトに変換する:DOMオブジェクトに対して、$()でDOMオブジェクトを包装するだけで、jQueryオブジェクトを得ることができる:var v=document.getElementById("v");//DOMオブジェクトvar$v=$(v);//jQueryオブジェクト
踏み込み履歴:
今日のエラーの問題:
エラーコード:
var randomCode=$("#js5-authCode").value;// jq dom， js 。
//console ， undefined。正確には:
var randomCode=$("#js5-authCode").val();// val() jq 。栗をもう一つ挙げます.
$("#id").innerHTML)、document.getElementById("id").html().
エラーポイント:最初はjqでdomを取得し、jsで操作します.2つ目はjsでdomを取得しjqで操作することです
まとめ
フレームワークのようなものはすべてカプセル化された関数で、中間はいくつかの操作を経験して、中間の値を取る過程も異なるので、私たちがコードを書くときはできるだけ同じ方法で書くようにして、混合して使うことができなくて、たぶん味噌の様子です.
参考資料:Js-DomオリジナルオブジェクトとjQueryオブジェクトの関連、区別、相互変換DOMオブジェクトとjQueryオブジェクトの理解と分析
最后:読み终わった友达が好きになってほしいです.私にも注目してください.今の段阶では、毎月15篇以上の文章はありません(干物を见ても共有します).コードワードは容易ではありませんて、支持に感謝して、感謝して尽きません!ps:現在仕事を待っていて、座標は北京で、推薦の仕事を求めます.それから私がどの方面の文章を书いて下で评论することができることを望んで、あるいは私を信じて、书くのはよくありませんが、しかし私はこれが自分の成长を记录する1种の方式だと思っています.△私ができることを前提にしています.できなければ、私も覚えています.会議が終わったらもっと出ます.掘金個人ホームページ、簡書ホームページリンク、csdnブログホームページリンク、github.
以上です.2017.4.13