一.引言-复习CSS选择器
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
CSS选择器: 方便获取HTML的元素
*/
/*
1.标签选择器:直接通过标签名即可获取元素
表示将所有的p标签都设置为红色
*/
p{
color: red;
}
/*
2.类(class)选择器:语法:.xxx 表示获取class为xxx的元素
*/
.a{
font-size: 20px;
}
/*
3.id选择器:语法:#xxx 表示获取id为xxx的元素 注意:确保id在本网页的唯一性
*/
#b{
font-size: 120px;
}
/*
4.群组选择器:语法:xxx,xxx,xxx 通过,分割将所有选择器进行统一操作
例如下面的写法表示:获取id为b class为a的 p标签
*/
#b,.a,p{
font-size: 120px;
}
/*
5.后代选择器:语法:父 子 通过空格获取父下面的所有的子元素包括孙子...
*/
.a1 li{
color: red;
}
/*
6.子代选择器:语法:父>子 通过大于号获取父下面的子元素 只能获取儿子
*/
#aaa>.a{
color: red;
}
</style>
<p class="a">啊啊啊</p>
<p class="a">啊啊啊</p>
<p id="b">啊啊啊</p>
<p class="a">啊啊啊</p>
<p>啊啊啊</p>
<hr>
<ul class="a1">
<li>aa</li>
<li>bb</li>
<li>cc</li>
<li>dd</li>
<li>ee</li>
<span>ff</span>
</ul>
<span id="aaa">
<span class="a">我是儿子a</span>
<span class="a">我是儿子a</span>
<span class="b">我是儿子b
<span class="a">我是孙子a</span>
</span>
</span>
</head>
二.引言jquery对象再讲解
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js"></script>
<script>
$( function(){
let p = $("p").text();
console.log(p);//不会报错,但是无法得到理想值
} );
</script>
</head>
<body>
<p>我是p标签</p>
<script src="js/jquery.js"></script>
<script>
$("p").text("~~~")
//$(xxx) 的相关概念
//jquery中最常见的函数. 有2个作用:
//1. 作为元素选择器 来获取元素.(修改元素。)
// 只需要要css选择器 通过字符串的形式作为参数传递进行即可
// 例如$("p") 表示获取所有的p标签
// 例如$(".p") 表示获取所有class为p的元素
//2. 预加载函数(文档就绪函数) 先将HTML加载完成 再来执行我 用法:将function作为参数传递即可
//如果可以保证js代码在HTML下方. 就可以不用该函数
</script>
</body>
</html> <td>姓名</td>
<td>年龄</td>
<td>地址</td>
<td>性别</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>22</td>
<td>湖南</td>
<td>男</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>22</td>
<td>湖南</td>
<td>男</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>22</td>
<td>湖南</td>
<td>男</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>22</td>
<td>湖南</td>
<td>男</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>22</td>
<td>湖南</td>
<td>男</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>22</td>
<td>湖南</td>
<td>男</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>22</td>
<td>湖南</td>
<td>男</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>22</td>
<td>湖南</td>
<td>男</td>
</tr>
</table>
<script src="js/jquery.js"></script>
<script>
$("tr:odd").css("background-color","yellow");
$("tr:even").css("background-color","blue");
$("tr:first").css("background-color","Red");
$("tr:last").css("background-color","pink");
</script>
</body>
</html>