初窥Jquery

原创于 2019-03-03 23:13:28 发布 · 163 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

3 篇文章

订阅专栏

上次在本人使用ajax后发现重复代码过多，冗余。在好友的大力推荐下，我使用了jquey框架进行了开发。
入门小案例，改变按钮的值

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
function a() {
	$("#aaa").val("9999999999");
}
</script>
<body>

	<!-- <h3><a href="#" onclick="load()">使用Jquery执行load请求</a></h3> -->
	<h3>
		<input type="button" onclick="a()" value="使用Jquery执行load请求" />
	</h3>

	<input type="text" id="aaa" />

</body>

使用Jquery演示get方法

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
	function  get() {
		$.get("/DemoServlet02",function(data,status){
			
			// $("#div01").val();  用于设置元素value的属性 
			$("#div01").html(data);
		})
	}
</script>
<body>
	<h3>
		<input type="button" onclick="get()" value="使用Jquery演示get方法" />
	</h3>
	<div id="div01" style="width: 100px;height: 100px; border: 1px solid blue;">
		
	</div>
</body>

/DemoServlet02:后端的地址，数据的来源
data：后端传来的数据(收到请求) eg:response.getWriter().print(“收到请求”);
status：状态码
$("#div01").html(data) ： 将后端传来的数据（data）放入id为span01的div中的值

使用Jquery演示post方法

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
	function post(){
		 $.post("/DemoServlet02", {name:"张三",age:18}, function(data,status){
			alert(data);
			$("#div01").html(data);
		 });
	}
</script>
<body>
	<h3>
		<input type="button" onclick="post()" value="使用Jquery演示post方法" />
	</h3>
	<div id="div01" style="width: 200px;height: 200px; border: 1px solid blue;" >
		
	</div>
</body>

{name:“张三”,age:18}: 将要在post请求中传入的值，格式必须为json格式

jquery实现校验用户名

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
	function checkusername(){
		// 1.获取输入框的内容
		
		// 2.发送请求
		
		 $.post("/Demo01Servlet", {name:$("#name").val()}, function(data,status){
		// 3.输出响应的数据到页面上
			if(data ==1){
				
				$("#span01").html("用户名以存在！");
			}else{
				$("#span01").html("用户名可用！");
			}
		 });
		
		
	}
</script>
<body>
	<center>
		<h3>用户注册界面</h3>
	</center>
	<table border="1" width="500" align="center">
		<tr align="center">
			<td>用户名:</td>
			<td><input type="text" name="name" id="name"
				onblur="checkusername()">&nbsp;&nbsp;&nbsp;&nbsp;<span
				id="span01"></span></td>
		</tr>
		<tr align="center">
			<td>密码</td>
			<td><input type="text" name=""></td>
		</tr>
		<tr align="center">
			<td>邮箱</td>
			<td><input type="text" name=""></td>
		</tr>
		<tr align="center">
			<td>简介</td>
			<td><input type="text" name=""></td>
		</tr>
		<tr align="center">
			<td colspan="2" align="center"><input type="submit" value="注册"></td>
		</tr>
	</table>
	
</body>

jquery实现百度页面

<title>百度一下,你就知道</title>
</head>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/baidu.js"></script>
		
<body>
		<div align="center"><img src="img/baidu.png" style="width: 270px;height: 129px"></div>
	<div align="center">
		<input type="text" name="word" id="word"  style="height: 40px ;width: 700px;font-size: 20px"  >
		<input type="button" value="百度一下" style="height: 50px ;width: 100px" />
		<div id="div01"style="position:relative; left: -52px; height: 200px ;width: 700px; "></div>
		
	</div>
			
</body>

：这里我把js代码**单独**放到一个文件中，然后通过**src属性**来进行**加载**

baidu.js

// 捕捉到键盘弹起的事件
//在文档准备就绪的时候，对某一个元素进行onkeyup事件监听
// $()的前身  $(document).ready(function(){
//	 
// })

$(function(){
	$("#word").keyup(function(){
// 获取输入框的值
// 请求数据
		if($(this).val() == ""){
			$("#div01").hide();
		}else{
			$.post("/WordServlet",{word:$(this).val()},function(data,stauts){
				
				$("#div01").show();
				$("#div01").html(data);
			});
		}
		
	})
});

$(function(){}：在所有事件执行之前
keyup ： 键盘弹起
后端页面

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// 处理乱码
		req.setCharacterEncoding("utf-8");
		resp.setCharacterEncoding("utf-8");
		// 让dao执行参数
		String word = req.getParameter("word");
		System.out.println(word);
		WordsDao dao = new WordsDaoImpl();
		List<Word> list = dao.findWords(word);
		for (Word word2 : list) {
			System.out.println(word2.getWord());
		}
		req.setAttribute("list", list);
		// 返回数据
		req.getRequestDispatcher("list.jsp").forward(req, resp);

	}

这里我把查询到的list重定向到list.jsp页面，然后把jsp页面的数据放到span标签中

如果需要js的jar包的话.请加QQ: 2424180270