jQuery选择器
先看看w3cschool的对jQuery的概述:
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
最常用的有以下三个：
1. 元素选择器
$("div")
2. ID选择器
$("#ID")
3. class选择器
$(".test")
这里有更多的选择器实例 w3cschool jquery选择器
下面这个demo，包含了以上链接的实例练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>jquery 选择器学习</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$(document).ready(function(){
$('*').css('font-size','30px'); //选取所有元素 设置字体
$('#a').css('background','green'); //id选择器 设置背景颜色 绿色
// alert($('#a'));
// alert(document.getElementById('a'));
$('.b').css('background','blue'); //.class选择器 设置背景颜色 蓝色
$('p').css('background','yellow'); //元素选择器 设置背景颜色 黄色
$('#a span').css('border','2px solid yellow'); //后代选择器 设置黄色边框
$('div:first').css('border','3px solid red'); //伪类选择器 选择第一个div 设置红色边框
$('p.test').css('background','gray'); //选择class为test的p元素
//ul--------------------------
$('ul li:first').css('border','2px solid red'); //选择第一个ul的第一个li 设置红色边框
$('ul li:last-child').css('color','green'); //选择所有ul下的最后一个li 设置绿色字体
$('[href]').html('我是带href属性元素'); //选择带href属性的元素 修改元素内容为‘我是带href属性元素’
$("a[target='_blank']").html("我是带target='_blank'属性的a标签"); //选择带target='_blank'属性的a标签
$(':button').css('background','green'); //选择type=button的input,或者<button>标签 设置绿色
$('li:even').css('background','#999'); //选择偶数位置的li 设置#333背景
$('li:odd').css('background','pink'); //选择偶数位置的li 设置#333背景
})
</script>
</head>
<body>
<div id="a">
A
<span>span</span>
</div>
<div class="b">
B
</div>
<p>p</p>
<p class="test">选择class为test的p元素</p>
<hr>
<ul>
<li>0</li>
<li>1</li>
<li><a target="_blank">2</a></li>
<li>3</li>
</ul>
<ul>
<li>0</li>
<li>1</li>
<li><a href="#">2</a></li>
<li>3</li>
</ul>
<input style="350px" type="button" value="我是type=button的input">
<br>
<button>button</button>
</body>
</html>