13-3jquery的工厂函数$()

幌菜跨拴趣赫雹需沙愧肝勺赁

任务:将第一个列表项背景换成天蓝色原生js实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></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="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	//任务:将第一个列表项背景换成天蓝色
	document.getElementsByTagName('li')[0].style.backgroundColor="skyblue"
</script>

执行：

13-3jquery的工厂函数$()第1张

任务:将第一个列表项背景换成green用jquery实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></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="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	//任务:将第一个列表项背景换成green
//	替换
//	document.getElementsByTagName('li')[0]==>$('li:first-child')
//	style.backgroundColor="skyblue"==>css('background-color','skyblue')
	$('li:first-child').css("background-color",'green')
</script>

执行：

13-3jquery的工厂函数$()第2张

$(‘li’)[0]将jquery对象转化为dom对象,再使用原生js来实现

什么叫做dom对象？即可以使用原生js操作的对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></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="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
//	将jquery对象转化为dom对象,再使用原生js来实现
	$('li')[0].style.backgroundColor="lightblue"
</script>

执行：

13-3jquery的工厂函数$()第3张

通过get()方法与上方效果一致：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></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="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
//	将jquery对象转化为dom对象,再使用原生js来实现
	$('li').get(0).style.backgroundColor="skyblue"
</script>

执行：

13-3jquery的工厂函数$()第4张

将原生dom元素转jquery对象，工厂函数：$()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></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="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
//	将dom元素转jquery对象  再使用jquery的方法操作
	$('li:eq(4)').css('background-color','skyblue')
</script>

执行：

13-3jquery的工厂函数$()第5张

$('li:first-child') // style.backgroundColor="skyblue"==>css('background-color','skyblue') $('li:first-child').css("background-color",'green') 执行：$(‘li’)[0]将jquery对象转化为dom对象,再使用原生js来实现什么叫做dom对象？即可以使用原生js操作的对象我是列表项1 我是列表项2 我是列表项3 我是列表项4 我是列表项5 // 将jquery对象转化为dom对象,再使用原生js来实现 $('li')[0].style.backgroundColor="lightblue" 执行：通过get()方法与上方效果一致：我是列表项1 我是列表项2 我是列表项3 我是列表项4 我是列表项5 // 将jquery对象转化为dom对象,再使用原生js来实现 $('li').get(0).style.backgroundColor="skyblue" 执行：将原生dom元素转jquery对象，工厂函数：$() 我是列表项1 我是列表项2 我是列表项3 我是列表项4 我是列表项5 // 将dom元素转jquery对象再使用jquery的方法操作 $('li:eq(4)').css('background-color','skyblue') 执行：querys4954t0.html" rel="tag" style="border:1px solid lightgray; background:#ddd;">任务:将第一个列表项背景换成天蓝色原生js实现：我是列表项1 我是列表项2 我是列表项3 我是列表项4 我是列表项5 //任务:将第一个列表项背景换成天蓝色 document.getElementsByTagName('li')[0].style.backgroundColor="skyblue" 执行：任务:将第一个列表项背景换成green用jquery实现我是列表项1 我是列表项2 我是列表项3 我是列表项4 我是列表项5 //任务:将第一个列表项背景换成green // 替换 // document.getElementsByTagName('li')[0]==>$('li:first-child') // style.backgroundColor="skyblue"==>css('background-color','skyblue') $('li:first-child').css("background-color",'green') 执行：$(‘li’)[0]将jquery对象转化为dom对象,再使用原生js来实现什么叫做dom对象？即可以使用原生js操作的对象我是列表项1 我是列表项2 我是列表项3 我是列表项4 我是列表项5 // 将jquery对象转化为dom对象,再使用原生js来实现 $('li')[0].style.backgroundColor="lightblue" 执行：通过get()方法与上方效果一致：我是列表项1 我是列表项2 我是列表项3 我是列表项4 我是列表项5 // 将jquery对象转化为dom对象,再使用原生js来实现 $('li').get(0).style.backgroundColor="skyblue" 执行：将原生dom元素转jquery对象，工厂函数：$() 我是列表项1 我是列表项2 我是列表项3 我是列表项4 我是列表项5 // 将dom元素转jquery对象再使用jquery的方法操作 $('li:eq(4)').css('background-color','skyblue') 执行：

梧贪休软屁哩抚唇韦蒋赴佬懊