Superman_H的博客

<button>按钮</button><div></div>div { width: 100px; height: 100px; padding: 10px; background: lightcoral;}基本动画show()：显示元素hide()：隐藏元素toggle()：显示 → 隐藏；隐藏 → 显示隐藏就是设置了 display:none;接收 2 个参数：[time]、[fn]time

事件绑定鼠标事件click()：鼠标点击事件接收 1 个函数参数如果传函数参数，是绑定事件；如果不传函数，是触发事件$('div').click(() => { // 绑定事件 console.log('div click');})$('p').click(() => { $('div').click(); // 触发事件})dblclick()：左键双击mousedown()：鼠标按下mouseup()：鼠标抬起mouseover()：

创建 DOM格式：$(HTML字符串)返回值：JQuery 对象let $div = $('<div>创建的节点</div>');console.log($div); // jQuery.fn.init [div]插入 DOM<div> <p class="old">旧的</p></div>div { width: 100px; height: 100px; padding: 10

操作内容html()：获取 / 设置标签内的数据，效果类比 innerHTML；会解析里面的 html 标签text()：获取 / 设置标签内的数据，效果类比 innerText；不会解析 html 标签val()：获取 / 设置表单项的 value 值不传参是获取；传参是设置获取时，html() 获取的是标签里面的内容；text() 获取的是标签里面的文本$('button.modify').click(() => { $('div').html('<p style

选择器基本选择器通过 id：$('#id')通过 class：$('.class')通过标签名：$('tagName')通过通配符 * 全选：$(*)组合选择器写入多个选择器，会获取每个选择器选中的元素，选择器之间用 , 隔开$('div, p.class, span#id');结果的顺序，就是页面中标签的顺序（从上到下）选择后代，辈分之间用空格分开$('ul.box li.item1');选择子元素，父子之间用 > 分开$('ul.box >

了解 JQuery意义原生 JS 的兼容问题比较严重，需要自己封装函数解决兼容问题我们可以发现，许多兼容问题都与 DOM 编程有关JQuery 是对原生 JS 的封装，简化了 JS 对 DOM 的操作版本JQuery 已更新到 3.x.x 版本，前面还有 2.x.x、1.x.x 版本每个版本又分为：常规版-.js、压缩版-min.js、删减版-slim.js、删减版的压缩版-slim.min.js删减版-slim.js：删去一些不常用的功能一般，开发时使用常规版；上线后使用压