jQuery学习笔记

最新推荐文章于 2024-07-10 21:37:49 发布

qq_42758008

最新推荐文章于 2024-07-10 21:37:49 发布

阅读量173

点赞数

文章标签： java jQuery

本文链接：https://blog.csdn.net/qq_42758008/article/details/97299914

版权

jQuery学习笔记

1.jQuery选择器
基本操作#####
1.事件绑定
$("#b1").click(function(){
alert(“abc”);
});
2.入口函数
$(function(){
});
3.JQuery和js的区别：
JQuery对象在操作时更加方便。
JQuery和js的对象方法不通用。

选择器

1.基本选择器
*只定义一种样式
$(“p”).css(“color”,“green”);
*定义多种样式
$(“div”).css({
“width”:“150px”,
“height”:“150px”,
“background”:“red”
})
2.表单过滤选择器
可用元素选择器

语法： :enabled 获得可用元素
不可用元素选择器
* 语法： :disabled 获得不可用元素
选中选择器
* 语法： :checked 获得单选/复选框选中的元素
3.过滤选择器
首元素选择器
* 语法： :first 获得选择的元素中的第一个元素
尾元素选择器
* 语法： :last 获得选择的元素中的最后一个元素
非元素选择器
* 语法： :not(selector) 不包括指定内容的元素
等于索引选择器
* 语法： :eq(index) 指定索引元素
大于索引选择器
* 语法： :gt(index) 大于指定索引元素
小于索引选择器
* 语法： :lt(index) 小于指定索引元素

DOM操作

内容操作
html(): 获取/设置元素的标签体内容内容 --> 内容
text(): 获取/设置元素的标签体纯文本内容内容 --> 内容
val()：获取/设置元素的value属性值
属性操作
attr(): 获取/设置元素的属性
removeAttr():删除属性
prop():获取/设置元素的属性
removeProp():删除属性

JQuery高级部分

1. 动画
1. 三种方式显示和隐藏元素
* 默认显示和隐藏方式
show([speed,[easing],[fn]])
speed：动画的速度。
easing：用来指定切换效果，
fn：在动画完成时执行的函数，每个元素执行一次。
* hide([speed,[easing],[fn]])
* toggle([speed],[easing],[fn])
2. 滑动显示和隐藏方式
* slideDown([speed],[easing],[fn])
* slideUp([speed,[easing],[fn]])
* slideToggle([speed],[easing],[fn])
3. 淡入淡出显示和隐藏方式
* fadeIn([speed],[easing],[fn])
* fadeOut([speed],[easing],[fn])
* fadeToggle([speed,[easing],[fn]])
2. 事件绑定
1. on绑定事件/off解除绑定
* jq对象.on(“事件名称”,回调函数)
* jq对象.off(“事件名称”)
2. 事件切换：toggle
* jq对象.toggle(fn1,fn2…)
* 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2…

代码块

动画旋转
<html>
	<head>
		<meta charset="UTF-8">
		<title>动画</title>
		<style>
			.div{
				position: absolute;
				width: 200px;
				height: 200px;
				background: lightcoral;
			}
			.animation{
				transform: rotateZ(90deg);
				//过度 时间 过度的方式是匀速
				transition: 10s ease-in;
			}
		</style>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
		<script>
			$(function(){
				$("button").click(function(){
					$("div").addClass("div").animate({
						right:"200px",
					},1000).addClass("animation");
				})
			})
		</script>
	</head>
	<body>
		<button> click</button>
		<div></div>
	</body>
</html>

AJax

1.概念：是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
  	异步和同步：客户端和服务器端相互通信的基础上

代码块

<script type="text/javascript" src="js/jquery-3.1.1.min.js"> </script>
	<script>
		$(function(){
			$("[name='username']").blur(function(){
				var username = $("[name='username']").val();
				var span = $("span");
				if(username != null && username!=""){
					//将数据提交到后台进行数据库验证
					$.ajax({
						//数据提交的路径
						url:"HelloServlet",
						//提交的方式
						type:"post",
						//提交的数据
						data:{username:username},
						//代表提交成功返回的数据
						success:function(param){
							span.html("<p style='color:green;'>"+param+"</p>");
						}
					});
				}else{
					span.html("<p style='color:red;'>用户名不为空</p>");
				}
			});
		});
	
	</script>
  </head>
  
  <body>
  		<form action="HelloServlet" method="post">
    		<input type="text" name="username">
    		<span></span>
    		<input type="submit" value="提交">
    	</form>
  </body>

文件上传—代码块


//准备上传文件的保存路径
		String path = this.getServletContext().getRealPath("upload");
		//准备文件上传以后的保存路径
		SimpleDateFormat simple=new SimpleDateFormat("yyyy/MM/dd");
		String sonPath = simple.format(new Date());
		File file = new File(path,sonPath);
		//路径不存在就创建文件夹保存文件
		if(!file.exists()){
			file.mkdirs();
		}
		Collection<Part> parts = request.getParts();
		if(parts.size()==1){
			Part part = request.getPart("postfile");
			System.out.println(part+"===========");
			String head =part.getHeader("content-disposition");
			String[] split=head.split(";");
			String[] split2=split[2].split("=");
			String filename=split2[1];
			String substring = filename.substring(1,filename.length()-1);
			String subname=substring.substring(substring.indexOf("."));
			String finalname = new Date().getTime()+subname;
			part.write(file.toString()+File.pathSeparator+finalname);
		}

qq_42758008

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记

jQuery1.jQuery选择器基本操作#####1.事件绑定$("#b1").click(function(){alert(“abc”);});2.入口函数$(function(){});3.JQuery和js的区别：JQuery对象在操作时更加方便。JQuery和js的对象方法不通用。选择器1.基本选择器*只定义一种样式$(“p”).css(“color”...
复制链接

扫一扫