web前端开发中的小知识点集合

系统管理员 2021-07-25 12:52 448阅读 0赞

# 列表元素循环遍历添加移除classname #

for(var i=0;i<arr.length;i++){ 
    	arr[i].className='';
    }
    e.target.className="active";

还可以通过classList类数组的方式进行处理；

for(var i=0;i<arr.length;i++){ 
    	arr[i].classList.remove('active');
    }
    e.target.classList.add('active');

# data-xxx属性可以做两部分内容的映射 #

给元素添加data-id的属性，如：`data-id="student-list"`可以通过 `e.target.getAttribute('data-id')`的方式来获取

# addEventListener函数 #

addEventListener(‘事件类型’,函数名,false)；  
第三个参数false是阻止事件冒泡；

# form表单自带的reset函数 #

`form.reset();`form表单自带的重置函数

# 数据渲染到页面中的几种方式 #

原生js用：`appendChild(xxx)`  
jquery用：`append(xxx)`  
也可以用innerHTML的方式

# 当前时间戳的获取方式 #

`new Date().getTime()` 获取当前的毫秒数  
`new Date().getFullYear()` 获取当前的年份

# \[\].slice.call() #

事件源对象`e.target.classList`是一个类数组，要是想用数组的Indexof方法，则需要将类数组转化为数组；  
`[].slice.call(e.target.classList)`;可以实现将类数组转化为数组；  
`[].slice.call(e.target.classList) indexof('edit')` 如果返回的结果是-1，则代表没有这个edit的类名，如果返回的数值大于-1，则代表是含有这个edit的类名的。

# 获取form表达数据 #

获取form表单数据，可以通过先获取form表单，然后通过form.name.value的方式进行数据的获取。  
form为form表单的DOM元素，name为每个表单选项的name的值。  
`form.name.value;`获取表单的name值；  
`form.sex.value;`获取表单的sex值；

# 对象的拼接方法 #

Object.assign(obj,\{appkey:“xxxxx”\});  
这个object.assign也是对象浅克隆的处理方式；

# 表单提交的默认事件 #

form表单提交会自动触发页面刷新，阻止默认事件的两种方式：  
`return false`;写在最后可以阻止默认事件；  
`e.preventDefault()`;写在开头可以阻止默认事件；  
`e.stopProgation()`;阻止冒泡；

# 表格中删除某一条数据 #

表格中编辑或删除某一条数据，可以通过`data-index=i`的方式，将获取到的数组索引传递过去。

# 更改元素的样式的几种方式 #

1.  元素.classList.add(xxx)；的方式来添加样式
2.  元素.className(xxx);的方式来添加样式
3.  元素.style.display=“block”;的方式来修改样式

# form表单的数据回填 #

function renderEdit(data){ 
    	var editForm = document.getElementById('edit-form');
    	for(var prop in data){ 
    		if(editForm[prop]){ 
    			editForm[prop].value=data[prop];
    		}
    	}
    }

# jq的扩展方式有两种 #

`$.extend();`  
`$.fn.extend();`  
fn是在jq的prototype上进行扩展的，fn== prototype，是在实例上进行扩展的，所以调用的时候应该是jq对象.的方式进行调用。而前者的调用是 $.的方式进行调用。

# 立即执行函数防止变量污染 #

为了防止插件中变量污染，可以通过立即执行函数进行封闭  
(function()\{\})()  
(function()\{\}())  
立即执行函数的两种表示方法；

# whitespace:‘nowrap’; #

文字不换行的处理方法：`whitespace:"nowrap"`;

# fontSize:0; #

含有`display:inline-block`属性的元素都具有文本特性，会出现文本占位符，解决方法是给父级添加：`font-size:0`；

# 列表中的鼠标移入事件 #

$('#menu-list').on('mouseenter','li',function(){ 
    	console.log($(this).index());//打印当前点击元素的索引值
    	$('#menu-content').show();
    })

# jq创建元素 #

`$('<ul class="swiper-wrap"></ul>')`