学习顺序，内容，层级，属性，表单选择器
<div>jack</div>
<div>jion</div>
<div><span>中文网</span></div>
<div></div>
<div><b></b></div>
<script type="text/javascript">
$(document).ready(function(){
//内容选择器
//$('div:contains(jion)').css('background','blue') 匹配包含标签给定文本（text）的元素
//$('div:has(span)').css('color','red'); 匹配包含包含特定选择器元素
//$('div:empty').css('background','green'); 匹配不含有内容的元素(不包含子元素或者文本空元素)
//$('div:parent)') 匹配含有子元素或文本的元素，和empty相反
})
</script>
<form>
1:<input name="username" id="woman"><br>
2:<input type="password" name="username1" id="man"><br>
3:<input type="text" name="" id="new"><br>
4:<input type="button" name="" value="按钮">
</form>
<script type="text/javascript">
$(document).ready(function(){
//属性选择器
//$('input[type]').css('background','red') //匹配包含给定属性的元素
//$('input[type=button]').css('background','blue') //匹配给定属性是某个特定值的元素
//$('input[type!=text]').css('background','green') //匹配给定属性是某个特定值的元素
//$('input[type^=t]').css('background','green') //匹配给定属性以某个值开始的元素
//$('input[type$=n]').css('background','green') //匹配给定属性以某个值开始的元素
//$('input[type*=ss]').css('background','green') //匹配给定属性包含某些值的元素
$('input[id][name*=n]').css('background','green') //复合选择器 需同时满足多个条件时
})
</script>
<form>
1:<input type="text" name="" ><br>
2:<input type="text" name="" ><br>
3:<input type="text" name="" disabled="disabled"><br>
4:<input type="checkbox" name="" checked>看书<br>
<select>
<option>大众</option>
<option selected>现代</option>
<option>长城</option>
</select>
</form>
<script type="text/javascript">
$(document).ready(function(){
//表单选择器
//$(':enabled').css('background','pink') //所有激活的input元素
//$(':disabled').css('background','pink') //所有禁用的input元素
//$(':selected').css('color','blue')//所有被选取的元素，针对于select元素
//$(':checked').parent().css('color','red') //被选中的input元素
})
</script>