[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fmn0Q83WU_PhLpz9W0mVXWSAt0waM3wKxDvfJBoXPhEM":3},{"code":4,"message":5,"data":6},200,"成功",{"id":7,"createdAt":8,"title":9,"content":10,"summary":11,"image":12,"uid":13,"user":14,"categoryId":21,"category":22,"subCategoryId":24,"subCategory":25,"comments":27,"status":17,"reason":28,"notice":28,"visitCount":29,"commentCount":30,"keywords":31},108,"2024-04-23T06:17:33.801Z","jQuery知识一览","## 一、概览\njQuery官网：[https://jquery.com/](https://jquery.com/)\njQuery是一个高效、轻量并且功能丰富的js库。\n核心在于查询query。\njQuery是一个优秀的js函数库，是React/Vue/Angular框架之外中大型项目的首选。\njQuery的主旨是write less, do more。\n\n### 1.1 jQuery的功能\n- html元素的选取\n- 操作html元素\n- css操作\n- html事件处理\n- 实现js动画效果\n- 能够链式调用\n- 容易扩展插件\n- 封装了ajax\n\n### 1.2 引入jQuery库\n引入jQuery的方式有2种，一种是项目中直接引入jQuery的min.js文件，一种是使用服务器端jQuery文件（使用cdn）脚本标签方式引入。\n#### 1.2.1 本地项目引入\n在官网的：[https://jquery.com/download/](https://jquery.com/download/) 链接下可以下载到完整的代码，放到项目文件的js文件夹下。\n```js\n\u003Cscript src=\"static/js/jquery-3.7.1.min.js\">\u003C/script>\n```\n\n#### 1.2.2 cdn方式引入\n在网站：[https://www.bootcdn.cn/](https://www.bootcdn.cn/) 可以获得稳定、快速、免费的cdn加速服务。\n```js\n\u003Cscript src=\"https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js\">\u003C/script>\n```\n\n\n#### 1.2.3 版本兼容\n- 1.x 版本兼容老版本的IE，文件比较大\n- 2.x 版本文件比较小，支持IE8+\n- 3.x 版本引入部分新API，提供多个分包的版本，支持IE9+\n\n#### 1.2.4 开发的正确姿势\n开发过程中一般使用非min.js文件方便调试，生产环境部署上线时才使用min.js这种压缩文件。\n\n## 二、jQuery源码浅析\n### 2.1 匿名函数调用\n![jQuery源码1.jpg](https://image.xinwei.ltd/11713852422127.jpg)\n![jQuery源码2.jpg](https://image.xinwei.ltd/21713852443999.jpg)\n\n从源码中可以看出，jQuery的整体逻辑可以用以下简单的结构进行描述：\n```js\n( function( global, factory ) {\n    // 判断有无window环境的一堆逻辑代码\n})( typeof window !== \"undefined\" ? window : this, function( window, noGlobal ) {\n    // 构造jQuery的一些逻辑代码\n    return jQuery\n});\n```\n\n### 2.2 jQuery是一个函数\n![jQuery源码3.jpg](https://image.xinwei.ltd/31713852508969.jpg)\n\n从源码中可以看出，jQuery被定义为一个函数，函数中返回了一个实例对象（看new关键字）。\n\n继续跟踪源码 `new jQuery.fn.init( selector, context)`，这个函数中调用了`makeArray`，当然在其他if判断语句中也有返回伪数组对象（比如，定义了length字段，还有[0]的操作），这里拿`makeArray`作为演示。\n![jQuery源码4.jpg](https://image.xinwei.ltd/41713852546533.jpg)\n\n查看`makeArray`函数：\n![jQuery源码5.jpg](https://image.xinwei.ltd/51713852575184.jpg)\n\n所以这个返回实例对象，是一个伪数组。\n```js\n$('#menu-trigger') instanceof Array // false\n$('#menu-trigger') instanceof Object // true\n```\n\n### 2.3 jQuery挂载在window上\n![jQuery源码6.jpg](https://image.xinwei.ltd/61713852625552.jpg)\n\n从源码中可以看出，将jQuery函数和window.$ 以及window.jQuery绑定赋值，所以使用jQuery和$ 标识符就可以直接使用jQuery。通常在项目中直接使用$标识符，快捷简省。\n\n### 2.4 jQuery验证\n所以在引入jQuery的项目中：\n```language\nconsole.log(typeof $); // function\nconsole.log($ === jQuery); // true\nconsole.log($() instanceof Object); // true\n```\n![jQuery源码7.jpg](https://image.xinwei.ltd/71713852699828.jpg)\n\n\n\n## 三、jQuery常见用法\n### 3.1 函数形式调用\n通常形式为：$(param)\n- param为函数：dom加载完成后，执行该回调函数\n- param为选择器字符串：查找与该选择器匹配的所有标签，并封装成jQuery对象\n- param为dom对象：将该dom对象封装成jQuery对象\n- param为标签字符串：创建标签对象并封装成jQuery对象\n```language\n$(function() {\n    console.log(\"dom finished and execute this\");\n})\n\n$('#btn').click(function () {\n    // 这里的this是id为#btn的dom元素\n    console.log(this.innerHTML)\n    \n    console.log($(this).html())\n})\n\n$('\u003Cinput type=\"number\">\u003C/input>').appendTo('div')\n```\n\n\n### 3.2 点语法调用函数\n```language\nlet list = [1, 2, 3]\n$.each(list, function(i, ele) {\n    console.log(i, ele)\n})\n\n$.trim(' hello world ')\n```\n\n\n### 3.3 用法浅析\n- jQuery函数返回的是一个伪数组（Object对象），可以使用length和下标。\n```language\n// class中名为btn的dom元素有多少\n$('.btn').length\n\n$('.btn')[0]\n\n$('.btn').get(0)\n\n$('.btn').index()\n\n// 设置名为btn的class对应的dom标签的文本内容\n$('.btn').text('自定义文本内容')\n```\n\n通过$(param)传入的是selector、element、标签情况下，返回的是包含1个或者多个dom元素对象的伪数组。\n![jQuery源码8.jpg](https://image.xinwei.ltd/81713852789593.jpg)\n\n\n### 3.4 获取一组dom元素的常见用法\n```language\n// 基础标签和class\n// 选择了所有的div和span标签\n$('div, span')\n\n// 选择所有具有某个class的标签\n$('div.container')\n\n// 层次选择器\n$('ul span') // ul标签下的所有span元素\n$('ul>span') // ul标签下的所有子span元素\n$('.container+li') // class为container的元素后的下一个li元素\n$('ul .item~*') // class为item的元素后面所有兄弟元素\n\n// 过滤选择器\n$('div:first') // 选择第一个div\n$('div:last') // 最后一个div\n$('div:not(.container)') // class不为container的所有div\n$('div:lt(3):gt(0)') // 所有div元素中的大于0小于3的div元素，表示1和2索引处的dom元素\n$('div:containers(\"hello world\")') // 内容为hellow world的div元素\n$('div:hidden') // style中display: none的div元素\n$('div[data]') // 有data属性的div元素, example: \u003Cdiv data=\"\">\u003C/div>\n$('div[data=\"123\"]') // 有data属性且值为123的div元素, example: \u003Cdiv data=\"123\">\u003C/div>\n\n// 示例，使table表格的奇数行背景样式设置\n$('table>tbody>tr:odd')\n\n// form表单中\n$(':text') // 所有单行输入框\n$(':text:disabled') // 所有disabled的input输入框\n$(':checkbox') // 所有checkbox\n$(':checkbox:checked') // 所有选中的checkbox\n$('select').val() // select标签选中的option的value值\n```\n\n\n### 3.5 修改css\n直接修改css属性（如果其dom标签存在这个css属性）\n```language\n$('#container').css('background', 'red');\n\n$('#container').css({ 'background' : 'red', 'color': 'blue' }) // 一组属性\n```\n\n清空某标签下的所有dom：\n```language\n$('.carousel-inner').empty();\n```\n\n给某标签下添加dom标签：\n```language\n$('.carousel-inner').append(domStr);\n```\n\n移除、添加class：\n```language\n$('.carousel-indicators li').removeClass('active');\n$('.carousel-indicators li:first').addClass('active');\n```\n\n\n### 3.6 获取属性\n获取dom标签上的属性：\n```language\n $('.about-img-1>img').attr('src');\n```\n\n设置标签的属性：\n```language\n $('.about-img-1>img').attr('src', (data && data['image']) ? data['image'] : '');\n```\n\n\n### 3.7 一些dom事件\n点击：\n```language\n$('.category-product-page-ul>li').click(function(e) {\n    e.preventDefault();\n    console.log('this is:', this); // 打印对应的dom标签\n});\n```\n\nhover：\n```language\n$('#container').hover(  \n    function() {  \n        // 当鼠标进入元素时执行的函数\n    },\n    function() {  \n        // 当鼠标离开元素时执行的函数\n    }  \n  );\n```\n\n监听事件：\n```language\n$('.bigImage').on(\"mousemove\", function( e ) {\n    // do something\n});\n```\n\n\n### 3.8 发起ajax请求\n```language\nconst json = '/static/js/data/xxx.json';\n $.ajax({\n    url: json,  \n    dataType: 'json',  \n    success: function(data) {\n      // do something\n    },\n    error: function(jqXHR, textStatus, errorThrown) {  \n      console.error('Fail to read json:', textStatus, errorThrown, json);\n    }  \n  });\n```\n\npost请求：\n```language\n$.post(\"url\", data,\n    function (data, textStatus, jqXHR) {\n      \n    },\n    \"dataType\"\n  );\n```\n\n","这篇文章将我对jQuery的一系列知识点做一个总结，记录一下日常经常用到一些方法，其中的代码片段也可以作为手册来温故知新。","https://image.xinwei.ltd/11713852422127.jpg",499668042977349,{"phone":15,"userId":13,"nickName":16,"vipType":17,"avatar":18,"sign":19,"createdAt":20},"13121171998","全栈老韩",1,"https://image.xinwei.ltd/images/IMG_5430.JPG","全栈工程师，擅长iOS App开发、前端（vue、react、nuxt、小程序&Taro）开发、Flutter、React Native、后端（midwayjs、golang、express、koa）开发、docker容器、seo优化等。","2024-01-01T16:14:30.305Z",2,{"id":21,"name":23},"IT技术",32,{"id":24,"name":26,"parentId":21},"前端",[],"",115,0,"jquery,jquery knowledge,jquery知识,jquery开发"]