JQ选择器作业和自己的小案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery选择器</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
div{width: 120px;height: 80px;background: #ccc;margin-top: 20px;color:#ffffff;text-align: center;}
/* button{width: 100px;height: 30px;border: none;border-radius: 5px;color:#ffffff;font-size: 15px;}*/
</style>
</head>
<body>
<script type="text/javascript">
/*2-1 基本选择器
语法
$('#id名')根据id来匹配元素
$('.class名')根据class来匹配元素
$('element')根据给定的标签名来匹配元素
$('*')匹配所有元素
$('#id,.class名,element')匹配到页面中多个选择器
自己做的
$(document).ready(function(){
$('#bt1').click(function(){
$('div').css('background','#2576f0')
});
$('#bt2').click(function(){
$('div').css('background','#f53d3d')
});
$('#bt3').click(function(){
$('div').css('background','#ff5809')
});
$('#bt4').click(function(){
$('div').css('background','#2ccf62')
});
});
$(document).ready(function(){
$('.box').css('background','blue')
$('span').css('font-size','30px')
$('*').css('font-family','宋体')
$('#box,.box,span').css('color','pink')
})*/
/*2-2 层级选择器(相当于父类和子类的元素关系)
给定的父级元素下匹配所有的子元素:$('父级元素 > 子级元素')
给定的祖先元素下匹配所有的后台元素:$('祖先元素 后代元素')
匹配紧跟在prev元素后面的next元素:$('prev + next')(同级的元素)
匹配prev元素后面所有的siblings元素:$('prev ~ siblings')*/
/*$(document).ready(function(){
$('ul>li').css('list-style','none')
$('ul li').css('list-style','none')
$('label+input').css('height','50px')
$('label~input').css('height','50px')
$('label~input').css('background','pink')
}) */
/*2-3 顺序选择器
1、顺序
$(':first')第一个元素
$(':last')最后一个元素
2、比较
$(':gt(x)')表示大于值x的元素
$(':lt(x)')表示小于值x的元素
$(':eq(x)')表示等于值x的元素
3、奇偶数
$(':odd')奇数排序
$(':even')偶数排序
4、非
$(':not(selector)')匹配不是selector的所有元素*/
/*$(document).ready(function(){
$('p:first').css('color','red')
$('p:last').css('color','blue')
$('p:gt(1)').css('color','red')
$('p:lt(3)').css('color','blue')
$('p:eq(5)').css('color','#2ccf62')
$('p:odd').css('background','red')
$('p:even').css('background','blue')
$('p:not(#box)').css('background','pink')
})
*/
/*2-4 内容选择器
语法：
$(':contains(text)')匹配包含给定文本（text）的元素
$(':has(selector)')匹配包含特定选择器元素的元素
$(':empty')匹配不含有内容的元素（即 不包含子元素或者文本的空元素）
$(':parent')匹配含有子元素或者文本的元素*/
/*$(document).ready(function(){
// $('div:contains(jun)').css('color','red')
// $('div:has(span)').css('color','blue')
// $('div:empty').css('background','red')
$('div:parent').css('background','red')
})
*/
/*2-5 属性选择器
语法：
$('[属性名]')匹配包含给定属性的元素
$('[attribute=value]')匹配给定属性是某个特定值的元素
$('[attribute !=value]')匹配所有不含有指定值的属性，或者说是属性不等于特定值的元素
$('[attribute ^=value]')匹配给定属性是以某些值开始的元素
$('[attribute $=value]')匹配给定属性是以某些值结束的元素
$('[attribute *=value]')匹配给定属性包含某些值的元素
$('attribute[1] attribute[2] attribute[3] ')复合选择器，需要同时满足多个条件时使用*/
/*$(document).ready(function(){
// $('input[type]').css('background','pink')
// $('input[type=button]').css('background','blue')
// $('input[type !=button]').css('background','red')
// $('input[type ^=p]').css('background','#ccc')
// $('input[type $=n]').css('background','red')
// $('input[type *=o]').css('background','blue')
$('input[id][name*=n]').css('background','blue')
})*/
// 2-6 表单选择器
// 语法:
// $(':enabled')所有激活的inpupt元素(可以使用的input元素)
// $(':disabled')所有禁用的input元素(不可以使用的input元素)
// $(':selected')所有被选中的元素,针对于select元素
// $(':checked')所有被选中的input元素
$(document).ready(function(){
// $(':enabled').css('background','pink')
// $(':disabled').css('background','blue')
// $(':selected').css('color','red')
$(':checked').parent().css('color','red')
})
</script>
<!-- 2-6表单选择器 -->
<form>
输入框1<input type="text" name=""><br>
输入框2<input type="text" name=""><br>
输入框3<input type="text" name="" disabled><br>
输入框4<input type="text" name=""><br>
<!-- <select>
<option>摩羯座</option>
<option selected>双鱼座</option>
<option>射手座</option>
<option>天蝎座</option>
</select><br> -->
<label><input type="checkbox" name="">看书</label>
<label><input type="checkbox" name="" checked>游泳</label>
<label><input type="checkbox" name="">游戏</label>
</form>
<!-- 属性选择器 -->
<!-- <form>
<label>1</label><input type="text" name="new" id="woman"><br>
<label>2</label><input type="password" name="new1" id="man"><br>
<label>3</label><input name="" id="new"><br>
<label>4</label><input type="button" name="" value="按钮"><br>
</form>
-->
<!-- 内容选择器 -->
<!-- <div>jack</div>
<div>jun</div>
<div>jack cheng</div>
<div>jion</div>
<div><span>PHP中文网</span></div>
<div></div>
<div><b></b></div> -->
<!-- 顺序选择器 -->
<!-- <p id="box">1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p> -->
<!-- 2-2层级选择器 -->
<!-- <ul>
<li>1</li>
<li>2</li>
<div>
<li>孙子
<div>
<li>曾孙子</li>
</div>
</li>
</div>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
<form>
<label>姓名</label>
<input type="" name="">
<button>按钮</button>
<input type="" name="">
<input type="" name="">
</form> -->
<!-- 2-1 基础选择器 -->
<!-- <div id="box">点击下方更换背景颜色</div><br>
<button type="button" id="bt1" style="background: #2576f0;">设置成蓝色</button>
<button type="button" id="bt2" style="background: #f53d3d;">设置成红色</button>
<button type="button" id="bt3" style="background: #ff5809;">设置成橙色</button>
<button type="button" id="bt4" style="background: #2ccf62;">设置成绿色</button> -->
<!-- <div>吃饱没</div>
<span>php中文网</span> -->
</body>
</html>上面是课程的代码
下面是自己做的一个基础选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器作业</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
div{width: 120px;height: 80px;background: #ccc;margin-top: 20px;color:#ffffff;text-align: center;}
button{width: 100px;height: 30px;border: none;border-radius: 5px;color:#ffffff;font-size: 15px;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('#bt1').click(function(){
$('div').css('background','#2576f0')
});
$('#bt2').click(function(){
$('div').css('background','#f53d3d')
});
$('#bt3').click(function(){
$('div').css('background','#ff5809')
});
$('#bt4').click(function(){
$('div').css('background','#2ccf62')
});
});
</script>
<p>1、基础选择器</p>
<div id="box">点击下方更换背景颜色</div><br>
<button type="button" id="bt1" style="background: #2576f0;">设置成蓝色</button>
<button type="button" id="bt2" style="background: #f53d3d;">设置成红色</button>
<button type="button" id="bt3" style="background: #ff5809;">设置成橙色</button>
<button type="button" id="bt4" style="background: #2ccf62;">设置成绿色</button>
</body>
</html>
JQ的选择器很全面，可以根据自己的很多需求从页面中选出自己想要的一些元素，进行再加工。这个非常关键。
由于选择器有些多，就没每个都做案例了。