1.jQuery库的导入:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.2.min.js"></script> //在线导入
<script type="text/javascript" src="jquery-1.12.2.min.js"></script> //导入本地jQuery文件
2.jQuery使用方法:
$("id or class or tagName").属性();
Eg:
<span style="font-size:14px;"><html>
<head>
<title>jQuery</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.2.min.js"></script>
<style>
#cicle {
width:100px;
height:100px;
background:red;
border-radius:50px;
}
.square {
width:100px;
height:100px;
background:yellow;
}
</style>
</head>
<body>
<div id="cicle"></div>
<div class="square"></div>
<div class="square"></div>
<script type="text/javascript">
$("#cicle").click(function() {
alert("cicle jQuery");
}
);
</script>
</body>
</html></span>
alert($("p").html());获取内容
$("p").html("who?");设置内容
4.用jQuery获取和设置标签属性:
eg:
<iframe src="http://www.baidu.com"></iframe>
获取:$("iframe").attr("src");
设置:$("iframe").attr("src", "http://www.sina.com");.
5.利用jQuery设置和获取css的属性和内容:
alert($(".square").css("width“));获取
$(".square").css("width“, "200px");设置
有多个div
$(”div“).hide(); 隐藏div中的内容。
$(”div“).fadeOut(); 渐渐淡去。
$(this).hide(); this指鼠标点击到的div.