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
})