$('选择器').heght();
$('选择器').heght(200);//设置高
//宽同理
$('选择器').innerWidth();//只读属性，算上padding
$('选择器').outerWidth();//只读属性,算上padding和border
$('选择器').outerWidth(true);//只读属性,算上padding和border和margin//位置
$('选择器').offset(); //偏移位置
$('document').scrollTop(); //属性可以设置，滑动距离//对象深浅复制
$.extend([deep(true/false[默认])],target,source1,[source2…]);// 浅复制 只复制引用类型的第一层中的基础类型$.extend(b, a)b.id = 10000b.data.a = 'hello'console.log(a, b) ;// 深复制$.extend(true,b, a)b.id = 10000// b.data.a = 'hello'console.log(a, b)
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul {list-style: none;}body,html{height: 5000px;}header {height: 500px;}.text1 li {height: 400px;background-color: rgb(0, 121, 71);margin-top: 30px;}.textIndex {position: fixed;right: 50px;top: 300px;}.clickHandle {color: #e1251b;}</style>
</head><body><div><header>头部信息</header><ul class="text1"><li>衣服</li><li>玩具</li><li>手机</li><li>电器</li><li>家具</li></ul><ul class="textIndex"><li>衣服</li><li>玩具</li><li>手机</li><li>电器</li><li>家具</li><li class="top" style="display: none;">top</li></ul></div><script src="./js/jquery.js"></script><script>var notclick = true;function getScroll() {var height = $(document).scrollTop();if (height >= $('.text1 > li:eq(0)').offset().top) {$('.textIndex>li:last').fadeIn();} else {$('.textIndex>li:last').fadeOut();}if (notclick) {// console.log("111111");$('.text1>li').each(function (index, ele) {let offsetTop = $(ele).offset().top;if (height >= offsetTop-100)$('.textIndex>li').eq(index).addClass('clickHandle').siblings().removeClass('clickHandle');else $('textIndex>li').eq(index).removeClass('clickHandle');})}}$(function () {getScroll();})$(window).scroll(function () {getScroll();})$('.top').click(function(){$(document).scrollTop(0);notclick = true;})$('.textIndex>li').click(function () {notclick = false;if ($(this).index() == ($('.textIndex').length - 1)) {// console.log("22222");// $(document).scrollTop(0);// notclick = true;} else {$(this).addClass('clickHandle').siblings().removeClass('clickHandle');let offsetTop = $('.text1 > li').eq($(this).index()).offset().top;$('html,body').animate({scrollTop: offsetTop}, function () {notclick = true})}})</script></body></html>
主要用于ajax请求
$.get(url,callback);
$.post(url,data,callback);//具体写法
$.ajax({
url:’请求地址’,
type:’GET/POST/PUT/DELTE’, // 请求http方法
timeout:10,// 请求超时时间（毫秒）
headers:{},// 请求添加的额外头信息
data:{}/string, // 请求体数据
dataType:’json/jsonp’,// 服务器返回数据类型
success:function(ret){},// 请求成功回调
error:function(){},// 请求失败回调
})
jQuery有丰富的插件库可在网上查找下载
有cookie、图片懒加载、瀑布流、表单验证等插件。
例如：
/
/
$.fn.方法名=function(){};
在后面的函数中可以自行定义
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* #avatar{width: 100px;height: 100px;} */label{margin-left: 15px;font-size: 12px;color: gray;}</style>
</head><body><iframe src="" frameborder="0" name="upfile" style="display: none;"></iframe><img src="" alt="" id="avatar"><h2 id="hh"></h2><form id="register" target="upfile" action="register.php" method="POST" enctype="multipart/form-data">账号：<input type="text" name="username"><br><br>密码：<input type="password" name="password"><br><br>头像：<input type="file" name="pic" id=""><br><br><input type="submit" value="注册" name="" id=""></form><script src="./js/jquery.js"></script><script src=".14.0/lib/jquery.js"></script><script src=".14.0/dist/jquery.validate.min.js"></script><script>// $('sub').click(function(){// $.post('register.php',$('#reg').serialize().null,'json').then(res=>{// alert(res.msg);// })// })$.validator.setDefaults({submitHandler: function() {alert("提交事件!");}
});
$().ready(function() {
// 在键盘按下并释放及提交后验证提交表单$("#register").validate({rules: {username: {required: true,minlength: 2},password: {required: true,minlength: 5},},messages: {username: {required: "请输入用户名",minlength: "用户名必需由两个字母组成"},password: {required: "请输入密码",minlength: "密码长度不能小于 5 个字母和数字"}}});
});</script>
</body></html>
<?phprequire("./connection.php");$username=$_POST['username'];
$password=$_POST['password'];
$file=$_FILES['pic'];$ext=end(explode('.',$file['name']));$filename=time().'.'.$ext;$upload=__DIR__.'./upload/'.$filename;// //上传
move_uploaded_file($file['tmp_name'],$upload);$imgPath='./upload/'.$filename;$sql="INSERT INTO `user2` VALUES ('$username' , '$password' , '$imgPath')";$res=mysqli_query($con,$sql);if(!$res){// die('error,用户名已存在' . mysqli_error($con));echo "<script>console.log(ElementById('hh').innerHTML='用户名已存在请重新注册！')</script>";
}else{echo "<script>console.log(ElementById('avatar').src='{$imgPath}')</script>";
}本文发布于:2024-01-30 15:39:13，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170660035421051.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
