实例
<!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>运行实例 »
点击 "运行实例" 按钮查看在线实例
