Correcting teacher:PHPz
Correction status:qualified
Teacher's comments:
Jquery 是使用js封装的一个库,Jquery 可以在官网下载,也可以在线引用。
作业内容:
1、下载并引用jQuery
官网下载,或在线引用
2、JavaScript
和 jQuery
对比。
js是一门编程语言,JQuery 是js 语言封装的js库,有点在于使用方便,操作dom更加轻松
3、列出 $() 的参数
$(‘.class’);
$(‘div’);
$(function(){ …});
4、列出选择器,并查看效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<ul id="myUl">
<li>
1
<ul class="nav">
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
</ul>
</li>
<li>2
<a href="">点我</a>
</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<script>
// document.querySelector('#myUl').style.color = 'red';
let myUl = document.querySelector('#myUl');// id选择器
myUl.style.color = 'red';
// $('#myUl').css('color','red');// id选择器
let navs = document.querySelector('.nav');// 类选择器
navs.style.color = 'blue';
// $('.nav').css('color','blue');// 类选择器
let tags = document.querySelector('a');// 标签选择器
tags.style.color = 'Chartreuse';
// $('a').css('color','Chartreuse');// 标签选择器
</script>
</body>
</html>