1.Jquery:是一javascript库文件.Jquery包含JavaScript,html,css,ajax等语言.
2.Jquery的作用:
2.1.访问和操作DOM元素
2.2.控制页面样式
2.3.对页面事件的处理
2.4.与Ajax技术的完美结合
2.5.大量插件在页面中的运用
3.Jquery的优点:
3.1:开源免费体积小.
3.2:写起来简单,减化代码.
3.3:屏蔽大部分浏览器兼容性问题.
3.4:有强大的插件支持.
3.5:与Ajax技术的完美结合,可以减化ajax实现
4.使用jquery步骤:
4.1:项目中导入Jquery库文件:
开发版的库文件jquery-版本号.js
发布版的库文件jquery-版本号.min.js
4.2:项目中引入Jquery的两种方式:
注意:Jquery的所有代码必须写在Jquery的加载事件中: ( d o c u m e n t ) . r e a d y ( ) 或 (document).ready() 或 (document).ready()或(function(){});
4.2.1:内部Jquery:
<!--内部jquery的使用-->
<script type="application/javascript">
//jquery的代码只能写在jquery加载事件中
jQuery(document).ready(function(){
alert("Hello 内部的jquery!");
})
</script>
4.2.2:外部Jquery
<!--导入jquery库-->
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<!--导入外部jquery文件的使用-->
<script type="application/javascript" src="js/外部.js"></script>
5.Jquery的加载事件和JavaScript的加载事件对比:
注意:javascrip对于同一个页面只认一个加载事件,如果当前页面写了多个加载事件,只加 载第一个.
6.Jquery总语法: ( 选 择 器 ) . 函 数 ( ) ; 6.1 : (选择器).函数(); 6.1: (选择器).函数();6.1:是Jquery单词的简写.
6.2:$()是工厂函数
7.Jquery选择器:
7.1:基本选择(4种):id选择器(#id名),类选择器(.类名),标记选择(标签名),全局选择器(*)
eg://id选择器
$("#d1").css(“color”,“red”);
//类选择器
$(".c2").css(“color”,“green”);
7.2:层次选择器(5种):并集选择(,),后代选择器(空格),子选择器(>),相邻兄弟器(+),同辈 选择器( ~ )
eg://同辈选择器:h2后面与他同级所有h3
$(“h2~h3”).css(“color”,“green”);
7.3:属性选择器(7种):
eg://属性选择器的使用
$("h3[class^=f]").css("color","red");
7.4:过滤选择器(10种)
eg://过滤选择器使用
$("li:odd").css("color","red");
7.5:可见性过滤选择器(2种)
eg://可见性过滤选择器的使用:让显示的标签隐藏
$(":visible").hide();
7.6:表单选择器
eg://表单选择器:把先的多先框遍历,打印遍历的每个多选框的value值
$("input:checked").each(function(){
alert($(this).val());
});
8.Jquery对象和JavaScript对象的相互转化:
8.1:JavaScript对象转化Jquery对象:var Jquery对象= $(JavaScript对象)
eg:/将JavaScript对象转换为Jquery对象/
//获得javaScript对象
var jsObject1=document.getElementById(“d3”);
//用javaScript对象调用属性输出
alert(“js对象使用:”+jsObject1.innerHTML);
//将JavaScript对象转换为Jquery对象
var jqueryObject1=$(jsObject1);
//用Jquery对象调用方法输出
alert("Jquery对象使用:"+jqueryObject1.html());
8.2:Jquery对象转化为JavaScriptc对象
第一种:var JavaScriptc对象=Jquery对象.get(0);
第二种:var JavaScriptc对象=Jquery对象[0];
eg:/*将Jquery对象转换JavaScript对象*/
//获得Jquery对象
var jqueryObject2=$("#d3");
//用Jquery对象调用方法输出
alert("Jquery对象调用:"+jqueryObject2.html());
//将Jquery对象转换JavaScript对象
//var javaScriptObject2=jqueryObject2.get(0);
var javaScriptObject2=jqueryObject2[0];
//用JavaScript对象调用属性
alert("JavaScript对象调用:"+javaScriptObject2.innerHTML);
9.Jquery操作节点内容:jquery中html()相当于JavaScript中innerHTML属性
9.1:获得Jquery对象的内容:Jquery对象.html();
9.2:设置Jquery对象的内容:Jquery对象.html(新内容);
9.3:清空Jquery对象的内容:Jquery对象.html("");
eg://获得标签的内容
alert($("#d2").html());
//修改标签的内容
$("#d2").html(“如果你每次遇到bug,解决之后很有在就感,你就已经入了java”);
//清空标签的内容
$("#d2").html("");
10.Jquery操作节点文本:jquery中text()相当于javaScript中innerText
10.1:获得Jquery对象的文本:Jquery对象.text();
10.2:设置Jquery对象的文本:Jquery对象.text(新文本);
10.3:清空Jquery对象的文本:Jquery对象.text("");
eg://获得标签的文本
alert($("#d2").text());
//修改标签的文本
$("#d2").text("虽然学习过程很艰辛,但是当你收获时,你会觉得所有经历都是值得的");
//清空标签的文本
$("#d2").text("");
11.Jquery操作节点属性:jquery中attr()相当于javaScript的对象.属性名
11.1:获得节点属性的值:Jquery对象.attr(“属性名”);
11.2:给节点设置一对属性:Jquery对象.attr(“属性名”,“属性值”);
给节点设置多对属性:Jquery对象.attr({“属性名1”:“属性值1”,“属性名2”:“属性值2”});
11.3:移除节点对象的属性:Jquery对象.removeAttr(“属性名”);
eg://获得标签的属性值
//alert($("#d3").attr(“src”));
//设置标签的属性值
$("#d3").attr({"src":"img/2.jpg","title":"萌猫"});
//移除标签的属性
$("#d3").removeAttr("title");
12.Jquery操作节点的Value属性:jquery的val()相当于JavaScript中value属性
12.1:获得节点value属性的值:Jquery对象.val();
12.2:给节点设置value属性:Jquery对象.val(“值”);
eg://获得value属性
alert($("#d4").val());
//修改value值
$("#d4").val("将来富一代的老师");
13.Jquery操作节点的样式:jquery中css()相当于javaScript中对象.style.样式属性
13.1:获得节点对象的样式值:Jquery对象.css(“样式名”);
13.2:给节点对象设置一对样式:Jquery对象.css(“样式名”,“值”);
给节点对象设置多对样式:Jquery对象.css({“样式名1”:“值1”,“样式名2”:“值2”});
eg://给标签设置css样式
$("#d2").css({“color”:“red”,“font-size”:“100px”});
//获得标签css样式
alert($("#d2").css("color"));
14.Jquery操作节点的类名
14.1:给节点对象添加类名:Jquery对象.addClass(“类名1 类名2”);
14.2:删除节点对象的指定类名:Jquery对象.removeClass(“类名”);
删除节点对象的全部类名:Jquery对象.removeClass();
14.3:类名如果存在（不存在）就删除（添加):Jquery对象.toggleClass(“类名”);
eg://给标签动态添加类名
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲d2").addClass("…("#d2").removeClass(“cname”);
//标签类名存就移除,不存在就添加
$("#d2").toggleClass(“cname”)
15.Jquery操作节点
15.1:创建Jquery节点对象: ( " h t m l 标 签 代 码 " ) ; e g : / / 创 建 节 点 对 象 v a r n o d e 1 = ("html标签代码"); eg://创建节点对象 var node1= ("html标签代码");eg://创建节点对象varnode1=(“
刘本益比属性更皮
”);15.2:添加节点对象
eg:
//1.将node1节点添加div中作为最后一个子标签
//$("#d4").append(node1);
//node1.appendTo($("#d4"));
//2.将node1节点添加div中作为第一个子标签
//$("#d4").prepend(node1);
//node1.prependTo($("#d4"));
//3.将node1节点添加div中前面作为哥哥标签
//$("#d4").before(node1);
//node1.insertBefore($("#d4"));
//4.将node1节点添加div中后面作为弟弟标签
//$("#d4").after(node1);
node1.insertAfter($("#d4"));
15.3:复制节点对象:Jquery对象.clone（true 或者 false）指示事件处理函数是否会被复 制。
eg://复制节点
var copyNode=$(".d5").clone();
//将复制的节点添加到div之前
$("#d4").before(copyNode);
15.4:替换节点对象:
eg://替换节点,将class=d5标签替换
//$(".d5").replaceWith("<h2>王永亮是java界一道亮丽的风景线</h2>");
$("<h2>王永亮是java界一道亮丽的风景线</h2>").replaceAll($(".d5"));
15.5:删除节点对象
删除节点对象的内容:Jquery对象.empty() <=> Jquery对象.html("");
删除节点对象的标签和内容但是节点对象的事件和绑定的数据保留:Jquery对 象.detach();
删除节点对象的标签,内容,事件和绑定数据:Jquery对象.remove();
eg://删除标签中内容,标签还在
//$("h1").html("");
//$("h1").empty();
//删除标签及内容,标签事件和绑定数据还在
//$("h1").detach();
//删除标签及内容,包括标签事件及数据全删除,删除最彻底
$("h1").remove();
16.事件的冒泡机制:当子节点对象和父节点对象具有相同的事件时,子节点对象的事件触发后会 自动触发父节点对象的相同事件,这叫冒泡机制.
16.1:第一种:阻止冒泡机制的方式
16.2:第二种:阻止冒泡机制的方式
eg:
17.Jquery中事件总语法:Jquery对象.事件名(function(){});
17.1:绑定事件:可以给一个Jquery对象绑定多个事件,而且这多个事件执行相同操作.
Jquery对象.bind(“事件名1 事件名2”, function(){
执行的操作代码;
});
eg://给h1绑定事件
$(“h1”).bind(“click”,function(){
alert(“123444”);
});
17.2:解绑事件:
解绑单个事件:Jquery对象.unbind(“事件名”);
解绑所有事件:Jquery对象.unbind();
eg://解绑事件
$(“h1”).unbind();
17.3:鼠标经过和离开的复合事件:
eg:// $("h1").mouseover(function(){
// $(“h1”).css(“background-color”,“red”);
// });
//
// $(“h1”).mouseout(function(){
// $(“h1”).css(“background-color”,“green”);
// });
$("h1").hover(
//鼠标经过
function(){
$("h1").css("background-color","red");
},
//鼠标离开
function(){
$("h1").css("background-color","green");
}
);
17.4:模拟多次单击事件,每次单击执行不同操作
eg://连续单击事件
$("img").toggle(
function(){
$("img").attr("src","img/img-7.jpg");
},
function(){
$("img").attr("src","img/img-8.jpg");
},
function(){
$("img").attr("src","img/img-9.jpg");
},
function(){
$("img").attr("src","img/img-6.jpg");
}
);
18.Jquery的动画
18.1:show()显示:以颜色和高度的变化来显示
18.1.1:直接显示:Jquery对象.show();
18.1.2:以一定的速度显示:Jquery对象.show(时间);
18.1.3:以一定的速度显示完成后执行一个函数:
Jquery对象.show(时间,function(){});
eg:$(“ul”).show(5000,function(){
alert(“哈哈,我出来了”);
});
18.2:hide()隐藏:以颜色和高度的变化来隐藏
18.2.1:直接隐藏:Jquery对象.hide();
18.2.2:以一定的速度隐藏:Jquery对象.hide(时间);
18.2.3:以一定的速度隐藏完成后执行一个函数:
Jquery对象.hide(时间,function(){});
eg:$("ul").hide(5000,function(){
alert("我隐藏好了,来找我啊");
});
18.3:toggle()显示/隐藏:以颜色和高度的变化来让隐藏的元素显示,让显示元素隐藏
18.3.1:直接显示/隐藏:Jquery对象.toggle();
18.3.2:以一定的速度显示/隐藏:Jquery对象.toggle(时间);
18.3.3:以一定的速度显示/隐藏完成后执行一个函数:
Jquery对象.toggle(时间,function(){});
eg:$("ul").toggle(5000,function(){
alert("哈哈,躲猫猫");
});
18.4:slideDown()显示:以高度的变化来显示
18.4.1:直接显示:Jquery对象.slideDown();
18.4.2:以一定的速度显示:Jquery对象.slideDown(时间);
18.4.3:以一定的速度显示完成后执行一个函数:
Jquery对象.slideDown(时间,function(){});
eg:$("ul").slideDown(5000,function(){
alert("哈哈,我出来了");
});
18.5:slideUp()隐藏:以高度的变化来隐藏
18.5.1:直接隐藏:Jquery对象.slideUp();
18.5.2:以一定的速度隐藏:Jquery对象.slideUp(时间);
18.5.3:以一定的速度隐藏完成后执行一个函数:
Jquery对象.slideUp(时间,function(){});
eg:$("ul").slideUp(5000,function(){
alert("我隐藏好了,来找我啊");
});
18.6:slideToggle()显示/隐藏:以高度的变化来让隐藏的元素显示,让显示元素隐藏
18.6.1:直接显示/隐藏:Jquery对象.slideToggle();
18.6.2:以一定的速度显示/隐藏:Jquery对象.slideToggle(时间);
18.6.3:以一定的速度显示/隐藏完成后执行一个函数:
Jquery对象.slideToggle(时间,function(){});
eg:$("ul").slideToggle(5000,function(){
alert("哈哈,躲猫猫");
});
18.7:fadeIn()显示:以颜色变化来显示
3.7.1:直接显示:Jquery对象.fadeIn();
3.7.2:以一定的速度显示:Jquery对象.fadeIn(时间);
3.7.3:以一定的速度显示完成后执行一个函数:Jquery对象.fadeIn(时间,function(){});
eg:$("ul").fadeIn(5000,function(){
alert("哈哈,我出来了");
});
18.8:fadeOut()隐藏:以颜色变化来隐藏
3.8.1:直接隐藏:Jquery对象.fadeOut();
3.8.2:以一定的速度隐藏:Jquery对象.fadeOut(时间);
3.8.3:以一定的速度隐藏完成后执行一个函数:Jquery对象.fadeOut(时间,function(){});
eg:$("ul").fadeOut(5000,function(){
alert("我隐藏好了,来找我啊");
});
18.9:fadeToggle()显示/隐藏:以颜色的变化来让隐藏的元素显示,让显示元素隐藏
3.9.1:直接显示/隐藏:Jquery对象.fadeToggle();
3.9.2:以一定的速度显示/隐藏:Jquery对象.fadeToggle(时间);
3.9.3:以一定的速度显示/隐藏完成后执行一个函数:
Jquery对象.fadeToggle(时间,function(){});
eg:$("ul").fadeToggle(5000,function(){
alert("哈哈,躲猫猫");
});
18.10:fadeTo()设置元素透明度:
3.10.1:以一定的速度显示透明度:Jquery对象.fadeTo(时间,透明度);
3.10.2:以一定的速度显示透明度完成后执行一个函数:
Jquery对象.fadeTo(时间,透明度,function(){});
eg://调节图片透明度
$("#d7").change(function(){
//获得下拉框中透明度
var v=$("#d7").val();
alert("透明度:"+v);
//让图片变化 为指定透明度
$("#d8").fadeTo(5000,v,function(){
alert("图片变化 为指定透明度了");
});
});
18.11:自定义动画:
Jquery对象.animate({
属性名1: "值1",
属性名2: "值2",
属性名3: "值3"
},时间 );
eg:$(“h1”).css({“width”:“200px”,“height”:“50px”,“border”:“solid 1px red”});
$(“h1”).click(function(){
$(this).animate({
width: “500px”,
height: “100px”,
fontSize: “100px”
},5000);
});
19.Jquery实现ajax
19.1:Jquery对象.load(“url”,“参数”);默认是get提交的方式
优点:代码简洁.
缺点:灵活性差,响应结果只能在调用load方法的Jquery对象中显示.
eg://jquery的load的ajax的使用
$("#d1").click(function () {
$("#div1").load(“user/loadMethod.action”);
});
19.2:$.getJSON("url", [参数], [callback]);默认是get提交方式,请求载入 JSON 数据。
优点:灵活性高,响应结果随你处理.
缺点:只能响应Json数据.
eg://jquery的getJson的ajax的请求,只能接收响应json类型(Json对象或数组)的数据
$("#d2").click(function () {
$.getJSON(“user/getJsonMethod.action”,function (data) {//data就是请求响应的结果
//alert(data.mess);
alert(data);
})
});
19.3:$.getScript("js文件");通过载入并执行一个 JavaScript 文件。
eg:1.js的代码
$.getJSON("user/getJsonMethod.action",function (data) {//data就是请求响应的结果
//alert(data.mess);
alert(data);
//data是Json对象,用javascript的for-in遍历json对象,遍历的是对象属性
for (var i in data){
alert(i+","+data[i]);
}
});
//jquery的getScript方法调用外部js文件发送ajax的请求
$("#d3").click(function () {
$.getScript(“static/js/1.js”);
});
19.4:$.get("url",["参数"],"函数",[returnType]);通过远程 HTTP GET 请求载入信息。
eg://用Jquery的get()发送ajax请求
$.get("IsUserServlet",{"uname1":uname},function(result){
if(result=="1"){
$("#uname1").html("用户名已经注册!").css("color","red");
}else{
$("#uname1").html("√").css("color","green");
}
});
19.5:$.post("url",["参数"],"函数",[returnType]);通过远程 HTTP POST 请求载入信息。
eg:eg://用Jquery的post()发送ajax请求
$.post("IsUserServlet",{"uname1":uname},function(result){
if(result=="1"){
$("#uname1").html("用户名已经注册!").css("color","red");
}else{
$("#uname1").html("√").css("color","green");
}
});
19.6:$.ajax(url,[属性]);通过 HTTP 请求加载远程数据。
$.ajax({
type: “POST/get”, //ajax请求方式
url: “”, //请求地址
data: “参数”, //请求要传递到后台参数
dataType:“返回值类型”, //ajax请求响应的类型
async: false/true, //ajax发送异步请求还是同步请求,默认是true表示异步
success: function(msg){ //请求成功之后接收响应结果函数
}
});
eg://用Jquery的ajax()发送ajax请求
$.ajax({
type:“get”,
url:“IsUserServlet”,
data:{“uname1”:uname},
success:function(result){
if(result==“1”){
$("#uname1").html(“用户名已经注册!”).css(“color”,“red”);
}else{
$("#uname1").html(“√”).css(“color”,“green”);
}
}
});
20.将表单序列化:$(“form”).serialize()
eg://jquery的ajax方法发送ajax的请求
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲d6").click(func…("#uname").val();
var pwd1=$("#pwd").val();
$.ajax({
url:"user/ajaxMethod.action",
type:"get",
//第一种传参:用字符串的拼接
//data:"uname="+uname1+"&pwd="+pwd1,
//第二种传参:用json传参
//data:{"uname":uname1,"pwd":pwd1},
//第三种传参:用表单序列化传参
data:$("form").serialize(),
success:function (data) {
$("#div1").html(data);
}
});
});
21.(扩展):jquery的发送ajax请求到springmvc的处理器中,响应中文乱码解决
21.1:在处理器的方法中将响应中文编码,在前端ajax接收响应时解码.
21.2:在处理的方法中@requestMapping中配置produces = “text/html;charset=utf-8”
21.3:在springmvc中json转换器配置编码
mvc:annotation-driven
mvc:message-converters
text/html;charset=UTF-8
application/json;charset=UTF-8
application/x-www-form-urlencoded;charset=UTF-8
text/html;charset=UTF-8
application/json;charset=UTF-8
application/x-www-form-urlencoded;charset=UTF-8
</mvc:message-converters>
</mvc:annotation-driven>