jquery的click事件用法

最新推荐文章于 2022-02-14 01:05:42 发布
最新推荐文章于 2022-02-14 01:05:42 发布
阅读量674 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44606660/article/details/88198392
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <div>111</div>
    <div>222</div>
    <div>333</div>
    <div>444</div>
    <form action="">
            <input type="checkbox" value="reading"> reading
            <input type="checkbox" value="sport"> sport
            <input type="checkbox" value="game"> game
    
            <input type="button" value="TEST">
    </form>
    <script src="lib/jquery-2.2.2.js"></script>
    <script>
        // $(function(){
        //     $('div').click(function(){
        //         alert('click!');
        //     });
        // })
        // $('div').click(fn);
        // function fn(){
        //     alert('!!');
        // }
        // $('div').click(function(){
        //     console.log(this);//this指的是被点击的原生dom对象
        //     alert($(this).index())
        // });
        // 定义（绑定事件处理程序）
           // 定义（绑定事件处理程序）
           $(":button").click(function() {
                var arr = [];
                $(":checkbox:checked").each(function() {
                    arr.push($(this).val());
                });
                console.log(arr);
            });

            // $(":button").click(); // 直接触发click事件（事件模拟）

        


        // 原生（点击时弹出每个div的索引)
        // 方法一：
        // var os = document.getElementsByTagName("div");
        // for(var i = 0; i < os.length; i++){
        //     os[i].dataset.index = i;
        //     os[i].onclick = function() {
        //         alert(this.dataset.index);
        //     };
        // }

        // 方法二：
        // var os = document.getElementsByTagName("div");
        // for (var i = 0; i < os.length; i++) {
        //     (function(j) {
        //         os[j].onclick = function () {
        //             alert(j);
        //         };
        //     })(i);
        // }

    </script>
    
</body>
</html>

 

