思维导图:
1.js&jQurery对比
js (例如):
window.οnlοad=function(){
var btn = document.getElementById("btn");
//给按钮添加点击事件
btn.οnclick=function(){//匿名函数
//拿到文本框的值
var a = document.getElementById("aa").value;
alert(aa);
}
}
jQurey (例如):
<--引入外部js=jQuery的类库-->
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8">
<--另起一个script块-->
$(function(){//相当于window.onload
var b = $("#btnb");//拿到按钮
b.click(function(){//添加点击事件
var a = $("#aa").val();//拿到文本框的值
alert(a);
})
2.基本选择器
//$("#xx").css("background","yellow");//id选择武器
// $(".yy").css({"background":"yellow","color":"red"});//类选择器
// $("div").css("backgroud","pink");//标签选择器=元素选择器
// $("*").css("backgroud","pink");//通配符:全部
// $("p,span").css("background","yellow");//并集
// $("div>span").css("background","yellow");//交集 后代span
// $("div>span").css("background","yellow");//父子关系
//$("p+sapan").css("background","yellow");//兄弟关系
过滤器:
// $("ul>li:first").css("background","yellow");//第一个
// $("ul>li:last").css("background","yellow");//最后一个
// $("ul>li:even").css("background","yellow");//偶数下标
// $("ul>li:odd").css("background","yellow");//奇数下标
// $("ul>li:gt(0)").css("background","yellow");//大于0
// $("ul>li:lt(4)").css("background","yellow");小于4
案例一:使用过滤器让表格隔行变色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</style>
<!-- 引入外部js=jQuery的类库 -->
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<!-- 另起一个script块 -->
<script type="text/javascript">
//页面载入函数 加载DOM
$(function() { //相当于window.onload
$("table tr:even").css("background-color","gold");
$("table tr:odd").css("background-color","aqua");
})
</script>
</head>
<body>
<h4>表格隔行换色</h4>
<table border="1px" width="50%">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
效果展示: