jquery的选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery中的选择器</title>
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<style type="text/css">
#id0{width: 100px;height: 100px;background-color: #ccc;margin: 20px;}
.cont0{width: 100px;height: 100px;margin: 20px;background-color: #ccc;}
</style>
</head>
<body>
<script type="text/javascript">
//基本选择器
//语法
//$('#id名')ID选择器
//$('.class')class选择器
//$('elemen')标签选择器
//$('*')匹配所有元素
//$('#ID,class名,element')多项选择器
$(document).ready(function(){
$('.class0').click(function(){
$('#id0').css('background-color','red')
});
//层级选择器
//$('父级元素 > 子级元素') 给定的父级元素下匹配所有的子级元素
//$('祖先元素 后代元素') 给定的祖先元素下匹配所有的后代元素
//$('prev + next') 匹配紧跟在prev元素后面的next元素
//$('prev ~ siblings') 匹配prev元素后面所有的siblings元素
$('ul>li').css('list-style','none');
$('ul li').css('color','red');
//顺序选择器
//1、顺序
// $(':first')第一个元素
// $(':last')最后一个元素
// 2、比较
// $(':gt(x)')表示大于x的元素
// $(':lt(x)')表示小于x的元素
// $(':eq(x)')表示等于x的元素
// 3、奇偶数
// $(':odd')奇数顺序
// $(':exen')偶数顺序
// 4、非
// $(':ont(selector)')匹配不是selector的所有元素
$('p:first').css('color','blue');
$('p:gt(3)').css('font-size','40px');
$('p:odd').css('font-weight','bold');
// 内容选择器
// 语法
// $(':contains(text)')匹配包含给定文本的元素
// $(':has(selector)')匹配包含特殊选择器元素的元素
// $(':empty')匹配不含有内容的元素（ 即 不包含子元素或者文本的空元素）
// $(':parent')匹配含有子元素或者文本的元素
$('div:contains(jion)').css('background-color','red');
$('div:empty').css('background-color','#203456');
// 属性选择器
// 语法
// $('[attribute]')匹配包含给定属性的元素
// $('[attribute=value]')匹配给定属性是某个特定值的元素
// $('[attribute!=value]')匹配所有不含有指定值的属性，或者说是属性不等于特定值的元素
// $('[attribute^=value]')匹配给定属性是以某些值开始的元素
// $('[attribute$=value]')匹配给定属性是以某些值结尾的元素
// $('[attribute*=value]')匹配给定属性包含某些值的元素
// $('attribute[1] attribute[2] attribute[3]')复合选择器，需要同时满足多个条件时使用
$('#form input[type]').css('background-color','red');
$('#form input[type=button]').css('background-color','blue');
// 表单选择器
// 语法
// $(':enabled')所有激活的input元素（可以使用的input元素）
// $(':disabled')所有禁用的input元素（不可以使用的input元素）
// $(':selected')所有被选取的元素，针对于select元素
// $(':checked')所有被选中的input元素
$('#form1 input:enabled').css('background-color','red');
$('#form1 input:checked').parent().css('color','blue')
})
</script>
<!-- 基本选择器 -->
<div id="id0"></div>
<button class="class0">点击</button>
<!-- 层级选择器 -->
<ul>
<li>1</li>
<li>1</li>
<div>
<li>2</li>
</div>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<!-- 顺序选择器 -->
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<!-- 内容选择器 -->
<div class="cont0">jack</div>
<div class="cont0">mark</div>
<div class="cont0">jion</div>
<div class="cont0">blus</div>
<div class="cont0"></div>
<!-- 属性选择器 -->
<form id="form">
<label>1</label><input type="text" name=""><br>
<label>2</label><input type="password" name=""><br>
<label>3</label><input name=""><br>
<label>4</label><input type="button" value="点击"><br>
</form>
<!-- 表单选择器 -->
<form id="form1">
输入框1<input type="" name=""><br>
输入框2<input type="" name=""><br>
输入框3<input type="" name="" disabled=""><br>
输入框4<input type="" name=""><br>
<label><input type="checkbox" name="">足球</label>
<label><input type="checkbox" name="" checked>篮球</label>
<label><input type="checkbox" name="">跑步</label>
</form>
</body>
</html>
