摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery6种选择器</title> <script type="text/javascript" src="
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery6种选择器</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<style type="text/css">
div{width: 300px;height: 300px;border: 1px solid red;float: left;div}
</style>
</head>
<body>
<!-- 第一种：基本选择器 -->
<script type="text/javascript">
$(document).ready(function(){
$('*').css('fontFamily','宋体')
$('span').css('fontSize','20px')
$('#p1').css('color','red')
$('.p2').css('color','blue')
$('#p1,.p2').css('fontSize','25px')
})
</script>
<div>
<h1>基本选择器</h1>
<p id="p1">使用#id名来匹配</p>
<p>使用.class民来匹配</p>
<span>使用标签名来匹配</span></div>
<!-- 第二种：层级选择器 -->
<script type="text/javascript">
$(document).ready(function(){
$('ul>li').css('listStyle','none')
$('.box2 ul li').css('fontSize','24px')
$('span+ul').css('color','red')
$('h1~span').css('color','blue')
})
</script>
<div>
<h1>层级选择器</h1><span>副本副本</span>
<ul>
<li>1</li>
<li>2 <ol>
<li>2.1</li>
<li>2.2</li> </ol>
</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<!-- 第三种：顺序选择器 -->
<script type="text/javascript">
$(document).ready(function(){
$('h5~ul li:first').css('color','green')
$('h5~ul li:last').css('color','red')
$('h5~ul li:eq(3)').css('color','blue')
$('.box3 li:not(#li1)').css('fontSize','24px')
})
</script>
<div>
<h1>顺序选择器</h1><h5>副本副本</h5>
<ul>
<li id="li1">1</li>
<li>2 </li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<!-- 第四种：内容选择器 -->
<script type="text/javascript">
$(document).ready(function(){
$('.box4 li:contains(1)').css('color','red')
$('.box4 li:has(span)').css('color','green')
})
</script>
<div>
<h1>内容选择器</h1>
<ul>
<li id="li1">1</li>
<li>2
<span>11</span>
</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li></li>
</ul>
</div>
<!-- 第五种：属性选择器 -->
<script type="text/javascript">
$(document).ready(function(){
$('input[type]').css('backgroundColor','green')
$('input[type=name]').css('backgroundColor','red')
$('input[id][name*=n]').css('backgroundColor','blue')
})
</script>
<div>
<h1>属性选择器</h1>
<lable>1</lable><input type="name" disabled="" name="1" id="【11"><br>
<lable>2</lable><input type="password" name="n1" id="a11"><br>
</div>
<!-- 第六种：表单选择器 -->
<script type="text/javascript">
$(document).ready(function(){
$('input:enabled').css('backgroundColor','red')
$('input:disabled').css('backgroundColor','blue')
$(':selected').css('color','blue')
$(':checked').parent() .css('color','green')
})
</script>
<div>
<h1>表单选择器</h1>
<lable>1</lable><input type="name" disabled=""><br>
<lable>2</lable><input type="password"><br>
<select>
<option>1</option>
<option selected>2</option>
<option>3</option>
</select>
<lable><input type="checkbox" >1</lable>
<lable><input type="checkbox" >2</lable>
<lable><input type="checkbox" checked>3</lable>
</div>
</body>
</html>
批改老师：西门大官人批改时间：2019-04-02 10:47:49
老师总结：代码最好自己写，不要复制粘贴老师的代码。
