摘要：<script type="text/javascript">//基本选择器// 语法// $('#id名')根据给定的id来匹配到元素// $('.class名')根据给定的class来匹配到元素// $('element')根据给定的标签名来匹配到元素// $('*')匹配所有元素// $('
<script type="text/javascript">
//基本选择器
// 语法
// $('#id名')根据给定的id来匹配到元素
// $('.class名')根据给定的class来匹配到元素
// $('element')根据给定的标签名来匹配到元素
// $('*')匹配所有元素
// $('#id,.class名,element')匹配到页面中多个选择器
// $(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')
// })
// 层级选择器（相当于父类和子类的元素关系）
// 给定的父级元素下匹配所有的子元素：$('父级元素 > 子级元素')
// 给定的祖先元素下匹配所有的后代元素：$('祖先元素 后代元素')
// 匹配紧跟在prev元素后面的next元素：$('prev + next')(同级的元素)
// 匹配prev元素后面所有的siblings元素：$('prev ~ siblings')
// $(document).ready(function(){
// // $('ul>li').css('list-style','none')
// $('ul li').css('list-style','none')
// $('input+button').css('height','50px')
// $('label~input').css('background','pink')
// })
// 顺序选择器
// 1、顺序
// $(':first') 第一个元素
// $(':last') 最后一个元素
// 2、比较(x的顺序是从0开始)
// $(':gt(x)')表示大于值x的元素
// $(':lt(x)')表示小于值x的元素
// $(':eq(x)')表示等于值x的元素
// 3、奇偶数
// $(':odd')奇数顺序
// $(':even')偶数顺序
// 4、非
// $(':not(selector)')匹配不是selector的所有元素
//$(document).ready(function(){
// $('p:first').css('color','red')
// $('p:last').css('color','blue')
// $('p:gt(1)').css('font-size','30px')
// $('p:lt(2)').css('color','red')
// $('p:eq(1)').css('color','red')
// $('p:odd').css('background','#ccc')
// $('p:even').css('background','pink')
//$('p:not(#box)').css('background','red')
//})
// 内容选择器
// 语法：
// $(':contains(text)') 匹配包含给定文本（text）的元素
// $(':has(selector)')匹配包含特定选择器元素的元素
// $(':empty')匹配不含有内容的元素（即 不包含子元素或者文本的空元素）
// $(':parent')匹配含有子元素或者文本的元素
//$(document).ready(function(){
// $('div:contains(jun)').css('background','blue')
// $('div:has(span)').css('color','red')
// $('div:empty').css('background','red')
// $('div:parent').css('background','red')
//})
// 属性选择器
// 语法：
// $('[属性名]')匹配包含给定属性的元素
// $('[attribute=value]')匹配给定属性是某个特定值的元素
//$('[attribute！=value]')匹配所有不含有指定值的属性，或者说是属性不等于特定值的元素
// $('[attribute ^= value]')匹配给定属性是以某些值开始的元素
// $('[attribute $= value]')匹配给定属性是以某些值结尾的元素
// $('[attribute *= value]')匹配给定属性包含某些值的元素
//$('attrSel[1] attrSel[1] attrSel[1]')复合选择器，需要同时满足多个条件时使用
//$(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 $=n ]').css('background','red')
// $('input[type *=o ]').css('background','blue')
// $('input[id][name*=n]').css('background','red')
//})
// 表单选择器
// 语法：
// $(':enabled')所有激活的input元素（可以使用的input元素）
// $(':disabled')所有禁用的input元素（不可以使用的input元素）
// $(':selected')所有被选取的元素，针对于select元素
// $(':checked')所有被选中的input元素
$(document).ready(function(){
// $(':enabled').css('background','pink')
// $(':disabled').css('background','red')
// $(':selected').css('color','blue')
$(':checked').parent().css('color','red')
})
</script>
批改老师：灭绝师太批改时间：2019-03-23 11:27:05
老师总结：很认真,选择器算是jq中比较基础的知识点,要好好掌握!
