abstract：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Jquery-选择器</title><!-- 引入jquery文件 --><script src="https://code.j
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery-选择器</title>
<!-- 引入jquery文件 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src='jquery-3.3.1.min.js'></script>
<style type='text/css'>
/* id */
#id{width:100px;height:30px;color:#fff;}
/* class */
.class{width:100px;height:30px;color:#fff;}
/* 标签 */
span{display:block;width:100px;height:30px;color:#fff;}
</style>
<script type='text/javascript'>
$(document).ready(function(){
// id选择器
$('#id').css('backgroundColor','#f00');
// class选择器
$('.class').css('backgroundColor','#000');
// 标签选择器
$('span').css('backgroundColor','blue');
// 选择所有元素
$('*').css('font-size','10px');
// 组合选择器
$('#id,.class,span').css('borderRadius','5px');
// 子元素选择器
$('ul>li').css('listStyle','none');
// 后代选择器
$('ul li').css('listStyle','none');
// 相邻选择器 同级
$('ul>div + span').css({'backgroundColor':'#fff','color':'#000',});
// 某元素后面所有的指定元素
$('div~li').css('backgroundColor','#ff0');
//选取第一个li元素
$('li:first').css('backgroundColor','#f00');
//选取最后一个li元素
$('li:last').css('backgroundColor','#f00');
// 选择顺序大于 2 的元素 从0开始
$('li:gt(2)').css('color','blue');
// 选择顺序小于 2 的元素
$('li:lt(2)').css('color','pink');
//选择顺序等于 2 的元素
$('li:eq(2)').css('backgroundColor','pink');
//选择顺序为奇数
$('li:odd').css('border','1px solid #000');
//选择顺序为偶数
$('li:even').css('font-weight','bold');
//选择id名不为u_li
$('li:not(#u_li)').css('fontSize','20px');
//选择包含给定文本的元素
$('li:contains(1)').css('color','#000');
//选择包含特定选择器元素的元素
$('span:has(li)').css('backgroundColor','pink');
//选择不包含子元素或文本的元素
$('div:empty').css({'backgroundColor':'#000','height':'30px'});
//选择含有子元素或文本的元素
$('div:parent').css('textAlign','center');
//选择给定属性的元素
$('input[type]').css('width','200px');
//选择属性是指定值的元素
$('input[type=button]').css('height','30px');
//选择属性不是指定值的元素
$('input[type!=text]').css('backgroundColor','red');
//选择属性值是某些值开始的元素
$('input[type^=r]').css('width','30px');
//选择属性值是某些值结束的元素
$('input[type$=x]').css('width','30px');
//选择属性值包含某些值的元素
$('input[type*=tto]').css('border','none');
//选择满足多个条件的元素
$('input[id][name$=b]').css('width','60px');
//选择激活的元素(可以使用的input)
$(':enabled').css('border','1px solid red');
//选择禁用的元素(不可以使用的input)
$(':disabled').css('border','1px solid yellow');
//选择被选取的元素 select 元素
$(':selected').css('color','blue');
//选择选中的input元素 包含子元素或文本
$(':checked').parent().css('fontSize','30px');
});
</script>
</head>
<body>
<div id='id'>id选择器</div>
<div class='class'>class选择器</div>
<span>标签选择器</span>
<ul>
<li>1</li>
<li id='u_li'>2</li>
<li>
<ul>
<div></div>
<span>
<li>11</li>
</span>
<li>22</li>
<li>33</li>
</ul>
</li>
</ul>
<form>
<p><label>输入框1<input type='text' name=''></label></p>
<p><label>输入框2<input type='text' disabled></label></p>
<p><label>输入框3<input type='text'></label></p>
<p><label><input type='radio' name='sex' value='male' checked>男</label>
<label><input type='radio' name='sex' value='female'>女</label>
</p>
<p><label>地区
<select>
<option>北京</option>
<option>上海</option>
<option selected>福建</option>
</select>
</label></p>
<p><label><input type='checkbox' name='hobby[]' value='game'>游戏</label>
<label><input type='checkbox' name='hobby[]' value='music' checked>音乐</label>
</p>
<p><input type='button' id='' name='sub' value='提交'></p>
</form>
</body>
</html>
Correcting teacher：天蓬老师Correction time：2019-01-24 17:24:13
Teacher's summary：总结的很齐全, 其实只需要记住常用的几个就可以了, 其它的可以用得时候再查, 但是对返回值类型一定要清楚