JQuery学习

最新推荐文章于 2024-05-05 09:15:00 发布

原创最新推荐文章于 2024-05-05 09:15:00 发布 · 186 阅读

0 ·

CC 4.0 BY-SA版权

Jquery 专栏收录该内容

9 篇文章

订阅专栏

JQuery是什么？

是javascript的一个框架集合，并不是什么新技术

有什么用？

JQuery 是一个 javaScrip的框架，它的宗旨是： Write Less , Do More. 写更少的代码，完成更多的工作。平常我们如果使用ajax来完成交互工作，可能要写很多代码。并且代码重复性比较高。那么能不能让代码写的少一点，重复性第一点 , jQuery 做的就是这个事。

在jQuery程序中，不管是页面元素的选择、内置的功能函数，都是美元符号“$”来起始的。而这个“$”就是jQuery当中最重要且独有的对象：

jQuery对象，所以我们在页面元素选择或执行功能函数的时候可以这么写：

$(function () {}); //执行一个匿名函数

$(‘#box’); //进行执行的ID元素选择

$(‘#box’).css(‘color’, ‘red’); //执行功能函数

在执行功能函数的时候，我们发现.css()这个功能函数并不是直接被“$”或jQuery对象调用执行的，而是先获取元素后，返回某个对再调

用.css()这个功能函数。那么也就是说，这个返回的对象其实也就是jQuery对象。值得一提的是，执行了.css()这个功能函数后，最终返回

的还是jQuery对象，那么也就是说，jQuery的代码模式是采用的连缀方式，可以不停的连续调用功能函数。

$('#box').css('color', 'red').css('font-size', '50px'); //连缀

load():

格式：$("#元素id").load(url地址);

要想使用JQuery ，必须得先添加它的依赖。

1. 导入jquery的支持

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

2. 在早前，我们要使用ajax 去执行请求，需要写代码很多，请求数据回来后，要赋值显示，也是比较复杂。但是JQuery 只要简单的一行代码即可。

//默认使用的get请求，回来赋值的时候， 使用text()去赋值;输入框使用val()去赋值。
$(#div01).load("Demo01");

解释起来的话是：

$(#div01) ---> 代表找到页面上 id 为 div01 的节点

load("Demo01"); 代表去加载这个路径的值。当然这里写的是servlet的相对路径地址。

/*有两次刷新，  先走 onClick的方法，取到数据回来之后，赋值显示。 接着 走 href=""的路径，但是这个属性没有给值，所以会把当前的页面重新再刷新一次。所以导致看不见值。*/
<a href="" onclick="load()">使用JQuery执行load方法</a>

//找到id为aaa的这个元素， 去执行加载的动作， 加载/day16/DemoServlet02 ， 得到的数据，赋值显示
$("#aaa").load("/day16/DemoServlet02" , function(responseText , statusTXT  , xhr) {
	//找到id为text01的元素， 设置它的value属性值为 responseText 对应的值
	$("#aaa").val(responseText);
});

get():

语法格式： $.get(URL,callback);

案例：

$.get("/AjaxDemo/ServletDemo1", function(data, status) {
	alert("结果是：" + data);
	$("#div").text(data);
});

Post():

语法格式：$.post(URL,data,callback);

案例：

$.post("ServletDemo1",{name:"zhangsan",age:18},function(data,status){
	alert(data);
	$("#div").text(data);//想要放数据到div里面去。 --- 找到div
});

案例：使用JQuery去实现校验用户名

function checkUserName(){
	//1、获取输入框的内容
	var name = $("#name").val();
		
	//2、发送请求
	$.post("/AjaxDemo/CheckUserNameServlet",{name:name},function(data,status){
		if(data==1){
			alert("用户名已被使用")
			$("#span1").html("<font color='red'>用户名已被注册</font>")
		}else{
			$("#span1").html("<font color='green'>用户名可以使用</font>")
		}
	});
}