列表元素循环遍历添加移除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>')

数组的foreach方法

arr.fpreach(function(item){ console.log(item); })

$(’*’,this.wrap).css({xxx})

两个参数,代表的是this.wrap中的所有的元素

原文链接:https://blog.csdn.net/yehaocheng520/article/details/105381711

最后修改日期:2020年5月31日