1：基础选择器
bash
id #
class .
标签 div
*通配符
群组 #box,p
css() 一个值的时候是找这个元素的值，两个值的时候是设置样式 举例 找元素的值： alert($(‘p’).css(‘color’)) 举例 设置元素的样式： KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲txt').css('colo…(‘p’).size())
2：层次选择器
$('p>span') 子选择器
$('p span a') 后代选择器
$('div+p') 同级下一个节点选择器
$('div~p') 下面所有的同级节点选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>123</li>
<li>456
<span>哈哈哈</span>
</li>
<li>789</li>
</ul>
<div>
<p>哈哈哈</p>
<h1>啦啦啦</h1>
<h1>啦啦啦</h1>
<h1>啦啦啦</h1>
<h2>呵呵呵</h2>
</div>
<div>
<p>哈哈哈1</p>
<h1>啦啦啦1</h1>
<h1>啦啦啦1</h1>
<h1>啦啦啦1</h1>
<h2>呵呵呵1</h2>
</div>
</body>
<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// $('ul>li').css({
// color:'red',
// //如果属性用横线链接，需要引号包裹
// 'font-size':'100px'
// })
// $('ul li span').css({
// color:'red'
// })
// $('p+h1').css('color','blue')
// $('div+div').css('color','blue')
// $('p~h1').css('color','yellow')
})
</script>
</html>
3:过滤选择器
:first 选中第一个元素
:last 选中最后一个元素
:not() 不选中某一个元素
:even 选中是偶数的元素（从零开始计算,第一个元素是0）
:odd 选中是奇数的元素
:eq(数字) 选中相等数字的元素（从零开始计算,第一个元素是0）
:gt(index) 选中大于数字的元素
:lt(index) 选中小于数字的元素
4：内容过滤选择器
p:contains('文本') 匹配包含给定文本的元素（找到p标签中包含指定文本内容的p标签）
p:has('.red') 有没有包含特定属性值的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>111111111111111</li>
<li>222222222222222</li>
<li>333333333333333</li>
<li>444444444444444</li>
<li class="oli">555555555555555</li>
<li>666666666666666</li>
<li>777777777777777</li>
<li>888888888888888</li>
<li>999999999999999</li>
</ul>
</body>
<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// $('li:first').css('color','red')
// $('li:last').css('color','red')
// $('li:even').css('color','blue')
// $('li:odd').css('color','blue')
//-------------------------------------------------------------
// $('li:eq(5)').css('color','pink')
// $('li:gt(4)').css('color','pink')
// $('li:lt(4)').css('color','pink')
// $('li:not(.oli)').css('color','green')
})
</script>
</html>
5：属性选择器
[attrbute] 匹配包含给定属性的元素
[attribute=value] 匹配input框里属性
选取 所有被选中的元素 $('input:checked')
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>哈哈哈</p>
<p>呵呵呵</p>
<p>还好还
<span class="red">坎坎坷坷</span>
</p>
<ul>
<li>000000000000</li>
<li>111111111111</li>
<li class="a">222222222222</li>
<li class="b">333333333333</li>
<li class="c">444444444444</li>
<li>555555555555</li>
<li>666666666666</li>
</ul>
<input type="radio" name="" id="" value="" checked="checked"/>
<button>点击</button>
</body>
<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="../js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>-->
<script type="text/javascript">
$(function(){
// $('p:contains("哈哈哈")').css('color','red')
// 去找到p标签中含有span标签的元素，把字体颜色改成黄色
// $('p:has("span")').css('color','yellow');
// $('p:has(".red")').css('color','blue');
//----------------------------------------------------------------
// 找到所有有class属性的的标签，把字体变成100像素
// $('[class]').css('font-size','100px')
// $('[class=a]').css('font-size','100px')
//------------------------------------------------------------------
// $('input:checked').css('width','100px').css('height','100px')
// $('button').click(function(){
// $('input').prop('checked',false);
// })
})
</script>
</html>
