jQuery学习
1.jQuery简介
jquery是一个快速、简洁的JavaScript框架，可以简化JavaScript编程。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".xs").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p class="xs">如果你点我，我就会消失。</p>
<p class="xs">点我!点我！点我！</p>
<p>点我!我不会消失。</p>
<p>我不消失。</p>
<p class="xs">我会消失。</p>
</body>
</html>
当运行上述代码块时，点击标题“隐藏全部文字”时，所有段落都显示。而当点击“隐藏这些文字”按钮时，“这是一些文字”会消失。而又当点击“显示这些文字”按钮时，“这是一些文字”会重新出现。
3.课堂作业
使用ajax来做一段查询天气的代码
作业完成的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
document.addEventListener('plusready', function(){
});
$(document).ready(function(){
$("button").click(function(){
var city=$("#city").val();
$.ajax({
type:"GET",
url:"http://wthrcdn.etouch.cn/weather_mini?city=北京",
dataType:"json",
success:function(result){
addBox(result.data.forecast);
}
});
/*-----------------------------------end--------------------------------*/
});
});
function addBox(json_data) {
$.each(json_data, function(index, obj) {
$("#box").append("<div'>" +
"<p>" + obj['date'] + "</p>" +
"<p>" + obj['high'] + "</p>" +
"<p>" + obj['fengli'] + "</p>" +
"<p>" + obj['low'] + "</p>" +
"<p>" + obj['fengxiang'] + "</p>" +
"<p>" + obj['type'] + "</p>" +
"</div>");
});
}
</script>
</head>
<body>
<div>
<h3>请输入城市：</h3>
城市：<input type="text" id="city"/>
<br>
<button type="button">提交</button>
</div>
<br>
<div id="box"></div>
</body>
</html>
1786
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
