摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jq选择器</title> <script type="text/javascript" src="jquery
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq选择器</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style>
#box,.box{
width:300px;
height:300px;
background:blue;
margin-top:20px;
}
</style>
</head>
<body>
<div id="box"></div>
<div class="box"></div>
<span>php中文网</span>
<hr>
<ul>
<li>1</li>
<li>2</li>
<div>
<li>6</li>
</div>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<form action="">
<label for="">姓名</label>
<input type="text">
<input type="text">
<input type="text">
</form>
<hr>
<p id="a">1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<script>
$(document).ready(function(){
$('#box').css('background','pink');
$('.box').css('background','yellow');
$('span').css('font-size','30px');
$('#box,.box,span').css('color','#ccc');
$('ul>li').css('list-style','none');
$('ul li').css('list-style','none');
$('label+input').css('height','50px');
$('label~input').css('background','yellow');
// $('p:first').css('color','red');
// $('p:last').css('color','blue');
// $('p:gt(1)').css('font-size','50px');
// $('p:lt(2)').css('color','blue');
// $('p:eq(3)').css('color','red');
$('p:odd').css('background','#ccc');
$('p:even').css('background','red');
$('p:not(#a)').css('color','yellow');
})
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq选择器</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style>
</style>
</head>
<body>
<form action="">
<label for="">1</label><input type="text"><br>
<label for="">2</label><input type="password"><br>
<label for="">3</label><input><br>
<label for="">4</label><input type="button" value="按钮"><br>
</form>
<script>
$(document).ready(function(){
$('input[type]').css('background','pink');
$('input[type=button]').css('background','blue');
})
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
</head>
<body>
<form action="">
输入框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 name="" id="">
<option>处女座</option>
<option selected>狮子座</option>
<option>白羊座</option>
</select>
<br>
爱好：
<label for="">
<input type="checkbox" checked>游戏
</label>
<label for="">
<input type="checkbox">看书
</label>
<label for="">
<input type="checkbox">电影
</label>
</form>
<script>
$(function(){
$(':enabled').css('background','pink');
$(':disabled').css('background','red');
$(':selected').css('color','blue');
$(':checked').parent().css('color','red');
})
</script>
</body>
</html>总结：
基本选择器
$('#id名')根据给定的id来匹配到元素
$('.class名')根据给定的class来匹配到元素
$('element')根据给定的标签名来匹配到元素
$('*')匹配所有元素
$('#id,.class名,element')匹配到页面中多个选择器
层级选择器
给定的父级元素下匹配所有的子元素：$('父级元素 > 子级元素')
给定的祖先元素下匹配所有的后代元素：$('祖先元素 后代元素')
匹配紧跟在prev元素后面的next元素：$('prev + next')(同级的元素)
匹配prev元素后面所有的siblings元素：$('prev ~ siblings')
顺序选择器
$(':first') 第一个元素
$(':last') 最后一个元素
2、比较(x的顺序是从0开始)
$(':gt(x)')表示大于值x的元素
$(':lt(x)')表示小于值x的元素
$(':eq(x)')表示等于值x的元素
3、奇偶数
$(':odd')奇数顺序
$(':even')偶数顺序
4、非
$(':not(selector)')匹配不是selector的所有元素
内容选择器
$(':contains(text)') 匹配包含给定文本（text）的元素
$(':has(selector)')匹配包含特定选择器元素的元素
$(':empty')匹配不含有内容的元素（即 不包含子元素或者文本的空元素）
$(':parent')匹配含有子元素或者文本的元素
属性选择器
$('[属性名]')匹配包含给定属性的元素
// $('[attribute=value]')匹配给定属性是某个特定值的元素
//$('[attribute！=value]')匹配所有不含有指定值的属性，或者说是属性不等于特定值的元素
$('[attribute ^= value]')匹配给定属性是以某些值开始的元素
$('[attribute $= value]')匹配给定属性是以某些值结尾的元素
$('[attribute *= value]')匹配给定属性包含某些值的元素
$('attrSel[1] attrSel[1] attrSel[1]')复合选择器，需要同时满足多个条件时使用
表单选择器
$(':enabled')所有激活的input元素（可以使用的input元素）
$(':disabled')所有禁用的input元素（不可以使用的input元素）
$(':selected')所有被选取的元素，针对select元素
$(':checked')所有被选中的input元素
批改老师：天蓬老师批改时间：2019-04-08 09:22:23
老师总结：总结的不错, 最好自己做一个小博客,把对应的小案例也写上吧
