基本过滤选择器:
选取第一个元素 :first
$('li:first').css('background','red')
选取最后一个元素 :last
$('li:last').css('background','red')
排除指定元素之外的所有元素 :not(selector)
$('li:not(".feiji")').css('background','red')
选取索引是偶数的所有元素(index从0开始) :even 0也是偶数
$('li:even').css('background','red')
选取索引是奇数的所有元素(index从0开始) :odd
$('li:odd').css('background','red')
选取索引等于index的元素(index从0开始):eq(index)
$('li:eq(3)').css('background','red')
选取索引大于index的元素(index从0开始):gt(index)
$('li:gt(2)').css('background','red')
选取索引小于index的元素(index从0开始)
$('li:lt(4)').css('background','red')
选取所有标题元素,如h1~h6 :header
$(':header').css('background','red')
选取当前获取焦点的元素 :focus
$('input').click(function(){
$('input:focus').css('background','red')
})
可见性过滤选择器:
写一个按钮 使用可见性过滤器 实现 点击 让div 点一下显示
再点隐藏
$('button').click(function(){
console.log('隐藏的h1的个数:', $('h1:hidden').length );
if( $('h1:hidden').length ){
$('h1:hidden').show('slow')
}else{
$('h1:visible').hide('slow')
}
})
选取所有可见的元素 :visible
console.log( $('div:visible') );
选取所有隐藏的元素 :hidden
console.log( $('div:hidden') );
特殊符号的转义:
\\ 来转义 让jq 把id#a当成字符串
console.log( $('#id\\#a') );
\\ 来转义 让jq 把id\\[2\\]当成字符串
console.log( $('#id\\[2\\]') );
实现开关颜色变化练习:
let count = 1;
$('button').click(function(){
console.log(count);
console.log( $('div').css('background-color') );
if(count==1){
$('div').css('background-color','red')
$('div').show(1000);
count++
return;
}
if(count==2){
$('div').css('background-color','yellow')
count++
return }
if(count==3){
$('div').hide(1000);
count=1
}
})