1、基本选择器
a、id选择器
//1. 选择id为div1的元素 $('#div1').css('background', 'red') $('#div1').css({"background":"red"})b、元素选择器
//2. 选择所有的div元素 $('div').css('background', 'red')c、类型选择器
//3. 选择所有class属性为box的元素 $('.box').css('background', 'red')d、任意选择器
$('*').css('background', 'red')e、并集选择器
//4. 选择所有的div和span元素 $('div,span').css('background', 'red')f、交集选择器
//5. 选择所有class属性为box的div元素 $('div.box').css('background', 'red')
2、层次选择器：查找子元素, 后代元素, 兄弟元素的选择器
a、后代元素选择器：ancestor descendant 在给定的祖先元素下匹配所有的后代元素
//1. 选中ul下所有的的span $('ul span').css('background', 'yellow')b、子元素选择器：parent>child 在给定的父元素下匹配所有的子元素
//2. 选中ul下所有的子元素span $('ul>span').css('background', 'yellow')c、prev+next 匹配所有紧接在 prev 元素后的 next 元素
//3. 选中class为box的下一个li $('.box+li').css('background', 'yellow')d、prev~siblings 匹配 prev 元素之后的所有 siblings 元素
//4. 选中ul下的class为box的元素后面的所有兄弟元素 $('ul .box~*').css('background', 'yellow')
3、过滤选择器：在原有选择器匹配的元素进一步进行过滤的选择器
a、基本过滤选择器
//1. 选择第一个div $('div:first').css('background', 'red') //2. 选择最后一个class为box的元素 $('.box:last').css('background', 'red') //3. 选择所有class属性不为box的div $('div:not(.box)').css('background', 'red') //没有class属性也可以 //4. 选择第二个和第三个li元素 $('li:gt(0):lt(2)').css('background', 'red') // 多个过滤选择器不是同时执行, 而是依次 $('li:lt(3):gt(0)').css('background', 'red')b、内容过滤选择器
//5. 选择内容为BBBBB的li $('li:contains("BBBBB")').css('background', 'red')c、可见性过滤选择器
//6. 选择隐藏的li console.log($('li:hidden').length, $('li:hidden')[0])d、属性过滤选择器
//7. 选择有title属性的li元素 $('li[title]').css('background', 'red') //8. 选择所有属性title为hello的li元素 $('li[title="hello"]').css('background', 'red')
隔行变色效果：
<script type="text/javascript"> $('#data>tbody>tr:odd').css('background', '#ccccff') $('#data>tbody>tr:odd').addClass('odd') $('#data>tbody>tr:odd').attr('class', 'odd') </script>
3、表单选择器
a、表单
b、表单对象属性
//1. 选择不可用的文本输入框 $(':text:disabled').css('background', 'red') //2. 显示选择爱好 的个数 console.log($(':checkbox:checked').length) //3. 显示选择的城市名称 $(':submit').click(function () { var city = $('select>option:selected').html() // 选择的option的标签体文本 city = $('select').val() // 选择的option的value属性值 alert(city) })
多Tab点击切换：
var $contents = $('#container>div') // 给3个li加监听 $('#tab>li').click(function () { // 隐式遍历 //alert('----') // 隐隐藏所有内容div $contents.css('display', 'none') // 显示对应的内容div // 得到当前点击的li在兄弟中下标 var index = $(this).index() // 找到对应的内容div, 并显示 $contents[index].style.display = 'block' // $($contents[index]).css('display', 'block') })var currIndex = 0 //当前显示的内容div的下标 $('#tab>li').click(function () { // 隐式遍历 //alert('----') // 隐藏当前已经显示的内容div $contents[currIndex].style.display = 'none' // 显示对应的内容div // 得到当前点击的li在兄弟中下标 var index = $(this).index() // 找到对应的内容div, 并显示 $contents[index].style.display = 'block' // 更新下标 currIndex = index })
转载于:https://www.cnblogs.com/lzb0803/p/9189184.html
