JQuery獲取對象的方式介紹
一、引用
官網(wǎng)下載對應的jquery版本文件,在需要用到jquery的地方,用script標簽引入進來
<head> <script src="jquery-1.10.2.min.js"></script> </head>
二、獲取對象
獲取元素包裝集對象
<body> <div id="div1"> hello </div> <script type="text/javascript"> //獲取元素包裝集對象 var div1 = $("#div1"); console.log(div1); console.log(div1[0].innerText); </script> </body>
DOM對象獲取
通過document.getElementById("id屬性值")獲取
如果元素不存在,則獲取的是null
<body> <div id="div1">塊級元素</div> <script type="text/javascript"> //獲取dom對象 var divDom = document.getElementById("div1"); var divDom2 = document.getElementById("div2"); console.log(document.getElementById("div1")); console.log(divDom2);//null </script> </body>
Jquery包裝集對象
$("#id屬性值");獲取
如果元素不存在,不會返回null,是一個空的結果集
<body> <div id="div1">塊級元素</div> <script type="text/javascript"> //jquery包裝集對象 var divJquery = $("#div1"); var divJquery2 = $("#div2"); console.log(divJquery); console.log(divJquery2); console.log(divJquery.length); console.log(divJquery2.length); </script> </body>
Dom轉換成jquery包裝集對象
$("dom對象");將需要轉換的內容(dom對象/標簽體)放入$("內容")中
<body> <div id="div1">塊級元素</div> <script type="text/javascript"> var divDom = document.getElementById("div1"); //Dom轉換成jquery包裝集對象 console.log($(divDom)); var span = "<span>行內元素</span>"; console.log($(span)); </script> </body>
Jquery包裝集對象轉換成Dom
jquery對象[下標] 可以直接獲取到其中的dom對象
<body> <div id="div1">塊級元素</div> <script type="text/javascript"> //jquery包裝集對象 轉換成Dom var newDom = divJquery[0]; console.log(newDom); $('#div1').each(function() {//遍歷 console.log($(this)); console.log(this); }); </script> </body>
到此這篇關于JQuery獲取對象的文章就介紹到這了。希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Jquery.TreeView結合ASP.Net和數(shù)據(jù)庫生成菜單導航條
在網(wǎng)上瀏覽了許多關于利用Jquery.TreeView插件生成樹的例子!但是大多數(shù)都沒有結合數(shù)據(jù)庫來生成樹,很難運用到實際項目中!2010-08-08jquery實現(xiàn)的Accordion折疊面板效果代碼
這篇文章主要介紹了jquery實現(xiàn)的Accordion折疊面板效果代碼,通過jquery鼠標click事件操作頁面元素樣式動態(tài)變換實現(xiàn)手風琴折疊效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09使用jQuery Rotare實現(xiàn)微信大轉盤抽獎功能
本文主要介紹使用jQuery Rotare實現(xiàn)微信大轉盤抽獎功能,并附實例講解,非常實用,有需要的朋友可以參考一下。2016-06-06Bootstrap 時間日歷插件bootstrap-datetimepicker配置與應用小結
這篇文章主要介紹了Bootstrap 時間日歷插件bootstrap-datetimepicker配置與應用小結,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05