前端之jquery1
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>
可以简写为:
<script type="text/javascript"> $(function(){ ...... }); </script>
jquery加载示例
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> window.onload = function () { var odiv = document.getelementbyid('div1'); alert('原生弹出的' + odiv); }; /* // ready 比window.onload 要快: //原因是,window.onload是等标签加载完后,再渲染完之后才运行, // ready是等标签加载完后就运行 // ready的完整写法: $(document).ready(function(){ var $div = $('#div1'); alert('jquery弹出的'+$div); }) */ // ready的简写: $(function () { var $div = $('#div1'); alert('jquery弹出的' + $div); }) </script> </head> <body> <div id="div1">这是一个div元素</div> </body> </html>
jquery选择器
jquery用法思想一
选择某个网页元素,然后对它进行某种操作
jquery选择器
jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择成功。
$(document) //选择整个文档对象 $('li') //选择所有的li元素 $('#myid') //选择id为myid的网页元素 $('.myclass') // 选择class为myclass的元素 $('input[name=first]') // 选择name属性等于first的input元素 $('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
对选择集进行修饰过滤(类似css伪类)
$('#ul1 li:first') //选择id为ul1元素下的第一个li $('#ul1 li:odd') //选择id为ul1元素下的li的奇数行 $('#ul1 li:eq(2)') //选择id为ul1元素下的第3个li $('#ul1 li:gt(2)') // 选择id为ul1元素下的前三个之后的li $('#myform :input') // 选择表单中的input元素 $('div:visible') //选择可见的div元素
对选择集进行函数过滤
$('div').has('p'); // 选择包含p元素的div元素 $('div').not('.myclass'); //选择class不等于myclass的div元素 $('div').filter('.myclass'); //选择class等于myclass的div元素 $('div').first(); //选择第1个div元素 $('div').eq(5); //选择第6个div元素
选择集转移
$('div').prev('p'); //选择div元素前面的第一个p元素 $('div').next('p'); //选择div元素后面的第一个p元素 $('div').closest('form'); //选择离div最近的那个form父元素 $('div').parent(); //选择div的父元素 $('div').children(); //选择div的所有子元素 $('div').siblings(); //选择div的同级元素 $('div').find('.myclass'); //选择div内的class等于myclass的元素
jquery选择器示例1
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function () { var $div = $('#div1'); $div.css({'color': 'red'}); var $div2 = $('.box'); $div2.css({'color': 'green'}); var $li = $('.list li'); // 带“-”的样式属性,可以写成驼峰式,也可以写成原始 $li.css({'background-color': 'pink', 'color': 'red'}); }); </script> </head> <body> <div id="div1">这是一个div元素</div> <div class="box">这是第二个div元素</div> <div class="box">这是第三个div元素</div> <!-- ul.list>li{$}*8 --> <ul class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </body> </html>
选择器过滤和转移示例
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function () { /* var $div = $('div'); $div.css({'backgroundcolor':'gold'}); */ $('div').css({'backgroundcolor': 'gold'}); $('div').has('p').css({'fontsize': '30px'}); $('div').eq(4).css({'textindent': '20px'}); $('div').eq(4).prev().css({'color': 'red'}); $('div').find('.tip').css({'fontsize': '30px'}); }) </script> </head> <body> <div>1</div> <div><p>2</p></div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div><span>8</span><span class="tip">9</span></div> </body> </html>
判断是否选中元素示例
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function () { $div = $('#div1'); alert($div.length); // 没有选中元素,也不会报错,程序正常运行 $div2 = $('#div2'); alert($div2.length); // if($div2.length>0) 通过length属性来判断是否选中了元素 }) </script> </head> <body> <div id="div1">div元素</div> </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的样式 $("#div1").removeclass("divclass divclass2") //移除多个样式 $("#div1").toggleclass("anotherclass") //重复切换anotherclass样式,有就删除,没有就添加
css方法示例
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function () { var $div = $('#box'); // 读取属性值 var str = $div.css('fontsize'); alert(str); // 写属性值 $div.css({'color': 'red', 'backgroundcolor': 'pink', 'fontsize': '20px'}); /* 原生js无法读取行间没有定义的css属性值 var odiv = document.getelementbyid('box'); alert(odiv.style.fontsize); */ }) </script> </head> <body> <div id="box">div元素</div> </body> </html>
样式名操作示例
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function () { var $div = $('.box'); // 在原来样式名的基础上加上“big”的样式名 $div.addclass('big'); // 在原来样式名的基础上去掉“red”的样式名 $div.removeclass('red'); }) </script> <style type="text/css"> .box { width: 100px; height: 100px; background-color: gold; } .big { font-size: 30px; } .red { color: red; } </style> </head> <body> <div class="box red">div元素</div> </body> </html>
绑定click事件
给元素绑定click事件,可以用如下方法:
$('#btn1').click(function(){ // 内部的this指的是原生对象 // 使用jquery对象用 $(this) })
绑定click事件-toggleclass使用示例
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function () { // 绑定click事件 $('#btn').click(function () { // if ($('.box').hasclass('col01')) { // $('.box').removeclass('col01'); // } else { // $('.box').addclass('col01'); // } // // // 简化成下面的写法: $('.box').toggleclass('col01'); }) }) </script> </head> <style type="text/css"> .box { width: 200px; height: 200px; background-color: gold; } .col01 { background-color: green; } </style> <body> <input type="button" name="" value="切换样式" id="btn"> <div class="box">div元素</div> </body> </html>
索引值-选项卡
获取元素的索引值
有时候需要获得匹配元素相对于其同胞元素的索引位置,此事时可以用index()方法进行获取;
获取元素索引值示例
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function () { var $li = $('.list li'); //alert($li.length); 弹出 8 //alert($li.eq(3).index()); 弹出3 alert($li.filter('.myli').index()); }) </script> </head> <body> <ul class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li class="myli">5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </body> </html>
选项卡示例
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <style type="text/css"> .btns input { width: 100px; height: 40px; background-color: #ddd; border: 0; } .btns .current { background-color: gold; } .cons div { width: 500px; height: 300px; background-color: gold; display: none; text-align: center; line-height: 300px; font-size: 30px; } .cons .active { display: block; } </style> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function () { var $btn = $('.btns input'); var $div = $('.cons div'); $btn.click(function () { // this 指的是原生的this,它表示当前点击的对象,使用jquery的对象需要用$(this) // 当前点击的按钮加上current样式后,除了当前,其他的按钮去掉current样式 $(this).addclass('current').siblings().removeclass('current'); //alert( $(this).index() ; //弹出当前按钮的索引值 // 当前点击的按钮对应索引值的div加上active样式,其他的去掉active样式 $div.eq($(this).index()).addclass('active').siblings().removeclass('active'); }) }) </script> </head> <body> <div class="btns"> <input type="button" name="" value="01" class="current"> <input type="button" name="" value="02"> <input type="button" name="" value="03"> </div> <div class="cons"> <div class="active">选项卡一的内容</div> <div>选项卡二的内容</div> <div>选项卡三的内容</div> </div> </body> </html>
jquery特殊效果
fadein() 淡入 $btn.click(function(){ $('#div1').fadein(1000,'swing',function(){ alert('done!'); }); }); fadeout() 淡出 fadetoggle() 切换淡入淡出 hide() 隐藏元素 show() 显示元素 toggle() 依次展示或隐藏某个元素 slidedown() 向下展开 slideup() 向上卷起 slidetoggle() 依次展开或卷起某个元素
jquery特殊效果示例
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <style type="text/css"> .box { width: 300px; height: 300px; background-color: gold; display: none; } </style> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function () { $('#btn').click(function () { /*$('.box').fadein(1000,function(){ alert('动画完了!'); }); */ /*$('.box').fadetoggle(1000,function(){ alert('动画完了!'); }); */ // $('.box').show(); //$('.box').toggle(); //$('.box').slidedown(); $('.box').slidetoggle(1000, function () { alert('动画完了') }); }) }) </script> </head> <body> <input type="button" name="" 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 type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function () { $('.level1').click(function () { //当前点击的元素紧挨的同辈元素向下展开,再跳到此元素的父级(li),再跳到此父级的其他的同辈元素(li), // 选择其他同辈元素(li)的子元素ul,然后将它向上收起。 // 通过stop() 可以修正反复点击导致的持续动画的问题 $(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="#">苹果</a></li> <li><a href="#">梨子</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> <li> <a href="#" class="level1">肉类</a> <ul> <li><a href="#">内蒙古羊肉</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> <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动画
通过animate方法可以设置元素某属性值上的动画,可以设置一个或多个属性值,动画执行完成后会执行一个函数。
$('#div1').animate({ width:300, height:300 },1000,swing,function(){ alert('done!'); });
参数可以写成数字表达式:
$('#div1').animate({ width:'+=100', height:300 },1000,swing,function(){ alert('done!'); });
animate动画实例
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function () { $('#btn').click(function () { $('.box').animate({'width': 600}, 1000, function () { $('.box').animate({'height': 400}, 1000, function () { $('.box').animate({'opacity': 0}); }); }); }); $('#btn2').click(function () { $('.box2').stop().animate({'width': '+=100'}); }) }) </script> <style type="text/css"> .box, .box2 { width: 100px; height: 100px; background-color: gold; } </style> </head> <body> <input type="button" name="" value="动画" id="btn"> <div class="box"></div> <br/> <br/> <input type="button" name="" value="动画" id="btn2"> <div class="box2"></div> </body> </html>
滑动选项卡
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <style type="text/css"> .btns input { width: 100px; height: 40px; background-color: #ddd; border: 0; outline: none; } .btns .current { background-color: gold; } .cons { width: 500px; height: 300px; overflow: hidden; position: relative; } .slides { width: 1500px; height: 300px; position: absolute; left: 0; top: 0; } .cons .slides div { width: 500px; height: 300px; background-color: gold; text-align: center; line-height: 300px; font-size: 30px; float: left; } .cons .active { display: block; } </style> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function () { var $btn = $('.btns input'); var $slides = $('.cons .slides'); $btn.click(function () { // this 指的是原生的this,它表示当前点击的对象,使用jquery的对象需要用$(this) // 当前点击的按钮加上current样式后,除了当前,其他的按钮去掉current样式 $(this).addclass('current').siblings().removeclass('current'); $slides.stop().animate({'left': -500 * $(this).index()}); }) }) </script> </head> <body> <div class="btns"> <input type="button" name="" value="01" class="current"> <input type="button" name="" value="02"> <input type="button" name="" value="03"> </div> <div class="cons"> <div class="slides"> <div>选项卡一的内容</div> <div>选项卡二的内容</div> <div>选项卡三的内容</div> </div> </div> </body> </html>
元素的尺寸、位置和页面滚动事件
1、获取和设置元素的尺寸
width()、height() 获取元素width和height innerwidth()、innerheight() 包括padding的width和height outerwidth()、outerheight() 包括padding和border的width和height outerwidth(true)、outerheight(true) 包括padding和border以及margin的width和height
2、获取元素相对页面的绝对位置
offse()
3、获取可视区高度
$(window).height();
4、获取页面高度
$(document).height();
5、获取页面滚动距离
$(document).scrolltop(); $(document).scrollleft();
6、页面滚动事件
$(window).scroll(function(){ ...... })
获取元素尺寸示例
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function () { var $div = $('.box'); // 盒子内容的尺寸 console.log($div.width()); console.log($div.height()); // 盒子内容加上padding的尺寸 console.log($div.innerwidth()); console.log($div.innerheight()); //盒子的真实尺寸,内容尺寸+padding+border console.log($div.outerwidth()); console.log($div.outerheight()); // 盒子的真实尺寸再加上margin console.log($div.outerwidth(true)); console.log($div.outerheight(true)); }) </script> <style type="text/css"> .box { width: 300px; height: 200px; padding: 20px; border: 10px solid #000; margin: 20px; background-color: gold; } </style> </head> <body> <div class="box"></div> </body> </html>
获取元素绝对位置示例
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function () { var $div = $('.box'); $div.click(function () { var opos = $div.offset(); document.title = opos.left + "|" + opos.top; }) //console.log(opos); }) </script> </head> <style type="text/css"> .box { width: 200px; height: 200px; background-color: gold; margin: 50px auto 0; } </style> <body> <div class="box"> </div> </body> </html>
加入购物车动画示例
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <style type="text/css"> .chart { width: 150px; height: 50px; border: 2px solid #000; text-align: center; line-height: 50px; float: right; margin-right: 100px; margin-top: 50px; } .chart em { font-style: normal; color: red; font-weight: bold; } .add { width: 100px; height: 50px; background-color: green; border: 0; color: #fff; float: left; margin-top: 300px; margin-left: 300px; } .point { width: 16px; height: 16px; background-color: red; position: fixed; left: 0; top: 0; display: none; z-index: 9999; border-radius: 50%; } </style> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function () { var $chart = $('.chart'); var $count = $('.chart em'); var $btn = $('.add'); var $point = $('.point'); var $w01 = $btn.outerwidth(); var $h01 = $btn.outerheight(); var $w02 = $chart.outerwidth(); var $h02 = $chart.outerheight(); $btn.click(function () { var opos01 = $btn.offset(); var opos02 = $chart.offset(); $point.css({'left': opos01.left + parseint($w01 / 2) - 8, 'top': opos01.top + parseint($h01 / 2) - 8}); $point.show(); $point.stop().animate({ 'left': opos02.left + parseint($w02 / 2) - 8, 'top': opos02.top + parseint($h02 / 2) - 8 }, 800, function () { $point.hide(); var inum = $count.html(); $count.html(parseint(inum) + 1); }); }) }); </script> </head> <body> <div class="chart">购物车<em>0</em></div> <input type="button" name="" value="加入购物车" class="add"> <div class="point"></div> </body> </html>
scrollleft-top-悬浮菜单的使用
可视区尺寸-文档尺寸示例
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ console.log('可视区的宽度:'+$(window).width() ); console.log('可视区的高度:'+$(window).height() ); console.log('文档的宽度'+$(document).width() ); console.log('文档的高度:'+$(document).height() ); }) </script> </head> <body> <p>文档内容</p> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <p>文档内容</p> ... <p>文档内容</p> </body> </html>
置顶菜单示例
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <style type="text/css"> body { margin: 0; } .banner { width: 960px; height: 200px; background-color: cyan; margin: 0 auto; } .menu { width: 960px; height: 80px; background-color: gold; margin: 0 auto; text-align: center; line-height: 80px; } .menu_back { width: 960px; height: 80px; margin: 0 auto; display: none; } p { text-align: center; color: red; } .totop { width: 60px; height: 60px; background-color: #000; color: #fff; position: fixed; right: 20px; bottom: 50px; line-height: 60px; text-align: center; font-size: 40px; border-radius: 50%; cursor: pointer; display: none; } </style> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function () { $menu = $('.menu'); $menu_back = $('.menu_back'); $totop = $('.totop'); $(window).scroll(function () { //console.log('abc'); var inum = $(document).scrolltop(); //document.title = inum; if (inum > 200) { $menu.css({ 'position': 'fixed', 'left': '50%', 'top': 0, 'marginleft': -480 }); $menu_back.show(); } else { $menu.css({ 'position': 'static', 'marginleft': 'auto' }); $menu_back.hide(); } if (inum > 400) { $totop.fadein(); } else { $totop.fadeout(); } }); $totop.click(function () { $('html,body').animate({'scrolltop': 0}); }) }) </script> </head> <body> <div class="banner"></div> <div class="menu">菜单</div> <div class="menu_back"></div> <div class="totop">↑</div> <p>文档内容</p> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <p>文档内容</p> ... <p>文档内容</p> </body> </html>
上一篇: PS精准定位形状的技巧
下一篇: pushlet 之 官方示例解读与改造