jquery中的事件

最新推荐文章于 2022-09-20 20:52:15 发布
最新推荐文章于 2022-09-20 20:52:15 发布
阅读量432 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lmw773034423/article/details/8842112
版权

一般事件

修改DOM的样式属性时，通过驼峰法

例如backgroundColor

Onfocus 获得焦点事件

Onblur  失去焦点事件

Eg：

<body>

用户名:<input type = "text"  value="请输入用户名" id="username" onfocus="clearName()" onblur="getName()"><br/>

密码:<input type="password" id="pass">

</body>

<script type="text/javascript">

 function clearName(){

      var name = document.getElementById("username");

   name.value = "";

 }

 function getName(){

    var bu = document.getElementById("username");

     bu.value = "请输入用户名";

 }

 </script> 

Onchange  内容改变事件

Eg：

<script>

function gai(){

   var g = document.getElementById("select").value;

   var d = document.getElementById("div1");

   d.style.fontSize=g*10+'px';

}

</script>

    </head>

<body>

<select id="select" onchange="gai()">

<option>1</option>

<option>2</option>

<option>3</option>

<option>4</option>

</select>

<div id="div1">改变文字大小</div>

</body>

页面事件

Onload

整个文档（body）都被加载完之后才触发的事件

setInterval()  和 setTimeout 的区别

setTimeout（）多少秒之后执行某函数（执行1次）

setInterval()  每个多少秒执行某个函数（一直在执行）

Eg;

<script>

var str = "欢迎来到我的空间";

function Move(){

var  a = str.substr(1)+str.charAt(0);//截取字符串，和第一个字符

  str = a;

  window.status=a;

  document.title=a;

  setTimeout("Move()",500);//setTimeout执行一次

}

//setInterval("Move()",500);//一直在执行

</script>

    </head>

<body onload="Move()">

</body>

 Window.status   设置窗口状态栏的文本            document.title    文档的title 左上

键盘事件

Onkeydown 键盘按下 

Eg:

<script>

   function key(e){

     switch(e.keyCode){

            case 37:alert("左");

break;

case 38:alert("上");

break;

case 39:alert("右");

break;

case 40:alert("下");

break;

 }

   

   }

</script>

</head>

<body onkeydown="key(event)">

</body>

Onkeyup  键盘抬起

Eg:

<script>

  function sum(){

     var q = document.getElementById("t1")

     var val = q.value;

 var len = val.length;

 document.getElementById("span1").innerHTML="您已经输入"+len+"个字符";

 }

 </script>

 </head>

  

  <body>

  <textarea id="t1" col="5" row="5" onkeyup="sum()"></textarea><br/>

  <span id="span1"></span>

  </body>

Onkeypress

鼠标事件

Onmouseover 鼠标移入

Onmouseout  鼠标移除

Eg:

<body >

<div id="div1" style="width:300px; height:300px; background-color:red" οnmοuseοver="changeColor()"  onmouseout = "changered()"></div>

  </body>

<script>

      function changeColor(){

     var color = document.getElementById("div1")

 color.style.backgroundColor="blue";

  

  }

  function changered(){

    var color = document.getElementById("div1")

 color.style.backgroundColor="red";

  }

   </script>

Onmousemove 鼠标移动

Eg:

<script>

     function Cor(e){

         var x,y;

 x=e.clientX;

 y=e.clientY;

 document.getElementById("span1").innerHTML="X:"+x+"Y:"+y;

 }

   </script>

  </head>

  <body >

  <div id ="div1" style="width:300px; height:300px; background-color:red" onmousemove="Cor(event)"></div>

  <span id="span1"></span>

  </body>

Onmouseup

Onclick 点击触发事件

表单事件

阻止表单提交

需要注意：onsubmit事件应该绑定在 form表单里，而不是submit按钮上

Css选择器

可以把css选择器比喻成用来找到某个元素的机器

例如#main ——找到id=main的这个元素

超过一百字符提示  代码如下：

<html>

<head>

<meta charset="utf-8" />

  <script>

  function sum(){

     var q = document.getElementById("t1")

     var val = q.value;

 var len = val.length;

 document.getElementById("span1").innerHTML="您已经输入"+len+"个字符";

 if(len>100)

 {

       

   alert("您输入的文字已经超过100个啦");

 }

 }

 </script>

 </head>

  

  <body>

  <textarea id="t1" col="5" row="5" οnkeyup="sum()"></textarea><br/>

  <span id="span1"></span>

  </body>

</html>

