Correction status:Uncorrected
Teacher's comments:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3.jQuery的工厂函数$()</title> </head> <body> <ul> <li>我是列表项1</li> <li>我是列表项2</li> <li>我是列表项3</li> <li>我是列表项4</li> <li>我是列表项5</li> </ul> </body> </html> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> // 我们的任务:将第一个列表项的背景换成天蓝色 // document.getElementsByTagName('li')[0].style.backgroundColor = "skyblue" // document.getElementsByTagName('li')[0] ==== $('li:first-child') // .style.backgroundColor = 'skyblue' ==== css('background-color','skyblue') // $('li:first-child').css('background-color','lightgreen') //思考:在jQrury调用原生的DOM方法? //$('li:first-child') :将页面中的一个或多个DOM元素打包到一个jq对象中 // $('li:first-child').style.backgroundColor = 'skyblue' // 在jQ对象上不能直接调用DOM方法的,jQ是一个DOM对象的数据 // $('li')[0].style.backgroundColor = 'skyblue' // $('li')[0]:将jQ对象转为DOM对象 // DOM对象,用原生JS可以操作的对象 // $('li').get[0].style.backgroundColor = 'lightgreen' // $('li')[0].style.backgroundColor = 'skyblue' // 原生转jQ?$() :工厂函数 $('li:eq(4)').css('background-color','skyblue') </script>
点击 "运行实例" 按钮查看在线实例