jQuery中的Dom操作 1.查找节点通过jQuery选择器来完成2.创建节点 创建元素节点：var newTd = $("<td></td>") 创建文本节点：var newTd = $("<td>文本内容</td>")3.插入节点 1) $A.append(B) 将B追加到A的末尾处，作为它的最后一个子元素 2) $A.appendTo(B) 将A追加到B的末尾，作为它的最后一个子元素 3) prepend() $A.prependTo(B) 将A追加到B的前面，作为它的第一个子元素 $A.after(B) 在A之后追加B，作为它的兄弟元素 $A.insertAfter(B) 在B之后追加A，作为它的兄弟元素 $A.before(B) 在A之前追加B，作为它的兄弟元素 $A.insertBefore(B) 在B之前追加A，作为它的兄弟元素 4.删除节点 remove([selector]) 从DOM中删除所有匹配的元素，返回值是一个指向已经被删除的节点的引用，可以在以后再使用这些元素。 该方法会移除元素，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。 detach([selector]) 与remove()类似，但是detach()保存所有jQuery数据和被移走的元素的相关联事件。 empty() 无参数。从DOM中清空集合中匹配元素的所有的子节点。 5.复制节点 $("#id").clone(false); 该方法返回的是一个节点的引用，参数默认为false，为浅复制； 参数是true,为深复制，含义是：复制元素的同时复制元素中所绑定的事件。 6.替换节点 replaceWith(newContent); 用新内容替换集合中所有匹配的元素，并且返回被删除的元素的集合。 该方法会删除与节点相关联的所有数据和事件处理程序。 replaceAll(target); 用集合的匹配元素替换每个目标元素。颠倒了replaceWith()操作效果。 7.包裹节点 wrap([wrappingElement]) 在每个匹配的元素外层包上一个html元素 warpAll([wrappingElement]) 将所有匹配的元素用一个元素来包裹，在所有匹配元素外面包裹一层HTML结构 warpInner([wrappingElement]) 每个匹配元素里面内容(子元素)都会被这种结构包裹 8.节点遍历 children([selector]) 用于取得匹配元素的子元素集合(只考虑子元素而不考虑任何后代元素) $('.content.inner')=>$('.content').children('.inner'); find(selector) 在当前对象元素中的子元素查找，和参数所匹配的所有的后代元素 next([selector]) 取得匹配的元素集合中每一个元素紧邻的后面兄弟元素 nextAll([selector]) 查找当前元素之后所有的同辈元素 prev([selector]) 取得匹配元素前面紧邻的兄弟元素 prevAll([selector]) 取得当前元素之前所有的同辈元素 silibinng([selector]) 取得匹配元素的前后所有的兄弟元素 closest(selector) 取得和参数匹配的最近的元素，如果匹配不上继续向上查找父元素 filter(selector) 把当前所选择的所有元素再进行筛选过滤 parent([selector]) 取得匹配元素的集合中，每个元素的父元素 parents([selector]) 获得集合中每个匹配元素的祖先元素

jQuery中常用的API 1.jQuery中的html(),text(),val()方法 html() 无参：获取html的值 有参数html：设置html的值 text() 无参：获取文本值 有参数text：设置文本值 val() 无参：获取value的值 有参数value：设置value的值 3.jQuery中属性设置函数 //获取属性值 attr(key) prop(key) //删除属性 removeAttr(attributeName) removeProp(propertyName) //批量设置属性 css(key) //添加类 addClass(className) //判断有没有指定的类，有，返回true，否则返回false hasClass(className) //删除类 removeClass(className) 3.jQuery中的工具方法 1) get(); //以数组的形式返回DOM节点。 console.log($('div').get()); 2) toArray(); //返回一个包含jQuery对象结合中的所有DOM元素数组。 console.log($('div').toArray()); 3) eq(index); //返回index位置上的jQuery对象。 console.log($('div').eq(1).get(0)); 4) filter(function(index,item){}); //过滤器函数，返回jQuery对象。 var $result = $('div').filter(function(index,item){ return index == 2; }); 5) map(function(index,item){}); //用于获取或设置元素集合中的值。 var $result = $('div').map(function(index,item){ return $(item).html() }); 6) each(function(index,item){}); //遍历一个jQuery对象。 $('div').each(function(index,item){ console.log(index,'--',item); }); 7) slice(0,3); //截取 var $result = $('div').slice(0,3); console.log($result.get()); }); 8) not() 9) first() 10) last() 11) is() 12) has()

