jQuery_day01笔记

最新推荐文章于 2023-06-26 21:52:14 发布

菲菲非非飞飞飞方

最新推荐文章于 2023-06-26 21:52:14 发布

阅读量132

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/weixin_44871569/article/details/101309286

版权

Ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jQuery

它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

获取列表的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		//导包：加载当前目录下js文件夹下的jquery-1.8.3.min.js文件
		<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	</head>
	<body>
		<ul>
			<li>苹果</li>
			<li>橘子</li>
			<li>芒果</li>
		</ul>
		<script type="application/javascript">
			//1、获取元素
			var $lis = $("ul>li");//jQuery元素：约定jQuery元素命名用$...
			var lis = document.getElementsByTagName("li");//js元素
			//2、操作元素
			$lis.each(function(index,element){
				//控制台输出
				console.log(index);
				console.log(element);
			});
		</script>
	</body>
</html>

live()：给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	</head>
	<body>
		<ul>
			<li>苹果</li>
			<li>橘子</li>
			<li>芒果</li>
		</ul>
		<input type="text" id="ulli" /><input type="button" value="添加" id="btn" />
		<script type="application/javascript">
			$("li").live("click",function(){
				alert($(this).html());
			})
			
			$("#btn").first().click(function(){
				//动态添加li元素
				$("ul:first").append($("<li>").html($("#ulli").val()));
			})
		</script>
	</body>
</html>

表单验证（判断非空）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		//导包
		<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	</head>
	<body>
		<form method="post">
			姓名：<input type="text" name="userName" /><br />
			密码：<input type="password" name="password" /><br />
			<input type="submit" value="登录" />
		</form>
		<script type="application/javascript">
			//获取表单中input对象的第一个
			$(":input:first").blur(function(){
				//失去焦点，获取它的值，val（）不填为返回，填了为赋值
				//console.log($(this).val("fff"));
				var val = $(this).val();
				//在控制台输出
				console.log(val);
			});
			$("form:first").submit(function(){
				//循环遍历
				$(":input").each(function(index,element){
					if(element.value == "" ||element.value == null){
						alert("用户名和密码不能为空");
						return false;
					}
				});
				return true;
			})
		</script>
	</body>
</html>

轮播

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>轮播</title>
		<script src="js/jquery-1.8.3.min.js"></script>
		<style>
			*{
				margin: 0 auto;
				padding: 0;
			}
			#father{
				width: 320px;
				height: 180px;
				overflow: hidden;
				position: relative;
			}
			#ul1{
				width: 1280px;
				height: 180px;
				position: absolute;
				top: 0;
				left: 0;
			}
			#ul1>li{
				width: 320px;
				height: 180px;
				float: left;
			}
			#ul2{
				width: 108px;
				height: 36px;
				position: absolute;
				bottom: 5px;
				right: 5px;
			}
			#ul2>li{
				width: 26px;
				height: 26px;
				margin: 5px;
				float: left;
				line-height: 26px;
				font-size: 18px;
				color: white;
				text-align: center;
				cursor: pointer;
				border-radius: 50%;
				background-color: rgba(0,0,0,0.6);
			}
			#son1{
				width: 26px;
				height: 26px;
				position: absolute;
				top: 77px;
				left: 0;
				background-color: rgba(0,0,0,0.5);
				line-height: 26px;
				font-size: 15px;
				color: white;
				text-align: center;
				cursor: pointer;
			}
			#son2{
				cursor: pointer;
				width: 26px;
				height: 26px;
				position: absolute;
				top: 77px;
				right: 0;
				background-color: rgba(0,0,0,0.5);
				line-height: 26px;
				font-size: 15px;
				color: white;
				text-align: center;
			}
			li{
				list-style-type: none;
			}
		</style>
	</head>
	<body>
		<div id="father">
			<ul id="ul1">
				<li><img src="imgs/1.jpg" width="320" height="180" /></li>
				<li><img src="imgs/2.jpg" width="320" height="180" /></li>
				<li><img src="imgs/3.jpg" width="320" height="180" /></li>
				<li><img src="imgs/1.jpg" width="320" height="180" /></li>
			</ul>
			<ul id="ul2">
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ul>
			<div id="son1">&lt;</div>
			<div id="son2">&gt;</div>
		</div>
		<script type="application/javascript">
			/* 初始绑定  */
			//动画状态定义
			var isAnimate = false;
			//跳转动画计时器
			var playTime = null;
			//记录火车定位
			var points = [0,-320,-640,-960];
			//鼠标移入停止自动播放
			father.onmouseover = stop;
			//鼠标移出继续播放
			father.onmouseout = play;
			
			//每个数字按钮绑定单击事件
			$("#ul2>li").each(function(index,ele){
				$(this).click(function(){
					myAnimate(points[index]);
				});
			});
			//上一张按钮绑定单击事件
			$("#son1").click(function(){
				//判断是否在动画中，意义在于防止连续点击
				if(!isAnimate){
					isAnimate = true;
					//获取当前位置
					var leftPoint = parseInt($("#ul1").css("left"));
					//如果是第一张图片
					if(leftPoint == 0){
						//置为最后一张图片
						$("#ul1").css("left","-960px");
					}
					$("#ul1").animate({'left':parseInt($("#ul1").css("left"))+320+"px"},1000,function(){
						//开锁，播完一张再开锁
						isAnimate = false;
					});
				}
			});
			//下一张按钮绑定事件
			$("#son2").click(function(){
				myAnimate();
			});
			
			play();
			/* 定义函数  */
			//图片过滤动画函数,后一张
			function myAnimate(toPoint){
				//判断是否在动画中
				if(!isAnimate){
					//上锁
					isAnimate = true;
					if((parseInt($("#ul1").css("left")))-320<-960){
						$("#ul1").css("left","0");
					}
					if(toPoint == null){
						toPoint = (parseInt($("#ul1").css("left")))-320;
					}
					$("#ul1").animate({'left':toPoint+"px"},1000,function(){
						//开锁,播完一张再开锁
						isAnimate = false;
					});
				}
			};
			/* 开始播放动画  */
			function play(){
				playTime = setInterval(function(){
					myAnimate();
				},500);
			};
			/* 停止动画函数 */
			function stop(){
				if(playTime != null){
					clearInterval(playTime);
				}
			}
		</script>
	</body>
