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>")
}
});
}
补充:
val("aa"):针对带有value属性的元素进行赋值,其实就是给该元素的value赋值
html("aa"):针对某一个元素,可以使用元素左右包括起来一段值的元素赋值。如:<div></div>;并且该方法可以写html代码,如<font></font>
text("aa"):该方法针对那些可以在两个标签中写值的赋值工作。如:<div>aaaaaaaaaaaaaas</div>