JQuery 过滤器大全 1.基本过滤器：selector:first 获取所有已选择到的元素中的第一个元素 selector:last 获取所有已选择到的元素中的最后一个元素 selector:even 获取所有已选择到的元素中的索引为偶数的元素 selector:odd 获取所有已选择到的元素中的索引为奇数的元素 selector:eq(index) 获取所有已选择到的元素中的索引为index的元素 selector:lt(num) 获取所有已选择到的元素中的索引值小于num的元素 selector:gt(num) 获取所有已选择到的元素中的索引值大于num的元素 selector1:not(selector2) 获取所有已选择到的元素中的除了selector2的元素 selector:header 获取所有已选择到的元素中的标题元素(h1~h6) 2.内容过滤器： selector:contains(text) 获取所有已选择到的元素中文本包含text的元素 selector:empty 获取所有已选择到的元素中的空元素(没有子节点) selector:parent 获取所有已选择到的元素中的非空元素(有子节点)，如$("div:parent"); selector1:has(selector2) 获取所有已选择到的元素中包含selector2的元素，如$("div:has('span')"); 3.可见性过滤器：隐藏类型分两种：1）不占据屏幕空间 display:none; <input type="hidden"> 2）占据屏幕空间 visibility:hidden; opacity:0;//透明度为0 使用： :visible 选择所有占据屏幕空间的元素 :hidden 选择所有不占据屏幕空间的元素 4.属性过滤器： selector[attrKey] 获取所有已选择到的元素中具有属性attrKey的元素 selector[attrKey=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值为attrVal的元素 selector[attrKey^=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值为以attrVal开头的元素 selector[attrKey$=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值为以attrVal结尾的元素 selector[attrKey*=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值为包含attrVal的元素 selector[attrKey!=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值不为以attrVal的元素或者没有属性attrVal的元素 5.后代选择器： selector:nth-child(index) 获取每个selector元素中索引为index的子元素。【注意】index从1开始 selector:first-child 获取每一个selector元素中的第一个子元素（每个父元素的第一个子元素） selector:last-child 获取每一个selector元素中的最后一个子元素（每个父元素的最后一个子元素） selector:only-child 获取每一个selector元素中的独生子子元素（每个父元素如果只有一个孩子元素，获取该元素） selector:first-of-type 获取每个selector元素中每种类型子元素中的第一个 selector:last-of-type 获取每个selector元素中每种类型子元素中的最后一个 6.表单过滤器： :checked 选取所有被选中的元素，用于复选框、单选框、下拉框 :selected 选取所有被选中的元素，该选择器只适用于<option> :focus 选取当前获取焦点的元素 :text 选取所有的单行文本框(<input type="text">) :password 选取所有的密码框 :input 选取所有的<input>,<textarea>,<select>,<button>元素。 *注意，$(":input")是选中可以让用户输入的标签元素；而$("input")是选择名字为input的标签元素。* :enable 选取所有可用元素，该选择器仅可用于支持disable属性的html元素。(<button>,<input>,<optgruop>,<option>,<select>,<textarea>) :disable 选取所有不可用元素，该选择器也仅可用于支持disable属性的html元素。 :radio 选取所有的单选框 :checkbox 选取所有的多选框 :submit 选取所有的提交按钮 :image 选取所有的input类型为image的表单元素 :reset 选取所有的input类型为reset的表单元素 :button 选取所有的input类型为button的表单元素 :file 选取所有的input类型为file的表单元素

echars 常用配置项 x 或者 y轴标签太多超出图标不显示option里面添加如下内容（letf，right）都可以调整位置 grid: { left: 160;},格式化底部标签 字符xAxis: {                             type: 'category',                             data: ProductSaleName,                             axisTick: {                                 alignWithLabel: true,                                 show: false                             },                             axisLabel: {                                 interval: 0,                                 //格式化器                                 formatter: (params) => {                                     var end = ""                                     if (params.length > 6) {                                         var chars = [...params]                                         chars.forEach((element, index) => {                                             console.log(index);                                             if (!(index % 10)) {                                                 if (index != 0) {                                                     end += element + '\n';                                                 }                                             } else {                                                 end += element;                                             }                                         });                                     } else {                                         return params                                     }                                     return end                                 }                             },                         },开启柱状图顶部显示数据series: [{                             color: '#a90000',                             name: '销量',                             type: 'bar',                             data: ProductSaleQuantity,                             itemStyle: {                                 normal: { //开启柱状图顶部显示数据                                     label: {                                         show: true, //开启显示                                         position: 'top', //在上方显示                                         textStyle: { //数值样式                                             color: 'black',                                             fontSize: 16                                         }                                     }                                 }                             },                         }]

函数传递时需要注意 函数子组件接收函数内用this时，父组件需要使用绑定bind(),不然this对象在子组件发生改变