前端、js、jq知识代码积累

本文汇总了前端开发中的实用技巧,包括关闭手机键盘、阻止事件传递、处理不支持ES6的系统、Map对象遍历、jQuery操作、表单序列化、选择器使用、class操作、常量定义及监听手机返回事件等,旨在帮助开发者提升工作效率。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

细节决定成败!

)

h5关闭手机键盘

document.activeElement.blur();

阻止事件传递

1.删除所有事件$(“id”).unbind()
2.阻止事件冒泡

$("id").click(function(e) {
e.stopPropagation();
});

电脑微信、某些老系统不支持es6写法

遍历map方法

m.forEach(function (value, key, map) {
    alert(value);
});

遍历形似map的后端数据

//如:var str = '{"a":"123","b":"234"}'
//i:key,v:value
$.each(JSON.parse(str),function(i,v){
	console.log("key:"+i+"  value:",v);
})

//key:a  value: 123
//key:b  value: 234

jq常用插入节点方法

//append(),在父级最后追加一个子元素
$(".append").click(function(){
	$("#wrap").append("<p class='three'>我是子元素append</p>");
});

//appendTo(),将子元素追加到父级的最后
$(".appendTo").click(function(){
	$("<p class='three'>我是子元素appendTo</p>").appendTo($("#wrap"));
});

//prepend(),在父级最前面追加一个子元素
$(".prepend").click(function(){
	$("#wrap").prepend("<p class='three'>我是子元素prepend</p>");
});

//prependTo(),将子元素追加到父级的最前面
$(".prependTo").click(function(){
	$("<p class='three'>我是子元素prependTo</p>").prependTo($("#wrap"));
});

//after(),在当前元素之后追加(是同级关系)
$(".after").click(function(){
	$("#wrap").after("<p class='siblings'>我是同级元素after</p>");
});

//before(),在当前元素之前追加(是同级关系)
$(".before").click(function(){
	$("#wrap").before("<p class='siblings'>我是同级元素before</p>");
});

//insertAfter(),将元素追加到指定对象的后面(是同级关系)
$(".insertAfter").click(function(){
	$("<p class='three'>我是同级元素insertAfter</p>").insertAfter($("#wrap"));
});
//insertBefore(),将元素追加到指定对象的前面(是同级关系)
$(".insertBefore").click(function(){
	$("<p class='three'>我是同级元素insertBefore</p>").insertBefore($("#wrap"));
});

jq序列化获取表单提交的值

$("formId").serialize();// 获取字符串形式的值
$("formId").serializeArray();//获取数组形式的值

jq组合选择器

基本上了解这个的其他的都差不多会用了

$("input.class[name='first']:checked")

标签class操作:删除、校验、增加

$(id)[0].classList.contains("class名");//判断某个元素是否包含某个class
$(id).addClass("class名");//增加class
$(id).removeClass("class名或者置空");//删除某个Class或者清空

js(es6)中const,var,let区别

1.const定义的变量不可以修改,而且必须初始化。

const b = 2;//正确
// const b;//错误,必须初始化 
console.log('函数外const定义b:' + b);//有输出值
// b = 5;
// console.log('函数外修改const定义b:' + b);//无法输出 

2.var定义的变量可以修改,如果不初始化会输出undefined,不会报错。

var a = 1;
// var a;//不会报错
console.log('函数外var定义a:' + a);//可以输出a=1
function change(){
a = 4;
console.log('函数内var定义a:' + a);//可以输出a=4
} 
change();
console.log('函数调用后var定义a为函数内部修改值:' + a);//可以输出a=4

3.let是块级作用域,函数内部使用let定义后,对函数外部无影响。

let c = 3;
console.log('函数外let定义c:' + c);//输出c=3
function change(){
let c = 6;
console.log('函数内let定义c:' + c);//输出c=6
} 
change();
console.log('函数调用后let定义c不受函数内部定义影响:' + c);//输出c=3

监听手机端返回(用于返回时更新页面)

window.addEventListener("popstate", function(e) { 
    	
    	}, false);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值