如何做商业网站推广,网站建设做什么的,动漫制作专业有哪些课程,村建站全称前面的话 过滤选择器的内容非常多#xff0c;本文介绍过滤选择器的最后一部分——状态选择器 焦点状态
:focus :focus选择器选择当前获得焦点的元素 divbuttonbtn1/buttonbuttonbtn2/buttonbuttonbtn3/button/d…前面的话 过滤选择器的内容非常多本文介绍过滤选择器的最后一部分——状态选择器 焦点状态
:focus :focus选择器选择当前获得焦点的元素 div
buttonbtn1/button
buttonbtn2/button
buttonbtn3/button
/div
script
document.onclick function(){
$(:focus).css(color,red);
}
/script stylewidth: 100%; height: 40px; srchttps://demo.xiaohuochai.site/jquery/selector/s28.html frameborder0 width320 height240 对应于CSS选择器:focus :focus{color:red} 如果用javascript实现类似效果 var tags document.getElementsByTagName(*);
for(var i 0; i tags.length; i ){
tags[i].onfocus function(){
this.style.color red;
}
} 哈希状态
:target :target选择器用于匹配锚点对应的目标元素 div
a href#test锚点/a
div idtest变色/div
/div
script
window.location #test;
$(:target).css(color,red);
/script stylewidth: 100%; height: 60px; srchttps://demo.xiaohuochai.site/jquery/selector/s29.html frameborder0 width320 height240 对应的CSS选择器是:target选择器用于匹配锚点对应的目标元素 :target{color:red;} 动画状态
:animated :animated选择器选择所有正在执行动画效果的元素 button idbtnrun/button
div idmover styleheight:30px;width: 30px;background-color: green;/div
script
function animateIt() {
$(#mover).slideToggle(slow, animateIt);
}
animateIt();
btn.onclick function(){
$(div:animated).css(background-color,red);
}
/script stylewidth: 100%; height: 70px; srchttps://demo.xiaohuochai.site/jquery/selector/s30.html frameborder0 width320 height240
显隐状态
:hidden :hidden选择器选择所有隐藏的元素返回集合元素
隐藏 元素不可见并不是隐藏元素被认为隐藏有以下几种情况 【1】display:none 【2】表单元素的typehidden 【3】宽度和高度都设置为0 【4】祖先元素是隐藏的 [注意]元素visibility: hidden或opacity: 0被认为是可见的因为他们仍然占据布局空间
:visible :visible选择器选择所有可见的元素如果元素占据文档一定的空间元素被认为是可见的 [注意]隐藏元素上做动画元素被认为是可见的直到动画结束 button idbtn1$(#test :hidden)/button
button idbtn2$(#test :visible)/button
button idreset还原/button
div idtest
div
div styledisplay:none;hidden/div
divvisible/div
/div
form
input typehidden /
input/
/form
/div
script
reset.onclick function(){history.go();}
btn1.onclick function(){this.innerHTML 有 $(#test :hidden).length 个隐藏元素}
btn2.onclick function(){this.innerHTML 有 $(#test :visible).length 个可见元素}
/script stylewidth: 100%; height: 90px; srchttps://demo.xiaohuochai.site/jquery/selector/s31.html frameborder0 width320 height240
更多专业前端知识请上
【猿2048】www.mk2048.com