lmw773034423
关注
jQuery常见事件
奶香刘沙包的博客
12-29 2848
JQuery几种常用事件 1.事件ready(fn) 当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。通俗的来讲就是当页面加载完时就会执行此函数事件。可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。 $(document).ready(function(){ // 在这里写你的代码... }); 使用 $(document).ready() 的简写(最常用)，同时内部的 jQ
jQuery中的常用事件
weixin_52841956的博客
02-21 2641
这里介绍一些jQuery常用的事件 jQuery事件是对JavaScript事件的封装，常用事件如：鼠标事件，键盘事件，表单事件，绑定事件，复合事件等等 1.鼠标事件 方法如下 click() :单击事件、触发或将函数绑定到指定元素的click事件 mouseover(): 触发或将函数绑定到指定元素的mouseover事件 mouseout() ：触发或将函数绑定到指定元素的mouseout的事件 代码示例： $(function () { $("input").clic
jQuery的基础操作（二）
qq_45799465的博客
02-22 563
一、jQuery事件绑定语法 jQuery伪数组支持的语法形式 $().事件类型(事件处理函数) jQuery伪数组不支持的语法形式 $().on( 事件类型 , 事件处理函数 ) 代码展示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&.
onBlur事件与onfocus事件 （js）
gr_guhun的博客
10-08 1402
jQuery 参考手册 - 事件 一、jQuery的 onBlur方法 定义和用法 1、当元素失去焦点时发生 blur 事件。 2、blur() 函数触发 blur 事件，或者如果设置了 function 参数，该函数也可规定当发生 blur 事件时执行的代码。 提示：早前，blur 事件仅发生于表单元素上。在新浏览器中，该事件可用于任何元素。 触发 blur 事件 触发被选元素的 blur 事件...
onBlur事件与onfocus事件（jquery）
aishangjianguo的专栏
01-16 6145
onblur 事件会在对象失去焦点时发生,主要用于检查from表单中的必要数据是否为空。 function checkValue(value){      if(value==""){       alert("不能为空！");     }  }  如果直接传递这个对象的value值的话，focus实践没有对象，所以可以这么实现 function checkValue(obj
jQuery事件
weixin_64037609的博客
09-20 1273
jQuery事件
jQuery事件对象
原地起飞
12-14 1304
一、jQuery 事件对象 jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生。 语法： 演示代码 ： <body> <div></div> <script> $(function() { $(document).on("click", function() { consol...
jQuery中事件冒泡，默认行为，事件命名空间
热门推荐
CSDNzhaojiale的博客
06-18 1万+
事件 绑定事件 在jQuery中绑定事件有两种方式，一种是直接“点事件名”的方式，另一种是通过on函数 “点事件名”方式绑定: $("button").click(function () { console.log("hello 1"); }); “on函数绑定” $("button").on("click", function () { console.log("hello 2"); }); 既然有两种绑定方式，自然存在差异 对于差异性从两个方面分
JQuery中事件是否发生的判断
HuangQinJian
10-24 3178
$(document).ready(function () {     $("html").click(function (e) {         if (e.target == $("#id/.class")[0]) {             //函数体         }     }); }); target 属性规定哪个 DOM 元素触发了该事件。 $
jQuery事件处理
shao_xuan_的博客
12-18 1919
jQuery事件处理前言事件绑定Query事件处理函数的好处反绑定事件事件触发器trigger触发事件triggerHandler触发事件快捷事件 Event Helpershover：模仿鼠标悬停jQuery中事件对象JQuery中事件对象操作 前言 jQuery在JavaScript基本的事件处理机制的基础上，对其进行了增强和扩展。jQuery不但提供了十分优雅的事件处理语法，而且也对事件处理机制本身作了很大的增强。 如在页面加载事件中，JavaScript使用window.onload()方法，它在页
jQuery中事件与动画的总结分享
10-22
本文主要对jQuery中事件和动画的操作进行了总结和分享。 首先，介绍的是jQuery中关于DOM加载完成的事件处理。在传统的JavaScript编程中，window.onload事件只能定义一次，而jQuery提供的$(function(){})在文档的DOM...
浅谈jQuery中的事件
10-24
本文将深入探讨jQuery中的事件处理，包括事件的绑定、合成事件、事件冒泡以及阻止事件等核心概念。 ### 1. jQuery中的事件绑定 事件绑定是jQuery中最基础的操作之一，它允许我们将函数与DOM元素的特定事件关联起来...
Jquery注册事件实现方法
12-09
以上代码展示了jQuery中事件绑定的基本用法。`$("#elementId")`是jQuery的选择器，用于获取具有特定ID的元素。`click()`, `mouseover()`, 和 `mouseout()` 是事件绑定的方法，它们接收一个函数作为参数，这个函数...
jquery绑定事件中怎样调用函数？视频教程
09-05
jquery绑定事件中怎样调用函数？视频教程，介绍的是jquery绑定事件中怎样调用函数？
前端初始化资源包初始化前端
10-01
.....................
vmware ubuntu22.04安装教程.docx
最新发布
10-01
vmware ubuntu22.04安装教程
语音处理相关的代码------matlab实现_______________开箱即用_soundProcess.zip
10-01
语音处理相关的代码------matlab实现_______________开箱即用_soundProcess
numpy-2.1.1-cp313-cp313t-macosx-14-0-x86-64.whl
10-01
numpy
用于用户故事分类的数据集_UserStoriesDataSet-.zip
10-01
用于用户故事分类的数据集_UserStoriesDataSet-
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值