jquery虽然已经过时了，在我看来，它虽然比不上React/Vue这些框架，但它依旧是一个很棒的JavaScript库，和lodash之类的库一样好一起来回顾一下吧～<html> <head> <script src=“http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> <script src=“https://cdn.bootcss.com/babel-core/6.1.19/browser.js"></script> <style> .msg { display: inline; border: 1px solid #aabbcc; padding: 10px; } </style> </head> <body> <p class=“msg”><span>123</span></p> <input type=“text” id=“input” /> <button id=“click”>button</button> <div class=“father”> <div class=“son”>son</div> </div> <div class=“a”>a <div class=“b”>b <div class=“c”>c</div> <div class=“e”>e</div> <div class=“f”>f</div> </div> </div> </body> <script> $(document).ready(() => { console.log(this); // window $(“p”).click(function() { console.log(this) // p标签 }) var a = $(’.msg’).text() // 所选元素的文本内容 console.log(a) $(’.son’).parent() var b = $(’.msg’).html() console.log(b) // 所选元素的内容 包含内部html标记 $(’#click’).click(() => { var c = $(’#input’).val() // 返回表单字段的值 console.log(c) }) var d = $(’#input’).attr(’type’) // 获取元素属性值 console.log(d) $(’.msg’).text(‘456’); //设置所选元素的文本内容 $(’.msg’).html(’<span>456</span>’) // 设置所选元的内容 包含html标记 $(’#input’).attr(’type’, ‘password’) // 设置所选元素的属性 $(’#input’).attr({ ’type’: ’text’, ‘placeholder’: ‘123’ }) // 可以同时设置多个属性 $(’.msg’).append(‘some text append’) // 被选元素结尾插入内容 $(’.msg’).prepend(‘some text prepended’) // 被选元素开头插入内容 // 添加若干个元素 var str1 = ‘<h3>abc</h3>’ var str2 = ‘<h1>bcd</h1>’ $(’.msg’).append(str1, str2) $(’.msg’).after(’<span>after</span>’) // 区别appen，此方法是在元素后面追加新元素，appen是在元素里追加 $(’.msg’).before(’<span>before</span>’) // 区别prepend 同上 $(’.father’).empty() // 删除被选元素的所有子元素 相当于清空 成为空标签 $(’.father’).remove() // 删除被选元素及其所有子元素 $(’.father’).remove(’.child’) // 带一个过滤功能 $(’.msg’).addClass(‘class1 class2 class3’) // 添加多个类名 空格区分 $(’.msg’).removeClass(‘class2’) // 删除指定类名 $(’.msg’).toggleClass(‘class4’) // 删除或者添加类 切换操作 比如点击button进行切换 var e = $(’.msg’).css(‘border’) // 返回元素的指定css样式 console.log(e); $(’.msg’).css(‘backgound-color’, ‘#ddeeff’) // 设置元素的css样式 $(’.msg’).css({ ‘backgound-color’: ‘#ddeeff’, ‘margin-top’: ‘10px’, }) // 和设置html属性一样，可以设置多个css属性 $(’.msg’).width() // 获取指定元素的宽度 => 标准盒模型中 width值 $(’.msg’).height() // 标准盒模型中 height值 //区别 innerWidth outerWidth … eg $(’#click’).width(50).height(50) // 设置指定元素的宽高 $(document).width() // 浏览器的宽度 $(document).height() // 浏览器的高度 // 获取被选元素的直接父元素 $(’.c’).parent().css(‘border’, ‘1px solid #ddeeff’) var f = $(’.c’).parents(); // 获取被选元素的所有祖先元素一直到html console.log(f) $(’.c’).parents(’.example’) // 同样加一个过滤 $(’.c’).parentsUntil(‘html’) // .c 和 html 之间的元素 $(’.b’).children() // 被选元素的所有直接子元素， 注意直接子元素可以有多个，但直接父元素确只能有一个 $(’.b’).children(’.c’) // 同样加一个过滤 $(’.b’).find(‘span’) // 返回被选元素的所有后代元素是span的元素 $(’.b’).find(’’) // 同样加一个css修饰器 即为返回所有的后代元素 $(’.c’).siblings(); // 返回被选元素的所有同胞元素 同样可以过滤下 $(’.c’).next() // 返回被选元素的下一个同胞元素 $(’.c’).nextAll() // 返回被选元素后跟随的同胞元素 // 类似 还有 prev() prevAll() prevUntil() $(‘p’).filter(’.a’) // 返回类名为a的p元素 $(‘p’).not(’.a’) // 返回类名不为a的p元素 // Jquery 加载 //$(’.f’).load(’./text.txt’) // Ajax / $.get(‘http://apis.juhe.cn/mobile/get?phone=17854234676&key=87b3fd95fb8a004442ca5195304a6954',(data, status) => { console.log(data, status); }) $.post(‘url’, {data}, (data, status) => { }) */ // Ajax 请求 $.ajax({ type: ‘get’, data: {}, // post请求参数 url: ‘http://apis.juhe.cn/mobile/get?phone=17854234676&key=87b3fd95fb8a004442ca5195304a6954', dataType: ‘jsonp’, success: (data) => { console.log(data); }, error: (err) => {} }) // 事件 $(’#input’).keyup(function() { console.log(123); }) }) </script></html>