| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery_01_hw</title>
<!-- 如果想使用Jquery,必须引用jquery的一个js文件
js的加载方式,如何引用一个外部的js文件呢?
-->
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
/*使用Jquery来绑定一个事件*/
$(function(){
$("#hide").click(function(){
/*隐藏元素*/
// $("#div").hide();
/* 参数1:是动画的速度,
默认是slow(慢),normal(正常),fast(快) */
// $("#div").hide("slow");
/* 参数1:可以传数字,数字单位是毫秒 */
// $("#div").hide(10000);
/* 通过透明度:Optional
linear:线 */
// $("#div").hide(10000,"swing");
// $("#div").hide(10000,"linear"); /* 参数三:动画执行完以后,执行此函数 */
$("#div").hide(10000,function(){
console.info("==我执行完了==");
});
})
$("#show").click(function(){
/*显示元素*/
// $("#div").show();
$("#div").show("slow");
});
/* 一个按钮就可以完成 */
$("#showHide").click(function(){
// $("#div").toggle("slow");
/* 增大是显示:slideDown
减少是收藏:slideUp
*/
// $("#div").slideUp("slow");
// $("#div").slideToggle("slow")
/* 淡入,淡出 */
/*$("#div").fadeIn("slow");*/
/*$("#div").fadeOut(5000);*/
$("#div").fadeToggle(5000);
}); $("#animate").click(function(){
/* 为div增加动画
参数1:是css样式
参数2:是速度
*/
$("#div").animate({
left:"800px",
top:"400px"
},5000);
}); /* type ==== js中的typeof
为要使用type,不使用typeof,
因为我们使用的是Jquery,
*/
console.info("==type==" + $.type( $("li") ));
console.info("==type==" + $.type( 2))
/* 此返回值:true和false */
console.info("==type==" + $.isNumeric(2));
/* 去掉前后的空格 */
var str = " 袁 崇 焕 " ;
console.info("==str==" + str + "=====");
console.info("==trim==" + $.trim(str) + "=====");
});
</script>
<style type="text/css">
div{
background-color: red;
width: 200px;
height: 200px;
position: relative;
}
</style>
</head>
<body>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="showHide">显示/隐藏</button>
<button id="animate">动画</button>
<div id="div">这是js</div>
这是后面的内容
</body>
</html> |