</html>

基于jQuery下Ajax实现模糊查询

Dao层

public interface CommodityDao {
	List<Commodity> getCommodityList(Commodity cc);
}

DaoImpl层

public class CommodityDaoImpl implements CommodityDao {
	public List<Commodity> getCommodityList(Commodity cc) {
		List<Commodity> cs = new ArrayList<>();
		try {
			Connection conn = DBHelper.getConnection();
			String sql = "select * from commodity where c_name like concat('%',?,'%')";
			List param = new ArrayList();
			param.add(cc.getC_name());
			ResultSet rs = DBHelper.executeQuery(conn, sql, param);
			while(rs.next()) {
				Commodity c = new Commodity();
				c.setC_id(rs.getString("c_id"));
				c.setC_name(rs.getString("c_name"));
				c.setC_madein(rs.getString("c_madein"));
				c.setC_type(rs.getInt("c_type"));
				c.setC_inprice(rs.getInt("c_inprice"));
				c.setC_outprice(rs.getInt("c_outprice"));
				c.setC_num(rs.getInt("c_num"));
				c.setCt(new CommoditytypeDaoImpl().getCommoditytypeById(rs.getInt("c_type")));
				cs.add(c);
			}
			DBHelper.closeConnection(conn);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return cs;
	}
}

controller层

public class CommodityController {
	private CommodityDao commodityDao=null;
	public CommodityController() {
		commodityDao=new CommodityDaoImpl();
	}
	public List<Commodity> getCommodityList(String search) {
		Commodity c = new Commodity();
		c.setC_name(search);
		return commodityDao.getCommodityList(c);
	}
}

servlet层

public class SearchCommodityServlet extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		String search = req.getParameter("search");
		List<Commodity> cList = new CommodityController().getCommodityList(search);
		PrintWriter writer = resp.getWriter();
		writer.write(JSON.toJSONString(cList));
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doGet(req, resp);
	}
}

jsp页面

<input type="text" id="search1" name="search" /><input type="button" value="搜索" id="btn" />
<p></p>
<script type="text/javascript">
	$("#btn").click(function(){
		$("p:first").html("");
		$.post("/web08/searchCommodityServlet",{"search":$("#search1").val()}, function(data){
			//console.log(data);
			for(var i=0;i<data.length;i++){
				$("p:first").html($("p:first").html()+data[i].c_name+"<br />");
			}
		},"json")
	});
</script>

菲菲非非飞飞飞方

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery_day01笔记

jQuery它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。获取列表的元素<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>...
复制链接

扫一扫