天空守护云
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery中click事件用法实例
01-19
本文实例讲述了jQuery中click事件用法。分享给大家供大家参考。具体分析如下： 当鼠标指针在匹配元素上方，然后按下并松开鼠标左键或者调用click()方法都会触发click事件。 一个完整的事件过程，不但要有能够触发...
jQuery中click事件的定义和用法
12-10
本文实例讲述了jQuery中click事件的定义和用法。分享给大家供大家参考。具体分析如下： 当鼠标指针在匹配元素上方，然后按下并松开鼠标左键或者调用click()方法都会触发click事件。 click()方法也可以绑定事件处理...
jQuery的区别：$().click()和$(document).on('click','要选择的元素',function(){})的不同
weixin_30267697的博客
10-31 468
　　jQuery的出现，大大简化了对dom的操作，但是如果不是仔细阅读api和进行操作，就不知道其中最大的优点和使用方式。就拿$().click()和$(document).on('click','要选择的元素',function(){})来说，都是点击事件的操作，但是也有不同的地方。　　1. $(选择器).click(fn)　　　　当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择...
JQuery触发Click事件几种方法、处理表单提交
qiudechao1的博客
07-28 5863
JQuery触发a标签的click事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>测试</title&g...
jquery添加click事件，jq动态添加click事件多种方式分享
请告诉他
11-12 5387
目录： 添加方式 实例演示 其中方式有一下几种 $("#ImId1").click(function(){}); $("#ImId2").bind("click",function(){}) $("#ImId3").on("click",function(){}) $("body").delegate("#xxx","click",function(){}) 实例演示： 导入jq <script type="text/javascrip...
$("").click与onclick的区别示例介绍
qq_31289993的博客
06-12 859
onclick是绑定事件，click本身是方法作用是触发onclick事件 1.onclick是绑定事件，告诉浏览器在鼠标点击时候要做什么? click本身是方法作用是触发onclick事件，只要执行了元素的click()方法，就会触发onclick事件。 2.click()方法的主要作用是触发调用click方法元素onclick事件。 ...
jQuery中$.click()无效问题分析
天下无敌庞成勇
11-10 626
今天做表格前台导出到xls时，想自动触发a的点击。但失败。最后找到这个文件。 我尝试过多次用jQuery模拟用户点击a标签的功能，但都没有成功，并且困扰了很久。前段时间的一次发呆，冒出了新的想法，于是就动手进行了测试。 先看下边的代码：<html> <head>磨途歌-A标签测试1<head> <body> <a href="http://blog.mo2g.com">磨途歌<a> </b
jquery click([data],fn)使用方法实例介绍
12-11
click([[data],fn]) 返回值:jQuery 概述 触发每一个匹配元素的click事件。 这个函数会调用执行绑定到click事件的所有函数。 参数 fnFunctionV1.0 在每一个匹配元素的click事件中绑定的处理函数。 [data],fnString,...
jQuery的区别：$().click()和$(document).on(‘click‘,‘要选择的元素‘,function(){})的不同
郝啊的博客
12-07 468
jQuery的区别：().click()和().click()和().click()和(document).on(‘click’,‘要选择的元素’,function(){})的不同
jQuery中的.click()方法代码实例
weixin_55626132的博客
02-14 595
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery的 .click()方法</title> <style> p{ color: red; margin: 5px; cursor: pointer; } p:hover{ background: yellow; } ...
jquery中点击事件click的写法
清颖的博客
03-28 4835
jquery中点击事件click的写法： <input type="button" "test1()" id="btn1" value="input1" /><br/> <input type="button" id="btn3" value="input3"/><br/> <input type="button" "test4()" id...
【JavaScript】按钮绑定点击事件-onCliek事件
热门推荐
【程序员不弃】的博客
03-19 9万+
【JavaScript】按钮绑定点击事件-onCliek事件 <button type="submit" id="btn">btn</button> 1. 第一种: $("#btn").click(function(event){} 2. 第二种: document.getElementById('#foo').addEventListener('cl...
jQuery 2
zhuxyyds的博客
10-18 457
常用的 jQuery 事件方法 $(document).ready(function)文档完全加载完后执行函数 click(function) 方法是当按钮点击事件被触发时会调用一个函数 dblclick(function)双击元素时，会发生 dblclick 事件。 mouseenter(function)当鼠标指针穿过元素时，会发生 mouseenter 事件。 mouseleave(function)当鼠标指针离开元素时，会发生 mouseleave 事件。 hover(function.
jQuery中其他事件处理方法
weixin_44768794的博客
10-24 164
click() 他可以绑定单击事件，以及触发单击事件 //加function函数为绑定单击事件 $("h1").click(function(){}); //不加function函数为触发单击事件 $("h1").click mouseover() 鼠标移入事件 mouseout() 鼠标移出事件bd bind() 可以给元素绑定一个或多个事件 //使用bind给元素绑定多个事件 $("h1").bind("click mouseover mouseout",function(){})
$('div').click()事件不能用
yan263364的博客
09-20 1万+
一、问题：click点击事件没有效果$('div#div1').click(function(){ // code... })二、原因原本div的id为div，用js动态把id改变了，click不能用 以为只有动态生成的dom元素才有click问题，刚开始没考虑这方面。把代码重新理了一遍，没有其他问题，最后想到，可能动态改变元素的id，click事件也不支持 三、解决$(document.b
jquery click事件
最新发布
09-14
jQuery的click事件用于在元素被点击时触发相应的操作。你可以通过以下方式来使用它： 1. 选择要绑定click事件的元素。例如，如果你要绑定点击事件到一个按钮元素，可以使用以下代码： ```javascript var btn = $("#myButton"); ``` 2. 使用click()方法来绑定事件处理程序。你可以在click()方法中传递一个函数，该函数将在元素被点击时执行。例如，下面的代码会在按钮被点击时弹出一个提示框： ```javascript btn.click(function() { alert("按钮被点击了！"); }); ``` 3. 如果你想在点击事件中访问事件对象或阻止默认的行为，可以将事件对象作为参数传递给处理程序函数。例如，下面的代码会在按钮被点击时阻止默认的表单提交行为： ```javascript btn.click(function(event) { event.preventDefault(); // 其他操作... }); ``` 以上是一个简单的示例，你可以根据自己的需求来编写更复杂的click事件处理程序。记得在页面加载完成后执行绑定事件的代码＊＊＊

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值