一、事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div>
<div>
<a href="http://www.qq.com">点我</a>
</div>
<form action="http://www.baidu.com">
<label>
User <input type="text">
</label>
<label>
Password <input type="password">
</label>
<input type="submit" value="提交">
</form>
</div>
<script type="text/javascript">
$("a").click(function () {
// 阻止a标签和from表单的默认行为
event.preventDefault();
// 阻止冒泡
event.stopPropagation();
console.log("a");
});
$("form").click(function () {
// 阻止a标签和from表单的默认行为
event.preventDefault();
// 阻止冒泡
event.stopPropagation();
console.log("form");
});
$("div").click(function () {
// 阻止a标签和from表单的默认行为
event.preventDefault();
// 阻止冒泡
event.stopPropagation();
console.log("div");
})
</script>
</body>
</html>
二、ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<button>获取天气</button>
<p></p>
<script type="text/javascript">
$(function () {
$("button").click(function () {
$.ajax({
url:'https://free-api.heweather.com/s6/weather/now?location=beijing&key=b73a12edfab24ef6827447dc7557f50d',
type:"get",
dataType:'text',
success:function (data) {
console.log(data);
// 把字符串转换成可操作的数组
var jsonData = JSON.parse(data);
console.log(jsonData);
$("p").text(data)
},
error:function (err) {
console.log(err);
}
})
})
})
</script>
</body>
</html>
三、media
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title></title>
<style>
@media screen and (min-width: 1170px){
body{
background-color: red;
}
}
@media screen and (min-width: 880px) and (max-width: 1170px){
body{
background-color: green;
}
}
@media screen and (max-width: 880px){
body{
background-color: yellow;
}
}
</style>
</head>
<body>
</body>
</html>
