使用JQuery进行隐藏和显示
<script src="http://how2j.cn/study/jquery.min.js"></script>//要使用Jquery需要导入一个第三方的javascript库 jquery.min.js
<script>
$(function(){ //表示文档加载
$("#b1").click(function(){
$("#d").hide();
});
$("#b2").click(function(){
$("#d").show();
});
});
</script>
<button id="b1">隐藏div</button>
<button id="b2">显示div</button>
<br>
<br>
<div id="d">
这是一个div
</div>
注意1:
在 $ (function(){});中,$ 的意思是: $ (document).ready(); ,所以 $ (function(){});也可写为 $(document.ready(function(){}));
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。换句话说,写在这里面的JQuery代码都是文档加载好之后的。就不会有获取一个还没有加载好的图片这种问题了。
注意2:
$ ("#b1").click(function(){});的意思是:调用id为b1的标签的click按钮属性,而function(){}只是点击该按钮后触发的函数,即是浏览器执行的相应操作。
给有id属性的div切换边框:直接利用
div[id]
$(function(){
$("#b1").click(function(){
$("div[id]").toggleClass("border");
});
});