JQuery是把DOM和JavaScript的功能封装了的模块，可以获取到网页元素并操作元素。
没有JQuery仅用DOM也能实现功能，但是需要考虑的就多了，如下例：
DOM的document.getElementById('i1'); 等价于 JQuery的$('#i1')，可见JQuery简化了。
#几乎所有的运维开发都能用JQuery，哪种情况不用JQuery呢，开发app的时候，app好多使用移动流量的，向服务器请求JQuery是会产生流量的，为了节省用户流量，app不会使用JQuery。
DOM存在浏览器兼容性问题，在chrome和firefox上没事，在IE上可能有问题，JQuery的出现也变相了解决了DOM兼容问题，你只需要用JQuery即可，不会产生浏览器不兼容的情况。
无特殊要求的话，用JQuery1.12及以上的版本，但不要用2.X的版本，因为从2.X开始就不支持IE9及以下的浏览器了，所以1.X的兼容性更好。
1.内容概要
2.jQuery组件说明
http://jquery.cuishifeng.cn/
2.1 基本选择器
#id ：根据id来找，$(#i1) element：根据元素 .class：根据类 * ：所有的 selector1,selector2,selectorN ： selector1和selector2和selectorN
2.2 层级选择器
ancestor descendant ：查找id是ancestor的下面的子子孙孙里的id或class或其他是descendant 的元素 parent > child ：查找id是parent的下面的子标签里id或class或其他是child的元素 prev + next ：下一个 prev ~ siblings：兄弟
2.3 基本筛选器
:first ，获取匹配的第一个元素，$('li:first');，获取<li></li>的第一个元素。 :not(selector) ，不是 :even ，查找表格的1、3、5...行（即索引值0、2、4...） :odd ，偶数行 :eq(index) ，索引等于 :gt(index) ，索引大于
画框为需要重点看的，用的多，
3. 实现菜单点击隐藏的效果
<!DOCTYPE html> <html lang="en"> <head> <title>fazhan</title> <meta charset="UTF-8" /> <style> p{ margin:0; } .hide{ display:none !important; } .menu{ 200px; height:800px; border:1px solid #dddddd; } .menu .item .title{ height:40px; line-height:40px; background-color:#27408B; color:white; } </style> </head> <body> <div class="menu"> <div class="item"> <div class="title" onclick="ShowBody(this)">菜单一</div> <div class="body"> <p>内容一</p> <p>内容一</p> <p>内容一</p> </div> </div> <div class="item"> <div class="title" onclick="ShowBody(this)">菜单二</div> <div class="body hide"> <p>内容二</p> <p>内容二</p> <p>内容二</p> </div> </div> <div class="item"> <div class="title" onclick="ShowBody(this)">菜单三</div> <div class="body hide"> <p>内容三</p> <p>内容三</p> <p>内容三</p> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> function ShowBody(ths){ //$(ths)，DOM标签对象转换为JQuery标签对象 //$(ths)[0]，JQuery标签对象转换为DOM标签对象 //将当前div下一个标签添加hide样式 $(ths).next().removeClass('hide'); //将当前div的父标签的所有兄弟标签下面，查找到的.body的class加上hide样式 $(ths).parent().siblings().find('.body').addClass('hide'); } </script> </body> </html>
4.用jquery实现全选反选
object.prop('checked')，判断是否为true；object.attr('checked')，获取checked的值；
object.prop('checked',true)，将checked设置为true，即打上对勾；object.attr('checked','checked')，将checked的值设置为checked，作用也是打上对勾。
注：推荐使用prop形式，更简单；千万不要两者混用，不然会出现打钩的混乱，不是代码有错误，而是两者混用导致的打钩混乱。
<body>
<input type="button" value="全选" onclick="CheckAll()" />
<input type="button" value="取消" onclick="CheckCancel()" />
<input type="button" value="反选" onclick="CheckReverse()" />
<table>
<thead>
<tr>
<td>选择</td>
<td>用户列表</td>
<td>密码列表</td>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox" id="c1" /></td>
<td>用户1</td>
<td>密码1</td>
</tr>
<tr>
<td><input type="checkbox" id="c2" /></td>
<td>用户2</td>
<td>密码2</td>
</tr>
<tr>
<td><input type="checkbox" id="c3" /></td>
<td>用户3</td>
<td>密码3</td>
</tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
function CheckAll(){
//取到id是tb的标签下的input标签的type是checkbox的所有标签，prop是循环所有匹配的标签，然后执行checked=true;
$('#tb input[type="checkbox"]').prop('checked',true);
}
function CheckCancel(){
$('#tb input[type="checkbox"]').prop('checked',false);
}
function CheckReverse(){
//each，对每个匹配的标签执行后面的方法。
$('#tb input[type="checkbox"]').each(
function(){
if($(this).prop('checked')){
$(this).prop('checked',false);
}else{
$(this).prop('checked',true);
}
}
);
}
</script>
</body>
5. +添加标签，-删除标签
<body>
<div>
<p>
<a id="i1" onclick="Clone(this)"> + </a>
<input type="text" />
</p>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
function Clone(ths){
#将a标签的父标签p克隆一份，找到a标签，设置内容为“-”，设置onclick="Remove(this)"，给a标签的父标签的父标签即div标签追加克隆出来的p标签。
var p = $(ths).parent().clone();
p.find('a').text(' - ');
p.find('a').attr('onclick','Remove(this)');
$(ths).parent().parent().append(p);
}
function Remove(ths){
//remove，删除标签；empty，清空标签内容，标签保留。
$(ths).parent().remove();
}
</script>
</body>
6. 实现菜单点击隐藏的效果，利用JQeury事件简化代码
<body>
<div class="menu">
<div class="item">
<div class="title">菜单一</div>
<div class="body">
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
</div>
</div>
<div class="item">
<div class="title">菜单二</div>
<div class="body hide">
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
</div>
</div>
<div class="item">
<div class="title">菜单三</div>
<div class="body hide">
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
//找到菜单的div，添加click事件，这样就不用在每个菜单div里添加“onclick”事件了。
$('.item .title').click(function ShowBody(){
$(this).next().removeClass('hide');
$(this).parent().siblings().find('.body').addClass('hide');
}
);
//下面利用bind的代码效果等同于上面
$('.item .title').bind('click',function ShowBody(){
$(this).next().removeClass('hide');
$(this).parent().siblings().find('.body').addClass('hide');
}
);
//$(function{//将代码写入这里面，就会当html的文档树加载完毕后就执行这段scripts，不会等待加载文档内容再执行，所以会更快点执行。});，所以一般将代码JQuery事件放到$(function{});内。
$(function{
$('.item .title').click(function ShowBody(){
$(this).next().removeClass('hide');
$(this).parent().siblings().find('.body').addClass('hide');
}
);
});
</script>
</body
7. 延迟绑定事件
没有加延迟绑定的情况：
<!DOCTYPE html> <html lang="en"> <head> <title>fazhan</title> <meta charset="UTF-8" /> </head> <body> <div> <input type="button" onclick="Add()" /> <ul> <li>123</li> <li>456</li> <li>789</li> </ul> </div> <script src="jquery-1.12.4.js"></script> <script> $(function(){ $('ul li').click(function(){ alert($(this).text()); }) }); function Add(){ var tag = document.createElement('li'); tag.innerText = '666'; $('ul').append(tag); } </script> </body> </html>
加载完html后所有li标签就绑定了alert事件，所以点击按钮触发Add()事件后添加的li都没有alert事件，因为$(function() {})是在加载完页面后执行的，不会因为Add()方法再执行一次，所以新加的li标签都没有alert事件。
加延迟绑定的情况：
<!DOCTYPE html> <html lang="en"> <head> <title>fazhan</title> <meta charset="UTF-8" /> </head> <body> <div> <input type="button" onclick="Add()" /> <ul> <li>123</li> <li>456</li> <li>789</li> </ul> </div> <script src="jquery-1.12.4.js"></script> <script> $(function(){ //$('ul li').click(function(){ // alert($(this).text()); //}) $("ul").delegate( "li","click",function(){ alert($(this).text()); } ); }); function Add(){ var tag = document.createElement('li'); tag.innerText = '666'; $('ul').append(tag); } </script> </body> </html>
这样所有新添加的li标签也都能触发alert了。
延迟绑定的意思是，不是文档树加载完后就自动执行$(function(){})，而是当需要触发的时候，再执行$(function(){})。拿上面的代码来说，页面加载完之后并没有执行$(function(){})里的代码，而是点击li标签时，立刻绑定$(function(){})代码并且执行。所以点击新添加的li标签时，也是先绑定再执行。
如果要绑定的标签特别特别多的时候，用延迟绑定会更快，因为它无需页面加载完后一股脑的都绑定了。
事件总结：
1.绑定事件
2.${function(){}};文档树加载完毕后自动执行
3.延迟绑定
4.return false，返回false后，就不执行这个事件之后的代码了，如表单提交，验证用户信息不符合则就不提交了。
8.表格编辑内容后保存
<!DOCTYPE html> <html lang="en"> <head> <title>fazhan</title> <meta charset="UTF-8" /> <link rel="stylesheet" href="css/1.css"> </head> <body> <div class="head-div"> <input type="button" class="allchoice" value="全选" onclick="Allchoice()" > <input type="button" class="nochoice" value="取消" onclick="Nochoice()" > <input type="button" class="reversechoice" value="反选" onclick="Reversechoice()" > <input type="button" id="e1" class="editmode" value="进入编辑模式" onclick="Editmode()" > </div> <br/> <div> <table> <thead> <tr> <td> </td> <td>IP</td> <td>PORT</td> <td>STATUS</td> </tr> </thead> <tbody id="tb"> <tr> <td><span> + <span></td> <td class="input-checkbox"><input type="checkbox" class="checks" /></td> <td id="ip1">10.33.25.6</td> <td>22</td> <td> <select> <option>在线</option> <option>离线</option> </select> </td> </tr> <tr> <td><span> + <span></td> <td class="input-checkbox"><input type="checkbox" class="checks" /></td> <td id="ip2">10.33.25.7</td> <td>22</td> <td> <select> <option>在线</option> <option>离线</option> </select> </td> </tr> <tr> <td><span> + <span></td> <td class="input-checkbox"><input type="checkbox" class="checks" /></td> <td id="ip3">10.33.25.8</td> <td>22</td> <td> <select> <option>在线</option> <option>离线</option> </select> </td> </tr> </tbody> </table> </div> <script src="jquery-1.12.4.js"></script> <script> //delegate,延迟绑定 $(function(){ $(".input-checkbox").delegate( "input","click",function(){ var editmode = $('.editmode').attr('onclick'); //console.log('tag'); //console.log($(this).prop('checked')); if(editmode == "ExitEditmode()"){ var dqtd = $(this).parent().next(); if(dqtd.find('input').length == 0){ var textlog = dqtd.text(); //console.log(textlog); dqtd.empty(); dqtd.append('<input type="text" />'); dqtd.children().val(textlog); }else{ var inputtext = dqtd.children().val(); //console.log(inputtext); dqtd.empty(); dqtd.append(inputtext); } } } ); }); //如果是编辑模式，就进入AllChoiceMode function Allchoice(){ var editmode = $('.editmode').attr('onclick'); if(editmode == "ExitEditmode()"){ //$('#tb input[type="checkbox"]').prop('checked',true); AllChoiceMode(); }else{ $('#tb input[type="checkbox"]').prop('checked',true); } } function Nochoice(){ var editmode = $('.editmode').attr('onclick'); if(editmode == "ExitEditmode()"){ //$('#tb input[type="checkbox"]').prop('checked',true); AllNoChoiceMode(); }else{ $('#tb input[type="checkbox"]').prop('checked',false); } } function Reversechoice(){ var editmode = $('.editmode').attr('onclick'); if(editmode == "ExitEditmode()"){ //$('#tb input[type="checkbox"]').prop('checked',true); ReverseChoiceMode(); }else{ $('#tb input[type="checkbox"]').each( function(){ if($(this).prop('checked')){ $(this).prop('checked',false); }else{ $(this).prop('checked',true); } } ); } } function Editmode(){ $('.editmode').val("进入显示模式"); $('.editmode').attr('onclick','ExitEditmode()'); $('#tb input[type="checkbox"]').each( function(){ if($(this).prop('checked')){ var dqtd = $(this).parent().next(); var textlog = dqtd.text(); //console.log(textlog); dqtd.empty(); dqtd.append('<input type="text" />'); dqtd.children().val(textlog); }else{ console.log("fdaf"); } } ); } function AllChoiceMode(){ $('#tb input[type="checkbox"]').each( function(){ var dqtd = $(this).parent().next(); //console.log($(this).parent().next().find('input')); if($(this).prop('checked')){ }else{ $(this).prop('checked',true); var textlog = dqtd.text(); dqtd.empty(); dqtd.append('<input type="text" />'); dqtd.children().val(textlog); } } ); } function AllNoChoiceMode(){ $('#tb input[type="checkbox"]').each( function(){ var dqtd = $(this).parent().next(); if($(this).prop('checked')){ $(this).prop('checked',false); var inputtext = dqtd.children().val(); //console.log(inputtext); dqtd.empty(); dqtd.append(inputtext); } //console.log($(this).parent().next().find('input')); } ); } function ReverseChoiceMode(){ $('#tb input[type="checkbox"]').each( function(){ var dqtd = $(this).parent().next(); if($(this).prop('checked')){ $(this).prop('checked',false); var inputtext = dqtd.children().val(); //console.log(inputtext); dqtd.empty(); dqtd.append(inputtext); }else{ $(this).prop('checked',true); var textlog = dqtd.text(); dqtd.empty(); dqtd.append('<input type="text" />'); dqtd.children().val(textlog); } //console.log($(this).parent().next().find('input')); } ); } function ExitEditmode(){ $('.editmode').val("进入编辑模式"); $('.editmode').attr('onclick','Editmode()'); $('#tb input[type="checkbox"]').each( function(){ if($(this).prop('checked')){ var dqtd = $(this).parent().next(); var inputtext = dqtd.children().val(); //console.log(inputtext); dqtd.empty(); dqtd.append(inputtext); //dqtd.children().val(textlog); }else{ console.log("123456789900"); } } ) } </script> </body> </html>
css/1.css里的内容：
.head-div input{ margin-right:10px; color:red; } td{ padding-right:10px; }
9.提交表单前验证
9.1 DOM绑定事件方式
<!DOCTYPE html> <html lang="en"> <head> <title>fazhan</title> <meta charset="UTF-8" /> <style> .item{ 250px; height:60px; position:relative; } .item span{ position:absolute; top:20px; left:0; display:inline-block; background-color:red; color:white; } </style> </head> <body> <form> <div class="item"> 用户名：<input type="text" class="c1" name="username" label="用户名" /> <!--span>用户名不能为空</span--> </div> <div class="item"> 密码：<input type="password" class="c1" name="password" label="密码" /> <!--span>密码不能为空</span--> </div> <div> <input type="submit" onclick="return CheckForm();"/> </div> </form> <script src="jquery-1.12.4.js"></script> <script> function CheckForm(){ //为防止错误提示一直存在，所以每次做检测之前都把span标签移除。 $('form .item span').remove(); var flag = true; $('form .c1').each(function(){ var val = $(this).val(); if(val.length<=0){ var label = $(this).attr('label'); var tag = document.createElement('span'); tag.innerText = label + "不能为空"; $(this).after(tag); flag = false; } }); return flag; } </script> </body> </html>
9.2 JQuery绑定事件方式
<body>
<form>
<div class="item">
用户名：<input type="text" class="c1" name="username" label="用户名" />
<!--span>用户名不能为空</span-->
</div>
<div class="item">
密码：<input type="password" class="c1" name="password" label="密码" />
<!--span>密码不能为空</span-->
</div>
//去掉了DOM绑定事件onclick
<input type="submit" />
</form>
<script src="jquery-1.12.4.js"></script>
<script>
//JQuery方式的绑定的好处：不用每个标签都绑定DOM事件（onclick、onblur等），根据标签属性批量绑定事件；
//另外也防止别人直接能查看到点击按钮触发了什么事件，增加了安全性；
//最重要的是可以把事件代码都写到js文件里，不直接在html页面体现出来。
$(function(){
BindCheckValid();
});
function BindCheckValid(){
//$('form input[type="submit"]') 或$('form :submit')
$('form input[type="submit"]').click(function(){
$('.item span').remove();
var flag = true;
$('form .c1').each(function(){
var val = $(this).val();
if(val.length<=0){
var label = $(this).attr('label');
var tag = document.createElement('span');
tag.innerText = label + "不能为空";
$(this).after(tag);
flag = false;
}
});
return flag;
});
}
</script>
</body>
10. jQuery的Each循环
<!DOCTYPE html> <html lang="en"> <head> <title>fazhan</title> <meta charset="UTF-8" /> </head> <body> <script src="jquery-1.12.4.js"></script> <script> $(function(){ $.each([11,22,33,44],function(k,v){ if(v == 22){ //“return;”，这是退出了function(k,v){}这个函数，并没有退出each函数，所以仅仅不输出“22”，还会继续输出“33”、“44”。相当于continue //“return false;”，each函数默认规定：只要内部函数返回的false，则整个each循环就终止，所以这只会输出“11”，不会输出“22”、“33”、“44”。相当于break return false; } console.log(v); }); }); </script> </body> </html>
11.jQuery扩展
11.1 jQuery.extend，创建直接调用的扩展
jQuery.extend({ min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; } }); jQuery.min(2,3); // => 2 jQuery.max(4,5); // => 5
11.2 jQuery.fn.extend，创建添加组件调用的扩展
jQuery.fn.extend({ check: function() { return this.each(function() { this.checked = true; }); }, uncheck: function() { return this.each(function() { this.checked = false; }); } }); $("input[type=checkbox]").check(); $("input[type=radio]").uncheck(); #调用的时候在前面加一个组件。
11.3 自定义扩展js的文件
(function(jq){ jQuery.extend({ 'dalong':function(arg){ console.log(arg); } }); function f1(){ } })(jQuery); #(function(){})(args)，为了避免参数冲突，闭包。 #将扩展方法放到自执行函数里面，确保可以直接调用。
12.建立扩展实现表单验证
<!DOCTYPE html> <html lang="en"> <head> <title>fazhan</title> <meta charset="UTF-8" /> <style> .item{ 250px; height:60px; position:relative; } .item span{ position:absolute; top:20px; left:0; display:inline-block; background-color:red; color:white; } </style> </head> <body> <form class="form1"> <div class="item"> <!--require="true"的就不允许为空，其他的可以为空，不验证;如果内容长度小于6，提示不合法。--> 用户名：<input type="text" class="c1" name="username" label="用户名" require="true" minLen="6" /> <!--span>用户名不能为空</span--> </div> <div class="item"> 密码：<input type="password" class="c1" name="password" label="密码" /> <!--span>密码不能为空</span--> </div> <div class="item"> 手机号：<input type="text" class="c1" name="phone" label="密码" require="true" phone="true" /> <!--span>密码不能为空</span--> </div> //去掉了DOM绑定事件onclick <input type="submit" /> </form> <form class="form2"> <div class="item"> 用户名：<input type="text" class="c1" name="username" label="用户名" /> <!--span>用户名不能为空</span--> </div> <div class="item"> 密码：<input type="password" class="c1" name="password" label="密码" /> <!--span>密码不能为空</span--> </div> //去掉了DOM绑定事件onclick <input type="submit" /> </form> <script src="jquery-1.12.4.js"></script> //导入外部js文件 <script src="common.js"></script> <script> //将对应from传给扩展js $(function(){ $.valid('.form1'); }); </script> </body> </html> #common.js的内容， (function(jq){ //将共有的代码写成一个方法。因为这个自执行函数是闭包，所以该函数不会与外部同名函数冲突。 function ErrorMessage(inp,message){ var tag = document.createElement('span'); tag.innerText = message; inp.after(tag); } jq.extend({ valid:function(form){ jq(form).find(':submit').click(function(){ var flag = true; jq(form).find('.item span').remove(); jq(form).find(':text,:password').each(function(){ var requireStatus = $(this).attr('require'); if(requireStatus){ //验证是否为空 var val = $(this).val(); if(val.length<=0){ var label = $(this).attr('label'); ErrorMessage($(this),label + '不能为空'); flag = false; //返回false并退出each循环，不会再往下循环password标签了。 return false; } //验证长度是否合规 var minLen=$(this).attr('minLen'); var intMinLen = parseInt(minLen); if(val.length<=intMinLen){ var label = $(this).attr('label'); ErrorMessage($(this),label + '不能小于' + minLen); flag = false; return false; } var phoneStatus = $(this).attr('phone'); //验证内容是否符合正则表达式，如果符合就返回true，否则返回false。 var phoneReg = /^1[3|5|7|8]d{9}$/ if(phoneStatus){ if(!phoneReg.test(val)){ var label = $(this).attr('label'); ErrorMessage($(this),label + '格式错误'); flag = false; return false; } } } }); //如果返回false，则不再提交表单。 return flag; }); } }); })(jQuery);
13. 菜单滚动
<!DOCTYPE html> <html lang="en"> <head> <title>fazhan</title> <meta charset="UTF-8" /> <style> body{ margin:0; } .fixed{ position:fixed; top:10px; } .pg-header{ height:50px; 1200px; background-color:#104E8B; margin:0 auto; } ul{ margin:0; list-style-type:none; } .pg-header-menu ul li{ float:left; margin-left:200px; color:white; cursor:pointer; } .pg-body{ position:relative; } .pg-body-left{ height:800px; 200px; border:1px solid red; position:absolute; top:0; left: 65px; bottom:0; } .pg-body-right{ height:800px; 980px; border:1px solid red; position:absolute; top:0; right: 65px; bottom:0; } .backstatus{ background-color:#104E8B; display:inline-block; } .neirongyi{ height:800px; background-color:green; } .neironger{ height:800px; background-color:blue; } .neirongsan{ height:800px; background-color:red; } </style> </head> <body> <div class="pg-header"> <div class="pg-header-menu"> <ul> <li>选项一</li> <li>选项二</li> <li>选项三</li> </ul> </div> </div> <div class="pg-body"> <div class="pg-body-left"> <div class="pg-body-left-menu"> <div class="item" auto-to="function1"><a>第一章</a></div> <div class="item" auto-to="function2"><a>第二章</a></div> <div class="item" auto-to="function3"><a>第三章</a></div> </div> </div> <div class="pg-body-right"> <div class="neirongyi" menu="function1"> <h1>内容一</h1> </div> <div class="neironger" menu="function2"> <h1>内容二</h1> </div> <div class="neirongsan" menu="function3"> <h1>内容三</h1> </div> </div> </div> <div class="pg-footer"> </div> <script src="jquery-1.12.4.js"></script> <script> $(function(){ Init(); }); function Init(){ $(window).scroll(function(){ //当前滚动的高度 var scrollTop = $(window).scrollTop(); // 当滚轮埋过了菜单栏，就将左侧的菜单栏加上fix将其固定。 if(scrollTop > 50){ $('.pg-body-left-menu').addClass('fixed'); }else{ //当滚动高度小于50时，将所有标签的样式去掉。 $('.pg-body-left-menu').children().removeClass('backstatus'); $('.pg-body-left-menu').removeClass('fixed'); } $('.pg-body-right').children().each(function(){ //offSet有两个值，offset.top和offset.left，分别是当前标签距离顶部和距离左部的距离。 var offSet = $(this).offset(); //获取标签的高度 var height = $(this).height(); //滚动的高度大于内容标签距离顶部的高度，并且小于内容标签距离顶部的高度 + 标签自身的高度，就将对应的标签添加背景色。 if(scrollTop > offSet.top && scrollTop < offSet.top + height){ //获取文档的高度。 var docHeight = $(document).height(); //获取窗口的高度。 var winHeight = $(window).height(); //如果窗口高度+滚动的高度=文档的高度，就说明滚动到文档底部了。 //滚动到文档底部后，将最后一章节的标签设置了背景色。 if(docHeight == winHeight + scrollTop){ $('.pg-body-left-menu').find('div:last-child').addClass('backstatus').siblings().removeClass('backstatus'); }else{ var target = $(this).attr('menu'); $('.pg-body-left-menu').find('div[auto-to="'+target+'"]').addClass('backstatus').siblings().removeClass('backstatus'); } return false; } }); }); } </script> </body> </html>