一、概念
-
jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
-
JavaScript框架:本质上就是一些js文件,只是封装了js的原生代码而已。
-
//封装方法,根据id来获取元素对象 function $(id){ return document.getElementById(id); }
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义js框架</title> <!--导入自定义的js文件--> <script type="text/javascript" src="../js/frame.js"></script> </head> <body> <div id="div1">div1...</div> <div id="div2">div2...</div> <script> //使用自定义框架来获取元素对象 var div1 = $("div1"); var div2 = $("div2"); //使用 对象.innerHTML 方法获取对象内容 alert(div1.innerHTML); alert(div2.innerHTML); </script> </body> </html>
-
二、JQuery初体验
-
步骤:
-
下载JQuery:
-
jquery-xxx.js:开发版本。给程序员看的,有良好的缩进与注释;体积一些
-
jquery-xxx.min.js:生产版本。在程序中使用,没有缩进。体积小一些
-
-
导入JQuery的js文件:
-
导入jquery-xxx.min.js即可
-
-
使用:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JQuery快速入门</title> <!--导入JQuery的js文件--> <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script> </head> <body> <div id="div1">div1...</div> <div id="div2">div2...</div> <script> //使用jquery来获取元素对象 var div1 = $("#div1"); var div2 = $("#div2"); //使用 对象.html() 方法获取对象内容 alert(div1.html()); alert(div2.html()); </script> </body> </html>
-
三、JQuery对象和js对象的转换
-
JQuery对象在操作时更加方便
-
Jquery对象和 js 对象是不通用的
-
两者相互转换:
-
* jq --> js: js对象[索引] 或 jq对象.get(索引) * js --> jq: $(js对象)
-
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JQuery快速入门</title> <!--导入JQuery的js文件--> <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script> </head> <body> <div id="div1">div1...</div> <div id="div2">div2...</div> <script> //1. 通过js方式来获取名称叫div的所有html元素对象 var divs = document.getElementsByTagName("div"); //2. 可以将其当作数组来使用 alert(divs.length); //3. 对divs中所有的div,让其标签体中的内容变为"aaa" for(var i=0; i<divs.length; i++){ divs[i].innerHTML = "aaa"; } //4. 把js对象转换为jq对象,让标签体的内容变为"bbb" for(var i=0; i<divs.length; i++){ $(divs[i]).html("bbb"); } //1. 通过jquery方式来获取名称叫div的所有html元素对象 var $divs = $("div"); //2. 也可以将其当作数组来使用 alert($divs.length); //3. 对divs中所有的div,让其标签体中的内容变为"ccc" $divs.html("ccc"); //4. 把jq对象转换为js对象,让标签体的内容变为"ddd \n eee" $divs[0].innerHTML = "ddd"; $divs[1].innerHTML = "eee"; </script> </body> </html>
四、选择器
-
筛选具有相似特征的元素
4.1 基本语法
4.1.1 事件绑定
-
点击事件
<script> $("#b1").click(function () { alert("我被以jquery的方式点击了"); }) </script>
4.1.2 入口函数
-
window.onload 和 $(function(){})的区别:
-
window.load:只能定义一次,如果定义多次,后边的会将前面的覆盖掉
-
$(function):可以定义多次。
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<!--导入自定义的js文件-->
<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
<script>
//方式一:先执行加载事件,加载完之后再执行点击事件
window.onload = function(){
//获取b1按钮
$("#b1").click(function () {
alert("我被以jquery的方式点击了");
})
}
//方式二:使用jquery入口函数(dom文档加载完之后执行该函数中的代码)
$(function () {
//获取b1按钮
$("#b1").click(function () {
alert("我被以jquery的方式点击了");
})
})
/*
window.onload 和 $(function)的区别:
* window.load只能定义一次,如果定义多次,后边的会将前面的覆盖掉
* $(function)可以定义多次。
*/
</script>
</head>
<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>
<input type="button" value="点我" id="b1">
</body>
</html>
4.1.3 样式控制
$(function () {
$("#div1").css("background-color","pink");
})
4.2 分类
4.2.1 基本选择器
-
标签选择器(元素选择器):
-
$("html标签名"):获得所有匹配标签名的元素
-
-
id选择器:
-
$("#id的属性值"):获得与指定id属性值匹配的元素
-
-
类选择器:
-
$(".class的属性值"):获得与指定的class属性值匹配的元素
-
-
并集选择器:
-
$("选择器1 , 选择器2 , ......"):获取多个选择器选中的所有元素
-
4.2.2 层级选择器
-
后代选择器:
-
$("A B"):选择A元素内部的所有B元素(包括孙子辈及以下)
-
-
子选择器:
-
$("A > B"):选择A元素内部的所有B子元素(只包括儿子辈)
-
4.2.3 属性选择器
-
属性名称选择器:
-
$("A[属性名]"):包含指定属性的选择器
-
-
属性选择器:
-
$("A[属性名 = '值' ]"):包含指定属性等于指定值的选择器
-
$("A[属性名 != '值' ]"):包含指定属性不等于指定值的选择器
-
$("A[属性名 ^= '值' ]"):包含指定属性以指定值开头的选择器
-
$("A[属性名 *= '值' ]"):包含指定属性以指定值结尾的选择器
-
-
符合属性选择器:
-
$("A[属性名 = '值' ] [] []......"):包含多个属性条件的选择器
-
4.2.4 过滤选择器
-
首元素选择器:
-
:first:获得选择的元素中的第一个元素
-
-
尾元素选择器:
-
:last:获得选择的元素中的最后一个元素
-
-
非元素选择器:
-
:not(selecter):不包括指定内容的元素
-
-
偶数选择器:
-
:even:从0开始计数
-
-
奇数选择器:
-
:odd:从0开始计数
-
-
等于索引选择器:
-
:eq(index):指定索引元素
-
-
大于索引选择器:
-
:gt(index):大于指定索引元素
-
-
小于索引选择器:
-
:lt(index):小于指定索引元素
-
-
标题选择器:
-
:header:获得标题元素,固定写法
-
<script>
$(function(){
// <input type="button" value="改变第一个div元素的背景色为粉红色" id="b1" >
$("b1").click(function () {
$("div:first").css("background-color","pink");
});
// <input type="button" value="改变class不为one的所有div元素的背景色为粉红色" id="b2" >
$("b2").click(function () {
$("div:not(.one)").css("background-color","pink");
});
// <input type="button" value="改变索引值为偶数的div元素的背景色为粉红色" id="b3" >
$("b3").click(function () {
$("div:even").css("background-color","pink");
});
// <input type="button" value="改变索引值大于3的div元素的背景色为粉红色" id="b4" >
$("b4").click(function () {
$("div:gt").css("background-color","pink");
});
// <input type="button" value="改变所有的变体元素的背景色为粉红色" id="b5" >
$("b5").click(function () {
$(":header").css("background-color","pink");
});
})
</script>
4.2.5 表单过滤选择器
-
可用元素选择器
-
:enabled:获得可用元素
-
-
不可用元素选择器
-
:disabled:获得不可用元素
-
-
选中选择器:
-
checked:获得单选/复选框中的元素
-
-
选中选择器:
-
selected:获得下拉框选中的元素
-
<script>
$(function () {
// <input type="button" value="利用JQuery对象的var()方法改变表单内可用<input>元素的值" id="b6">
$("b6").click(function () {
$("input[type = 'text']:enabled").val("aaa");
});
// <input type="button" value="利用JQuery对象的var()方法改变表单内不可用<input>元素的值" id="b7">
$("b7").click(function () {
$("input[type = 'text']:disabled").val("aaa");
});
// <input type="button" value="利用JQuery对象的length()属性获取复选框选中的个数" id="b8">
$("b8").click(function () {
alert($("input[type = 'checkbox']:checked").length);
});
// <input type="button" value="利用JQuery对象的length()属性获取下拉框选中的个数" id="b9">
$("b9").click(function () {
alert($("#job > option:selected").length);
});
})
</script>
五、DOM
5.1 内容操作
5.1.1 html( )
-
获取/设置元素的标签体内容
-
<a><font>内容</font></a> -----> <font>内容</font>
-
5.1.2 text( )
-
获取/设置元素的标签体纯文本内容
-
<a><font>内容</font></a> -----> 内容
-
5.1.3 val( )
-
获取/设置元素的value属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM操作</title>
<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
<script>
$(function () {
//获取 myinput 的value值
var value = $("#myinput").val();
alert(value);
//设置 myinput 的value值
$("#myinput").val("李四");
//获取 mydiv 的标签体内容
var html = $("#mydiv").html();
alert(html);//<p><a href="#">标题标签</a></p>
//设置 mydiv 标签体内容
$("#mydiv").html("<p>aaaa</p>");
//获取 mydiv 的文本内容
var text = $("#mydiv").text();
alert(text);//标题标签
//设置 mydiv 的文本内容
$("#mydiv").text("bbb");
})
</script>
</head>
<body>
<input type="button" value="张三" name="username" id="myinput"><br>
<div id="mydiv"><p><a href="#">标题标签</a></p></div>
</body>
</html>
5.2 属性操作
5.2.1 通用属性操作
-
attr( ):获取/设置元素的属性
-
removeAttr( ):删除属性
-
prop( ):获取/设置元素的属性
-
removeProp( ):删除属性
-
attr 和 prop 的区别:
-
如果操作的是元素的固有属性,则建议使用prop
-
如果操作的是元素自定义的属性,则建议使用attr
-
-
<script> $("function(){ //获取北京节点的name属性值(name不是元素的固有属性) var name = $("bj").attr("name"); //设置背景节点的name属性值为dabeijing $("bj").attr("name","dabeijing"); //获取hobby的选中状态(checked是元素固有属性) var checked = $("#hobby").prop("checked"); }") </script>
5.2.2 对class属性操作
-
addClass( ):添加class属性值
-
removeClass( ):删除class属性值
-
toggleClass( ):切换class属性
-
toggleClass("one"):
-
判断如果元素对象上存在class="one",则将属性值one删除掉。如果元素对象上不存在class="one",则添加。
-
-
<script>
$("function(){
//<input type="button" value="采用属性增加样式 改变id=one的样式" id="b1">
$("#b1").click(function () {
$("#one").prop("class","second")
});
//<input type="button" value="addClass" id="b2"
$("#b2").click(function () {
$("#one").addClass("second");
});
//<input type="button" value="切换样式" id="b2">
$("#b3").click(function () {
$("#one").toggle("second");
});
}")
</script>
5.3 CRUD操作
-
append( ):
-
对象1 . append(对象2):将对象2添加到对象1内部,并且在末尾
-
-
prepend( ):
-
对象1 . prepend(对象2):将对象2添加到对象1内部,并且在开头
-
-
appendTo( ):
-
对象1 . appendTo(对象2):将对象1添加到对象2内部,并且在末尾
-
-
prependTo( ):
-
对象1 . prependTo(对象2):将对象1添加到对象2内部,并且在开头
-
-
after( ):
-
对象1 . after(对象2):将对象2添加到对象1后边。对象1和对象2是兄弟关系
-
-
before( ):
-
对象1 . before(对象2):将对象2添加到对象1前边。对象1和对象2是兄弟关系
-
-
insertAfter( ):
-
对象1 . insertAfter(对象2):将对象1添加到对象2后边。对象1和对象2是兄弟关系
-
-
insertBefore( ):
-
对象1 . insertBefore(对象2):将对象1添加到对象2前边。对象1和对象2是兄弟关系
-
-
remove( ):
-
对象 . remove( ):将对象删除掉
-
-
empty( ):
-
对象 . empty( ):将对象的后代元素全部清空,但是保留当前对象以及其属性节点
-
六、基础案例
6.1 隔行换色
<!--需求:将数据的奇数行背景色设为 pink ,偶数行背景色设为 yellow-->
<script>
$("function(){
//获取数据行的奇数行的tr,设置背景色为pink
$("tr:gt(1):odd").css("backgroundColor","pink");
//获取数据行的偶数行的tr,设置背景色为yellow
$("tr:gt(1):even").css("backgroundColor","yellow");
}")
</script>
6.2 全选和全不选
<!--需求:保证下边复选框的选中状态和第一个复选框的选中状态一致-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function selectAll(obj){
//设置下边复选框的属性值和第一个复选框的属性值一样
$(".itemSelect").prop("checked",obj.checked);
}
</script>
</head>
<body>
<table>
<tr>
<th><input type="checkbox" onclick="selectAll(this)"></th>
......
</tr>
<tr>
<th><input type="checkbox" class="itemSelect"></th>
......
</tr>
<tr>
<th><input type="checkbox" class="itemSelect"></th>
......
</tr>
<tr>
<th><input type="checkbox" class="itemSelect"></th>
......
</tr>
.......
</table>
</body>
</html>
6.3 QQ表情选择
<script>
$(function(){
$("ul img").click(function(){
//this是js对象,要调用clone方法,需要将js对象转为jquery对象,即$(this)
$(".word").append($(this).clone());
});
});
</script>
6.4 多选下拉列表左右移动
<script>
$("function(){
//获取右边的下拉列表,append(左边下拉列表选中的option)
$("#toRight").click(function(){
$("#rightName").append($("#leftName > option:selected"));
});
//获取右边下拉列表中的option,将其移动到左边的下拉列表中
$("#toleft").click(function(){
$("#rightName > option:selected").appendTo($("#leftName"));
})
}");
</script>
#
七、动画
7.1 默认显示和隐藏方式
-
show ( [speed] , [easing] , [fn] )
-
hide ( [speed] , [easing] , [fn] )
-
toggle ( [speed] , [easing] , [fn] )
7.2 滑动显示和隐藏方式
-
slideDown ( [speed] , [easing] , [fn] )
-
slideUp ( [speed] , [easing] , [fn] )
-
slideToggle ( [speed] , [easing] , [fn] )
7.3 淡入淡出显示和隐藏方式
-
fadeIn ( [speed] , [easing] , [fn] )
-
fadeOut ( [speed] , [easing] , [fn] )
-
fadeToggle ( [speed] , [easing] , [fn] )
-
[speed]:动画的速度。三个预定义的值("slow","noemal","fast")或表示动画时长的毫秒数值(如:1000 ---> 1s)
-
[easing]:用来指定切换效果,默认是 "swing"(动画执行效果是先慢,中间快,最后又慢),可用参数linear(动画执行效果是匀速的)
-
[fn]:在动画完成时执行的函数,每个元素执行一次
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
<script>
$(function () {
$("#showDiv").css("backgroundColor","pink");
$("#showDiv").css("border","2px solid red");
$("#showDiv").css("height","200px");
$("#showDiv").css("width","200px");
});
function hideFn() {
$("#showDiv").hide("slow","swing");
}
function showFn() {
$("#showDiv").slideUp("slow","swing");
}
function toggleFn() {
$("#showDiv").fadeToggle("slow","linear");
}
</script>
</head>
<body>
<input type="button" value="点击按钮动画隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮动画显示div" onclick="showFn()">
<input type="button" value="点击按钮动画切换div的显示与隐藏" onclick="toggleFn()">
<div id="showDiv">
div显示和隐藏
</div>
</body>
</html>
八、遍历
8.1 js的遍历方式
-
for( 初始值 ; 循环结束条件 ; 步长)
8.2 jq的遍历方式
-
jquery对象 . each( callback )
-
$ . each( object , [callback] )
-
for......of :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>遍历</title>
<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
<script>
$(function () {
var citys = $("#city li");
//1. 通过js的方式进行遍历
for(var i=0; i<citys.length; i++){
alert(i + ":" +citys[i].innerHTML);
}
//2.1 通过jquery的方式来遍历【jquery对象.each()】
citys.each(function (index,element) {
//2.1.1 获取li的第一种方式:this (这种方式无法获取索引)
alert(this.innerHTML);//js
alert($(this).html());//jquery
//2.1.2 获取li的第二种方式:在回调函数中定义参数,index(索引)、element(元素对象)
alert(index + ":" + element.innerHTML);//js
alert(index + ":" + $(element).html());//jquery
//需求:判断如果时上海,则结束循环
if("上海" == $(element).html()){
//如果当前function返回false,则结束循环,相当于break
//如果返回为true,则结束本次循环,继续下次循环,相当于continue
return false;
}
alert(index + ":" + $(element).html());
});
//2.2 通过jquery的方式来遍历【$.each(object,[callback])】
$.each(citys,function () {
//........function里面的规则和上面2.1的一样..........
});
//2.3 通过jquery的方式来遍历【for...of】
for(li of citys){
//li就是js对象,再转换为jq对象
alert($(li).html());
}
})
</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
</html>
九、事件绑定
9.1 jquery标准绑定方式
-
jquery对象 . 事件方法(回调函数)
9.2 on/off绑定与解绑
-
jquery对象 . on("事件名称" , 回调函数)
-
相当于:jquery对象 . bind(事件名称1 事件名称2" , 回调函数)
<script> $(function{ $("#small").bind("mouseover mouseout mousemove",function(event){ if(event.type == "mouseover"){ $("#showBig").show(); } else if(event.type == "mouseout"){ $("#showBig").hide(); } else if(event.type == "mousemove"){ $("#showBig").offset({ //+10是为了方式大图标闪 letf: event.pageX + 10, top: event.pageY + 10 }); } }); }); </script>
-
-
jquery对象 . off("事件名称")
9.3 toggle事件切换
-
jq对象 . toggle(fn1 , fn2 , ........)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../js/jquery-migrate-1.0.0.js"></script>
<script>
$(function () {
//1. jquery标准绑定方式
//1.1 标准绑定方式
$("#name").click(function () {
alert("我被点击了...")
});
//1.2 链式编程,简化操作
$("#name").mouseover(function () {
alert("鼠标来了...")
}).mouseout(function () {
alert("鼠标走了...")
});
//1.3 不传回调函数,出发浏览器默认事件,让其获得焦点
$("#name").focus();
//2. on/off绑定与解绑
//2.1 on绑定
$("#btn1").on("click",function () {
alert("我被点击了....")
});
//2.2 off解绑
$("#btn2").click(function () {
$("#btn1").off("click")//如果不传参,则将组件上的所有事件全部解绑
});
//3. toggle事件切换
//需要导入jquery-migrate-1.0.0.js
$("#btn").toggle(function () {
//改变 div 背景色为 green
$("#myDiv").css("backgroundColor","green")
},function () {
//改变 div 背景色为 pink
$("#myDiv").css("backgroundColor","pink")
})
})
</script>
</head>
<body>
<input type="text" id="name" value="绑定点击事件"><br>
<input type="button" id="btn1" value="使用on绑定点击事件">
<input type="button" id="btn2" value="使用off解绑点击事件"><br>
<input type="button" id="btn" value="事件切换">
<div id="myDiv" style="width:300px;height:300px;background: pink">
点击按钮,切换绿色和粉红色
</div>
</body>
</html>
十、高级案例
10.1 广告的自动消失与增长
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>广告的自动消失与出现</title>
<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
<script>
/*
需求:
1. 当页面加载完3秒之后,显示广告
2. 广告显示5秒之后,自动消失
*/
//入口函数,在页面加载完成之后,执行其中的代码
$(function () {
//定义定时器,调用adShow方法,3秒后执行
setTimeout(adShow,3000);
//定义定时器,调用adHide方法,8秒后执行
setTimeout(adHide,8000);
});
function adShow() {
$("#ad").show("slow");
}
function adHide() {
$("#ad").hide("slow");
}
</script>
</head>
<body>
<!--整体的div-->
<div>
<!--广告div-->
<div id="ad" style="display: none;">
<img src="../Image/5.jpg" style="width: 100%">
</div>
<!--下方正文部分-->
<div id="content">
正文部分
</div>
</div>
</body>
</html>
10.2 抽奖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽奖</title>
<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
<script>
var imgs = [
"../Image/1.jpg",
"../Image/2.jpg",
"../Image/3.jpg",
"../Image/4.jpg",
"../Image/5.jpg",
"../Image/6.jpg"
];
var index;
var startId;
$(function () {
//处理按钮是否可以使用的效果
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
//设置开始按钮点击事件
$("#startID").click(function () {
//定义循环定时器,20毫秒执行一次
startId = setInterval(function () {
//处理按钮是否可以使用的效果
$("#startID").prop("disabled",true);
$("#stopID").prop("disabled",false);
//获取1-6的随机数(Math.random()---->0.000--0.999)
index = Math.floor(Math.random()*6 + 1);
//设置小相框的属性值
$("#img1ID").prop("src",imgs[index])
},20);
});
//设置停止按钮点击事件
$("#stopID").click(function () {
//停止循环定时器
clearInterval(startId);
//处理按钮是否可以使用的效果
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
//设置大相框的属性值
$("#img2ID").prop("src",imgs[index]).hide();
$("#img2ID").show("slow");
})
})
</script>
</head>
<body>
<!--小相框-->
<div style="border-style: dotted;width: 160px;height: 100px">
<img id="img1ID" src="../Image/1.jpg" style="height: 100px;width: 160px">
</div>
<!--大相框-->
<div style="border-style: double;width: 800px;height: 500px;position: absolute;left: 500px;top: 100px;">
<img id="img2ID" src="../Image/1.jpg" style="height: 500px;width: 800px">
</div>
<!--开始按钮-->
<input id="startID" type="button" value="点击开始" style="width: 150px;height: 150px;font-size: 22px">
<!--停止按钮-->
<input id="stopID" type="button" value="点击停止" style="width: 150px;height: 150px;font-size: 22px">
</body>
</html>
十一、插件
-
$ . fn . extend(object)
-
增强通过 jquery获取的对象的功能 $("#id")
<script> //1. 定义jquery对象插件 $.fn.extend({ //定义了一个check方法,所有jquery对象都可调用该方法 check:function () { //让复选框选中 this.prop("checked","true");//this:调用该方法的jquery对象 }, uncheck:function () { //让复选框不选中 this.prop("checked","false"); } }); //2. 调用自定义的插件方法 $(function () { $("#btn-check").click(function () { $("input[type = 'checkbox']").check(); }); $("#btn-uncheck").click(function () { $("input[type = 'checkbox']").uncheck(); }) }) </script>
-
-
$ . extend(object)
-
增强 JQuery 对象自身的功能
-
<scripr>
//对全局方法扩展两个方法。min方法(求两个值得最小值)、max(求两个值得最大值)
$.extend({
max:function (a,b) {
return a >= b ? a:b;
},
min:function (a,b) {
return a <= b ? a:b;
}
})
//调用全局方法
var max = $.max(2,3);
alert(max);
</scripr>