Day048--jQuery自定义动画和DOM操作练习
1. 自定义动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ position: absolute; left: 20px; top: 30px; width: 100px; height: 100px; background-color: green; } </style> <script src="libs/jquery-3.3.1.js"></script> <script src="libs/jquery-color.js"></script> <script> $(function () { $('button').click(function () { let json = {'width':500, 'height':500, 'left':300, 'top':300, 'border-radius':100}; let json2 = { width:100, height:100, left:100, top:100, borderRadius:100, backgroundColor:'red' }; //自定义动画 $('div').stop().animate(json, 1000, function () { $('div').stop().animate(json2, 1000, function () { alert('动画执行完毕'); }) }) }) }) </script> </head> <body> <button>自定义动画</button> <div></div> </body> </html>
2. 下拉菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } ul{ list-style: none; } .wrap{ width: 330px; height: 30px; margin: 100px auto 0; padding-left: 10px; background-color: pink; } .wrap li{ background-color: green; } .wrap > ul > li{ float: left; margin-right: 10px; position: relative; } .wrap a{ display: block; height: 30px; width: 100px; text-decoration: none; color: #000; line-height: 30px; text-align: center; } .wrap li ul{ position: absolute; top: 30px; display: none; } </style> <script src="libs/jquery-3.3.1.js"></script> <script> //入口函数 $(document).ready(function () { //需求: 鼠标已放入一级li中, 让它里面的ul显示. 移开隐藏. var jqli = $('.wrap>ul>li'); //绑定事件 jqli.mouseenter(function () { $(this).children('ul').stop().slideDown(1000); }); //绑定事件(移开隐藏) jqli.mouseleave(function () { $(this).children('ul').stop().slideUp(1000); }) }) </script> </head> <body> <div class="wrap"> <ul> <li> <a href="javascript:void(0)">一级菜单1</a> <ul> <li><a href="javascript:void(0)">一级菜单2</a></li> <li><a href="javascript:void(0)">一级菜单3</a></li> <li><a href="javascript:void(0)">一级菜单4</a></li> </ul> </li> <li> <a href="javascript:void(0)">二级菜单1</a> <ul> <li><a href="javascript:void(0)">二级菜单2</a></li> <li><a href="javascript:void(0)">二级菜单3</a></li> <li><a href="javascript:void(0)">二级菜单4</a></li> </ul> </li> <li> <a href="javascript:void(0)">三级菜单1</a> <ul> <li><a href="javascript:void(0)">三级菜单2</a></li> <li><a href="javascript:void(0)">三级菜单3</a></li> <li><a href="javascript:void(0)">三级菜单4</a></li> </ul> </li> </ul> </div> </body> </html>
3. 标签属性操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .active{ border: 3px solid red; } </style> </head> <body> <img src="花.jpg" alt="" class="box"> <script src="libs/jquery-3.3.1.js"></script> <script> $(function () { //attr 标签属性 //获取值 console.log($('img').attr('src')); //./花.jpg 标签属性获取相对路径 //设置值 $('img').attr('alt','花'); //设置多个标签属性值 $('img').attr({ 'aaa':'你好啊', 'bbb':'哈哈' }); $('img').click(()=> { $('img').attr('class', 'box active'); setTimeout(function () { ///console.log(this); // this是window, 因为用了()=> $('img').removeAttr('class'); },2000) }) }) </script> </body> </html>
4. 对象属性操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .active{ border: 3px solid red; } </style> </head> <body> <img src="花.jpg" alt=""> <script src="libs/jquery-3.3.1.js"></script> <script> $(function () { // prop 对象属性 // 获取值 console.log($('img').prop('src')); $('img').prop('aaa','花花'); $('img').prop({ 'bbb':'元气满满', 'aa':'嘿嘿哈' }); console.log($('img')); // 如果没设置定时器,测试语句返回的是最后的对象,即下面删除操作执行完的对象 setTimeout(()=>{ //移除 removeProp() 删除一个属性 ### 不能一次性删除多个 $('img').removeProp('aa'); $('img').removeProp('bbb'); },2000) }) </script> </body> </html>
5. 类的操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 200px; height: 200px; background-color: red; display: none; } div.active{ display: block; } </style> </head> <body> <button>显示</button> <div class="box aa bb cc"></div> <script src="libs/jquery-3.3.1.js"></script> <script> $(function () { var isHidden = true; $('button').click(()=>{ /*if (isHidden){ $('div').addClass('active aaa hhh'); //一次可以添加多个类名 isHidden = false; $('button').text('隐藏'); }else{ $('div').removeClass('active aaa hhh'); //一次可以删除多个类名 isHidden = true; $('button').text('显示') }*/ $('div').toggleClass('active aa bb cc'); //增加或删除多个类名. 如果类名中没有active,有aa,bb,cc,那么一次操作将增加active并删除aa,bb,cc }) }) </script> </body> </html>
6. 值的操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 200px; height: 200px; background-color: red; display: none; } div.active{ display: block; } .ac{ font-size: 24px; } .box > ul{ margin: 0; } </style> </head> <body> <button id="show">显示</button> <button id="del">移除标签</button> <div class="box"></div> <input type="text" value="'嘿嘿嘿"> <script src="libs/jquery-3.3.1.js"></script> <script> $(function () { var isHidden = true; $('#show').click(function () { if (isHidden){ $('.box').addClass('active'); isHidden = false; //获取文本的值 console.log($(this).text()); //设置文本的值 $(this).text('隐藏'); var name = 'alex666'; $('.box').html(` <ul> <li id="" class="ac"><a href="">哈哈哈</a></li> <li>${name}</li> <li>你好啊</li> <li>alex酱</li> </ul> `) } else { $('.box').removeClass('active'); isHidden = true; $(this).text('显示'); } }); $('#del').mouseenter(function () { $('.box').html(''); }); //获取值 console.log($('input[type=text]').val()); //设置值 $('input[type=text]').val('alex'); console.log($('input[type=text]').val()); }) </script> </body> </html>
7. 操作input的值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action=""> <input type="radio" name="gender" value="male"/>男 <!-- 设置cheked属性表示选中当前选项 --> <input type="radio" name="gender" value="female" checked=""/>女 <input type="radio" name="gender" value="unknown"/>gay <input type="checkbox" value="eat" checked=""/>吃饭 <input type="checkbox" value="sleep"/>睡觉 <input type="checkbox" value="play" checked=""/>打豆豆 <!-- 下拉列表 option标签内设置selected属性 表示选中当前 总结: 如果option中没有value 设置当前的值 通过标签的文本设置 如果有值通过value设置 --> <select name="timespan" id="timespan" class="Wdate" multiple="multiple"> <option value="1" selected>7:30-8:00</option> <option value="2" selected="">8:00-8:30</option> <option value="3">8:30-9:00</option> </select> <select name="" id="fruit" multiple> <option>香蕉</option> <option>苹果</option> <option>柿子</option> <option>草莓</option> </select> </select> <input type="text" name="" id="" value="你吃了吗?"/> </form> <script src="libs/jquery-3.3.1.js"></script> <script> $(function () { // 一、获取值 //1.获取单选框被选中的value值 console.log($('input[type=radio]:checked').val()); // //2.复选框被选中的value,获取的是第一个被选中的值,如果用了选择器eq(),可以根据索引选择. 如果选择器中索引超范围,显示undefined. console.log($('input[type=checkbox]:checked').val()); console.log($('input[type=checkbox]:checked').eq(1).val()); //3.下拉列表被选中的值, 有多个则默认返回第一个,或者用multiple全部显示 var obj = $('#timespan option:selected'); // 获取被选中的值 var time = obj.val(); console.log(time); //获取文本, 多选的返回全部 var time_text = obj.text(); console.log('val:'+time+'text'+time_text); //val:7:30-8:00text7:30-8:008:00-8:30 //4. 获取文本框的value值 console.log($('input[type=text]').val()); //获取文本框的值 // 二.设置值 //1.设置单选按钮和多选按钮被选中项 $('input[type=radio]').val(['male']); $('input[type=checkbox]').val(['eat', 'sleep']); //2.设置下拉列表框的选中值，必须使用select /*因为option只能设置单个值，当给select标签设置multiple, 那么我们设置多个值,就没有办法了，但是使用select设置单个值和多个值都可以 */ $('select').val([2,3]); $('select').val(['柿子','草莓','桃子']); //没有就不会选中 //3.设置文本框的value值 $('input[type=text]').val('试试看'); }) </script> </body> </html>
8. JS封装模块
$(function () { headerWeather(); changeFu(); //导航栏 天气事件处理 function headerWeather() { } //换肤事件 function changeFu(){ } })
