jQuery的一些基本的函数和用jQuery做一些动画操作
jQuery是对js的封装，因为js有一些不方便的地方。所以，jQuery才会去对js进行封装。
jQuery对于标签元素的获取
$('div')或$('li')
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隔行换色</title> </head> <body> <ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> </ul> </body> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function () { var $lis = $('li'); for(var i = 0; i < $lis.length; i++){ if(i % 2 == 0){ $lis.eq(i).css('color', 'red'); }else{ $lis.eq(i).css('color', 'green'); } } }) </script> </html>
对于这段代码，我们获取的li标签是一个数组，通过取的是奇数还是偶数，用.css函数来显示字体的颜色。
筛选器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>筛选器示例</title> </head> <body> <ul> <li id="l0">1</li> <li>2</li> <li>3</li> <li id="l3">4</li> <li>5</li> </ul> <div>div-1</div> <div>div-2</div> <div id="fir">div-3 <a href="#">a标签</a> <div>div-son</div> </div> </body> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <script type="text/javascript"> // 查找id="l3" console.log($('#l3')); // 查找id="l3"的前一个 console.log($('#l3').prev()); // 查找id="l3"的后一个 console.log($('#l3').next()); // 查找id="l3"的前面的所有标签 取得时候是倒着取 console.log($('#l3').prevAll()); // 查找后面所有的 console.log($('#l3').nextAll()); // 从某个元素开始找，直到某个元素终止 取到的是之间的元素 console.log($('#l0').nextUntil('#l3')); // 查找a标签 console.log($('a')); // 查找a标签的父标签 console.log($('a').parent()); // 查找儿子和兄弟标签 console.log($('#fir').children()); console.log($('#fir').siblings()); </script> </html>
通过筛选器，我们就可以选到的我们想要操作的标签。
jQuery的一些动画操作
通过jQuery，一些简单的像逐渐显示，逐渐隐藏等动画，可以通过函数来实现。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery动画</title> <style type="text/css"> .box{ width: 200px; height: 200px; background-color: green; display: none; } </style> </head> <body> <button id="show">显示</button> <button id="hide">隐藏</button> <button id="change">切换</button> <div class="box"></div> </body> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function () { $('#show').click(function () { // $('.box').css('display', 'block'); $('.box').show('1000'); }); }); $(function () { $('#hide').click(function () { $('.box').hide(1000); }); }); var isShow = true; $('#change').click(function () { if(isShow){ $('.box').hide(1000); isShow = false; }else{ $('.box').show(1000); isShow = true; } }); $('.box').toggle(1000); </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滑入滑出</title> <style type="text/css"> .box{ width: 200px; height: 200px; background-color: green; display: none; } </style> </head> <body> <button id="appear">滑入</button> <button id="dis">滑出</button> <button id="change">切换</button> <div class="box"></div> </body> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function () { $('#appear').click(function () { $('.box').slideDown(2000); }); $('#dis').click(function () { $('.box').slideUp(2000); }); $('#change').mouseup(function () { $('.box').slideToggle(2000); }); }); </script> </html>
.click事件，是当点击事件发生时，才会起作用的事件，出来click事件，还有鼠标移入移出的事件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>淡入淡出</title> </head> <style type="text/css"> .box{ width: 200px; height: 200px; background-color: red; display: none; } </style> <body> <button id="appear">淡入</button> <button id="dis">淡出</button> <button id="change">切换</button> <button id="point">指定</button> <div class="box"></div> </body> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function () { $('#appear').click(function () { $('.box').fadeIn('slow', function () { }); }); $('#dis').click(function () { $('.box').fadeOut('slow', function () { }); }); $('#change').click(function () { $('.box').fadeToggle('slow', function () { }) }); $('button').eq(3).click(function () { $('.box').fadeTo(2000, 5); }); }); </script> </html>
jQuery标签属性操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签属性操作</title> <style type="text/css"> .app{ width: 200px; height: 200px; background-color: red; } </style> </head> <body> <button>隐藏</button> <div id="box" class="app"> </div> </body> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function () { // 里面attr的参数是'id'，不是'#box'; // 返回值是jQuery的box类 // 获取属性 var idValue = $('div').attr('id'); console.log(idValue); // 设置值 // $('div').attr('class','apps'); // 移除属性 $('button').click(function () { $('div').removeAttr('class'); }); }) </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>prop用法</title> </head> <body> <div> <p class="item">1</p> <p class="item2">2</p> <p class="item3">3</p> <p>4</p> 男<input type="radio" id="text1" name="sex" checked="add"/> 女<input type="radio" id="text2" name="sex" /> <button>提交</button> </div> </body> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function () { // console.log($('p').prop('.item2')); $('p:eq(3)').prop('class', 'item4'); $('input:eq(0)').attr('checked'); // prop 返回值为true console.log($('input:eq(0)').prop('checked')); $('button').click(function () { alert($('input:eq(0)').prop("checked")?"男":"女"); }); }) </script> </html>
prop返回的值为Boolean值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选项卡</title> <style type="text/css"> ul li.active{ color: yellow; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </body> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function () { $('ul li').click(function () { // 修改css来修改表单的颜色 // $(this).css('color', 'green').siblings('li').css('color', 'black'); // 修改类名来修改表单颜色 $(this).addClass('active').siblings('li').removeClass('active'); }); }) </script> </html>
jQuery类属性操作
addClass函数
示例：用了两种方法，一是用之前学的.css函数来做，
二是先定义addClass函数，之后通过addClass 函数来调用函数
val函数
表单操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>form表单value值</title> </head> <body> <form action=""> <input type="radio" name="sex" value="112" />男 <!-- 设置checked属性表示选中当前选项--> <input type="radio" name="sex" value="11" checked="">女 <input type="radio" name="sex" value="11">其他 <input type="checkbox" value="a" checked="">吃饭 <input type="checkbox" value="b">睡觉 <input type="checkbox" value="c" checked="">打豆豆 <!--下拉表单 option表单 option标签内设置selected属性 表示选中当前--> <select name="timespan" id="timespan" class="Wdate"> <option value="1">8:00-8:30</option> <option value="2" selected="">8:30-9:00</option> <option value="3">9:00-9:30</option> </select> <input type="text" name="" id="" value="111" /> </form> </body> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function () { // 选择type是radio的默认被打钩的value值 console.log($('input[type="radio"]:checked').val()); // 复选框被选中的value，获取的是第一个被选中的值 console.log($('input[type="checkbox"]:checked').val()); // 下拉列表被选中的值 var $obj = $('#timespan option:selected'); // 获取被选中的值 var $time = $obj.val(); console.log($time); // 获取文本 var $time_text = $obj.text(); console.log(`val:${$time},text:${$time_text}`) // 设置值 value值一定要是一个数组，用[]来括起来 $("input[type='radio']").val(['112']); $("input[type='checkbox']").val(['a', 'b']); }); </script> </html>
我们知道如果想获取class，需要用.class_name，获取id，用#id_name。
而对于input获取可以通过input[type="type_name"]来获取
而获去value值，更多的是为了提交表单做准备。
文档操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文档操作</title> </head> <body> <!--<ul></ul>--> <ol> <li class="li1">first</li> <li></li> <li></li> <li></li> </ol> <ul> <li>first</li> <li>second</li> <li>third</li> <li>forth</li> </ul> <button>点击</button> </body> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function () { // 添加字符串 $('ul').append('<li class="item1">哈哈</li>'); var oLi = document.createElement('li'); oLi.innerHTML = 'hh'; // 添加js对象 $('ul').append(oLi); // 添加jQuery对象 之前的元素会被移除 $('ul').append($('.li1')); // $('ul li').click(function () { // $('ul').append($(this)); // }); // 添加到第一个 $('ul').prepend('<li>到第一个</li>'); // clone(ture)会复制$(this)的属性，而默认的false不会复制属性 $('button').click(function () { $(this).clone().insertAfter(this); }); // 删除操作 // $('button').remove(); // detach同样是删除操作，但可以保留之前设置的属性 var $btn = $('button').detach(); $('ul').append($btn); }); </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>修改操作</title> </head> <body> <h5>h5标签</h5> </body> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <script type="text/javascript"> // 修改操作 $(function () { $('h5').replaceWith('<a href="#">hello world</a>'); } </script> </html>
这里需要记住几个函数
append函数：在队尾添加操作
prepend函数：添加在第一个
replaceWith函数：修改标签
remove函数：删除操作
detach函数：删除操作，但可以保留之前设置的属性
jQuery的位置信息
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的位置信息</title> <style> *{ padding: 0; margin: 0; } .box{ width: 200px; height: 200px; background-color: red; /*这里看到是行内距离在哪些函数会计算进去*/ padding: 50px; border: 1px solid green; margin-left: 50px; margin-top: 100px; position: absolute; } .father{ width: 400px; height: 400px; background-color: yellow; position: relative; } .box2{ width: 100px; height: 100px; background-color: pink; bottom: 0; right: 30px; position: absolute; } </style> </head> <body> <button>变大</button> <div class="father"> <div class="box"> </div> <div class="box2"> 返回顶部 </div> </div> </body> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function () { // 如果width不写，表示获取.box的width的值 这里的值是数值 console.log($('.box').width()); // 这里获取的值为字符串 console.log($('.box').css('width')); // 使div变大 $('button').eq(0).click(function () { // 通过next获取下一个同辈元素 $(this).next().width(300); }); // 获取内部宽的函数 会获取padding值 console.log($('.box').innerWidth()); // 获取外部宽 会把边框和margin值都计算 console.log($('.box').outerWidth()); // 偏移坐标 console.log($('.box').offset().top); console.log($('.box').offset().left); // animate是用来设置动画的 // $('.box').css({ // width: 200, // height: 200 // }).offset({top: 100, left: 100}).animate({ // width: 0, // height: 0 // }, 1000); // position函数 console.log($('.box').offset()); console.log($('.box').position()); // 返回的是数值类型 $(document).scroll(function () { console.log($(document).scrollTop()); }) // $('.box2').click(function () { $('html').animate({ 'scrollTop': 0 }, 1000); }); }); </script> </html>
通过获取位置信息，可以做一些滚动操作。
