我的作业 谢谢老师
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
*{margin: 0px;padding: 0px;}
/* 设置大div和里面嵌套的6个小div */
#div1{width: 900px;height: 600px;background-color: #D8E389;margin: 10px auto;}
.t{float: left;width: 280px;height: 280px;background-color:#FCFCFC; margin: 10px;}
</style>
<title>选择器的练习</title>
</head>
<body>
<script type="text/javascript">
// 文档就绪函数
$(document).ready(function(){
// Button按钮的格式
$('input[type=button]').css({'width':'70px','margin':'5px'})
$("#bt1-1").click(function(){
$("#text1").css('background','red')
})
$('#bt1-2').click(function(){
$('.text2').css('background','red')
})
$('#bt1-3').click(function(){
$('input').css('background','red')
})
$('#bt1-4').click(function(){
$('*').css('background','#fff')
})
$('#bt1-5').click(function(){
$('#div1,input[type=button]').css('background','#D8E389')
})
$('#bt2-1').click(function(){
$('#pre1>input').css('margin','5px')
})
$('#bt2-2').click(function(){
$('#pre1 input').css('background','red')
})
$('#bt2-3').click(function(){
$('#pre1+input').css('background','red')
})
$('#bt2-4').click(function(){
$('#pre1~input').css('background','pink')
})
$('#bt3-1').click(function(){
$('#div3 li:first').css('background','red')
})
$('#bt3-2').click(function(){
$('#div3 li:last').css('background','red')
})
$('#bt3-3').click(function(){
$('#div3 li:gt(3)').css('background','blue')
})
$('#bt3-4').click(function(){
$('#div3 li:lt(5)').css('background','red')
})
$('#bt3-5').click(function(){
$('#div3 li:eq(3)').css('background','green')
})
$('#bt3-6').click(function(){
$('#div3 li:odd').css('background','#fff')
})
$('#bt3-7').click(function(){
$('#div3 li:even').css('background','#0E1112')
})
$('#bt3-8').click(function(){
$('#div3 li:not(.3)').css('background','red')
})
$('#bt4-1').click(function(){
$('#div4 li:contains(b)').css('background','blue')
})
$('#bt4-2').click(function(){
$('#div4-2:has(p)').css('color','green')
})
$('#bt4-3').click(function(){
$('#div4 li:empty').css('background','#ccc')
})
$('#bt4-4').click(function(){
$('#div4 li:parent').css('background','red')
})
$('#bt5-1').click(function(){
$('#div5 input[name]').css('background','pink')
})
$('#bt5-2').click(function(){
$('#div5 input[name=1]').css('background','green')
})
$('#bt5-3').click(function(){
$('#div5-1 input[name!=1]').css('background','blue')
})
$('#bt5-4').click(function(){
$('#div5-1 input[name^=1]').css('background','red')
})
$('#bt5-5').click(function(){
$('#div5-1 input[name$=1]').css('background','#ccc')
})
$('#bt5-6').click(function(){
$('#div5-1 input[name*=3]').css('background','#0E1112')
})
$('#bt5-7').click(function(){
$('#div5-1 input[name*=2][name*=3]').css('background','red')
})
$('#bt6-1').click(function(){
$('#div6-1 input:enabled').attr('disabled','disabled')
})
$('#bt6-2').click(function(){
$('#div6-1 input:disabled').attr('disabled',false)
})
$('#bt6-3').click(function(){
$('#div6-1 :selected').css('background','black')
})
$('#bt6-4').click(function(){
$('#div6-2 :checked').parent().css('background','red')
})
})
</script>
<div id="div1">
<div id="div2">
<pre>
基本选择器<br>
<input type="text"id="text1"><br>
<input type="text"class="text2"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
</pre>
<input type="button" value="id"id="bt1-1">
<input type="button" value="class"id="bt1-2"><br>
<input type="button" value="标签名"id="bt1-3">
<input type="button" value="匹配所有"id="bt1-4">
<input type="button" value="多选择器"id="bt1-5">
</div>
<div>
<pre id="pre1">
层级选择器 <br> <input type="text">
<input type="text">
<input type="text">
<input type="text">
</pre>
<input type="button" value="父>子"id="bt2-1">
<input type="button" value="祖先-后代"id="bt2-2"><br>
<input type="button" value="同级"id="bt2-3">
<input type="button" value="之后所有"id="bt2-4">
</div>
<div id="div3">
顺序选择器
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<input type="button" value="第一个"id="bt3-1">
<input type="button" value="最后"id="bt3-2">
<input type="button" value="大于3的"id="bt3-3">
<input type="button" value="小于5的"id="bt3-4">
<input type="button" value="等于3的"id="bt3-5">
<input type="button" value="奇数"id="bt3-6">
<input type="button" value="偶数"id="bt3-7">
<input type="button" value="非"id="bt3-8">
</div>
<divid="div4">
内容选择器<br>
<div id="div4-1">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li></li>
<li>e</li>
</div>
<div id="div4-2">
<p>111111111111</p>
<p>222222222222</p>
</div>
<input type="button" value="包含b的"id="bt4-1">
<input type="button" value="包含p标签"id="bt4-2">
<input type="button" value="没有内容"id="bt4-3">
<input type="button" value="有内容的"id="bt4-4">
</div>
<divid="div5">
属性选择器<br>
<div id="div5-1">
<input type="text"name="1">
<input type="text"name="11">
<input type="text"name="111">
<input type="text"name="1123">
<input type="text"name="113331"value="">
<input type="text">
<input type="text"name="1">
</div>
<input type="button" value="包含name"id="bt5-1">
<input type="button" value="name=1"id="bt5-2">
<input type="button" value="不等于1的"id="bt5-3">
<input type="button" value="1开始的"id="bt5-4">
<input type="button" value="1结尾的"id="bt5-5">
<input type="button" value="含有3的"id="bt5-6">
<input type="button" value="有3有2的"id="bt5-7">
</div>
<div>
表单选择器
<div id="div6-1">
<input type="text" >
<input type="text" >
<input type="text" >
<input type="text" >
<input type="text" ><br>
<select class="" name="">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option selected>8</option>
</select>
</div>
<div id="div6-2">
<lable><input type="checkbox" checked>1</lable>
<lable><input type="checkbox" checked>2</lable>
<lable><input type="checkbox">3</lable>
</div>
<input type="button" value="禁用"id="bt6-1">
<input type="button" value="激活"id="bt6-2">
<input type="button" value="select元素"id="bt6-3">
<input type="button" value="checkbox"id="bt6-4">
</div>
</div>
</body>
</html>