收藏
批改状态：合格
老师批语：
1、相册
先贴代码：
重点：首先找到相应的元素，再给与赋值
会用文档插入方法attr()，prop(),after(),before(),append(),appendTo()
会用选取方法parent(),prev(),next()
会创建节点$('<label>')
会改变元素css样式方法css()
html部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>0409,相册管理器</title> <link rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/index.js"></script> </head> <body> <div class="box"> <div class="header"> <p><h2>相册管理</h2></p> <p> <label for="img_url">请输入图片链接：</label> <input type="text" name="img_url" id="img_url" value="" placeholder="images/zly.jpg"> </p> <p> 请选择图片类型： <input type="radio" name="img_type" value="0" checked><label>直角</label> <input type="radio" name="img_type" value="10%"><label>圆角</label> <input type="radio" name="img_type" value="50%"><label>圆形</label> </p> <p> 是否添加阴影： <select id="shadow"> <option value="0" selected>不添加</option> <option value="1">添加</option> </select> </p> <p> <button id="btn">提交</button> </p> </div> <div class="main"> <ul></ul> </div> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
css部分
.box{width: 360px;border:1px solid red;background-color: lightgreen;margin: 0 auto}
h2{text-align: center}
.box p{margin:10px;}
.main ul{overflow: hidden;list-style: none;margin: 0;padding:0;}
.main ul li{float: left;width:150px;margin-left: 20px;margin-bottom: 10px}
.main ul li img{width:150px;height:150px;}点击 "运行实例" 按钮查看在线实例
js部分
$(document).ready(function(){
$('#btn').on('click',function(){
//选择输入框中的链接
var img_url = $(':input').val()
// console.log(img_url)
//判断是否为空，为空就提示
if(img_url.length==0){
alert('请输入图片链接')
$('#img_url').focus()
return false
}
//获取图片类型单选框值
var img_type = $(':input:checked').val()
// console.log(img_type)
//是否添加阴影，根据获取到的值给样式赋值
var shadow="none"
if ($(':selected').val()==1) {
shadow='3px 3px 3px #666'
}
// 创建三个操作按钮
var before = $('<button>').text('前移')
var after = $('<button>').text('后移')
var remove = $('<button>').text('删除')
//创建图片元素并赋予前面获取的属性值
var img = $('<img>').attr('src',img_url).width(150).height(150).css({'border-radius':img_type,'box-shadow':shadow})
// 创建li并将图片和按钮插入到li
var li = $('<li>').append(img,before,after,remove)
// 将li插入到ul中
li.appendTo($('ul'))
/*移动操作部分*/
// 向前移动
before.click(function(){
$(this).parent().prev().before($(this).parent())
})
//向后移动
after.click(function(){
$(this).parent().next().after($(this).parent())
})
//删除部分
remove.click(function(){
$(this).parent().remove()
})
})
})点击 "运行实例" 按钮查看在线实例
运行效果
2.注册表单
语法：$.post(url, data, success, dataType)
重点：寻找url，data，success将这几个值获取到后，插入到$.post()内（url为表单提交目标地址，data为需要提交的字符串，sucess为服务器处理后响应值，响应值应给与判断，成功后跳转，不成功返回）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>0409,AJAX_POST</title>
</head>
<body>
<form action="api/check.php" method="post">
<fieldset>
<legend>用户登陆</legend>
<p>
<label for="email">用户邮箱：</label>
<input type="text" name="email" id="email" placeholder="请输入邮箱">
</p>
<p>
<label for="psw">用户密码：</label>
<input type="password" name="password" id="psw" placeholder="请输入密码">
</p>
<p>
<button id="btn">提交</button>
<span id="tips" style="color: red"></span>
</p>
</fieldset>
</form>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$('#btn').on('click',function(){
//语法：$.post(url, data, success, dataType)，
//关键：准备$.post()需要的参数
/*url==提交地址*/
var url='api/user.php?m=login'
/*data==提交数据==登陆框里面的文本内容*/
var data={'email':$('#email').val(),'password':$('#psw').val()}
/*success==成功后服务器返回数据*/
//判断是否成功
var success=function(res){
//根据user.php定义，返回1代表成功，插入到tips里面
if(res == '1'){
$('#tips').text("登陆成功，正在跳转...")
setTimeout(function(){
//加上跳转链接
location.href = 'api/index.php'
},2000)
}else{
$('#tips').text("登陆失败，请检查输入...")
$('#email').focus()
setTimeout("$('#tips').empty()",2000)
}
}
//dataType默认json
var dataType = 'json'
$.post(url, data, success, dataType)
//禁止默认提交
return false
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
效果图
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
