惕胯掳千距浆伸扒去婪缕骗百
创建小球样式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1.jquery的工作原理</title>
<style type="text/css">
ul
{
margin: 30px;
padding:10px;
overflow: hidden;
}
li
{
list-style: none;
width:40px;
height:40px;
margin-left:10px;
background: lightblue;
/*文本居中*/
text-align: center;
/*水平居中*/
line-height: 40px;
font-size:1.2em;
/*字体加粗*/
font-weight: border;
float:left;
/*边框圆形*/
border-radius: 50%;
/*阴影*/
box-shadow: 2px 2px 2px #808080;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
执行：
css将第一个小球变为绿色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1.jquery的工作原理</title>
<style type="text/css">
ul
{
margin: 30px;
padding:10px;
overflow: hidden;
}
li
{
list-style: none;
width:40px;
height:40px;
margin-left:10px;
background: lightblue;
/*文本居中*/
text-align: center;
/*水平居中*/
line-height: 40px;
font-size:1.2em;
/*字体加粗*/
font-weight: border;
float:left;
/*边框圆形*/
border-radius: 50%;
/*阴影*/
box-shadow: 2px 2px 2px #808080;
}
/*1.将第一个小球颜色变为绿色*/
li:first-child
{
background-color:lightgreen;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
执行：
javascript将第一个小球变为绿色：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1.jquery的工作原理</title>
<style type="text/css">
ul
{
margin: 30px;
padding:10px;
overflow: hidden;
}
li
{
list-style: none;
width:40px;
height:40px;
margin-left:10px;
background: lightblue;
/*文本居中*/
text-align: center;
/*水平居中*/
line-height: 40px;
font-size:1.2em;
/*字体加粗*/
font-weight: border;
float:left;
/*边框圆形*/
border-radius: 50%;
/*阴影*/
box-shadow: 2px 2px 2px #808080;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
<!--/*1.将第一个小球颜色变为绿色*/-->
<script type="text/javascript">
document.getElementsByTagName('li')[0].style.backgroundColor="lightgreen"
</script>
执行：
javascript中直接使用css选择器选择元素
querySelector():只返回符合条件的一个元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1.jquery的工作原理</title>
<style type="text/css">
ul
{
margin: 30px;
padding:10px;
overflow: hidden;
}
li
{
list-style: none;
width:40px;
height:40px;
margin-left:10px;
background: lightblue;
/*文本居中*/
text-align: center;
/*水平居中*/
line-height: 40px;
font-size:1.2em;
/*字体加粗*/
font-weight: border;
float:left;
/*边框圆形*/
border-radius: 50%;
/*阴影*/
box-shadow: 2px 2px 2px #808080;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
<!--/*1.将第一个小球颜色变为绿色*/-->
<script type="text/javascript">
// querySelector
var li=document.querySelector('li:first-child')
li.style.backgroundColor="lightgreen"
</script>
执行：
css将第4个小球的颜色变为橘红,前景色变为白色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1.jquery的工作原理</title>
<style type="text/css">
ul
{
margin: 30px;
padding:10px;
overflow: hidden;
}
li
{
list-style: none;
width:40px;
height:40px;
margin-left:10px;
background: lightblue;
/*文本居中*/
text-align: center;
/*水平居中*/
line-height: 40px;
font-size:1.2em;
/*字体加粗*/
font-weight: border;
float:left;
/*边框圆形*/
border-radius: 50%;
/*阴影*/
box-shadow: 2px 2px 2px #808080;
}
/*将第4个小球的颜色变为橘红,前景色变为白色*/
li:nth-child(4)
{
background-color: orangered;
color:white;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
执行：
js将第4个小球的颜色变为橘红,前景色变为白色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1.jquery的工作原理</title>
<style type="text/css">
ul
{
margin: 30px;
padding:10px;
overflow: hidden;
}
li
{
list-style: none;
width:40px;
height:40px;
margin-left:10px;
background: lightblue;
/*文本居中*/
text-align: center;
/*水平居中*/
line-height: 40px;
font-size:1.2em;
/*字体加粗*/
font-weight: border;
float:left;
/*边框圆形*/
border-radius: 50%;
/*阴影*/
box-shadow: 2px 2px 2px #808080;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
<script type="text/javascript">
// querySelector
// js将第4个小球的颜色变为橘红,前景色变为白色
var li=document.querySelector('li:nth-child(4)')
li.style.backgroundColor="orangered"
li.style.color="white"
</script>
执行：
css将第四个球后面的所有球变为绿色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1.jquery的工作原理</title>
<style type="text/css">
ul
{
margin: 30px;
padding:10px;
overflow: hidden;
}
li
{
list-style: none;
width:40px;
height:40px;
margin-left:10px;
background: lightblue;
/*文本居中*/
text-align: center;
/*水平居中*/
line-height: 40px;
font-size:1.2em;
/*字体加粗*/
font-weight: border;
float:left;
/*边框圆形*/
border-radius: 50%;
/*阴影*/
box-shadow: 2px 2px 2px #808080;
}
/*css从第四个球开始将所有球变为绿色*/
li:nth-child(4) ~ *
{
background-color:lightgreen ;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
执行：
尝试使用querySelect选中第四个球后面的所有的球：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1.jquery的工作原理</title>
<style type="text/css">
ul
{
margin: 30px;
padding:10px;
overflow: hidden;
}
li
{
list-style: none;
width:40px;
height:40px;
margin-left:10px;
background: lightblue;
/*文本居中*/
text-align: center;
/*水平居中*/
line-height: 40px;
font-size:1.2em;
/*字体加粗*/
font-weight: border;
float:left;
/*边框圆形*/
border-radius: 50%;
/*阴影*/
box-shadow: 2px 2px 2px #808080;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
<script type="text/javascript">
// querySelector
var li=document.querySelector('li:nth-child(4) ~ *')
li.style.backgroundColor="lightgreen"
</script>
执行：
说明：querySelector():只返回符合条件的一个元素
使用querySelectorAll选择，选中的是一个数组，需要循环遍历
数组包含第四个小球后面的6个小球的长度6，即当前获取到6个li,其中的第一个元素就是5即 li[0]选中的是第5个小球
使用querySelectorAll选择，选中的是一个数组，需要循环遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1.jquery的工作原理</title>
<style type="text/css">
ul
{
margin: 30px;
padding:10px;
overflow: hidden;
}
li
{
list-style: none;
width:40px;
height:40px;
margin-left:10px;
background: lightblue;
/*文本居中*/
text-align: center;
/*水平居中*/
line-height: 40px;
font-size:1.2em;
/*字体加粗*/
font-weight: border;
float:left;
/*边框圆形*/
border-radius: 50%;
/*阴影*/
box-shadow: 2px 2px 2px #808080;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
<script type="text/javascript">
// querySelectorAll
var li=document.querySelectorAll('li:nth-child(4) ~ *')
for(var i=0;i<li.length;i++)
{
li[i].style.backgroundColor="lightgreen"
}
</script>
使用jquery改写：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1.jquery的工作原理</title>
<style type="text/css">
ul
{
margin: 30px;
padding:10px;
overflow: hidden;
}
li
{
list-style: none;
width:40px;
height:40px;
margin-left:10px;
background: lightblue;
/*文本居中*/
text-align: center;
/*水平居中*/
line-height: 40px;
font-size:1.2em;
/*字体加粗*/
font-weight: border;
float:left;
/*边框圆形*/
border-radius: 50%;
/*阴影*/
box-shadow: 2px 2px 2px #808080;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
<script type="text/javascript"src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$("li:nth-child(4) ~ *").css('background-color','lightgreen')
</script>
执行：
实际上jquery中的选择器$底层调用的就是querySelectorAll()
总结：
一、如何用css语法来获取元素?
querySelector(),querySelectorAll()
二、jQuery是什么?
一个JavaScirpt类库
三、为什么要用jQuery?
1.各个浏览器之间存在兼容性
2.原生js语法复杂,代码过多
3.jQuery可做到:写得更少,而做得更多
4.我要看懂其它程序员写的jquery代码
四、jQuery的基本编程思想是什么?
1.查询 + 操作
2.基本语法: $(selector).option()
五、工厂函数$()的作用?
创建jQuery对象
六、jQuery的获取方式?
1.官网:jquery.com
2.cdn: 官网,谷歌,百度…
伴多罗烹奖喷滴齐朽教测伯仙