jQuery庫本質上還是JavaScript代碼,它只是對JavaScript語言進行包裝處理,為的是提供更好更方便快捷的DOM處理與開發(fā)中經常使用的功能。我們使用jQuery的同時也能混合JavaScript原生代碼一起使用。在很多場景中,我們需要jQuery與DOM能夠相互的轉換,它們都是可以操作的DOM元素,jQuery是一個類數(shù)組對象,而DOM對象就是一個單獨的DOM元素。
如何把jQuery對象轉成DOM對象?
利用數(shù)組下標的方式讀取到jQuery中的DOM對象
HTML代碼
<div>元素一</div> <div>元素二</div> <div>元素三</div>
JavaScript代碼
var $div = $('div') //jQuery對象 var div = $div[0] //轉化成DOM對象 div.style.color = 'red' //操作dom對象的屬性
用jQuery找到所有的div元素(3個),因為jQuery對象也是一個數(shù)組結構,可以通過數(shù)組下標索引找到第一個div元素,通過返回的div對象,調用它的style屬性修改第一個div元素的顏色。這里需要注意的一點是,數(shù)組的索引是從0開始的,也就是第一個元素下標是0
通過jQuery自帶的get()方法
jQuery對象自身提供一個.get() 方法允許我們直接訪問jQuery對象中相關的DOM節(jié)點,get方法中提供一個元素的索引:
var $div = $('div') //jQuery對象 var div = $div.get(0) //通過get方法,轉化成DOM對象 div.style.color = 'red' //操作dom對象的屬性
其實我們翻開源碼,看看就知道了,get方法就是利用的第一種方式處理的,只是包裝成一個get讓開發(fā)者更直接方便的使用。
在代碼的17行處填寫任務代碼
通過get方法,將jquery對象轉化為dom對象,然后修改dom對象的顏色
var div = $div.get(0); //通過get方法,轉化成DOM對象
請驗證,完成請求
由于請求次數(shù)過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報