jquery介绍
jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。
jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器，2.x、3.x系列放弃支持低版本浏览器，目前使用最多的是1.x系列的。
jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。
<script type="text/javascript" src="js/jquery-1.12.2.js"></script>
jquery的口号和愿望 Write Less, Do More（写得少，做得多）
1、http://jquery.com/ 官方网站
2、https://code.jquery.com/ 版本下载
jquery文档加载完再执行
将获取元素的语句写到页面头部，会因为元素还没有加载而出错，jquery提供了ready方法解决这个问题，它的速度比原生的 window.onload 更快。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="js/jquery-1.12.4.min.js"></script> <script> window.onload = function(){ var oDiv = document.getElementById('div01'); alert('原生js获取的div：' + oDiv); } /* $(document).ready(function(){ var $div = $('#div01'); alert('jquery获取的div：' + $div); }) */ // 上面的ready的写法可以简写成下面的形式： $(function(){ var $div = $('#div01'); alert('jquery获取的div：' + $div); }); </script> </head> <body> <div id="div01">这是一个div</div> </body> </html>
jquery选择器
jquery用法思想一
选择某个网页元素，然后对它进行某种操作
jquery选择器
jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。
$('#myId') //选择id为myId的网页元素
$('.myClass') // 选择class为myClass的元素
$('li') //选择所有的li元素
$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
$('input[name=first]') // 选择name属性等于first的input元素
对选择集进行过滤
$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').eq(5); //选择第6个div元素
选择集转移
$('#box').prev(); //选择id是box的元素前面紧挨的同辈元素
$('#box').prevAll(); //选择id是box的元素之前所有的同辈元素
$('#box').next(); //选择id是box的元素后面紧挨的同辈元素
$('#box').nextAll(); //选择id是box的元素后面所有的同辈元素
$('#box').parent(); //选择id是box的元素的父元素
$('#box').children(); //选择id是box的元素的所有子元素
$('#box').siblings(); //选择id是box的元素的同级元素
$('#box').find('.myClass'); //选择id是box的元素内的class等于myClass的元素
判断是否选择到了元素
jquery有容错机制，即使没有找到元素，也不会出错，可以用length属性来判断是否找到了元素,length等于0，就是没选择到元素，length大于0，就是选择到了元素。
var $div1 = $('#div1'); var $div2 = $('#div2'); alert($div1.length); // 弹出1 alert($div2.length); // 弹出0 ...... <div id="div1">这是一个div</div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ // 通过id选择器选择元素 var $div = $('#div01'); // 通过类选择器选择元素 var $div2 = $('.box'); // 通过标签选择器选择元素 var $li = $('li'); // 通过层级选择器选择元素 var $span = $('.box span'); // 通过属性选择器选择元素 var $div3 = $('div[class="box2"]'); // 选择包含span标签的div var $div4 = $('div').has('span'); // 选择class的名称不是box2的div var $div5 = $('div').not('.box2'); // 选择第四个li var $li2 = $('li').eq(3); $div.css({'color':'red','font-size':30}); $div2.css({'color':'pink','fontSize':'30px'}); $li.css({'background':'gold'}); $span.css({'color':'red'}); $div3.css({'color':'green','font-size':30}); $div4.css({'text-indent':50}); $div5.css({'text-decoration':'underline'}); $li2.css({'text-indent':50}); }) </script> </head> <body> <div id="div01">这是一个div</div> <div class="box">这是第二个<span>div</span></div> <div class="box">这是第三个div</div> <div class="box2">这是第四个div</div> <ul> <li>列表文字</li> <li>列表文字</li> <li>列表文字</li> <li>列表文字</li> <li>列表文字</li> <li>列表文字</li> <li>列表文字</li> <li>列表文字</li> </ul> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ var $div = $('#div01'); // 转移到div01上面紧挨的一个兄弟标签 $div.prev().css({'color':'red'}); // 转移到div01上面所有的兄弟标签 $div.prevAll().css({'text-decoration':'underline'}); // 转移到div01下面紧挨的一个兄弟标签 $div.next().css({'color':'pink'}); // 转移到div01下面所有的兄弟标签 $div.nextAll().css({'text-indent':50}); // 转移到div01其他所有的兄弟标签（相当于反选） $div.siblings().css({'font-style':'italic'}) //转移到div01的父级标签 $div.parent().css({'background':'#ddd'}); //转移到div01的子级标签 $div.children().css({'color':'red'}); // 转移到div01里面的一个 class名称是sp02 的子级标签 $div.find('.sp02').css({'font-size':30}); }) </script> </head> <body> <div> <h2>这是一个h2标题</h2> <p>这是第一个段落标签</p> <div id="div01">这是一个<span>div</span><span class="sp02">第二个span</span></div> <h3>这是一个h3标题</h3> <p>这是第二个段落标签</p> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ var $div = $('#div01'); var $div2 = $('#div02'); var $li = $('li'); var iLen = $div.length; var iLen2 = $div2.length; var iLen3 = $li.length; alert(iLen); alert(iLen2); alert(iLen3); }) </script> </head> <body> <div id="div01">这是一个div</div> <ul> <li>列表文字</li> <li>列表文字</li> <li>列表文字</li> <li>列表文字</li> <li>列表文字</li> <li>列表文字</li> <li>列表文字</li> <li>列表文字</li> </ul> </body> </html>
jquery样式操作
jquery用法思想二
同一个函数完成取值和赋值
操作行间样式
// 获取div的样式
$("div").css("width");
$("div").css("color");
//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});
特别注意
选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css("width")，获取的是第一个div的width。
操作样式类名
$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .red{ color:red; } .big{ font-size:30px; } .noline{ text-decoration:none; } </style> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ var $div = $('#div01'); var $div2 = $('div'); var $a = $('#link01'); // 读取样式属性值 var sSize = $div.css('font-size'); //alert(sSize); // 写样式属性值 // 只设置一个属性，可以不写成字典的形式 $div.css('color','red'); // 设置多个属性需要写成字典的形式 $div.css({'font-size':30,'font-weight':'bold'}); // 获取多个元素的样式属性值,得到的是第一个元素的属性值 var sSize2 = $div2.css('font-size'); // alert(sSize2); // 操作class属性,括号里面写的是样式的类名，不是选择器 $a.addClass('red'); $a.addClass('big'); $a.addClass('noline'); $a.removeClass('red'); $a.removeClass('noline'); }) </script> </head> <body> <div id="div01">这是一个div</div> <div>这是第二个div</div> <a href="#" id="link01">这是一个链接</a> </body> </html>
绑定click事件
给元素绑定click事件，可以用如下方法：
$('#btn1').click(function(){
// 内部的this指的是原生对象
// 使用jquery对象用 $(this)
})
获取元素的索引值
有时候需要获得匹配元素相对于其同胞元素的索引位置，此时可以用index()方法获取
var $li = $('.list li').eq(1); alert($li.index()); // 弹出1 ...... <ul class="list"> <li>1</li> <li>2</li> <li>4</li> <li>5</li> <li>6</li> </ul>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ var $li = $('.list li'); //alert($li.length); var $p = $('p'); alert($p.eq(0).index()); // 弹出0 alert($p.eq(1).index()); // 弹出0 // 绑定click事件 $li.click(function(){ // this指的是当前发生事件的对象，不过它是一个原生对象 // this.style.background = 'gold'; $(this).css({'background':'red'}); // 获取元素的索引值 alert( $(this).index()); }) }) </script> </head> <body> <!-- ul.list>li{列表文字}*8 --> <ul class="list"> <li>列表文字</li> <li>列表文字</li> <li>列表文字</li> <li>列表文字</li> <li>列表文字</li> <li>列表文字</li> <li>列表文字</li> <li>列表文字</li> </ul> <div> <p>这是第一个段落</p> </div> <div> <p>这是第二个段落</p> </div> </body> </html>
课堂练习
选项卡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .tab_con{ width:500px; height:350px; margin:50px auto 0; } .tab_btns{ height:50px; } .tab_btns input{ width:100px; height:50px; background:#ddd; border:0px; outline:none; } .tab_btns .active{ background:gold; } .tab_cons{ height:300px; background:gold; } .tab_cons div{ height:300px; line-height:300px; text-align:center; display:none; font-size:30px; } .tab_cons .current{ display:block; } </style> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ var $btn = $('.tab_btns input'); var $div = $('.tab_cons div'); $btn.click(function(){ //$(this).addClass('active'); $(this).addClass('active').siblings().removeClass('active'); // alert( $(this).index() ); $div.eq( $(this).index() ).addClass('current').siblings().removeClass('current'); }) }) </script> </head> <body> <div class="tab_con"> <div class="tab_btns"> <input type="button" value="按钮一" class="active"> <input type="button" value="按钮二" > <input type="button" value="按钮三"> </div> <div class="tab_cons"> <div class="current">按钮一对应的内容</div> <div>按钮二对应的内容</div> <div>按钮三对应的内容</div> </div> </div> </body> </html>
元素显示隐藏
jquery将元素的显示和隐藏效果封装成了三个方法，通过这三个方法可以快速的制作元素的显示和隐藏效果
show() // 将元素显示，相当使用了css方法 css({'display':'block'})
hide() // 将元素显示，相当使用了css方法 css({'display':'none'})
toggle() // 切换元素的显示和隐藏，在方法内部获取了元素的显示状态，然后反向设置元素的显示效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box{ width: 200px; height: 200px; background:gold; display:none; } </style> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ var $btn = $('#btn'); var $box = $('.box'); $btn.click(function(){ //$box.css({'display':'none'}); // 让元素隐藏 //$box.hide(); // $box.css({'display':'block'}); // 让元素显示 // $box.show(); // 切换元素的显示和隐藏 $box.toggle(); }) }) </script> </head> <body> <input type="button" value="按钮" id="btn"> <div class="box"></div> </body> </html>
jquery属性操作
1、html() 取出或设置html内容
// 取出html内容 var $htm = $('#div1').html(); // 设置html内容 $('#div1').html('<span>添加文字</span>');
2、prop() 取出或设置某个属性的值
// 取出图片的地址
var $src = $('#img1').prop('src');
// 设置图片的地址和alt属性
$('#img1').prop({src: "test.jpg", alt: "Test Image" });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ var $a = $('#link01'); var $div = $('#div01'); // 读取属性值： var sId = $a.prop('id'); // alert(sId); // 写属性值 $a.prop({'href':'http://www.baidu.com','title':'这是去到百度的链接','class':'sty01'}) // 操作元素包裹的内容 // 读取元素包裹的内容 var sTr = $div.html(); //alert(sTr); // 写元素包裹的内容 $div.html('<ul><li>列表文字</li><li>列表文字</li><li>列表文字</li></ul>') }) </script> </head> <body> <a href="#" id="link01">这是一个链接</a> <div id="div01"> <a href="http://www.itcast.cn">这是第二个链接</a> </div> </body> </html>
课堂练习
聊天效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> .talk_con{ width:600px; height:500px; border:1px solid #666; margin:50px auto 0; background:#f9f9f9; } .talk_show{ width:580px; height:420px; border:1px solid #666; background:#fff; margin:10px auto 0; overflow:auto; } .talk_input{ width:580px; margin:10px auto 0; } .whotalk{ width:80px; height:30px; float:left; outline:none; } .talk_word{ width:420px; height:26px; padding:0px; float:left; margin-left:10px; outline:none; text-indent:10px; } .talk_sub{ width:56px; height:30px; float:left; margin-left:10px; } .atalk{ margin:10px; } .atalk span{ display:inline-block; background:#0181cc; border-radius:10px; color:#fff; padding:5px 10px; } .btalk{ margin:10px; text-align:right; } .btalk span{ display:inline-block; background:#ef8201; border-radius:10px; color:#fff; padding:5px 10px; } </style> <script src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ var $words = $('#words'); var $who = $('#who'); var $talk = $('#talkwords'); var $btn = $('#talksub'); $btn.click(function(){ /* var sVal01 = $who.prop('value'); var sVal02 = $talk.prop('value'); // 清空输入框 $talk.prop({'value':''}); */ // 操作value属性可以用 val() 方法 var sVal01 = $who.val(); var sVal02 = $talk.val(); $talk.val(''); // 判断输入框是否为空 if(sVal02==''){ alert('请输入内容！'); return; } var sTr = ''; if(sVal01==0){ sTr = '<div class="atalk"><span>A说：'+ sVal02 +'</span></div>' } else{ sTr = '<div class="btalk"><span>B说：'+ sVal02 +'</span></div>' } $words.html( $words.html() + sTr); }) }) </script> </head> <body> <div class="talk_con"> <div class="talk_show" id="words"> <div class="atalk"><span>A说：吃饭了吗？</span></div> <div class="btalk"><span>B说：还没呢，你呢？</span></div> </div> <div class="talk_input"> <select class="whotalk" id="who"> <option value="0">A说：</option> <option value="1">B说：</option> </select> <input type="text" class="talk_word" id="talkwords"> <input type="button" value="发送" class="talk_sub" id="talksub"> </div> </div> </body> </html>
jquery事件
事件函数列表：
blur() 元素失去焦点
focus() 元素获得焦点
change() 当表单元素的值发生改变时
click() 鼠标单击
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
ready() DOM加载完成
submit() 用户递交表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ var $txt = $('#txt01'); var $form = $('#form01'); // 绑定失去焦点的事件 /* $txt.blur(function(){ alert( $(this).val() ); }) */ // 绑定获得焦点的事件,这么写会反复触发事件，一般不这么用，绑定函数可以用click事件代替 /*$txt.focus(function(){ alert( $(this).val() ); }) */ // focus事件一般用在让输入框起始就获得焦点，方便用户输入内容 $txt.focus(); // 绑定change事件,输入框的值发生改变后，再失去焦点才触发 /*$txt.change(function(){ alert( $(this).val() ); }) */ // 再from标签上绑定表单提交事件 $form.submit(function(){ //alert('表单提交'); // 判断输入的值不合法，需要阻止表单提交 return false; }) }) </script> </head> <body> <form id="form01"> <label>用户名：</label> <input type="text" id="txt01" name="username"> <input type="submit" value="提交"> </form> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box{ width: 200px; height: 200px; background:gold; margin:50px auto 0px; } .box2{ width:100px; height: 100px; background:green; } </style> <script src="js/jquery-1.12.4.min.js"></script> <script> // $(document).ready(function(){ }) $(function(){ var $box = $('.box'); // 绑定移入事件 /*$box.mouseover(function(){ $(this).animate({'margin-top':100}); }) // 绑定移出事件 $box.mouseout(function(){ $(this).animate({'margin-top':50}); }) */ // 上面的mouseover和mouseout事件，移入子元素也会触发，如果不希望触发，可以改成mouseenter和mouseleave的形式 $box.mouseenter(function(){ $(this).animate({'margin-top':100}); }) $box.mouseleave(function(){ $(this).animate({'margin-top':50}); }) }) </script> </head> <body> <div class="box"> <div class="box2"></div> </div> </body> </html>
表单验证
1、什么是正则表达式：
能让计算机读懂的字符串匹配规则。
2、正则表达式的写法：
var re=new RegExp('规则', '可选参数');
var re=/规则/参数;
3、规则中的字符
1）普通字符匹配：
如：/a/ 匹配字符 ‘a’，/a,b/ 匹配字符 ‘a,b’
2）转义字符匹配：
\d 匹配一个数字，即0-9
\D 匹配一个非数字，即除了0-9
\w 匹配一个单词字符（字母、数字、下划线）
\W 匹配任何非单词字符。等价于[^A-Za-z0-9_]
\s 匹配一个空白符
\S 匹配一个非空白符
. 匹配一个任意字符
var sTr01 = '123456asdf';
var re01 = /\d+/;
//匹配纯数字字符串
var re02 = /^\d+$/;
alert(re01.test(sTr01)); //弹出true
alert(re02.test(sTr01)); //弹出false
4、量词：对左边的匹配字符定义个数
? 出现零次或一次（最多出现一次）
+ 出现一次或多次（至少出现一次）
* 出现零次或多次（任意次）
{n} 出现n次
{n,m} 出现n到m次
{n,} 至少出现n次
5、任意一个或者范围
[abc123] : 匹配‘abc123’中的任意一个字符
[a-z0-9] : 匹配a到z或者0到9中的任意一个字符
6、限制开头结尾
^ 以紧挨的元素开头
$ 以紧挨的元素结尾
7、修饰参数：
g： global，执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）
i： ingore case，忽略大小写，默认大小写敏感
8、常用方法
test
用法：正则.test(字符串) 匹配成功，就返回真，否则就返回假
正则默认规则
匹配成功就结束，不会继续匹配，区分大小写
常用正则规则
//用户名验证：(数字字母或下划线6到20位)
var reUser = /^\w{6,20}$/;
//邮箱验证：
var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;
//密码验证：
var rePass = /^[\w!@#$%^&*]{6,20}$/;
//手机号码验证：
var rePhone = /^1[34578]\d{9}$/;
课堂实例
注册页面表单验证
事件冒泡
什么是事件冒泡
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
事件冒泡的作用
事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。
阻止事件冒泡
事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止
$(function(){ var $box1 = $('.father'); var $box2 = $('.son'); var $box3 = $('.grandson'); $box1.click(function() { alert('father'); }); $box2.click(function() { alert('son'); }); $box3.click(function(event) { alert('grandson'); event.stopPropagation(); }); $(document).click(function(event) { alert('grandfather'); }); }) ...... <div class="father"> <div class="son"> <div class="grandson"></div> </div> </div>
阻止默认行为
阻止表单提交
$('#form1').submit(function(event){
event.preventDefault();
})
合并阻止操作
实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用
// event.stopPropagation();
// event.preventDefault();
// 合并写法：
return false;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .grandfather{ width: 300px; height: 300px; background:purple; } .father{ width: 200px; height: 200px; background:gold; position: relative; } .son{ width: 100px; height: 100px; background:red; position: absolute; left:0px; top:400px; } </style> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ //var $son = $('.son'); $('.son').click(function(){ alert(1); // 阻止事件冒泡的简略写法： return false; }); $('.father').click(function(ev){ alert(2); // 阻止事件冒泡的完整写法： ev.stopPropagation(); }) $('.grandfather').click(function(){ alert(3); }) // $(document)代表顶级标签，表示body标签或者html标签 $(document).click(function(){ alert(4); }) }) </script> </head> <body> <div class="grandfather"> <div class="father"> <div class="son"></div> </div> </div> </body> </html>
课堂练习
页面弹框（点击弹框外弹框关闭）;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/main.css"> <title>Document</title> <script src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ $('#btn01').click(function(){ $('#pop').show(); return false; }); $('#shutoff').click(function(){ $('#pop').hide(); }); $(document).click(function(){ $('#pop').hide(); }); $('.pop_con').click(function(){ return false; }) }) </script> </head> <body> <input type="button" value="弹出弹框" id="btn01"> <div class="pop_main" id="pop"> <div class="pop_con"> <div class="pop_title"> <h3>系统提示</h3> <a href="#" id="shutoff">×</a> </div> <div class="pop_detail"> <p class="pop_text">亲！请关注近期的优惠活动！</p> </div> <div class="pop_footer"> </div> </div> <div class="mask"></div> </div> </body> </html>
浙公网安备 33010602011771号