摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jquery选择器</title> <script type=&qu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery选择器</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
div{width:100px; height: 100px; background: #ccc;margin-top:20px;}
</style>
</head>
<body>
<script type="text/javascript">
//基本选择器，语法
/*$('#id名')id匹配
$('.class')class匹配
$('element')根据给定的标签名匹配
$('*')匹配所有元素
$('#id,.class,element')匹配到页面中的多个选择器
//层级选择器（相当于父类和子类的关系）
给定的父级元素下匹配所有子元素：$('父级元素>子级元素')
给定的祖先元素下匹配所有后代元素：$('祖先元素 后代元素')
匹配紧跟在pre元素后面的next元素：$('prev+next')(同级的元素)
匹配prev元素后面所有的siblings元素：$('prev~siblings')
//顺序选择器
1.顺序
$(':first')第一个元素
$(':last') 最后一个元素
2.比较(x的顺序从0开始)
$(':gt(x)')表示大于值x的元素
$(':lt(x)')表示小于值x的元素
$(':eq(x)')表示等于值x的元素
3.奇偶数
$(':odd')奇数顺序
$(':even')偶数顺序
4.非
$(':not(selector)')匹配不是selector的所有元素
//内容选择器
$(':contain(text)') 匹配包含给定文本（text）的元素
$(':has(selector)')匹配包含特定选择器元素的元素
$('：empty') 匹配不含有内容的元素（不包含元素或者文本的空元素）
$(':parent') 匹配含有子元素或者文本的元素
//属性选择器
$('[attribute]')匹配包含给定属性的元素
$('['attribute=value']')匹配给定属性是某个特定值的元素
$('['attribute!=value']')匹配给定属性不是某个特定值的元素
$('['attribute^=value']')匹配给定属性是某个特定值开始的元素
$('['attribute$=value']')匹配给定属性是某个特定值结束的元素
$('['attribute*=value']')匹配给定属性包含某些值得元素
$('attrSel[1] attrSel[1] attrSel[1]')符合选择器，需要同时满足多个条件
//表单选择器
$(':enabled')所有激活的input元素（可以使用的input元素）
$(':disabled')所有禁用的input元素（不可以使用）
$(':selected')所有被选取的元素，针对于select元素
$(':checked')所有别选中的input元素
*/
/* $(document).ready(function(){
$('#box').css('background','red')
$('.box').css('background','blue')
$('span').css('font-size','30px')
$('*').css('font-family','宋体')
$('#box,.box,span').css('color','pink')
})*/
/*$(document).ready(function(){
//$('ul>li').css('list-style','none')
$('ul li').css('list-style','none')
$('label+input').css('width','50px')
$('label+button').css('height','50px')//无效
$('label~input').css('background','pink')
})*/
// $(document).ready(function(){
//$('p:first').css('color','red')
// $('p:last').css('color','blue')
//$('p:gt(1)').css('font-size','20px')
// $('p:lt(2)').css('color','red')
//$('p:eq(1)').css('color','blue')
//$('p:odd').css('background','#ccc')
//$('p:even').css('background','pink')
// $('p:not(#box)').css('background','red')
//})
// $(document).ready(function(){
// $('div:contains(join)').css('background','blue')
// $('div:has(span)').css('color','red')
// $('div:empty').css('background','red')
// $('div:parent').css('background','red')
// })
// $(document).ready(function(){
//$('input[type]').css('background','pink')
//$('input[type=button]').css('background','blue')
//$('input[type!=text]').css('background','red')
//$('input[type^=t]').css('background','red')
//$('input[type$=d]').css('background','red')
//$('input[type*=o]').css('background','blue')
//$('input[id][name*=n]').css('background','blue')
//})
$(document).ready(function(){
$(':enabled').css('background','pink')
$(':disabled').css('background','blue')
$(':selected').css('color','blue')
$(':checked').parent().css('color','red')
})
</script>
<!--<div id="box">我竟快</div>
<div>是德国</div>
<span>php中文网</span>-->
<!--<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<div>
<li>2</li>
</div>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<form>
<label>姓名</label>
<input type="" name="">
<button>按钮</button>
<input type="" name="">
</form>-->
<!--<p id="box">1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>-->
<!--<div>jack</div>
<div>jun</div>
<div>jack cheng</div>
<div>join</div>
<div><span>php</span></div>
<div></div>
<div><b></b></div>-->
<!--<form>
<label>1</label><input type="text" name="new" id="woman"><br>
<label>2</label><input type="password" name="new1" id="man"><br>
<label>3</label><input name=""><br>
<label>4</label><input type="button" value="按钮"><br>
</form>-->
<form>
输入框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>
<option>1</option>
<option selected>2</option>
<option>3</option>
<option>4</option>
</select>
爱好：
<label><input type="checkbox" name="">看书</label>
<label><input type="checkbox" name="" checked>游泳</label>
<label><input type="checkbox" name="">游戏</label>
</form>
</body>
</html>
