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标签的div
var $div4 = $('div').has('span');
//选择class并不是box2的div
var $div5 = $('div').not('.box2');
// 选择第4个li
var $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');//选中八个li
var $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()); //0
alert($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);
//选择三个div
var $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)); //true
alert(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);
//阻止事件冒泡的简略写法 只会得到1
return 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>
扫一扫
346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
