五.JQuary 实例

时间:2023-03-09 06:11:27
五.JQuary 实例

  需要引入jquery.js文件

  script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
</head>
<script type="text/javascript">
// var $ = $uery.noConflict();
$("document").ready(function () {
$("div#id1").click(function () {
$(this).hide();
});
$("[href]").click(function () {
$("#xq").trigger("click");
});
$("button").click(function () {
$("div").css("background-color","red");
$("div").css("height","100px");
$("div").html("<h1>海文你好</h1>");
});
$("button").bind("mouseover",function () {
$("div").css("background-color","yellow");
}).bind("mouseout",function () {
$(this).css("background-color","green");
});
$("#xq").click(function () {
$("input").trigger("select");
$("div#f1").fadeOut(2000,function () {
alert("我要消失了");
});
});
});
</script>
<body>
<div id="f1">点我</div>
<div class="c1" >点我 哈哈</div>
<div>点我</div>
<div id="id1">点我 hehe</div>
<a href="#">我是超链接</a>
<button>改变样式</button>
<input value="hahaha"><input value="hahaha"><input value="hahaha">
<button id="xq">选取</button>
</body>
</html>