JQuery
1、$ 的使用 _html_prop_attr_class_等等
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 width: 100px; 9 height: 100px; 10 cursor: pointer; 11 } 12 .play{ 13 background-color: green; 14 } 15 .pause{ 16 background-color: grey; 17 } 18 </style> 19 </head> 20 <body> 21 22 <!--<ul> 23 <li>1</li> 24 <li>2</li> 25 <li>3</li> 26 <li>4</li> 27 <li>5</li> 28 </ul> 29 <input type="text"> 30 <label>选中<input type="checkbox" checked> </label>--> 31 32 <div class="pause"></div> 33 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> 34 <script> 35 //$('li').html('li'); 36 //alert($('ul').html()); 37 $('input').keyup(function () { 38 var v = $(this).val(); 39 if(v.slice(-2) !=='px'){ 40 $(this).val(v + 'px'); 41 } 42 }) 43 44 $('input[type=checkbox').change(function () { 45 console.log($(this).attr('checked')); 46 }) 47 48 $('div').click(function () { 49 $(this).toggleClass('pause'); 50 $(this).toggleClass('play'); 51 }) 52 </script> 53 </body> 54 </html>
2、全选框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 th,td{ 8 width: 50px; 9 height: 30px; 10 background-color: #555555; 11 text-align: center; 12 } 13 </style> 14 </head> 15 <body> 16 <table> 17 <thead> 18 <tr> 19 <th><input type="checkbox"></th> 20 <th>姓名</th> 21 <th>年龄</th> 22 <th>爱好</th> 23 </tr> 24 </thead> 25 </tbody> 26 <tr> 27 <th><input type="checkbox"></th> 28 <th>黄忠</th> 29 <th>80</th> 30 <th>拆迁</th> 31 </tr> 32 <tr> 33 <th><input type="checkbox"></th> 34 <th>关羽</th> 35 <th>35</th> 36 <th>骑马</th> 37 </tr> 38 <tr> 39 <th><input type="checkbox"></th> 40 <th>鲁班</th> 41 <th>3</th> 42 <th>放炮</th> 43 </tr> 44 </tbody> 45 </table> 46 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> 47 <script> 48 //全选点击事件 49 $('thead input').change(function () { 50 var isChecked = $(this).prop('checked'); 51 $('tbody input').prop('checked',isChecked); 52 }) 53 54 //取消全选 55 $('tbody input').change(function () { 56 var allCount = $('tbody input').length; 57 var checkCount = $('tbody input:checked').length; 58 var isAllChecked = allCount === checkCount; 59 $('thead input').prop('checked',isAllChecked); 60 61 }) 62 </script> 63 </body> 64 </html>
3、动画
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 width: 200px; 9 height: 200px; 10 background-color: cornflowerblue; 11 } 12 </style> 13 </head> 14 <body> 15 16 <button>显示</button> 17 <button>隐藏</button> 18 <button>停止动画</button> 19 <div></div> 20 21 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> 22 <script> 23 $('button:first').click(function () { 24 //$('div').show(3000);//宽、高、透明度都显示 25 //$('div').fadeIn(3000);//透明度显示 26 //$('div').slideDown();//拉开窗帘显示 27 28 $('div').animate({ //动画函数，传对象属性值 29 width:500 30 },5000).animate({ 31 height:600 32 },5000) 33 }) 34 35 $('button:eq(1)').click(function () { 36 //$('div').hide(2000);//宽、高、透明度都显示 37 //$('div').fadeOut(3000);//透明度显示 38 //$('div').slideUp();//回收窗帘隐藏 39 40 $('div').animate({ //改变对象属性值 41 height:200 42 },5000).animate({ 43 width:200 44 },5000) 45 46 }) 47 48 $('button:last').click(function () { 49 $('div').stop(true);//停止正在队列中运行的动画,如果要停止所有的动画，参数传true即可 50 }) 51 </script> 52 53 </body> 54 </html>
4.遍历节点
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="container"> 9 <ul class="list"> 10 <li class="item"> 11 <p>1</p> 12 </li> 13 <li class="item"> 14 <p>2</p> 15 </li> 16 <li class="item"> 17 <p class="vip">3</p> 18 </li> 19 <li class="item"> 20 <p>4</p> 21 </li> 22 <li class="item"> 23 <p>5</p> 24 </li> 25 </ul> 26 </div> 27 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> 28 <script> 29 var $li2 = $('li:eq(1)'); 30 $li2.children().css('background','red'); 31 $li2.parent().css('color','yellow'); 32 $li2.parents('div#container').append('<h2>新元素</h2>'); 33 34 $('#container').find('p.vip').css({ 35 background:'black', 36 color:'white' 37 }); 38 39 $li2.next().css({fontsize: '25px'}); 40 $li2.prev().css({fontsize: '30px'}); 41 42 $li2.siblings().css('fontweight','bold');//所有兄弟姐妹元素取到 43 </script> 44 </body>
45 </html>
5、ajax请求
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> 9 <script> 10 $.ajax({ 11 type:'get', //请求类型get或post 12 url:'./person.json',//请求的路径 13 data:{name:'黄忠'},//传参数 14 success:function (resp) { 15 alert(resp.hobby); 16 17 }, 18 error:function () { 19 } 20 }) 21 22 //ajax回调地狱的请求方式 23 $.ajax({type:'get', url:'./api1',}).done(function () { 24 return $.ajax({url:'./api2'}) 25 }).done(function () { 26 return $.ajax({url:'./api3'}) 27 }).done(function () { 28 console.log('回调结束'); 29 }) 30 </script> 31 </body> 32 </htm
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> 9 <script> 10 $.ajax({ 11 type:'get',//请求方式 12 url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',//指定URL 13 dataType:'jsonp',//数据类型 14 jsonp:'cb',//回调函数名字 15 data: { //传给jsonp的数据 16 wd: 'json' 17 } 18 }).done(function (resp) { 19 alert(resp.s); 20 }) 21 </script> 22 </body> 23 </html>
6、事件处理
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <ul> 9 <li>1</li> 10 <li>2</li> 11 <li>3</li> 12 <li>4</li> 13 <li>5</li> 14 <li>6</li> 15 </ul> 16 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> 17 <script> 18 // //事件绑定 19 // $('li').on('mouseover',function () { 20 // $(this).css('background','red'); 21 // }).on('mouseout',function () { 22 // $(this).css('background','green'); 23 // }) 24 25 // //解绑事件 26 // //off：（参数1：event type 参数2：callback name） 27 // $('li:eq(3)').off('mouseover'); 28 29 // $('<li>newli</li>').appendTo('ul'); 30 31 $('ul').on('mouseover','li:even',function () { //选取li中的偶数个操作 32 $(this).css('background','red'); 33 }).on('mouseout','li:even',function () { 34 $(this).css('background','green'); 35 }) 36 $('<li>newli</li>').appendTo('ul'); 37 </script> 38 </body> 39 </html>
7、节点操作
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <ul> 9 <li>1</li> 10 <li>2</li> 11 <li>3</li> 12 <li>4</li> 13 <li>5</li> 14 </ul> 15 <button>删除节点</button> 16 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> 17 <script> 18 //元素添加节点后 19 var $el = $('<div><h1>新元素</h1></div>'); 20 //$('body').append($el); 21 $el.appendTo('body'); 22 23 //元素添加节点前 24 var $newFirst = $('<li>0</li>'); 25 //$('ul').prepend($newFirst); 26 $newFirst.prependTo('ul'); 27 28 //元素添加节点之间 29 $('li:eq(3)').after('<li>3.5</li>'); 30 $('<li>4.5</li>').insertAfter('li:eq(5)'); 31 32 //删除节点 33 $('button').click(function () { 34 //$('li:last').remove();//删除整个节点 35 $('li:last').empty();//只删除节点内的内容 36 }) 37 38 </script> 39 </body> 40 </html>
8、随机颜色插件的定义
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 width: 200px; 9 height:200px; 10 } 11 </style> 12 </head> 13 <body> 14 <div></div> 15 <div></div> 16 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> 17 <script> 18 //1.jquery的插件，定义在JQuery.fn的基础上 19 //2.命名冲突的解决 20 //3.循环JQuery对象中的每一个元素 21 //4.在函数中，将JQuery返回（this） 22 23 (function ($) { 24 $.fn.extend({ 25 randomColor:function () { 26 //this指向的就是我们通过$选择器选取到的所有元素组成的数组 27 function random() { 28 var r = Math.floor(Math.random() * 256); 。29 var g = Math.floor(Math.random() * 256); 30 var b = Math.floor(Math.random() * 256); 31 32 return 'rgb('+ r +','+ g +','+ b +')'; 33 } 34 this.each(function (index) { 35 $(this).css({ 36 background:random() 37 }) 38 }) 39 return this; 40 } 41 }) 42 })(jQuery); 43 44 $('div').randomColor(); 45 </script> 46 </body> 47 </html>
9、放大镜插件的定义
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .magnifier .left{ 12 width: 300px; 13 height: 300px; 14 float: left; 15 } 16 17 .magnifier .left img{ 18 width: 300px; 19 height: 300px; 20 } 21 .magnifier .left .mask{ /*遮罩层属性*/ 22 width: 300px; 23 height: 300px; 24 position: absolute; 25 left: 0; 26 top: 0; 27 background-color: back; 28 opacity: 0; 29 } 30 .magnifier .float{ 31 height: 50px; 32 width: 50px; 33 background: hotpink; 34 opacity: 0.5; 35 position: absolute; 36 left: 0; 37 top: 0; 38 display: none; 39 } 40 41 .magnifier .right{ 42 height: 200px; 43 width: 200px; 44 background-image: url('./img/big.jpg'); /*图片背景*/ 45 float: left; 46 margin-left: 50px; 47 display: none; 48 } 49 </style> 50 </head> 51 <body> 52 <div class="magnifier"> 53 <div class="left"> 54 <img src="./img/small.jpg" alt=""> 55 <div class="float"></div> 56 <div class="mask"></div> <!--遮罩层--> 57 </div> 58 <div class="right"></div> 59 60 </div> 61 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> 62 <script> 63 //立即执行函数 64 (function ($) { 65 $.fn.extend({ 66 magnifier:function () { 67 this.each(function () { 68 var that = this; 69 $('.left',this).mousemove(function (evt) { 70 var x = evt.offsetX; 71 var y = evt.offsetY; 72 var float = $('.float',this); 73 74 x = x - float.width()/2; 75 y = y - float.height()/2; 76 77 if(x<0){ 78 x = 0; 79 } 80 if(y<0){ 81 y = 0; 82 } 83 if(x>$(this).width() - float.width()){ 84 x = $(this).width() - float.width() 85 } 86 if(y>$(this).height() - float.height()){ 87 y = $(this).height() - float.height() 88 } 89 float.css({ 90 left:x, 91 top:y 92 }); 93 94 //放大的图片位置与鼠标统一 95 $('.right', that).css({ 96 backgroundPosition: x * -4 + 'px ' + y * -4 + 'px' 97 }) 98 }).mouseover(function () { 99 $('.left .float, .right',that).show();//显示放大镜图片 100 }).mouseout(function () { 101 $('.left .float, .right',that).hide();//隐藏放大镜图片 102 }); 103 104 }) 105 } 106 }) 107 })(jQuery) 108 109 $('.magnifier').magnifier();//调用函数 110 111 </script> 112 </body> 113 </html>
