基本过滤选择器
<body>
<h1>我爱中国</h1>
<h2>我爱南京</h2>
<h3>我爱雨花台</h3>
<h4>我爱安德门</h4>
<h5>我爱警官学院</h5>
<h6>我爱青鸟</h6>
<ul>
<li>我是飞行员0</li>
<li class="feiji">我是飞行员1</li>
<li>我是飞行员2</li>
<li>我是飞行员3</li>
</ul>
<input type="text">
<script src="./jquery-1.12.4.js"></script>
<script>
// for(var i=0;i<document.getElementsByTagName('li').length;i++){
// document.getElementsByTagName('li')[i].style.background = 'red';
// }
/*选取第一个元素 :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')
// })
</script>
</body>
可见性过滤选择器
<body>
<button>点我</button>
<h1 style="display: none;">1</h1>
<script src="./jquery-1.12.4.js"></script>
<script>
/* 写一个按钮 使用可见性过滤器 实现 点击 让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') );
</script>
</body>
显示和隐藏
<body>
<button style="margin:0 auto;display: block;">开关按钮</button>
<div style="display: none;width: 100vw;height: calc(100vh - 22px);"></div>
<script src="./jquery-1.12.4.js"></script>
<script>
/* show(2000) 开灯 颜色变化 */
/* 点第一次 显示 打开 显示红色div */
/* 开点第二次 显示 打开 显示黄色div */
/* 开点第三次 关闭 */
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
}
})
// $('button').click(function(){
// if( $('div').css('display')=='block' ){
// /* show('slow') 慢速
// show('fast') 快速 也有动画效果
// .hide('normal') 普通 */
// /* 也可以设置时间 3000 3秒 必须是数字类型 */
// $('div').hide(3000)
// }else{
// $('div').show(3000)
// }
// })
</script>
</body>
排他
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script src="./jquery-1.12.4.js"></script>
<script>
$('li').click(function (){
$('li').css('background','');
$(this).css('background','red');
})
// console.log( $('ul').css('color') );
// let a = window.getComputedStyle(document.getElementsByTagName('ul')[0],null).color;
// console.log(a);
// 原生js实现排他
// let lis = document.getElementsByTagName('li')
// for(let i=0;i<lis.length;i++){
// lis[i].onclick = function(){
// for(let j=0;j<lis.length;j++){
// lis[j].style.background = ''
// }
// console.log(i);
// lis[i].style.background = 'red'
// }
// }
</script>
</body>
