一.引言-复习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>
三.jquery自创选择器1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<span>111</span>
<span>222</span>
<span>333</span>
<span>444</span>
<span>555</span>
<script src="js/jquery.js"></script>
<script>
//jquery不仅可以使用CSS选择器 也有自带的选择器
// :eq(xxx)选择器 表示获取第xxx个 0表示第一个
// $("span:eq(4)").text("~~~")
// :lt(xxx)选择器 表示获取小于xxx的元素 0表示第一个
// $("span:lt(4)").text("~~~")
// :gt(xxx)选择器 表示获取大于xxx的元素 0表示第一个
// $("span:gt(2)").text("~~~")
// :not选择器--> 表示获取除了指定位置外的其他元素
// $("span:not(:gt(2))").text("~~~");
</script>
</body>
</html>
四.无聊小案例.1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
float: left;
margin-left: 20px;
}
</style>
</head>
<body>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<script src="js/jquery.js"></script>
<script>
//div的特点: 默认高根据内容来 默认宽 :默认100% 所以块级元素 div hr p
//div
//在页面上绘制5个div 宽高各位100px 排成一行
setInterval(function(){
if( $("div:eq(2)").css("background-color") =="rgb(255, 0, 0)" ){
$("div:eq(2)").css("background-color" , "yellow");
$("div:not(:eq(2))").css("background-color" , "red");
}else{
$("div:eq(2)").css("background-color" , "red");
$("div:not(:eq(2))").css("background-color" , "yellow");
}
},1000);
</script>
</body>
</html>
五.jquery自创选择器2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
float: left;
margin-left: 20px;
}
</style>
</head>
<body>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<script src="js/jquery.js"></script>
<script>
//:even选择器 获取下标为偶数
$("div:even").css("background-color","Red");
//:odd选择器 获取下标为为奇数
$("div:odd").css("background-color","blue");
//:first选择器 获取下标为0
$("div:first").css("background-color","yellow");
//:last选择器 获取最后一个
$("div:last").css("background-color","pink");
</script>
</body>
</html>
六.无聊小案例2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<body>
<table border="1px" style="width: 500px;">
<tr>
<td>编号</td>
<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>
扫一扫
4629
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
