jQuery入门与使用

最新推荐文章于 2024-04-25 07:00:00 发布

D灿

最新推荐文章于 2024-04-25 07:00:00 发布

阅读量332

点赞数

分类专栏： JavaWeb开发技术 Java从入门到高级编程文章标签： jquery java

本文链接：https://blog.csdn.net/zuosixiaonengshou/article/details/62441566

版权

Java从入门到高级编程同时被 2 个专栏收录

51 篇文章 8 订阅

订阅专栏

JavaWeb开发技术

14 篇文章 0 订阅

订阅专栏

What is jQuery?

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

简单点就是用在前端上的JS，是一个Javascript函数库，里面封装了js对页面的所有操作。

在使用jQuery之前要到官网http://jquery.com/下载jQuery的文件，现在最新版本是jquery-3.1.1.js，要把它放到我们的项目中，在jsp中才可以使用它。

入门

由于初次学习jQuery，所以今天的代码都是很简单的。

one.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>jQuery技术</title>
    <script type="text/javascript" src="<c:url value='/js/jquery-3.1.0.js' />"></script>
    <script type="text/javascript">
    	//jQuery核心函数1：jQuery(callback)  页面一加载完就立即执行回掉函数callback
			//该方式的功能类似于:window.οnlοad=function(){....}
			jQuery( function(){
				//jQuery核心函数2：选择页面上的元素  jQuery([sel,[context]])  功能：根据选择器(参数sel)选中页面中的元素，并把它转换成jQuery对象，这样就可以调用jQuery中的方法了
				jQuery("#btn1").click( function(){
					alert("Hello  World");
				});
			});
			
			//利用别名$
			$(function(){
				$("#btn2").click(function(){
					alert("一般都是使用别名 '$()'.");
				});
			});
			
			//$(fn)和window.load=fn的区别：jQuery是添加fn事件(可重复添加，顺序执行),而后者则是将当前fn事件来替换掉旧的事件
			$(function(){
				$("#btn1").click(function(){
					alert("第二个fn ...");
				});
			});
    </script>
  </head>
  
  <body>
      <button id="btn1">--btn1--</button><br><br><br>
        <button id="btn2">--btn2--</button><br><br><br>
  </body>
</html>

结果图：

two.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>jQuery技术</title>
    <script type="text/javascript" src="<c:url value='/js/jquery-3.1.0.js' />"></script>
  </head>
  
  <body>
      <button id="btn1">--btn1--</button><br><br><br>
        <button >--按钮2--</button><br><br><br>
       <button >--按钮3--</button><br><br><br>
    <script type="text/javascript">
    	$(function(){
    		var btn=$("#btn1");
    		btn.click(function(){
    			//学习设置一个页面元素的属性
    			$("button").attr("disabled","disabled");//元素选择器  选择所有<button>标签
    			alert("噔噔...");
    			alert("噔噔...噔噔噔噔");
    			$("button").removeAttr("disabled");//从每一个匹配的元素中删除一个属性
    		});
    	});
    
    </script>
  </body>
</html>

结果：

three.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>jQuery技术</title>
    <style type="text/css">
    	div{
    		width: 60%;
    		height: 150px;
    		background: yellow;
    		margin: 10px;
    	}
    </style>
    <script type="text/javascript" src="<c:url value='/js/jquery-3.1.0.js' />"></script>
    <script type="text/javascript">
    	/*jQuery选择器和CSS的一样,如：
    		1. "#"为id选择器
    		2. "E"为元素选择器
    		3. "E E2"为包含选择器
    		4. "."为类选择器
    		5. "input[name='age']"属性选择器
    		6. ":"冒号选择器
    	*/
    	$(function(){
    		//1. "#"为id选择器
    		$("#btn1").click(function(){
    			//2. "E"为元素选择器
    			$("#d1").html("这里是div1......");//会把id为"#d1"中的所有html内容替换
    			$("div:first").html("看，，下雪了....");
    			$("div:eq(2)").html("..................");//eq(index)获取第N个元素，index>=0,从0算起;index<0,从最后一个元素开始倒数.
    			
    			//3. "E E2"为包含选择器
    			//$("div p").html("包含选择器演示......");
    			$("#d1~div").html("今天天气不错...");//prev ~ siblings  匹配 prev 元素之后的所有 siblings 元素(找到所有同辈的 元素,本身不算)
    			
    			//4. "."为类选择器
    			$(".fd1").css("background","blue").html("类选择器").css("border","1px solid red");
    			
    			//5. "input[name='age']"属性选择器
    			var text=$("input[name='name']").val();//选择name值为"name"的<input>标签，并获取其中的值
    			//alert(text);
    			$("input[name='age']").val("22");//设置值
    			
    			//6. ":"冒号选择器
    			var len=$(":input").length;
    			alert(len);
    		});
    	
    	});
    	
    </script>
  </head>
  
  <body>
  	<input type="button" value="演示jQuery选择器" id="btn1">
  	<div id="d1">
  		<p>div1----ppppppppp</p>
  	</div>
  	<div id="d2">
  		<p>div2----ppppppppp</p>
  	</div>
  	<div id="d3">
  		<p>div3----ppppppppp</p>
  	</div>
  	<div id="d4">
  		<b>bold
  			<p>div4----ppppppppp</p>
  		</b>
  	</div>
  	
  	<form>
  		<div class="fd1">aaaa</div>
  		Name:<input type="text" name="name"/>
  		Age: <input type="text" name="age"/>
  	</form>
  </body>
</html>

未点击按钮之前：