JQuery应用实例学习 —— 21 原生绑定和触发实现input框自动清除默认内容，闪烁光标等待输入

最新推荐文章于 2023-06-21 15:50:06 发布

烟敛寒林o

最新推荐文章于 2023-06-21 15:50:06 发布

阅读量367

点赞数

分类专栏： # ——【 JQuery】

本文链接：https://blog.csdn.net/dyw_666666/article/details/82714781

版权

——【 JQuery】专栏收录该内容

29 篇文章 0 订阅

订阅专栏

1:和原生事件的语法区别

原生绑定: xxDOMNode.οnclick=function(){} , xx.onmousever=function();

原生触发: xxDOMNode.click(), xx.submit(); xx.focus();

jQuery绑定: $(selector).click(function(){});

jQuery触发: $(selector).click();

2:和xx.onclick等的绑定次数的区别

xx.onclick = function(){},是给onclick属性赋值,赋多个值,前面的被覆盖,只有最后一个函数被调用

$(selector).click(函数1);

$(selector).click(函数2);

$(selector).click(函数3); // 会按绑定的顺序,逐个执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p><input type="text" name="form111" id="" value="email..."></p>
    <p><input type="text" name="form222" id="" value="用户名..."></p>
    <p><input type="button" value="test1"></p>
    <p><input type="button" value="test2"></p>
</body>
<script src="jquery.js"></script>
<script>
// 原生JS来做input框自动清除默认内容，闪烁光标等待用户输入的效果

var inps = document.getElementsByTagName('input');

var inp0 = inps[0];
inp0.onmouseover = function() { // 原生事件绑定
    this.value = ''; // 把自身value先清空
    this.focus(); // 原生事件触发
}

$('input[name=form222]').mouseover(function(){
    $(this).val(''); // 修改value, 不传参数则读其value
    $(this).focus();
});



// 绑定次数上的区别
inps[2].onclick = function() {
    alert('丁');
}
inps[2].onclick = function() {
    alert('当');
}
inps[2].onclick = function() {
    alert('咚'); 
// 当覆盖丁，咚覆盖当，所以只弹出咚
}

$(inps[3]).click(function(){alert('嗯嗯')});
$(inps[3]).click(function(){alert('呵呵')});
$(inps[3]).click(function(){alert('去洗澡')});
// 三个依次弹出
</script>
</html>

烟敛寒林o

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQuery应用实例学习 —— 21 原生绑定和触发实现input框自动清除默认内容，闪烁光标等待输入

1:和原生事件的语法区别原生绑定: xxDOMNode.onclick=function(){} , xx.onmousever=function();原生触发: xxDOMNode.click(), xx.submit(); xx.focus(); jQuery绑定: $(selector).click(function(){});jQuery触发: $(selector)....
复制链接

扫一扫