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 更快。
<script type="text/javascript">$(document).ready(function(){......});
<script type="text/javascript">$(function(){......});</script>
示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/jquery-1.12.4.min.js"></script><script>window.onload = function(){var oDiv = document.getElementById('div01');alert('原生javascript获取div;'+oDiv); //原生javascript获取div;[object HTMLDivElement]}//这个会先执行// $(document).ready(function(){// var $div = $('#div01');// alert('jquery获取的div:'+$div); //jquery获取的div:[object Object]// })// 上面ready的写法可以简写成下面的形式：$(function(){var $div = $('#div01');alert('jquery1获取的div:'+$div); //jquery获取的div:[object Object]})</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元素
示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/jquery-1.12.4.min.js"></script><script>$(function(){//id选择器var $div = $('#div01');//类选择器var $div2 = $('.box');// 选择所有的li元素==>标签选择器var $li = $('li');//层级选择器var $span = $('.box span');//属性选择器var $div3 = $('div[class="box2"]');//选择包含span标签的divvar $div4 = $('div').has('span');//选择class并不是box2的divvar $div5 = $('div').not('.box2');// 选择第4个livar $li2 = $('li').eq(3);//设置样式$div.css({'color':'red','font-size':30});$div2.css({'color':'gold','fontSize':'30px'});$li.css({'background':'gold','list-style':'none'});//font-weight加粗$span.css({'color':'red','font-weight':'bold'});$div3.css({'color':'pink','font-size':30});//text-indent 缩进$div4.css({'text-indent':50});//text-decoration 下划线$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></ul>
</body>
</html>
选择集转移
$('#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的元素
示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/jquery-1.12.4.min.js"></script><script>$(function(){//id选择器var $div = $('#div01');//$('#box').prev(); //选择id是box的元素前面紧挨的同辈元素$div.prev().css({'color':'red'});//p标签// $('#box').prevAll(); //选择id是box的元素之前所有的同辈元素//text-indent缩进$div.prevAll().css({'text-indent':50});// h2 p// $('#box').next(); //选择id是box的元素后面紧挨的同辈元素$div.next().css({'color':'pink'});//h3// $('#box').nextAll(); //选择id是box的元素后面所有的同辈元素$div.nextAll().css({'text-indent':30}); // h3 p// $('#box').parent(); //选择id是box的元素的父元素$div.parent().css({'background':'#ddd'}); //父级div// $('#box').children(); //选择id是box的元素的所有子元素$div.children().css({'color':'red'});// $('#box').siblings(); //选择id是box的元素的同级元素$div.siblings().css({'text-decoration':'underline'}); // h2 p h3 p// $('#box').find('.myClass'); //选择id是box的元素内的class等于myClass的元素$div.find('.sp02').css({'font-size':70});})</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>
判断是否选择到了元素
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>
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的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式
示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/jquery-1.12.4.min.js"></script><style>.red{color:red;}.big{font-size:30px;}.noline{text-decoration:none;}</style><script>$(function(){var $div = $('#div01');var $div2 = $('div');var $a = $('#link01');//读取样式属性值var sSize = $div.css('font-size'); //文字大小默认是16px// alert(sSize);//16px//写样式属性，也叫设置样式属性// 设置一个样式属性可以不写成字典的形式$div.css('color','red');//font-weight 加粗$div.css({'font-size':30,'font-weight':'bold'});//读取多个元素样式属性值，得到的是第一个元素的值var sSize2 = $div2.css('font-size');// alert(sSize2);//30px//操作样式类名// $("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2$a.addClass('red');$a.addClass('big');$a.addClass('noline');// $("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式// $("#div1").removeClass("divClass divClass2") //移除多个样式$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 http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/jquery-1.12.4.min.js"></script><script>$(function(){var $li = $('.list li');//选中八个livar $p = $('p');//绑定click事件$li.click(function(){//this表示当前发生的对象，他是一个原生js对象 点哪一个就是哪一个是this// this.style.background = 'red'; //原生对象//$(this)表示当前发生事件的jquery对象$(this).css('background','gold');//获取当前点击的li的索引值// alert($(this).index());})alert($p.eq(0).index()); //0alert($p.eq(1).index()); //0})</script>
</head>
<body><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');// alert($btn.length);//选择三个divvar $div = $('.tab_cons div');$btn.click(function(){//addClass当前添加class=active//siblings 反选到兄弟节点上//removeClass 移除class = 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动画
通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。
/*animate参数：参数一：要改变的样式属性值，写成字典的形式参数二：动画持续的时间，单位为毫秒，一般不写单位参数三：动画曲线，默认为‘swing’，缓冲运动，还可以设置为‘linear’，匀速运动参数四：动画回调函数，动画完成后执行的匿名函数*/$('#div1').animate({width:300,height:300
},1000,'swing',function(){alert('done!');
});
示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/jquery-1.12.4.min.js"></script><style>.box{width: 200px;height: 200px;background: gold;}</style><script>$(function(){var $btn = $('#btn');var $box = $('.box');$btn.click(function(){// $box.css({'width':1000})// $box.animate({'width':1000});/* animate的参数参数一：要做动画的样式属性，写成字典形式参数二：动画持续的时间，默认是400毫秒，设置时不写单位参数三：动画曲线，默认是'swing',缓冲运动，还有'linear' 匀速运动 可以不写参数四：动画的回调函数，它是一个匿名函数，在动画结束时会自动调用*/// $box.animate({'width':1000},1000,'swing');// $box.animate({'width':1000},1000,'swing',function(){// alert('动画完毕');// });$box.animate({'width':1000},1000,'swing',function(){$box.animate({'margin-top':400},1000,function(){$box.animate({'width':200,'margin-top':0},1000);});});})})//持续动$(function(){var $btn = $('#btn');var $box = $('.box');$btn.click(function fnMove(){//$box.css({'width':1000});// $box.animate({'width':1000});/* animate的参数参数一：要做动画的样式属性，写成字典形式参数二：动画持续的时间，默认是400毫秒，设置时不写单位参数三：动画曲线，默认是'swing',缓冲运动，还有'linear' 匀速运动参数四：动画的回调函数，它是一个匿名函数，在动画结束时会自动调用*/$box.animate({'width':1000},1000,'swing',function(){ $box.animate({'margin-top':400},1000,function(){ $box.animate({'width':200,'margin-top':0},1000,function(){fnMove();})})}); })})</script></head>
<body><input type="button" value="动画" id="btn"><div class="box"></div>
</body>
</html>
jquery特殊效果
fadeIn() 淡入$btn.click(function(){$('#div1').fadeIn(1000,'swing',function(){alert('done!');});});
fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素
示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><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(){//元素显示隐藏效果// hide() 隐藏元素// $box.hide(); //display: none;相当于隐藏// show() 显示元素// $box.show(); //display: block相当于显示// toggle() 切换元素的可见状态// $box.toggle();//元素淡入淡出效果// fadeIn() 淡入// $box.fadeIn(); //先默认隐藏// fadeOut() 淡出// $box.fadeOut(); //先默认是显示// fadeToggle() 切换淡入淡出// $box.fadeToggle();// slideUp() 向上卷起// $box.slideUp();// slideDown() 向下展开// $box.slideDown();// slideToggle() 依次展开或卷起某个元素// $box.slideToggle();//slideToggle特性 解决这个问题stop记录之前的动画全部停止，保留最后一次$box.stop().slideToggle();})})
</script><body><input type="button" value="动画" id="btn"><div class="box"></div>
</body>
</html>
jquery链式调用
jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写：
$('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent() //跳到ul的父元素，也就是id为div1的元素
.siblings() //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast'); //高度实际高度变换到零来隐藏ul元素
层次菜单
示例实现
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>层级菜单</title> <style type="text/css">body{font-family:'Microsoft Yahei';}body,ul{margin:0px;padding:0px;}ul{list-style:none;}.menu{width:200px;margin:20px auto 0;}.menu .level1,.menu li ul a{display:block;width:200px;height:30px;line-height:30px;text-decoration:none;background-color:#3366cc;color:#fff;font-size:16px;text-indent:10px; }.menu .level1{border-bottom:1px solid #afc6f6;}.menu li ul a{font-size:14px;text-indent:20px;background-color:#7aa1ef;}.menu li ul li{border-bottom:1px solid #afc6f6;}.menu li ul{display:none;}.menu li ul.current{display:block;}.menu li ul li a:hover{background-color:#f6b544;}</style><script src="js/jquery-1.12.4.min.js"></script><script type="text/javascript">$(function(){var $a = $('.level1');$a.click(function(){// $(this).next().stop().slideToggle();//parent转移到父级 siblings转移到li$(this).next().stop().slideToggle().parent().siblings().children('ul').slideUp();})})</script>
</head>
<body><ul class="menu"><li><a href="#" class="level1">手机</a><ul class="current"><li><a href="#">iPhone X 256G</a></li><li><a href="#">红米4A 全网通</a></li><li><a href="#">HUAWEI Mate10</a></li><li><a href="#">vivo X20A 4GB</a></li></ul></li><li><a href="#" class="level1">笔记本</a><ul><li><a href="#">MacBook Pro</a></li><li><a href="#">ThinkPad</a></li><li><a href="#">外星人(Alienware)</a></li><li><a href="#">惠普(HP)薄锐ENVY</a></li></ul></li><li><a href="#" class="level1">电视</a><ul><li><a href="#">海信(hisense)</a></li><li><a href="#">长虹(CHANGHONG)</a></li><li><a href="#">TCL彩电L65E5800A</a></li> </ul></li><li><a href="#" class="level1">鞋子</a><ul><li><a href="#">新百伦</a></li><li><a href="#">adidas</a></li><li><a href="#">特步</a></li><li><a href="#">安踏</a></li></ul></li><li><a href="#" class="level1">玩具</a><ul><li><a href="#">乐高</a></li><li><a href="#">费雪</a></li><li><a href="#">铭塔</a></li><li><a href="#">贝恩斯</a></li></ul></li></ul>
</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 http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/jquery-1.12.4.min.js"></script><script>$(function(){var $a = $('#link01');//读取属性值var sId = $a.prop('id');// alert(sId);//link01//写属性值，也叫做设置属性值$a.prop({'href':'http://www.baidu.com','title':'这是百度的链接'});//读取元素包裹的内容var sTr = $a.html();// alert(sTr); //这是一个链接//设置元素包裹的内容$a.html('百度网');// 不规范，可以这样做$a.html('<ul><li>列表文字</li><li>列表文字</li><li>列表文字</li></ul>')})</script>
</head>
<body><a href="#" id="link01">这是一个链接</a>
</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'), $who = $('#who'),$talkwords = $('#talkwords');$talksub = $('#talksub');$talksub.click(function(){// // 读取属性值// var sVal01 = $who.prop('value'); //读取下拉框的值// var sVal02 = $talkwords.prop('value'); //读取输入框的值// alert(sVal02);// //清除输入框里面的内容// $talkwords.prop({'value':''});//操作value属性可以改成下面的val方法的写法://读取属性值var sVal01 = $who.val();var sVal02 = $talkwords.val();//清除输入框里面的内容$talkwords.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>';}// alert($words.html());$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 http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/jquery-1.12.4.min.js"></script><script>$(function(){var $input = $('#input01');var $form = $('#from01');// $input.click(function(){// alert($(this).val());// })//绑定失去焦点的事件$input.blur(function(){// alert($(this).val());})$form.submit(function(){// alert('提交了!');//判断数据是否合法//阻止表单提交return false;})})</script>
</head>
<body><form id="from01"><label>用户名：</label><input type="text" id="input01" name="username"><input type="submit" value="提交"></form>
</body>
</html>
focus和change事件
change() 当表单元素的值发生改变时和focus() 元素获得焦点–不太理解focus
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/jquery-1.12.4.min.js"></script><script>$(function(){var $input = $('#input01');//绑定获取焦点的事件// $input.focus(function(){// console.log('aaaa');// alert( $(this).val() );// })// 在focus上绑定函数会反复触发，一般不这么用,可以用click事件代替// focus一般用在让元素起始就获得焦点$input.focus();// 绑定change事件$input.change(function(){console.log( $(this).val() );})})</script>
</head>
<body><input type="text" id="input01">
</body>
</html>
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 200px;height: 200px;background: gold;margin: 50px auto;}.box2{width: 100px;height: 100px;background: green;}</style><script src="js/jquery-1.12.4.min.js"></script><script>$(function(){var $box = $('.box');// //绑定鼠标移入事件// $box.mouseover(function(){// $(this).animate({'margin-top':100});// })// //绑定鼠标移出事件// $box.mouseout(function(){// $(this).animate({'margin-top':50});// })// 上面的移入移出事件，移到子元素也会触发，如果不希望触发，可以改成下面的形式：//绑定鼠标移入事件$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}$/;
示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>//定义正则表达式var reTest01 = /a/;var reTest02 = /a/i; //i 忽略大小写var reTest03 = /\d+/; //+出现1次到多次var reTest04 = /^\d+$/; //^开头是数字，$结尾也是数字var sTr01 = 'abc';var sTr02 = 'Abc';var sTr03 = '123456';var sTr04 = '123456abcdef';// alert(reTest01.test(sTr01)); //true// alert(reTest01.test(sTr02)); //false// alert(reTest02.test(sTr02)); //true// alert(reTest03.test(sTr03)); //true// alert(reTest03.test(sTr04)); //true 只要前面有数字就OK了alert(reTest04.test(sTr03)); //truealert(reTest04.test(sTr04)); //false</script>
</head>
<body></body>
</html>
事件冒泡
什么是事件冒泡
在一个对象上触发某类事件（比如单击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 http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><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(){$('.son').click(function(){alert(1);//阻止事件冒泡的简略写法 只会得到1return false;})// 父级阻止事件冒泡$('.father').click(function(ev){alert(2);// 阻止事件冒泡的完整写法：ev.stopPropagation(); //只会得到2}); $('.grandfather').click(function(){alert(3);})// $(document) 代表最顶级的标签$(document).click(function(){alert(4);});})</script><script src="js/jquery-1.12.4.min.js"></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(){alert('1');$('#pop').show();//按钮阻止click的事件冒泡return false;})$('#shutoff').click(function(){alert('2');$('#pop').hide();});// 点击弹框其他的地方，关闭弹框$(document).click(function(){alert('3');$('#pop').hide();});// 点击弹框，弹框不应该隐藏，所以弹框也需要阻止冒泡$('.pop_con').click(function(){alert('4');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>
事件委托
事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。
一般绑定事件的写法
$(function(){$ali = $('#list li');$ali.click(function() {$(this).css({background:'red'});});
})
...
<ul id="list"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul>
事件委托的写法$(function(){$list = $('#list');$list.delegate('li', 'click', function() {$(this).css({background:'red'});});
})
...
<ul id="list"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul>
示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/jquery-1.12.4.min.js"></script><script>$(function(){var $li = $('.list li');var $ul = $('.list');// $li.click(function(){// $(this).css({'background': 'red'});// })//上面的写法性能不高，可以改成下面事件委托的写法$ul.delegate('li','click',function(){$(this).css({'background': 'red'});})})</script>
</head>
<body><ul class="list"><li>列表文字</li><li>列表文字</li><li>列表文字</li><li>列表文字</li><li>列表文字</li><li>列表文字</li><li>列表文字</li><li>列表文字</li></ul>
</body>
</html>
Dom操作
Dom操作也叫做元素节点操作，它指的是改变html的标签结构，它有两种情况：
1、移动现有标签的位置
2、将新创建的标签插入到现有的标签中
创建新标签
var $div = $('<div>'); //创建一个空的div
var $div2 = $('<div>这是一个div元素</div>');
移动或者插入标签的方法
1、append()和appendTo()：在现存元素的内部，从后面放入元素
var $span = $('<span>这是一个span元素</span>');
$('#div1').append($span);
…
2、prepend()和prependTo()：在现存元素的内部，从前面放入元素3、after()和insertAfter()：在现存元素的外部，从后面放入元素
4、before()和insertBefore()：在现存元素的外部，从前面放入元素
删除标签
$('#div1').remove();
示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/jquery-1.12.4.min.js"></script><script>$(function(){var $div = $('#div01');var $p01 = $('#p01');var $h01 = $('#h01');var $p02 = $('#p02');//当前元素的里面的后面要放另外一个元素 把<p id="p01">div01外面的p标签</p>放到了// <div id="div01"><h3>div01里面的h3标题</h3><p>div01里面的p标签</p></div> 后面$div.append($p01);// 当前元素里面的前面要放另外一个元素<h2 id="h01">div01外面的h2标签</h2>放到$div.prepend($h01);// 当前元素要放到另外一个元素里面的前面$h01.prependTo($div);// 当前元素外面的后面要放另外一个元素// $div.after($p02); // 当前元素要放到另外一个元素的外面的后面$p02.insertAfter($div);// 创建一个新的空的div标签var $newdiv01 = $('<div>');// 创建一个有内容的div标签var $newdiv02 = $('<div>新创建的第二个div</div>');// 当前元素的外面的前面要放另外一个元素$div.before($newdiv01);// 当前元素要放到另外一个元素的外面的前面$newdiv02.insertBefore($div);// 删除标签$newdiv01.remove();$h01.remove();})</script>
</head>
<body><p id="p02">div01上面的p标签</p><p id="p01">div01外面的p标签</p><h2 id="h01">div01外面的h2标签</h2><div id="div01"><h3>div01里面的h3标题</h3><p>div01里面的p标签</p></div>
</body>
</html>
javascript对象
javascript中的对象，可以理解成是一个键值对的集合，键是调用每个值的名称，值可以是基本变量，还可以是函数和对象。
创建javascript对象有两种方法，一种是通过顶级Object类来实例化一个对象，然后在对象上面添加属性和方法：
var person = new Object();// 添加属性：
person.name = 'tom';
person.age = '25';// 添加方法：
person.sayName = function(){alert(this.name);
}// 调用属性和方法：
alert(person.age);
person.sayName();
还可以通过对象直接量的方式创建对象：
var person2 = {name:'Rose',age: 18,sayName:function(){alert('My name is' + this.name);}
}// 调用属性和方法：
alert(person2.age);
person2.sayName();
示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/jquery-1.12.4.min.js"></script><script>//直接量的方式定义对象var person = {name: 'Tom',age:18,showName:function(){alert('我的名字是：'+this.name);},showAge:function(){alert('我的年龄是：'+this.age);}}//使用对象//调用对象的属性alert(person.name);//调用对象的方法person.showName();</script>
</head>
<body></body>
</html>
json
json是 JavaScript Object Notation 的首字母缩写，单词的意思是javascript对象表示法，这里说的json指的是类似于javascript对象的字符串，它同时是一种数据格式，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式。
json数据类似于JavaScript中的对象，但是它的键对应的值里面是没有函数方法的，值可以是普通变量，但不支持undefined，值还可以是数组或者JavaScript对象。
json写法需要注意的是，json中的属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误。
json格式的数据：
{"name":"tom","age":18
}
json的另外一个数据格式是数组，和javascript中的数组字面量相同。
["tom",18,"programmer"]
还可以是更复杂的数据机构：
{"name":"jack","age":29,"hobby":["reading","travel","photography"]"school":{"name":"Merrimack College","location":'North Andover, MA'}
}
json本质上是字符串，如果在js中操作json数据，可以将json字符串转化为JavaScript对象，转化的方式如下：
var sJson = '{"name":"tom","age":18}';
var oPerson = JSON.parse(sJson);// 操作属性
alert(oPerson.name);
alert(oPerson.age);
示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/jquery-1.12.4.min.js"></script><script>// 定义一个json数据var sJson = '{\"name":"tom",\"age":18,\"hobby":["study","shopping","singing"],\"school":{"name":"beida","location":"beijing"}\}';// 将json数据转化成JavaScript对象var oJson = JSON.parse(sJson);alert( oJson.name );alert( oJson.hobby[0] );alert( oJson.school.location );</script>
</head>
<body></body>
</html>
)
