前端杂记（二）jquery实现元素隐藏的四个方法(附测试代码)
页面结构
<div>
<h2>titleh2>
<input type="button" value="click"/>
div>四种方法
$('h2').hide()与$('h2').show()– 常用方法$('h2').attr('hidden','')与$('h2').removeAttr('hidden')$('h2').css('display','none')与$('h2').css('display','block')– 备用实现$('h2').attr('style','display:none')与$('h2').removeAttr('style')
What’s More
$.hide() => element.style.display = 'none'
$.show() => element.style.display = getDefaultDisplay(elem)
长时间使用发现上述方法容易记混，整理此贴供查阅
上述方法只是简单赋予display样式，实际场景中常使用toggleClass（addClass/removeClass）做样式补充
测试代码
使用方法：将上面代码复制替换到注解行
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="static/jquery-3.2.1.js">script>
<script>
function hideTitle(jqTitle){
//hideCode
console.log('hide');
}
function showTitle(jqTitle){
//showCode
console.log('show');
}
$(document).ready(function(){
var jqTitle = $('h2');
$('input').click(function(){
if(jqTitle.is(':visible')){
hideTitle();
}else{
showTitle();
}
})
})
script>
head>
<body>
<div>
<h2>titleh2>
<input type="button" value="click"/>
div>
body>
html>