首頁  >  文章  >  web前端  >  如何將JS物件與jQuery物件進行相互轉換

如何將JS物件與jQuery物件進行相互轉換

autoload
autoload原創
2021-04-19 10:48:482254瀏覽

   如何將JS物件與jQuery物件進行相互轉換

     jQuery是一個快速且簡潔的JavaScript框架,對JS的一些操作進行了簡化,但是隨著JS原生的強化,JS也有一些jQuery無法達到的便利性,有些場景還是更適用於JS,所有有時就需要在JS物件和jQuery物件之間進行轉換,本文就帶大家一起來看看。

1.jQuery物件轉換為JS原生物件

#
<body>
    <ul class="list">
        <li class="item">item1</li>
        <li class="item">item2</li>
        <li class="item">item3</li>
        <li class="item">item4</li>
        <li class="item">item5</li>
    </ul>
      <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
      <script>
          console.log($(".list .item"));
          //任何一个$()返回的都是一个jQuery集合对象
          //整体集合是一个jQuery对象,但是集合中每个成员都是原生js对象
          //第一个li本身就是原生js对象
          $(&#39;.list .item&#39;)[0].style.backgroundColor="yellow";
          //使用jQuery封装的另一个方法
          $(&#39;.list .item&#39;).get(2).style.backgroundColor="lightgreen";
      </script>
</body>

2.JS物件轉換為jQuery物件

<body>
       <ul class="list">
           <li class="item">item1</li>
           <li class="item">item2</li>
           <li class="item">item3</li>
           <li class="item">item4</li>
           <li class="item">item5</li>
       </ul>
       <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
       <script>
            console.log($(document.body) instanceof jQuery);//返回为true
        </script>

推薦:《2021年js面試題目及答案(大總結)

以上是如何將JS物件與jQuery物件進行相互轉換的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn